feat(Timeline):增加自定义图标 & 文档更新 (#328)

Amber-Nan · 杨楠 · web-flow · commit e4716fde5ccd · 2021-11-06T16:55:41.000+08:00
* fix(Divider):优化 gutter属性不生效问题

* feat(Divider): 增加分割线标题的位置调整功能 &amp; 更新文档

* feat(Rating):增加自定义每项的提示信息 &amp; 更新文档

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

* feat(Timeline): 增加改变时间轴内容相对位置功能 &amp; 文档更新

* style(Timeline):Update Readme.md img

* feat(Timeline):增加自定义图标 &amp; 文档更新

Co-authored-by: 杨楠 &lt;yangnan@nihaosi.com&gt;
diff --git a/example/examples/src/routes/Timeline/index.tsx b/example/examples/src/routes/Timeline/index.tsx
@@ -2,7 +2,7 @@ import React, {Component, useState} from 'react';
 import {View, Text} from 'react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
-import {Timeline, WingBlank} from '@uiw/react-native';
+import {Timeline, WingBlank, Icon} from '@uiw/react-native';
 
 const {Header, Body, Card} = Layout;
 
@@ -19,12 +19,15 @@ export default (props: StepsViewProps) => {
     },
     {
       title: '组件化',
-      color: 'yellow',
       desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
+      icon: {
+        name: 'warning',
+        size: 20,
+        color: 'blue',
+      },
     },
     {
       title: '一次学习，随处编写',
-      color: 'red',
       desc: [
         '无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
         'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。',
@@ -36,22 +39,25 @@ export default (props: StepsViewProps) => {
       title: '声明式声明式',
       tips: '2021-08-07 12:00:00',
       desc: 'React 使创建交互式',
+      icon: {
+        color: 'red',
+      },
     },
     {
       title: '组件化',
-      color: 'yellow',
       tips: '2021-08-08 12:00:00',
       desc: '构建管理自身状态。',
+      icon: {
+        color: 'green',
+      },
     },
     {
       title: '随处编写',
-      color: 'red',
       tips: '2021-08-09 12:00:00',
       desc: '服务器渲染。',
     },
     {
       title: '一次学习，随处编写',
-      color: 'blue',
       tips: '2021-08-10 12:00:00',
       desc: '开发新功能。',
     },
@@ -64,12 +70,17 @@ export default (props: StepsViewProps) => {
         description={route.params.description}
       />
       <Body>
-        <Card title="基础用法">
+        <Card title={`基础用法 & 自定义图标`}>
+          <WingBlank>
+            <Timeline style={{backgroundColor: '#fff'}} items={item} />
+          </WingBlank>
+        </Card>
+        <Card title="展示在左边">
           <WingBlank>
             <Timeline
               style={{backgroundColor: '#fff'}}
-              isReverse
               items={item}
+              mode="left"
             />
           </WingBlank>
         </Card>
@@ -82,15 +93,6 @@ export default (props: StepsViewProps) => {
             />
           </WingBlank>
         </Card>
-        <Card title="展示在左边">
-          <WingBlank>
-            <Timeline
-              style={{backgroundColor: '#fff'}}
-              items={item}
-              mode="left"
-            />
-          </WingBlank>
-        </Card>
       </Body>
     </Container>
   );
diff --git a/packages/core/src/Timeline/README.md b/packages/core/src/Timeline/README.md
@@ -3,43 +3,43 @@ Timeline 时间轴
 
 垂直展示一系列的时间流信息。
 
-### 基础示例
+### 基础示例 & 自定义图标
 
 ```jsx
 import { Timeline } from '@uiw/react-native';
 
 function Demo() {
-   const item1 = [
+ const item = [
     {
-      title: '声明式声明式',
+      title: '声明式声明式声明式声',
       tips: '2021-08-07 12:00:00',
-      desc: 'React 使创建交互式',
+      desc: 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。',
+        icon: {
+        color: 'red'
+      },
     },
     {
       title: '组件化',
-      color: 'yellow',
-      tips: '2021-08-08 12:00:00',
-      desc: '构建管理自身状态。',
-    },
-    {
-      title: '随处编写',
-      color: 'red',
-      tips: '2021-08-09 12:00:00',
-      desc: '服务器渲染。',
+      desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
+      icon: {
+        name: "warning",
+        size: 20,
+        color: 'blue'
+      },
     },
     {
       title: '一次学习，随处编写',
-      color: 'blue',
-      tips: '2021-08-10 12:00:00',
-      desc: '开发新功能。',
+      desc: [
+        '无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
+        'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。',
+      ],
     },
   ];
   return (
-  <Card title="基础用法">
+     <Card title={`基础用法 & 自定义图标`}>
     <WingBlank>
       <Timeline
        style={{ backgroundColor: '#fff' }}
-       isReverse
        items={item}
        />
     </WingBlank>
@@ -96,10 +96,10 @@ export interface TimelineItemsProps {
   title: string;
   /** 子标题 */
   tips?: string;
-  /** 标示颜色 */
-  color?: string;
   /** 子项内容 */
   desc?: string | string[]; 
+    /** 自定义图标 */
+  icon?: IconsProps;
 }
 
 export interface TimelineProps extends ViewProps {
diff --git a/packages/core/src/Timeline/index.tsx b/packages/core/src/Timeline/index.tsx
@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, ViewProps } from 'react-native';
+import { TabsItemIconTypes } from '../Tabs/TabsItem';
+import Icon, { IconsProps } from '../Icon';
 
 export interface TimelineItemsProps {
   /** 标题 */
   title: string;
   /** 子标题 */
   tips?: string;
-  /** 标示颜色 */
-  color?: string;
   /** 子项内容 */
   desc?: string | string[];
+  /** 自定义图标 */
+  icon?: IconsProps;
 }
 
 export interface TimelineProps extends ViewProps {
@@ -39,6 +41,20 @@ const Desc = (desc?: string | string[]) => {
   }
 };
 
+const IconCustom = (icon?: IconsProps) => {
+  if (icon) {
+    return (
+      <Icon
+        name={icon?.name ? icon.name : 'circle-o'}
+        size={icon?.size ? icon.size : 15}
+        color={icon?.color ? icon.color : '#e4e7ed'}
+      />
+    );
+  } else {
+    return <Icon name="circle-o" size={15} color="#e4e7ed" />;
+  }
+};
+
 export default (props: TimelineProps) => {
   const { items = [], isReverse, style, mode } = props;
 
@@ -54,11 +70,11 @@ export default (props: TimelineProps) => {
     }
     if (mode) {
       if (mode === 'left') {
-        setModeType('98%');
+        setModeType('90%');
       } else if (mode === 'alternate') {
         setModeType('45%');
       } else {
-        setModeType('98%');
+        setModeType('90%');
       }
     }
   }, [isReverse, items]);
@@ -70,7 +86,7 @@ export default (props: TimelineProps) => {
           <View style={[styles.item]} key={index}>
             <View style={{ width: modeType, flexDirection: 'column' }}>
               {mode && mode === 'alternate' && index % 2 !== 0 && (
-                <View style={{ alignItems: 'flex-end', flexDirection: 'column' }}>
+                <View style={{ alignItems: 'flex-end', flexDirection: 'column', marginRight: 10 }}>
                   <View style={styles.top}>
                     <Text style={styles.title}>{item.title}</Text>
                   </View>
@@ -79,7 +95,7 @@ export default (props: TimelineProps) => {
                 </View>
               )}
               {mode && mode === 'left' && (
-                <View style={{ paddingRight: 10, width: modeType, alignItems: 'flex-end' }}>
+                <View style={{ width: '98%', alignItems: 'flex-end' }}>
                   <View style={styles.top}>
                     <Text style={styles.title}>{item.title}</Text>
                   </View>
@@ -89,27 +105,22 @@ export default (props: TimelineProps) => {
               )}
             </View>
 
-            <View style={{ flexDirection: 'column', backgroundColor: 'green' }}>
+            <View style={{ width: mode && mode === 'left' ? '10%' : 0, flexDirection: 'column', alignItems: 'center' }}>
               {index < items.length - 1 && <View style={styles.line}></View>}
-              <View
-                style={[
-                  styles.circular,
-                  {
-                    backgroundColor: item.color || '#e4e7ed',
-                  },
-                ]}
-              />
+              {IconCustom(item.icon)}
             </View>
 
-            {!mode && (
-              <View style={{ paddingLeft: 20, alignItems: 'flex-start', flex: 1 }}>
-                <View style={styles.top}>
-                  <Text style={styles.title}>{item.title}</Text>
+            <View style={{ width: mode && mode === 'alternate' ? 0 : '90%', flexDirection: 'column' }}>
+              {!mode && (
+                <View style={{ paddingLeft: 10, 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>
-                {item.tips && <Text style={styles.tips}>{item.tips}</Text>}
-                {item.desc && Desc(item.desc)}
-              </View>
-            )}
+              )}
+            </View>
 
             <View style={{ width: modeType, flexDirection: 'column' }}>
               {mode && mode === 'alternate' && index % 2 === 0 && (
@@ -142,17 +153,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
-  circular: {
-    position: 'absolute',
-    left: -6,
-    top: 3,
-    width: 14,
-    height: 14,
-    borderRadius: 16,
-  },
   line: {
     position: 'absolute',
-    left: 0,
     top: 17,
     bottom: -3,
     width: 1,
