Merge branch 'dev' of github.com:uiwjs/react-native-uiw into rls

Author: rulishu

packages/core/src/ImageViewer/index.tsx

@@ -20,13 +20,12 @@ export interface ImageViewerProps extends ViewProps {
   height?: number;
   /** 图像源（远程URL或本地文件资源 */
   src?: string | ImageViewerDataSourceProps[];
-  /** 默认显示第几张图片 */
-  defaultIndex?: number;
 }
 
 function ImageViewer(props: ImageViewerProps) {
-  const { width = 150, height = 150, src = defaultImage, defaultIndex = 0, ...others } = props;
+  const { width = 150, height = 150, src = defaultImage, ...others } = props;
   const [visible, setVisible] = useState(false);
+  const [index, setIndex] = useState<number>(0);
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
   useMemo(() => {
@@ -43,11 +42,16 @@ function ImageViewer(props: ImageViewerProps) {
 
   const imgUrl = useMemo(() => {
     if (Array.isArray(src)) {
-      return src[defaultIndex].url;
+      return src[0].url;
     }
     return src;
   }, [src]);
 
+  const onImgClick = (index: number) => {
+    setIndex(index);
+    setVisible(true);
+  };
+
   return (
     <View style={{}}>
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
@@ -57,7 +61,7 @@ function ImageViewer(props: ImageViewerProps) {
               <TransitionImage
                 key={index}
                 style={{ width: width, height: height, flex: 1 }}
-                onPress={() => setVisible(true)}
+                onPress={() => onImgClick(index)}
                 source={{ uri: item.url }}
                 PlaceholderContent={<ActivityIndicator />}
                 transition={true}
@@ -79,7 +83,7 @@ function ImageViewer(props: ImageViewerProps) {
       <MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
         <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
           {Array.isArray(src) ? (
-            <Swiper dataSource={src} height={200} autoplay={false} />
+            <Swiper dataSource={src} height={200} autoplay={false} index={index} />
           ) : (
             <Image style={{ width: '100%', height: '100%', resizeMode: 'contain' }} source={{ uri: src }} />
           )}

packages/core/src/List/README.md

@@ -3,17 +3,16 @@ List 列表
 
 单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。
 
-![](https://user-images.githubusercontent.com/66067296/139397639-1bb004ac-fd66-495e-8991-6b6910f84e60.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
-![](https://user-images.githubusercontent.com/66067296/139397695-5de2fb65-4931-454b-baed-9115a80abebc.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 ### 基础示例
 
-<!--DemoStart--> 
-```jsx
+```jsx mdx:preview
+
 import { View, Text } from 'react-native';
 import { List } from '@uiw/react-native';
+import React from "react"
 
-export default function Demo() {
+function Demo() {
   return (
     <List>
       <List.Item style={{ height: 50 }}>"X战警新变种人"首曝海报特写诡异人脸</List.Item>
@@ -27,15 +26,18 @@ export default function Demo() {
     </List>
   );
 }
+
+export default Demo
+
 ```
-<!--End-->
 
-### 简单
+### 自定义渲染列表
+
+```jsx mdx:preview
 
-<!--DemoStart--> 
-```jsx
 import { View, Text } from 'react-native';
 import { List } from '@uiw/react-native';
+import React from "react"
 
 export default function Demo() {
   return (
@@ -49,7 +51,7 @@ export default function Demo() {
       ]}
       renderItem={({ item }) => {
         return (
-          <View>
+          <View style={{borderWidth: 1}}>
             <Text>{item.date}</Text>
             <Text>{item.time}</Text>
           </View>
@@ -59,51 +61,9 @@ export default function Demo() {
   )
 }
 ```
-<!--End-->
 
 
-### 基础示例
-
-<!--DemoStart--> 
-```jsx
-import { View, Text } from 'react-native';
-import { List, Icon } from '@uiw/react-native';
 
-export default function Demo() {
-  return (
-    <List
-      flat={true}
-      data={[
-        { date: '8月12日', title: '这里是标题', des: '这里是详情内容' },
-        { date: '8月10日', title: 'SO18081000004', des: '这里是详情内容' },
-        { date: '8月2日', title: 'SO18080200003', des: '这里是详情内容' },
-        { date: '8月1日', title: 'SO18080100002', des: '这里是详情内容' },
-        { date: '8月1日', title: 'SO18080100001', des: '这里是详情内容' }
-      ]}
-      renderItem={({ item, index }) => {
-        return (
-          <List.Item
-            key={index}
-            extra={<Icon name="right" fill="#abb0b5" size={14} />}
-            size="large"
-            paddingLeft={15}
-            style={{ borderBottomWidth: 0, }}
-            onPress={() => { }}
-          >
-            <View>
-              <Text>{item.title}</Text>
-              <View>
-                <Text>{item.des}</Text>
-              </View>
-            </View>
-          </List.Item>
-        )
-      }}
-    />
-  );
-}
-```
-<!--End-->
 
 ### Props
 
@@ -142,7 +102,7 @@ export default function Demo() {
 
 | 参数 | 说明 | 类型 | 默认值|
 |------|------|-----|------|
-| `size` | 单元格大小 | `small`, `default`, `large` | List`default`, List.Item '-' |
+| `size` | 单元格大小 | `small`, `default`, `large` | `default` | 
 | `extra` | 额外内容，展示右侧内容 | ReactNode | - |
 | `extraStyle` | 设置 `extra` 包裹样式 | ViewProps['style'] | TextProps['style'] | - |
 | `paddingLeft` | 左边补白 | Number | `16` |

packages/core/src/Modal/README.md

@@ -8,7 +8,7 @@ Modal 模态框
 
 ### 基础示例
 
-<!--DemoStart-->
+
 ```jsx  mdx:preview
 import React, { useState, Fragment } from 'react';
 import { View, Text, SafeAreaView } from 'react-native';
@@ -39,7 +39,6 @@ function ButtonGroupView() {
 }
 export default ButtonGroupView
 ```
-<!--End-->
 
 ### Props
 

packages/core/src/NoticeBar/README.md

@@ -72,7 +72,7 @@ export default NoticeBarExample;
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
-| mode    | 提示类型，可选 `closable`,`link`   | String |  ''  |
+| mode    | 提示类型，可选 `closable`,`link`   | String |  -  |
 | icon    | 在开始位置设置图标  |  ReactNode | `<Icon type={require('./trips.svg')} size="xxs" />`|
 | onPress | 点击关闭或者操作区域的回调函数        | () => void |   |
 | marqueeProps | marquee 参数 | Object | `{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}`  |

packages/core/src/Progress/README.md

@@ -3,12 +3,12 @@ Progress 进度条
 
 表明某个任务的当前进度。
 
-![](https://user-images.githubusercontent.com/66067296/140003519-03faded1-e004-45eb-b9af-442d84d6f258.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 ### 基础示例
 
-<!--DemoStart--> 
-```jsx
+<!--DemoStart-->
+```jsx mdx:preview
+import React from 'react';
 import {  SafeAreaView } from 'react-native';
 import { Progress } from '@uiw/react-native';
 import { motorcycle } from './svg';
@@ -20,29 +20,29 @@ function Demo() {
     </SafeAreaView>
   )
 }
+export default Demo
 ```
 
-### 展示进度图标 & 进度提示字
+### 自定义颜色
 
-<!--DemoStart--> 
-```jsx
+<!--DemoStart-->
+```jsx mdx:preview
+import React from 'react';
 import {  SafeAreaView } from 'react-native';
 import { Progress } from '@uiw/react-native';
-import { motorcycle } from './svg';
 
 function Demo() {
   return (
     <SafeAreaView style={{ flex: 1 }}>
      <Progress
           progressColor="#5847FF"
-           xml={motorcycle}
           progressShow={false}
-          iconShow={true}
           progress={30}
         />
     </SafeAreaView>
   )
 }
+export default Demo
 ```
 <!--End-->
 

packages/core/src/QuickList/README.md

@@ -88,7 +88,7 @@ export default QuickListDemo
 | onFetch | 请求的接口函数） | `(params: any) => void` | - |
 | data | 数据 | `Array<any>` | [] |
 | renderItem | 从data列表中获取一个项目并将其渲染到列表中 | `ListRenderItem<any>` | - |
-| keyId | 唯一健 | `string | number` | - |
+| keyId | 唯一健 | `string` \| `number` | - |
 | emptyView | 当列表为空时呈现 | `() => React.ReactNode` | - |
 | pageSize | 每次加载数据条数 | `number` | - |
 | total | 总条数 | `number`  | - |

packages/core/src/Steps/README.md

@@ -3,11 +3,11 @@ Steps 步骤条
 
 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
 
-![](https://user-images.githubusercontent.com/57083007/146733593-0e6583f2-4caa-4e37-9f5d-6e6c9a821d4e.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 ### 基础示例
 
-```jsx
+```jsx mdx:preview
+import React from 'react';
 import { Steps } from '@uiw/react-native';
 
 function Demo() {
@@ -22,6 +22,7 @@ function Demo() {
     />
   );
 }
+export default Demo;
 ```
 
 ### props

packages/core/src/Swiper/index.tsx

@@ -31,6 +31,8 @@ export interface SwiperProps {
   autoplay?: boolean;
   // 指示点样式 dot: 圆点  block: 方块
   dotStyle?: dotType;
+  // 初始位置
+  index?: number;
   loading?: boolean;
 }
 const Swiper = (porps: SwiperProps) => {
@@ -44,11 +46,21 @@ const Swiper = (porps: SwiperProps) => {
     borderRadius = 0,
     dotStyle = 'dot',
     loading = false,
+    index = 0,
   } = porps;
-  let [curIndex, setCurIndex] = useState(0);
+  let [curIndex, setCurIndex] = useState(index);
   let timer = useRef<NodeJS.Timeout | undefined>();
   const scrollToRef: any = useRef();
 
+  useEffect(() => {
+    if (scrollToRef && scrollToRef.current && index !== 0) {
+      setTimeout(() => {
+        onClickDot(index);
+        scrollToRef.current.scrollTo({ x: width * index, y: 0, animated: true });
+      }, 0);
+    }
+  }, [scrollToRef, index]);
+
   // 自动播放
   const autoPlay = useCallback(() => {
     clearInterval(timer.current as unknown as number);

packages/core/src/Timeline/README.md

@@ -7,10 +7,7 @@ Timeline 时间轴
 
 ```jsx  mdx:preview
 import React from 'react'
-import Timeline from '@uiw/react-native/lib/Timeline';
-import WingBlank from '@uiw/react-native/lib/WingBlank';
-import Icon from '@uiw/react-native/lib/Icon';
-import Card from '@uiw/react-native/lib/Card';
+import { Card, Icon, WingBlank, Timeline  } from '@uiw/react-native';
 
 function Demo() {
  const item = [
@@ -57,10 +54,7 @@ export default Demo
 
 ```jsx  mdx:preview
 import React from 'react'
-import Timeline from '@uiw/react-native/lib/Timeline';
-import WingBlank from '@uiw/react-native/lib/WingBlank';
-import Card from '@uiw/react-native/lib/Card';
-import Icon from '@uiw/react-native/lib/Icon';
+import { Card, Icon, WingBlank, Timeline  } from '@uiw/react-native';
 
 function Demo() {
    const item = [
@@ -108,10 +102,8 @@ export default Demo
 
 ```jsx  mdx:preview
 import React from 'react'
-import Timeline from '@uiw/react-native/lib/Timeline';
-import WingBlank from '@uiw/react-native/lib/WingBlank';
-import Card from '@uiw/react-native/lib/Card';
-import Icon from '@uiw/react-native/lib/Icon';
+import { Card, Icon, WingBlank, Timeline  } from '@uiw/react-native';
+
 
 function Demo() {
    const item = [
@@ -157,7 +149,7 @@ export default Demo
 
 ### Props
 
-<!-- ```ts
+```ts
 export interface TimelineItemsProps {
   /** 标题 */
   title: string;
@@ -181,4 +173,4 @@ export interface TimelineProps extends ViewProps {
   /** 改变时间轴和内容的相对位置 */
   mode?: 'left' | 'alternate';
 }
-``` -->
+```

test-ci/src/__tests__/progress.tsx

@@ -0,0 +1,33 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import Progress from '../lib/Progress';
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+import { run } from '../lib/Progress/svg';
+
+it('Progress', () => {
+  const component = renderer.create(
+    <Progress
+      progress={30}
+      position="fixed"
+      progressColor="#108ee9"
+      animation={{ duration: 1000 }}
+      xml={run}
+      iconShow={true}
+      size={25}
+      progressShow={true}
+    />,
+  );
+  expect(component.root.props.progress).toBe(30);
+  expect(component.root.props.position).toBe('fixed');
+  expect(component.root.props.progressColor).toBe('#108ee9');
+  expect(component.root.props.animation.duration).toBe(1000);
+  expect(component.root.props.iconShow).toBeTruthy();
+  expect(component.root.props.xml).toStrictEqual(run);
+  expect(component.root.props.size).toBe(25);
+  expect(component.root.props.progressShow).toBeTruthy();
+});