feat: update timeline

2020-02-26 20:58:34 +08:00 · 2020-02-26 20:58:34 +08:00 · 00a41f5ec5
parent ab8768b19b
commit 00a41f5ec5
9 changed files with 94 additions and 49 deletions
--- a/build/config.js
+++ b/build/config.js
@ -1,5 +1,5 @@
 module.exports = {
  dev: {
-    componentName: 'tooltip', // dev components
+    componentName: 'timeline', // dev components
  },
 };
--- a/components/timeline/Timeline.jsx
+++ b/components/timeline/Timeline.jsx
@ -2,6 +2,7 @@ import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import {
  getOptionProps,
+  getPropsData,
  initDefaultProps,
  filterEmpty,
  getComponentFromProp,
@ -25,6 +26,7 @@ export default {
  name: 'ATimeline',
  props: initDefaultProps(TimelineProps, {
    reverse: false,
+    mode: '',
  }),
  inject: {
    configProvider: { default: () => ConfigConsumerProps },
@ -52,41 +54,44 @@ export default {
    //     },
    //   })
    // })
-    const pendingItem = !!pending ? (
+    const pendingItem = pending ? (
      <TimelineItem pending={!!pending}>
        <template slot="dot">{pendingDot || <Icon type="loading" />}</template>
        {pendingNode}
      </TimelineItem>
    ) : null;

-    const timeLineItems = !!reverse
+    const timeLineItems = reverse
      ? [pendingItem, ...children.reverse()]
      : [...children, pendingItem];

+    const getPositionCls = (ele, idx) => {
+      const eleProps = getPropsData(ele);
+      if (mode === 'alternate') {
+        if (eleProps.position === 'right') return `${prefixCls}-item-right`;
+        if (eleProps.position === 'left') return `${prefixCls}-item-left`;
+        return idx % 2 === 0 ? `${prefixCls}-item-left` : `${prefixCls}-item-right`;
+      }
+      if (mode === 'left') return `${prefixCls}-item-left`;
+      if (mode === 'right') return `${prefixCls}-item-right`;
+      if (eleProps.position === 'right') return `${prefixCls}-item-right`;
+      return '';
+    };
+
    // Remove falsy items
    const truthyItems = timeLineItems.filter(item => !!item);
    const itemsCount = truthyItems.length;
    const lastCls = `${prefixCls}-item-last`;
-    const items = truthyItems.map((ele, idx) =>
-      cloneElement(ele, {
+    const items = truthyItems.map((ele, idx) => {
+      const pendingClass = idx === itemsCount - 2 ? lastCls : '';
+      const readyClass = idx === itemsCount - 1 ? lastCls : '';
+      return cloneElement(ele, {
        class: classNames([
-          !reverse && !!pending
-            ? idx === itemsCount - 2
-              ? lastCls
-              : ''
-            : idx === itemsCount - 1
-            ? lastCls
-            : '',
-          mode === 'alternate'
-            ? idx % 2 === 0
-              ? `${prefixCls}-item-left`
-              : `${prefixCls}-item-right`
-            : mode === 'right'
-            ? `${prefixCls}-item-right`
-            : '',
+          !reverse && !!pending ? pendingClass : readyClass,
+          getPositionCls(ele, idx),
        ]),
-      }),
-    );
+      });
+    });

    const timelineProps = {
      props: {
--- a/components/timeline/TimelineItem.jsx
+++ b/components/timeline/TimelineItem.jsx
@ -13,6 +13,7 @@ export const TimeLineItemProps = {
  color: PropTypes.string,
  dot: PropTypes.any,
  pending: PropTypes.bool,
+  position: PropTypes.oneOf(['left', 'right', '']).def(''),
 };

 export default {
@ -49,7 +50,7 @@ export default {
        <div class={`${prefixCls}-item-tail`} />
        <div
          class={dotClassName}
-          style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }}
+          style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
        >
          {dot}
        </div>
--- a/components/timeline/tests/snapshots/demo.test.js.snap
+++ b/components/timeline/tests/snapshots/demo.test.js.snap
@ -93,7 +93,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
      <p>Solve initial network problems 3 2015-09-01</p>
    </div>
  </li>
-  <li class="ant-timeline-item ant-timeline-item-last">
+  <li class="ant-timeline-item">
    <div class="ant-timeline-item-tail"></div>
    <div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
    <div class="ant-timeline-item-content">
@ -102,6 +102,24 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
      <p>Technical testing 3 2015-09-01</p>
    </div>
  </li>
+  <li class="ant-timeline-item">
+    <div class="ant-timeline-item-tail"></div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-gray"></div>
+    <div class="ant-timeline-item-content">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </div>
+  </li>
+  <li class="ant-timeline-item ant-timeline-item-last">
+    <div class="ant-timeline-item-tail"></div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-gray"></div>
+    <div class="ant-timeline-item-content">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </div>
+  </li>
 </ul>
 `;

--- a/components/timeline/tests/index.test.js
+++ b/components/timeline/tests/index.test.js
@ -0,0 +1,7 @@
+import TimeLine from '..';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Tag', () => {
+  mountTest(TimeLine);
+  mountTest(TimeLine.Item);
+});
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@ -23,6 +23,16 @@ Set the color of circles. `green` means completed or success status, `red` means
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </a-timeline-item>
+    <a-timeline-item color="gray">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </a-timeline-item>
+    <a-timeline-item color="gray">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </a-timeline-item>
  </a-timeline>
 </template>
 ```
--- a/components/timeline/demo/index.vue
+++ b/components/timeline/demo/index.vue
@ -34,12 +34,14 @@ export default {
    return (
      <div>
        <md cn={md.cn} us={md.us} />
-        <Basic />
-        <Color />
-        <Pending />
-        <Custom />
-        <Alternate />
-        <Right />
+        <demo-sort cols="2">
+          <Basic />
+          <Color />
+          <Pending />
+          <Custom />
+          <Alternate />
+          <Right />
+        </demo-sort>
        <api>
          <template slot="cn">
            <CN />
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@ -1,12 +1,12 @@
 ## API

 ```html
-<Timeline>
-  <Timeline.Item>step1 2015-09-01</Timeline.Item>
-  <Timeline.Item>step2 2015-09-01</Timeline.Item>
-  <Timeline.Item>step3 2015-09-01</Timeline.Item>
-  <Timeline.Item>step4 2015-09-01</Timeline.Item>
-</Timeline>
+<a-timeline>
+  <a-timeline-item>step1 2015-09-01</a-timeline-item>
+  <a-timeline-item>step2 2015-09-01</a-timeline-item>
+  <a-timeline-item>step3 2015-09-01</a-timeline-item>
+  <a-timeline-item>step4 2015-09-01</a-timeline-item>
+</a-timeline>
 ```

 ### Timeline
@ -24,7 +24,8 @@ Timeline

 Node of timeline

-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
-| dot | Customize timeline dot | string\|slot | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |  |
+| dot | Customize timeline dot | string\|slot | - |  |
+| position | Customize node position | `left` \| `right` | - | 1.5.0 |
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@ -1,12 +1,12 @@
 ## API

 ```html
-<Timeline>
-  <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
-  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
-  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
-  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
-</Timeline>
+<a-timeline>
+  <a-timeline-item>创建服务现场 2015-09-01</a-timeline-item>
+  <a-timeline-item>初步排除网络异常 2015-09-01</a-timeline-item>
+  <a-timeline-item>技术测试异常 2015-09-01</a-timeline-item>
+  <a-timeline-item>网络异常正在修复 2015-09-01</a-timeline-item>
+</a-timeline>
 ```

 ### Timeline
@ -24,7 +24,8 @@

 时间轴的每一个节点。

-| 参数  | 说明                                            | 类型         | 默认值 |
-| ----- | ----------------------------------------------- | ------------ | ------ |
-| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string       | blue   |
-| dot   | 自定义时间轴点                                  | string\|slot | -      |
+| 参数     | 说明                                            | 类型              | 默认值 | 版本  |
+| -------- | ----------------------------------------------- | ----------------- | ------ | ----- |
+| color    | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string            | blue   |       |
+| dot      | 自定义时间轴点                                  | string\|slot      | -      |       |
+| position | 自定义节点位置                                  | `left` \| `right` | -      | 1.5.0 |