Skip to content

Commit 00a41f5

Browse files
tangjinzhoutangjinzhou
committed
feat: update timeline
1 parent ab8768b commit 00a41f5

File tree

9 files changed

+94
-49
lines changed

9 files changed

+94
-49
lines changed

‎build/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'tooltip', // dev components
3+
componentName: 'timeline', // dev components
44
},
55
};

‎components/timeline/Timeline.jsx‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import classNames from 'classnames';
22
import PropTypes from '../_util/vue-types';
33
import {
44
getOptionProps,
5+
getPropsData,
56
initDefaultProps,
67
filterEmpty,
78
getComponentFromProp,
@@ -25,6 +26,7 @@ export default {
2526
name: 'ATimeline',
2627
props: initDefaultProps(TimelineProps, {
2728
reverse: false,
29+
mode: '',
2830
}),
2931
inject: {
3032
configProvider: { default: () => ConfigConsumerProps },
@@ -52,41 +54,44 @@ export default {
5254
// },
5355
// })
5456
// })
55-
const pendingItem = !!pending ? (
57+
const pendingItem = pending ? (
5658
<TimelineItem pending={!!pending}>
5759
<template slot="dot">{pendingDot || <Icon type="loading" />}</template>
5860
{pendingNode}
5961
</TimelineItem>
6062
) : null;
6163

62-
const timeLineItems = !!reverse
64+
const timeLineItems = reverse
6365
? [pendingItem, ...children.reverse()]
6466
: [...children, pendingItem];
6567

68+
const getPositionCls = (ele, idx) => {
69+
const eleProps = getPropsData(ele);
70+
if (mode === 'alternate') {
71+
if (eleProps.position === 'right') return `${prefixCls}-item-right`;
72+
if (eleProps.position === 'left') return `${prefixCls}-item-left`;
73+
return idx % 2 === 0 ? `${prefixCls}-item-left` : `${prefixCls}-item-right`;
74+
}
75+
if (mode === 'left') return `${prefixCls}-item-left`;
76+
if (mode === 'right') return `${prefixCls}-item-right`;
77+
if (eleProps.position === 'right') return `${prefixCls}-item-right`;
78+
return '';
79+
};
80+
6681
// Remove falsy items
6782
const truthyItems = timeLineItems.filter(item => !!item);
6883
const itemsCount = truthyItems.length;
6984
const lastCls = `${prefixCls}-item-last`;
70-
const items = truthyItems.map((ele, idx) =>
71-
cloneElement(ele, {
85+
const items = truthyItems.map((ele, idx) => {
86+
const pendingClass = idx === itemsCount - 2 ? lastCls : '';
87+
const readyClass = idx === itemsCount - 1 ? lastCls : '';
88+
return cloneElement(ele, {
7289
class: classNames([
73-
!reverse && !!pending
74-
? idx === itemsCount - 2
75-
? lastCls
76-
: ''
77-
: idx === itemsCount - 1
78-
? lastCls
79-
: '',
80-
mode === 'alternate'
81-
? idx % 2 === 0
82-
? `${prefixCls}-item-left`
83-
: `${prefixCls}-item-right`
84-
: mode === 'right'
85-
? `${prefixCls}-item-right`
86-
: '',
90+
!reverse && !!pending ? pendingClass : readyClass,
91+
getPositionCls(ele, idx),
8792
]),
88-
}),
89-
);
93+
});
94+
});
9095

9196
const timelineProps = {
9297
props: {

‎components/timeline/TimelineItem.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const TimeLineItemProps = {
1313
color: PropTypes.string,
1414
dot: PropTypes.any,
1515
pending: PropTypes.bool,
16+
position: PropTypes.oneOf(['left', 'right', '']).def(''),
1617
};
1718

1819
export default {
@@ -49,7 +50,7 @@ export default {
4950
<div class={`${prefixCls}-item-tail`} />
5051
<div
5152
class={dotClassName}
52-
style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }}
53+
style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
5354
>
5455
{dot}
5556
</div>

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
9393
<p>Solve initial network problems 3 2015-09-01</p>
9494
</div>
9595
</li>
96-
<li class="ant-timeline-item ant-timeline-item-last">
96+
<li class="ant-timeline-item">
9797
<div class="ant-timeline-item-tail"></div>
9898
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
9999
<div class="ant-timeline-item-content">
@@ -102,6 +102,24 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
102102
<p>Technical testing 3 2015-09-01</p>
103103
</div>
104104
</li>
105+
<li class="ant-timeline-item">
106+
<div class="ant-timeline-item-tail"></div>
107+
<div class="ant-timeline-item-head ant-timeline-item-head-gray"></div>
108+
<div class="ant-timeline-item-content">
109+
<p>Technical testing 1</p>
110+
<p>Technical testing 2</p>
111+
<p>Technical testing 3 2015-09-01</p>
112+
</div>
113+
</li>
114+
<li class="ant-timeline-item ant-timeline-item-last">
115+
<div class="ant-timeline-item-tail"></div>
116+
<div class="ant-timeline-item-head ant-timeline-item-head-gray"></div>
117+
<div class="ant-timeline-item-content">
118+
<p>Technical testing 1</p>
119+
<p>Technical testing 2</p>
120+
<p>Technical testing 3 2015-09-01</p>
121+
</div>
122+
</li>
105123
</ul>
106124
`;
107125

‎components/timeline/__tests__/index.test.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import TimeLine from '..';
2+
import mountTest from '../../../tests/shared/mountTest';
3+
4+
describe('Tag', () => {
5+
mountTest(TimeLine);
6+
mountTest(TimeLine.Item);
7+
});

‎components/timeline/demo/color.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@ Set the color of circles. `green` means completed or success status, `red` means
2323
<p>Technical testing 2</p>
2424
<p>Technical testing 3 2015-09-01</p>
2525
</a-timeline-item>
26+
<a-timeline-item color="gray">
27+
<p>Technical testing 1</p>
28+
<p>Technical testing 2</p>
29+
<p>Technical testing 3 2015-09-01</p>
30+
</a-timeline-item>
31+
<a-timeline-item color="gray">
32+
<p>Technical testing 1</p>
33+
<p>Technical testing 2</p>
34+
<p>Technical testing 3 2015-09-01</p>
35+
</a-timeline-item>
2636
</a-timeline>
2737
</template>
2838
```

‎components/timeline/demo/index.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,14 @@ export default {
3434
return (
3535
<div>
3636
<md cn={md.cn} us={md.us} />
37-
<Basic />
38-
<Color />
39-
<Pending />
40-
<Custom />
41-
<Alternate />
42-
<Right />
37+
<demo-sort cols="2">
38+
<Basic />
39+
<Color />
40+
<Pending />
41+
<Custom />
42+
<Alternate />
43+
<Right />
44+
</demo-sort>
4345
<api>
4446
<template slot="cn">
4547
<CN />

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
## API
22

33
```html
4-
<Timeline>
5-
<Timeline.Item>step1 2015-09-01</Timeline.Item>
6-
<Timeline.Item>step2 2015-09-01</Timeline.Item>
7-
<Timeline.Item>step3 2015-09-01</Timeline.Item>
8-
<Timeline.Item>step4 2015-09-01</Timeline.Item>
9-
</Timeline>
4+
<a-timeline>
5+
<a-timeline-item>step1 2015-09-01</a-timeline-item>
6+
<a-timeline-item>step2 2015-09-01</a-timeline-item>
7+
<a-timeline-item>step3 2015-09-01</a-timeline-item>
8+
<a-timeline-item>step4 2015-09-01</a-timeline-item>
9+
</a-timeline>
1010
```
1111

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

2525
Node of timeline
2626

27-
| Property | Description | Type | Default |
28-
| --- | --- | --- | --- |
29-
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
30-
| dot | Customize timeline dot | string\|slot | - |
27+
| Property | Description | Type | Default | Version |
28+
| --- | --- | --- | --- | --- |
29+
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | |
30+
| dot | Customize timeline dot | string\|slot | - | |
31+
| position | Customize node position | `left` \| `right` | - | 1.5.0 |

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
## API
22

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

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

2525
时间轴的每一个节点。
2626

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

0 commit comments

Comments
 (0)