Skip to content

Commit 8e37cd8

Browse files
tangjinzhoutangjinzhou
committed
fix: timeline style error and add reverse mode 
1 parent 69a9649 commit 8e37cd8

File tree

9 files changed

+209
-35
lines changed

9 files changed

+209
-35
lines changed

‎.eslintrc‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"comma-dangle": [2, "always-multiline"],
1313
"no-var": "error",
1414
"no-unused-vars": "warn",
15-
"camelcase": "off"
15+
"camelcase": "off",
16+
"no-extra-boolean-cast": "off"
1617
}
17-
}
18+
}

‎components/timeline/Timeline.jsx‎

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,38 @@ export const TimelineProps = {
1010
/** 指定最后一个幽灵节点是否存在或内容 */
1111
pending: PropTypes.any,
1212
pendingDot: PropTypes.string,
13+
reverse: PropTypes.bool,
14+
mode: PropTypes.oneOf(['left', 'alternate', 'right']),
1315
}
1416

1517
export default {
1618
name: 'ATimeline',
1719
props: initDefaultProps(TimelineProps, {
1820
prefixCls: 'ant-timeline',
21+
reverse: false,
22+
mode: '',
1923
}),
2024
render () {
21-
const { prefixCls, ...restProps } = getOptionProps(this)
25+
const { prefixCls, reverse, mode, ...restProps } = getOptionProps(this)
2226
const pendingDot = getComponentFromProp(this, 'pendingDot')
2327
const pending = getComponentFromProp(this, 'pending')
2428
const pendingNode = typeof pending === 'boolean' ? null : pending
2529
const classString = classNames(prefixCls, {
2630
[`${prefixCls}-pending`]: !!pending,
31+
[`${prefixCls}-reverse`]: !!reverse,
32+
[`${prefixCls}-${mode}`]: !!mode,
2733
})
28-
// Remove falsy items
29-
const falsylessItems = filterEmpty(this.$slots.default)
30-
const items = falsylessItems.map((item, idx) => {
31-
return cloneElement(item, {
32-
props: {
33-
last: falsylessItems.length - 1 === idx,
34-
},
35-
})
36-
})
37-
const pendingItem = (pending) ? (
34+
const children = filterEmpty(this.$slots.default)
35+
// // Remove falsy items
36+
// const falsylessItems = filterEmpty(this.$slots.default)
37+
// const items = falsylessItems.map((item, idx) => {
38+
// return cloneElement(item, {
39+
// props: {
40+
// last: falsylessItems.length - 1 === idx,
41+
// },
42+
// })
43+
// })
44+
const pendingItem = !!pending ? (
3845
<TimelineItem
3946
pending={!!pending}
4047
>
@@ -44,6 +51,28 @@ export default {
4451
{pendingNode}
4552
</TimelineItem>
4653
) : null
54+
55+
const timeLineItems = !!reverse
56+
? [pendingItem, ...children.reverse()]
57+
: [...children, pendingItem]
58+
59+
// Remove falsy items
60+
const truthyItems = timeLineItems.filter(item => !!item)
61+
const itemsCount = truthyItems.length
62+
const lastCls = `${prefixCls}-item-last`
63+
const items = truthyItems.map((ele, idx) =>
64+
cloneElement(ele, {
65+
class: classNames([
66+
(!reverse && !!pending)
67+
? (idx === itemsCount - 2) ? lastCls : ''
68+
: (idx === itemsCount - 1) ? lastCls : '',
69+
(mode === 'alternate')
70+
? (idx % 2 === 0) ? `${prefixCls}-item-left` : `${prefixCls}-item-right`
71+
: (mode === 'right') ? `${prefixCls}-item-right` : '',
72+
]),
73+
}),
74+
)
75+
4776
const timelineProps = {
4877
props: {
4978
...restProps,
@@ -54,7 +83,6 @@ export default {
5483
return (
5584
<ul {...timelineProps}>
5685
{items}
57-
{pendingItem}
5886
</ul>
5987
)
6088
},

‎components/timeline/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 80 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,44 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = `
4+
<ul class="ant-timeline ant-timeline-alternate">
5+
<li class="ant-timeline-item ant-timeline-item-left">
6+
<div class="ant-timeline-item-tail"></div>
7+
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
8+
<div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
9+
</li>
10+
<li class="ant-timeline-item ant-timeline-item-right">
11+
<div class="ant-timeline-item-tail"></div>
12+
<div class="ant-timeline-item-head ant-timeline-item-head-green"></div>
13+
<div class="ant-timeline-item-content">Solve initial network problems 2015-09-01</div>
14+
</li>
15+
<li class="ant-timeline-item ant-timeline-item-left">
16+
<div class="ant-timeline-item-tail"></div>
17+
<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>
18+
<div class="ant-timeline-item-content">
19+
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.
20+
</div>
21+
</li>
22+
<li class="ant-timeline-item ant-timeline-item-right">
23+
<div class="ant-timeline-item-tail"></div>
24+
<div class="ant-timeline-item-head ant-timeline-item-head-red"></div>
25+
<div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
26+
</li>
27+
<li class="ant-timeline-item ant-timeline-item-left">
28+
<div class="ant-timeline-item-tail"></div>
29+
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
30+
<div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
31+
</li>
32+
<li class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right">
33+
<div class="ant-timeline-item-tail"></div>
34+
<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>
35+
<div class="ant-timeline-item-content">
36+
Technical testing 2015-09-01
37+
</div>
38+
</li>
39+
</ul>
40+
`;
41+
342
exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
443
<ul class="ant-timeline">
544
<li class="ant-timeline-item">
@@ -17,7 +56,7 @@ exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
1756
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
1857
<div class="ant-timeline-item-content">Technical testing 2015-09-01</div>
1958
</li>
20-
<li class="ant-timeline-item">
59+
<li class="ant-timeline-item ant-timeline-item-last">
2160
<div class="ant-timeline-item-tail"></div>
2261
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
2362
<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`] = `
4685
<p>Solve initial network problems 3 2015-09-01</p>
4786
</div>
4887
</li>
49-
<li class="ant-timeline-item">
88+
<li class="ant-timeline-item ant-timeline-item-last">
5089
<div class="ant-timeline-item-tail"></div>
5190
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
5291
<div class="ant-timeline-item-content">
@@ -77,7 +116,7 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
77116
Technical testing 2015-09-01
78117
</div>
79118
</li>
80-
<li class="ant-timeline-item">
119+
<li class="ant-timeline-item ant-timeline-item-last">
81120
<div class="ant-timeline-item-tail"></div>
82121
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
83122
<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`] = `
86125
`;
87126

88127
exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
89-
<ul class="ant-timeline ant-timeline-pending">
90-
<li class="ant-timeline-item">
128+
<div>
129+
<ul class="ant-timeline ant-timeline-pending">
130+
<li class="ant-timeline-item">
131+
<div class="ant-timeline-item-tail"></div>
132+
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
133+
<div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
134+
</li>
135+
<li class="ant-timeline-item">
136+
<div class="ant-timeline-item-tail"></div>
137+
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
138+
<div class="ant-timeline-item-content">Solve initial network problems 2015-09-01</div>
139+
</li>
140+
<li class="ant-timeline-item ant-timeline-item-last">
141+
<div class="ant-timeline-item-tail"></div>
142+
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
143+
<div class="ant-timeline-item-content">Technical testing 2015-09-01</div>
144+
</li>
145+
<li class="ant-timeline-item ant-timeline-item-pending">
146+
<div class="ant-timeline-item-tail"></div>
147+
<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>
148+
<div class="ant-timeline-item-content">Recording...</div>
149+
</li>
150+
</ul> <button type="button" class="ant-btn ant-btn-primary" style="margin-top: 16px;"><span>Toggle Reverse</span></button>
151+
</div>
152+
`;
153+
154+
exports[`renders ./components/timeline/demo/right.md correctly 1`] = `
155+
<ul class="ant-timeline ant-timeline-right">
156+
<li class="ant-timeline-item ant-timeline-item-right">
91157
<div class="ant-timeline-item-tail"></div>
92158
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
93159
<div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
94160
</li>
95-
<li class="ant-timeline-item">
161+
<li class="ant-timeline-item ant-timeline-item-right">
96162
<div class="ant-timeline-item-tail"></div>
97163
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
98164
<div class="ant-timeline-item-content">Solve initial network problems 2015-09-01</div>
99165
</li>
100-
<li class="ant-timeline-item">
166+
<li class="ant-timeline-item ant-timeline-item-right">
101167
<div class="ant-timeline-item-tail"></div>
102-
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
103-
<div class="ant-timeline-item-content">Technical testing 2015-09-01</div>
168+
<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>
169+
<div class="ant-timeline-item-content">
170+
Technical testing 2015-09-01
171+
</div>
104172
</li>
105-
<li class="ant-timeline-item ant-timeline-item-pending">
173+
<li class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right">
106174
<div class="ant-timeline-item-tail"></div>
107-
<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>
108-
<div class="ant-timeline-item-content">Recording...</div>
175+
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
176+
<div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
109177
</li>
110178
</ul>
111179
`;

‎components/timeline/demo/alternate.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<cn>
2+
#### 交替展现
3+
内容在时间轴两侧轮流出现。
4+
</cn>
5+
6+
<us>
7+
#### Alternate
8+
Alternate timeline.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-timeline mode="alternate">
14+
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
15+
<a-timeline-item color="green">Solve initial network problems 2015-09-01</a-timeline-item>
16+
<a-timeline-item>
17+
<a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
18+
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.
19+
</a-timeline-item>
20+
<a-timeline-item color="red">Network problems being solved 2015-09-01</a-timeline-item>
21+
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
22+
<a-timeline-item>
23+
<a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
24+
Technical testing 2015-09-01
25+
</a-timeline-item>
26+
</a-timeline>
27+
</template>
28+
```
29+
30+

‎components/timeline/demo/index.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Basic from './basic.md'
33
import Color from './color.md'
44
import Pending from './pending.md'
55
import Custom from './custom.md'
6+
import Alternate from './alternate'
7+
import Right from './right'
68
import CN from '../index.zh-CN.md'
79
import US from '../index.en-US.md'
810
@@ -32,15 +34,12 @@ export default {
3234
return (
3335
<div>
3436
<md cn={md.cn} us={md.us}/>
35-
<br/>
3637
<Basic />
37-
<br/>
3838
<Color />
39-
<br/>
4039
<Pending />
41-
<br/>
4240
<Custom />
43-
<br/>
41+
<Alternate />
42+
<Right />
4443
<api>
4544
<template slot='cn'>
4645
<CN/>

‎components/timeline/demo/pending.md‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
<cn>
2-
#### 最后一个
3-
当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点（用于时间正序排列）。当 pending 值为 false ，可用定制元件替换默认时间图点。
2+
#### 最后一个及排序
3+
当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。
44
</cn>
55

66
<us>
77
#### Last node
8-
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.
8+
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.
9+
`reverse={true}` is used for reversing nodes.
910
</us>
1011

1112
```html
1213
<template>
13-
<a-timeline pending="Recording...">
14+
<div>
15+
<a-timeline pending="Recording..." :reverse="reverse">
1416
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
1517
<a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
1618
<a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
1719
</a-timeline>
20+
<a-button type="primary" style="margin-top: 16px" @click="handleClick">Toggle Reverse</a-button>
21+
</div>
1822
</template>
23+
<script>
24+
export default {
25+
data() {
26+
return {
27+
reverse: false,
28+
}
29+
},
30+
methods: {
31+
handleClick(){
32+
this.reverse = !this.reverse
33+
}
34+
}
35+
}
36+
</script>
1937
```
2038

2139

‎components/timeline/demo/right.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<cn>
2+
#### 右侧时间轴点
3+
时间轴点可以在内容的右边。
4+
</cn>
5+
6+
<us>
7+
#### Right alternate
8+
Right alternate timeline.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-timeline mode="right">
14+
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
15+
<a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
16+
<a-timeline-item>
17+
<a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
18+
Technical testing 2015-09-01
19+
</a-timeline-item>
20+
<a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
21+
</a-timeline>
22+
</template>
23+
```
24+
25+

‎components/timeline/index.en-US.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ Timeline
1717
| -------- | ----------- | ---- | ------- |
1818
| pending | Set the last ghost node's existence or its content | boolean\|string\|slot | `false` |
1919
| pendingDot | Set the dot of the last ghost node when pending is true | string\|slot | `<Icon type="loading" />` |
20+
| reverse | reverse nodes or not | boolean | false |
21+
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left` |
22+
2023

2124
### Timeline.Item
2225

‎components/timeline/index.zh-CN.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
| --- | --- | --- | --- |
1818
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|slot | false |
1919
| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | string\|slot | `<Icon type="loading" />` |
20+
| reverse | 节点排序 | boolean | false |
21+
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` |
2022

2123
### Timeline.Item
2224

0 commit comments

Comments
 (0)