feat(Rating):增加只读功能 & 文档更新

example/examples/src/routes/Timeline/index.tsx

@@ -13,7 +13,7 @@ export default (props: StepsViewProps) => {
 
   const item = [
     {
-      title: '声明式声明式声明式声明式声明式声明式声明式声明式声明式',
+      title: '声明式声明式声明式声',
       tips: '2021-08-07 12:00:00',
       desc: 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。',
     },
@@ -31,6 +31,31 @@ export default (props: StepsViewProps) => {
       ],
     },
   ];
+  const item1 = [
+    {
+      title: '声明式声明式',
+      tips: '2021-08-07 12:00:00',
+      desc: 'React 使创建交互式',
+    },
+    {
+      title: '组件化',
+      color: 'yellow',
+      tips: '2021-08-08 12:00:00',
+      desc: '构建管理自身状态。',
+    },
+    {
+      title: '随处编写',
+      color: 'red',
+      tips: '2021-08-09 12:00:00',
+      desc: '服务器渲染。',
+    },
+    {
+      title: '一次学习，随处编写',
+      color: 'blue',
+      tips: '2021-08-10 12:00:00',
+      desc: '开发新功能。',
+    },
+  ];
 
   return (
     <Container>
@@ -48,6 +73,24 @@ export default (props: StepsViewProps) => {
             />
           </WingBlank>
         </Card>
+        <Card title="交替展现">
+          <WingBlank>
+            <Timeline
+              style={{backgroundColor: '#fff'}}
+              items={item1}
+              mode="alternate"
+            />
+          </WingBlank>
+        </Card>
+        <Card title="展示在左边">
+          <WingBlank>
+            <Timeline
+              style={{backgroundColor: '#fff'}}
+              items={item}
+              mode="left"
+            />
+          </WingBlank>
+        </Card>
       </Body>
     </Container>
   );

packages/core/src/Timeline/README.md

@@ -9,31 +9,81 @@ Timeline 时间轴
 import { Timeline } from '@uiw/react-native';
 
 function Demo() {
+   const item1 = [
+    {
+      title: '声明式声明式',
+      tips: '2021-08-07 12:00:00',
+      desc: 'React 使创建交互式',
+    },
+    {
+      title: '组件化',
+      color: 'yellow',
+      tips: '2021-08-08 12:00:00',
+      desc: '构建管理自身状态。',
+    },
+    {
+      title: '随处编写',
+      color: 'red',
+      tips: '2021-08-09 12:00:00',
+      desc: '服务器渲染。',
+    },
+    {
+      title: '一次学习，随处编写',
+      color: 'blue',
+      tips: '2021-08-10 12:00:00',
+      desc: '开发新功能。',
+    },
+  ];
   return (
-    <Timeline
-      style={{ backgroundColor: '#fff' }}
-      isReverse
-      items={[
-        { 
-          'title': '声明式声明式声明式声明式声明式声明式声明式声明式声明式', 
-          'tips': '2021-08-07 12:00:00',
-          'desc': 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。'
-        },
-        {
-          'title': '组件化',
-          'color': 'yellow',
-          'desc': '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。'
-        },
-        {
-          'title': '一次学习，随处编写', 
-          'color': 'red',
-          'desc': [
-            '无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
-            'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。'
-          ]
-        }
-      ]}
-    />
+  <Card title="基础用法">
+    <WingBlank>
+      <Timeline
+       style={{ backgroundColor: '#fff' }}
+       isReverse
+       items={item}
+       />
+    </WingBlank>
+  </Card>
+  );
+}
+```
+
+### 交替展现
+
+```jsx
+import { Timeline } from '@uiw/react-native';
+
+function Demo() {
+  return (
+    <Card title="交替展现">
+      <WingBlank>
+        <Timeline
+         style={{ backgroundColor: '#fff' }}
+         items={item1}
+         mode="alternate"
+         />
+      </WingBlank>
+    </Card>
+  );
+}
+```
+
+### 展示在左边
+
+```jsx
+import { Timeline } from '@uiw/react-native';
+
+function Demo() {
+  return (
+   <Card title="展示在左边">
+    <WingBlank>
+      <Timeline
+       style={{ backgroundColor: '#fff' }}
+       items={item}
+       mode="left"
+       />
+      </WingBlank>
+   </Card>
   );
 }
 ```
@@ -57,5 +107,7 @@ export interface TimelineProps extends ViewProps {
   isReverse?: boolean;
   /** 步骤条数据列表 */
   items: TimelineItemsProps[];
+  /** 改变时间轴和内容的相对位置 */
+  mode?: 'left' | 'alternate';
 }
 ```

packages/core/src/Timeline/index.tsx

@@ -17,6 +17,8 @@ export interface TimelineProps extends ViewProps {
   isReverse?: boolean;
   /** 步骤条数据列表 */
   items: TimelineItemsProps[];
+  /** 改变时间轴和内容的相对位置 */
+  mode?: 'left' | 'alternate';
 }
 
 const Desc = (desc?: string | string[]) => {
@@ -38,9 +40,10 @@ const Desc = (desc?: string | string[]) => {
 };
 
 export default (props: TimelineProps) => {
-  const { items = [], isReverse, style } = props;
+  const { items = [], isReverse, style, mode } = props;
 
   const [lineItem, setLineItem] = useState<TimelineItemsProps[]>([]);
+  const [modeType, setModeType] = useState<string>('0%');
 
   useEffect(() => {
     if (isReverse && items.length > 0) {
@@ -49,28 +52,75 @@ export default (props: TimelineProps) => {
     } else {
       setLineItem(items);
     }
+    if (mode) {
+      if (mode === 'left') {
+        setModeType('98%');
+      } else if (mode === 'alternate') {
+        setModeType('45%');
+      } else {
+        setModeType('98%');
+      }
+    }
   }, [isReverse, items]);
 
   return (
     <View style={[styles.timeline, style]}>
       {lineItem.map((item, index) => {
         return (
           <View style={[styles.item]} key={index}>
-            {index < items.length - 1 && <View style={styles.line}></View>}
-            <View
-              style={[
-                styles.circular,
-                {
-                  backgroundColor: item.color || '#e4e7ed',
-                },
-              ]}
-            ></View>
-            <View style={styles.wrapper}>
-              <View style={styles.top}>
-                <Text style={styles.title}>{item.title}</Text>
+            <View style={{ width: modeType, flexDirection: 'column' }}>
+              {mode && mode === 'alternate' && index % 2 !== 0 && (
+                <View style={{ alignItems: 'flex-end', flexDirection: 'column' }}>
+                  <View style={styles.top}>
+                    <Text style={styles.title}>{item.title}</Text>
+                  </View>
+                  {item.tips && <Text style={styles.tips}>{item.tips}</Text>}
+                  {item.desc && Desc(item.desc)}
+                </View>
+              )}
+              {mode && mode === 'left' && (
+                <View style={{ paddingRight: 10, width: modeType, alignItems: 'flex-end' }}>
+                  <View style={styles.top}>
+                    <Text style={styles.title}>{item.title}</Text>
+                  </View>
+                  {item.tips && <Text style={styles.tips}>{item.tips}</Text>}
+                  {item.desc && Desc(item.desc)}
+                </View>
+              )}
+            </View>
+
+            <View style={{ flexDirection: 'column', backgroundColor: 'green' }}>
+              {index < items.length - 1 && <View style={styles.line}></View>}
+              <View
+                style={[
+                  styles.circular,
+                  {
+                    backgroundColor: item.color || '#e4e7ed',
+                  },
+                ]}
+              />
+            </View>
+
+            {!mode && (
+              <View style={{ paddingLeft: 20, alignItems: 'flex-start', flex: 1 }}>
+                <View style={styles.top}>
+                  <Text style={styles.title}>{item.title}</Text>
+                </View>
+                {item.tips && <Text style={styles.tips}>{item.tips}</Text>}
+                {item.desc && Desc(item.desc)}
               </View>
-              {item.tips && <Text style={styles.tips}>{item.tips}</Text>}
-              {item.desc && Desc(item.desc)}
+            )}
+
+            <View style={{ width: modeType, flexDirection: 'column' }}>
+              {mode && mode === 'alternate' && index % 2 === 0 && (
+                <View style={{ alignItems: 'flex-start' }}>
+                  <View style={styles.top}>
+                    <Text style={styles.title}>{item.title}</Text>
+                  </View>
+                  {item.tips && <Text style={styles.tips}>{item.tips}</Text>}
+                  {item.desc && Desc(item.desc)}
+                </View>
+              )}
             </View>
           </View>
         );
@@ -89,25 +139,27 @@ const styles = StyleSheet.create({
     position: 'relative',
     paddingBottom: 20,
     top: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   circular: {
     position: 'absolute',
-    left: 0,
+    left: -6,
     top: 3,
     width: 14,
     height: 14,
     borderRadius: 16,
   },
   line: {
     position: 'absolute',
-    left: 6,
+    left: 0,
     top: 17,
     bottom: -3,
     width: 1,
     backgroundColor: '#e4e7ed',
   },
   wrapper: {
-    paddingLeft: 30,
+    paddingLeft: 20,
   },
   top: {},
   tips: {

website/src/pages/components/timeLine/index.tsx

@@ -10,7 +10,7 @@ export default class Page extends Markdown {
     const index = result.indexOf('### 基础示例');
     const abc =
       result.substr(0, index) +
-      "\n<image src='./index.png' alt='Timeline' style='zoom:33%;' />\n\n" +
+      "\n<image src='./indexGif.gif' alt='Toast' style='zoom:33%;' />\n\n" +
       result.substr(index);
     return abc;
   };