feat(Timeline):优化自定义图标 & 文档更新 (#329)

Amber-Nan · 杨楠 · web-flow · commit ed876deee491 · 2021-11-08T14:58:10.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; 文档更新

* 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
@@ -20,11 +20,6 @@ export default (props: StepsViewProps) => {
     {
       title: '组件化',
       desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
-      icon: {
-        name: 'warning',
-        size: 20,
-        color: 'blue',
-      },
     },
     {
       title: '一次学习，随处编写',
@@ -39,27 +34,27 @@ export default (props: StepsViewProps) => {
       title: '声明式声明式',
       tips: '2021-08-07 12:00:00',
       desc: 'React 使创建交互式',
-      icon: {
-        color: 'red',
-      },
+      icon: <Icon name="smile" fill="red" size={18} />,
     },
     {
       title: '组件化',
       tips: '2021-08-08 12:00:00',
       desc: '构建管理自身状态。',
-      icon: {
-        color: 'green',
-      },
+      size: 20,
+      color: 'blue',
+      icon: 'qq',
     },
     {
       title: '随处编写',
       tips: '2021-08-09 12:00:00',
       desc: '服务器渲染。',
+      color: 'green',
     },
     {
       title: '一次学习，随处编写',
       tips: '2021-08-10 12:00:00',
       desc: '开发新功能。',
+      size: 30,
     },
   ];
 
@@ -70,7 +65,7 @@ export default (props: StepsViewProps) => {
         description={route.params.description}
       />
       <Body>
-        <Card title={`基础用法 & 自定义图标`}>
+        <Card title="基础用法">
           <WingBlank>
             <Timeline style={{backgroundColor: '#fff'}} items={item} />
           </WingBlank>
@@ -84,7 +79,7 @@ export default (props: StepsViewProps) => {
             />
           </WingBlank>
         </Card>
-        <Card title="交替展现">
+        <Card title={`交替展现 & 自定义图标`}>
           <WingBlank>
             <Timeline
               style={{backgroundColor: '#fff'}}
diff --git a/packages/core/src/Timeline/README.md b/packages/core/src/Timeline/README.md
@@ -10,29 +10,29 @@ import { Timeline } from '@uiw/react-native';
 
 function Demo() {
  const item = [
-    {
-      title: '声明式声明式声明式声',
+     {
+      title: '声明式声明式',
       tips: '2021-08-07 12:00:00',
-      desc: 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。',
-        icon: {
-        color: 'red'
-      },
+      desc: 'React 使创建交互式',
+      icon: <Icon name="smile" fill="red" size={18} />
     },
     {
       title: '组件化',
-      desc: '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。',
-      icon: {
-        name: "warning",
-        size: 20,
-        color: 'blue'
-      },
+      tips: '2021-08-08 12:00:00',
+      desc: '构建管理自身状态。',
+      size: 20,
+      color: 'blue',
+      icon: 'qq'
+    },
+    {
+      title: '随处编写',
+      tips: '2021-08-09 12:00:00',
+      desc: '服务器渲染。',
     },
     {
       title: '一次学习，随处编写',
-      desc: [
-        '无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
-        'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。',
-      ],
+      tips: '2021-08-10 12:00:00',
+      desc: '开发新功能。',
     },
   ];
   return (
@@ -59,7 +59,7 @@ function Demo() {
       <WingBlank>
         <Timeline
          style={{ backgroundColor: '#fff' }}
-         items={item1}
+         items={item}
          mode="alternate"
          />
       </WingBlank>
@@ -98,8 +98,12 @@ export interface TimelineItemsProps {
   tips?: string;
   /** 子项内容 */
   desc?: string | string[]; 
-    /** 自定义图标 */
-  icon?: IconsProps;
+  /** 自定义图标 */
+  icon?: IconsName | React.ReactElement | React.ReactNode;
+  /** 自定义图标颜色 */
+  color?: string;
+  /** 自定义图标尺寸 */
+  size?: number;
 }
 
 export interface TimelineProps extends ViewProps {
diff --git a/packages/core/src/Timeline/index.tsx b/packages/core/src/Timeline/index.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, ViewProps } from 'react-native';
 import { TabsItemIconTypes } from '../Tabs/TabsItem';
-import Icon, { IconsProps } from '../Icon';
+import Icon, { IconsName } from '../Icon';
+import { number } from 'prop-types';
 
 export interface TimelineItemsProps {
   /** 标题 */
@@ -11,7 +12,11 @@ export interface TimelineItemsProps {
   /** 子项内容 */
   desc?: string | string[];
   /** 自定义图标 */
-  icon?: IconsProps;
+  icon?: IconsName | React.ReactElement | React.ReactNode;
+  /** 自定义图标颜色 */
+  color?: string;
+  /** 自定义图标尺寸 */
+  size?: number;
 }
 
 export interface TimelineProps extends ViewProps {
@@ -41,17 +46,19 @@ const Desc = (desc?: string | string[]) => {
   }
 };
 
-const IconCustom = (icon?: IconsProps) => {
+const IconCustom = (icon?: IconsName | React.ReactElement | React.ReactNode, size?: number, color?: string) => {
   if (icon) {
     return (
-      <Icon
-        name={icon?.name ? icon.name : 'circle-o'}
-        size={icon?.size ? icon.size : 15}
-        color={icon?.color ? icon.color : '#e4e7ed'}
-      />
+      <>
+        {typeof icon === 'string' ? (
+          <Icon name={icon as IconsName} size={size ? size : 15} color={color ? color : 'red'} />
+        ) : (
+          icon
+        )}
+      </>
     );
   } else {
-    return <Icon name="circle-o" size={15} color="#e4e7ed" />;
+    return <Icon name="circle-o" size={size ? size : 15} color={color ? color : '#e4e7ed'} />;
   }
 };
 
@@ -76,6 +83,8 @@ export default (props: TimelineProps) => {
       } else {
         setModeType('90%');
       }
+    } else {
+      setModeType('0%');
     }
   }, [isReverse, items]);
 
@@ -107,7 +116,7 @@ export default (props: TimelineProps) => {
 
             <View style={{ width: mode && mode === 'left' ? '10%' : 0, flexDirection: 'column', alignItems: 'center' }}>
               {index < items.length - 1 && <View style={styles.line}></View>}
-              {IconCustom(item.icon)}
+              {IconCustom(item.icon, item.size, item.color)}
             </View>
 
             <View style={{ width: mode && mode === 'alternate' ? 0 : '90%', flexDirection: 'column' }}>
diff --git a/website/src/pages/components/timeLine/indexGif.gif b/website/src/pages/components/timeLine/indexGif.gif
