fix: timeline style error and add reverse mode

vueComponent · Dec 5, 2018 · 8e37cd8 · 8e37cd8
1 parent 69a9649
commit 8e37cd8
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 35 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -12,6 +12,7 @@
         "comma-dangle": [2, "always-multiline"],
         "no-var": "error",
         "no-unused-vars": "warn",
-        "camelcase": "off"
+        "camelcase": "off",
+        "no-extra-boolean-cast": "off"
     }
-}
+}
diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.jsx
@@ -10,31 +10,38 @@ export const TimelineProps = {
   /** 指定最后一个幽灵节点是否存在或内容 */
   pending: PropTypes.any,
   pendingDot: PropTypes.string,
+  reverse: PropTypes.bool,
+  mode: PropTypes.oneOf(['left', 'alternate', 'right']),
 }
 
 export default {
   name: 'ATimeline',
   props: initDefaultProps(TimelineProps, {
     prefixCls: 'ant-timeline',
+    reverse: false,
+    mode: '',
   }),
   render () {
-    const { prefixCls, ...restProps } = getOptionProps(this)
+    const { prefixCls, reverse, mode, ...restProps } = getOptionProps(this)
     const pendingDot = getComponentFromProp(this, 'pendingDot')
     const pending = getComponentFromProp(this, 'pending')
     const pendingNode = typeof pending === 'boolean' ? null : pending
     const classString = classNames(prefixCls, {
       [`${prefixCls}-pending`]: !!pending,
+      [`${prefixCls}-reverse`]: !!reverse,
+      [`${prefixCls}-${mode}`]: !!mode,
     })
-    // Remove falsy items
-    const falsylessItems = filterEmpty(this.$slots.default)
-    const items = falsylessItems.map((item, idx) => {
-      return cloneElement(item, {
-        props: {
-          last: falsylessItems.length - 1 === idx,
-        },
-      })
-    })
-    const pendingItem = (pending) ? (
+    const children = filterEmpty(this.$slots.default)
+    // // Remove falsy items
+    // const falsylessItems = filterEmpty(this.$slots.default)
+    // const items = falsylessItems.map((item, idx) => {
+    //   return cloneElement(item, {
+    //     props: {
+    //       last: falsylessItems.length - 1 === idx,
+    //     },
+    //   })
+    // })
+    const pendingItem = !!pending ? (
       <TimelineItem
         pending={!!pending}
       >
@@ -44,6 +51,28 @@ export default {
         {pendingNode}
       </TimelineItem>
     ) : null
+
+    const timeLineItems = !!reverse
+      ? [pendingItem, ...children.reverse()]
+      : [...children, pendingItem]
+
+    // 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, {
+        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` : '',
+        ]),
+      }),
+    )
+
     const timelineProps = {
       props: {
         ...restProps,
@@ -54,7 +83,6 @@ export default {
     return (
       <ul {...timelineProps}>
         {items}
-        {pendingItem}
       </ul>
     )
   },

diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
@@ -1,5 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = `
+<ul class="ant-timeline ant-timeline-alternate">
+  <li class="ant-timeline-item ant-timeline-item-left">
+    <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">Create a services site 2015-09-01</div>
+  </li>
+  <li class="ant-timeline-item ant-timeline-item-right">
+    <div class="ant-timeline-item-tail"></div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-green"></div>
+    <div class="ant-timeline-item-content">Solve initial network problems 2015-09-01</div>
+  </li>
+  <li class="ant-timeline-item ant-timeline-item-left">
+    <div class="ant-timeline-item-tail"></div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"><i class="anticon anticon-clock-circle-o" style="font-size: 16px;"></i></div>
+    <div class="ant-timeline-item-content">
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </div>
+  </li>
+  <li class="ant-timeline-item ant-timeline-item-right">
+    <div class="ant-timeline-item-tail"></div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-red"></div>
+    <div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
+  </li>
+  <li class="ant-timeline-item ant-timeline-item-left">
+    <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">Create a services site 2015-09-01</div>
+  </li>
+  <li class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right">
+    <div class="ant-timeline-item-tail"></div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"><i class="anticon anticon-clock-circle-o" style="font-size: 16px;"></i></div>
+    <div class="ant-timeline-item-content">
+      Technical testing 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
+
 exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
 <ul class="ant-timeline">
   <li class="ant-timeline-item">
@@ -17,7 +56,7 @@ exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
     <div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
     <div class="ant-timeline-item-content">Technical testing 2015-09-01</div>
   </li>
-  <li class="ant-timeline-item">
+  <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-blue"></div>
     <div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
@@ -46,7 +85,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">
+  <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-blue"></div>
     <div class="ant-timeline-item-content">
@@ -77,7 +116,7 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
       Technical testing 2015-09-01
     </div>
   </li>
-  <li class="ant-timeline-item">
+  <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-blue"></div>
     <div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
@@ -86,26 +125,55 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
 `;
 
 exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
-<ul class="ant-timeline ant-timeline-pending">
-  <li class="ant-timeline-item">
+<div>
+  <ul class="ant-timeline ant-timeline-pending">
+    <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">Create a services site 2015-09-01</div>
+    </li>
+    <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">Solve initial network problems 2015-09-01</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-blue"></div>
+      <div class="ant-timeline-item-content">Technical testing 2015-09-01</div>
+    </li>
+    <li class="ant-timeline-item ant-timeline-item-pending">
+      <div class="ant-timeline-item-tail"></div>
+      <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"><i class="anticon anticon-loading anticon-spin"></i></div>
+      <div class="ant-timeline-item-content">Recording...</div>
+    </li>
+  </ul> <button type="button" class="ant-btn ant-btn-primary" style="margin-top: 16px;"><span>Toggle Reverse</span></button>
+</div>
+`;
+
+exports[`renders ./components/timeline/demo/right.md correctly 1`] = `
+<ul class="ant-timeline ant-timeline-right">
+  <li class="ant-timeline-item ant-timeline-item-right">
     <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">Create a services site 2015-09-01</div>
   </li>
-  <li class="ant-timeline-item">
+  <li class="ant-timeline-item ant-timeline-item-right">
     <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">Solve initial network problems 2015-09-01</div>
   </li>
-  <li class="ant-timeline-item">
+  <li class="ant-timeline-item ant-timeline-item-right">
     <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">Technical testing 2015-09-01</div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"><i class="anticon anticon-clock-circle-o" style="font-size: 16px;"></i></div>
+    <div class="ant-timeline-item-content">
+      Technical testing 2015-09-01
+    </div>
   </li>
-  <li class="ant-timeline-item ant-timeline-item-pending">
+  <li class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right">
     <div class="ant-timeline-item-tail"></div>
-    <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"><i class="anticon anticon-loading anticon-spin"></i></div>
-    <div class="ant-timeline-item-content">Recording...</div>
+    <div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
+    <div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
   </li>
 </ul>
 `;
diff --git a/components/timeline/demo/alternate.md b/components/timeline/demo/alternate.md
@@ -0,0 +1,30 @@
+<cn>
+#### 交替展现
+内容在时间轴两侧轮流出现。
+</cn>
+
+<us>
+#### Alternate
+Alternate timeline.
+</us>
+
+```html
+<template>
+  <a-timeline mode="alternate">
+    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item color="green">Solve initial network problems 2015-09-01</a-timeline-item>
+    <a-timeline-item>
+      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </a-timeline-item>
+    <a-timeline-item color="red">Network problems being solved 2015-09-01</a-timeline-item>
+    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item>
+      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
+      Technical testing 2015-09-01
+    </a-timeline-item>
+  </a-timeline>
+</template>
+```
+
+
diff --git a/components/timeline/demo/index.vue b/components/timeline/demo/index.vue
@@ -3,6 +3,8 @@ import Basic from './basic.md'
 import Color from './color.md'
 import Pending from './pending.md'
 import Custom from './custom.md'
+import Alternate from './alternate'
+import Right from './right'
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
 
@@ -32,15 +34,12 @@ export default {
     return (
       <div>
         <md cn={md.cn} us={md.us}/>
-        <br/>
         <Basic />
-        <br/>
         <Color />
-        <br/>
         <Pending />
-        <br/>
         <Custom />
-        <br/>
+        <Alternate />
+        <Right />
         <api>
           <template slot='cn'>
             <CN/>

diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md
@@ -1,21 +1,39 @@
 <cn>
-#### 最后一个
-当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点（用于时间正序排列）。当 pending 值为 false ，可用定制元件替换默认时间图点。
+#### 最后一个及排序
+当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。
 </cn>
 
 <us>
 #### Last node
-When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a VNode Element}` or `slot="pending"`. Used in ascend chronological order. When `pending` is not false, set `pendingDot={a VNode Element}` or `slot="pendingDot"` to replace the default pending dot.
+When the timeline is incomplete and ongoing, put a ghost node at last. Set `pending` as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, `slot="pendingDot"` is used to customize the dot of the pending item.
+`reverse={true}` is used for reversing nodes.
 </us>
 
 ```html
 <template>
-  <a-timeline pending="Recording...">
+<div>
+  <a-timeline pending="Recording..." :reverse="reverse">
     <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
     <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
     <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
   </a-timeline>
+  <a-button type="primary" style="margin-top: 16px" @click="handleClick">Toggle Reverse</a-button>
+</div>
 </template>
+<script>
+  export default {
+    data() {
+      return {
+        reverse: false,
+      }
+    },
+    methods: {
+      handleClick(){
+        this.reverse = !this.reverse
+      }
+    }
+  }
+</script>
 ```
 
 

diff --git a/components/timeline/demo/right.md b/components/timeline/demo/right.md
@@ -0,0 +1,25 @@
+<cn>
+#### 右侧时间轴点
+时间轴点可以在内容的右边。
+</cn>
+
+<us>
+#### Right alternate
+Right alternate timeline.
+</us>
+
+```html
+<template>
+  <a-timeline mode="right">
+    <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
+    <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
+    <a-timeline-item>
+      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
+      Technical testing 2015-09-01
+    </a-timeline-item>
+    <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
+  </a-timeline>
+</template>
+```
+
+
diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md
@@ -17,6 +17,9 @@ Timeline
 | -------- | ----------- | ---- | ------- |
 | pending | Set the last ghost node's existence or its content | boolean\|string\|slot | `false` |
 | pendingDot | Set the dot of the last ghost node when pending is true | string\|slot | `<Icon type="loading" />` |
+| reverse | reverse nodes or not | boolean | false |
+| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left` |
+
 
 ### Timeline.Item
 

diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
@@ -17,6 +17,8 @@
 | --- | --- | --- | --- |
 | pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|slot | false |
 | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | string\|slot | `<Icon type="loading" />` |
+| reverse | 节点排序 | boolean | false |
+| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置  | `left` \| `alternate` \| `right` |
 
 ### Timeline.Item