feat(Timeline): The time props of the Timeline supports ReactNode (#365)

* feat(timeline): The time props of the Timeline supports ReactNode

* chore: change api doc

* test: Timeline add new test for time type with ReactNode

content/show/timeline/index-en-US.md

@@ -190,16 +190,16 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
 
 ### TimeLine.Item
 
-| Properties | Instruction                                              | type                                                | Default   |
-| ---------- | -------------------------------------------------------- | --------------------------------------------------- | --------- |
-| className  | Class name                                               | string                                              | -         |
-| color      | Color of dot                                             | string                                              | -         |
-| dot        | Custom dot                                               | React Node                                          | -         |
-| extra      | Custom extra content                                     | React Node                                          | -         |
+| Properties | Instruction                                              | type                                              | Default   |
+| ---------- | -------------------------------------------------------- | ------------------------------------------------- | --------- |
+| className  | Class name                                               | string                                            | -         |
+| color      | Color of dot                                             | string                                            | -         |
+| dot        | Custom dot                                               | ReactNode                                         | -         |
+| extra      | Custom extra content                                     | ReactNode                                         | -         |
 | position   | Custom node location to override TimeLine's mode setting | `left`\|`right`                                     | -         |
-| style      | Inline style                                             | CSSProperties                                              | -         |
-| time       | Time value                                               | string                                              | -         |
+| style      | Inline style                                             | CSSProperties                                           | -         |
+| time       | Time value                                               | ReactNode                                              | -         |
 | type       | Pattern of dot                                           | `default`\|`ongoing`\|`success`\|`warning`\|`error` | `default` |
 
 ## Design Tokens
-<DesignToken/>
+<DesignToken/>

content/show/timeline/index.md

@@ -240,7 +240,7 @@ import { IconAlertTriangle } from '@douyinfe/semi-icons';
 | extra | 自定义辅助内容 | ReactNode | - |
 | position | 自定义节点位置，可以覆盖 TimeLine 的模式选项 | `left`\|`right` | - |
 | style | 样式 | CSSProperties | - |
-| time | 时间文本 | string | - |
+| time | 时间文本 | ReactNode | - |
 | type | 当前圆圈的模式 | `default`\|`ongoing`\|`success`\|`warning`\|`error` | `default` |
 
 ## 设计变量

packages/semi-ui/timeline/__test__/timeline.test.js

@@ -234,4 +234,20 @@ describe('Timeline', () => {
         timelineRight.unmount();
     });
 
-});
+  it('Timeline with time type ReactNode',()=>{
+    const timeline=mount(<Timeline>
+      <Timeline.Item time={<span>2019-07-14 10:35</span>}>第一个节点内容</Timeline.Item>
+      <Timeline.Item time="2019-06-13 16:17">第二个节点内容</Timeline.Item>
+    </Timeline>, {
+      attachTo: document.getElementById('container'),
+    });
+    const firstItem = timeline.find(`.${BASE_CLASS_PREFIX}-timeline-item .${BASE_CLASS_PREFIX}-timeline-item-content .${BASE_CLASS_PREFIX}-timeline-item-content-time`).at(0);
+    expect(
+      firstItem
+        .getDOMNode()
+        .innerHTML
+    ).toEqual('<span>2019-07-14 10:35</span>');
+    timeline.unmount();
+  });
+
+});

packages/semi-ui/timeline/item.tsx

@@ -6,7 +6,7 @@ import '@douyinfe/semi-foundation/timeline/timeline.scss';
 
 export interface TimelineItemProps {
     color?: string;
-    time?: string;
+    time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;
     extra?: React.ReactNode;
@@ -20,7 +20,7 @@ const prefixCls = cssClasses.ITEM;
 export default class Item extends PureComponent<TimelineItemProps> {
     static propTypes = {
         color: PropTypes.string,
-        time: PropTypes.string,
+        time: PropTypes.node,
         type: PropTypes.oneOf(strings.ITEM_TYPE),
         dot: PropTypes.node,
         extra: PropTypes.node,
@@ -67,8 +67,8 @@ export default class Item extends PureComponent<TimelineItemProps> {
                 </div>
                 <div className={`${prefixCls}-content`}>
                     {children}
-                    {extra ? <div className={`${prefixCls}-content-extra`}>{extra}</div> : null}
-                    <div className={`${prefixCls}-content-time`}>{time}</div>
+                    {extra && <div className={`${prefixCls}-content-extra`}>{extra}</div>}
+                    {time && <div className={`${prefixCls}-content-time`}>{time}</div>}
                 </div>
             </li>
         );