github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update timeline

pull/1845/head
tangjinzhou 2020-02-26 20:58:34 +08:00
parent ab8768b19b
commit 00a41f5ec5
9 changed files with 94 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'tooltip', // dev components componentName: 'timeline', // dev components
}, },
}; };

45
components/timeline/Timeline.jsx
View File

@ -2,6 +2,7 @@ import classNames from 'classnames';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { import {
getOptionProps, getOptionProps,
getPropsData,
initDefaultProps, initDefaultProps,
filterEmpty, filterEmpty,
getComponentFromProp, getComponentFromProp,
@ -25,6 +26,7 @@ export default {
name: 'ATimeline', name: 'ATimeline',
props: initDefaultProps(TimelineProps, { props: initDefaultProps(TimelineProps, {
reverse: false, reverse: false,
mode: '',
}), }),
inject: { inject: {
configProvider: { default: () => ConfigConsumerProps }, configProvider: { default: () => ConfigConsumerProps },
@ -52,41 +54,44 @@ export default {
// }, // },
// }) // })
// }) // })
const pendingItem = !!pending ? ( const pendingItem = pending ? (
<TimelineItem pending={!!pending}> <TimelineItem pending={!!pending}>
<template slot="dot">{pendingDot || <Icon type="loading" />}</template> <template slot="dot">{pendingDot || <Icon type="loading" />}</template>
{pendingNode} {pendingNode}
</TimelineItem> </TimelineItem>
) : null; ) : null;
const timeLineItems = !!reverse const timeLineItems = reverse
? [pendingItem, ...children.reverse()] ? [pendingItem, ...children.reverse()]
: [...children, pendingItem]; : [...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 // Remove falsy items
const truthyItems = timeLineItems.filter(item => !!item); const truthyItems = timeLineItems.filter(item => !!item);
const itemsCount = truthyItems.length; const itemsCount = truthyItems.length;
const lastCls = `${prefixCls}-item-last`; const lastCls = `${prefixCls}-item-last`;
const items = truthyItems.map((ele, idx) => const items = truthyItems.map((ele, idx) => {
cloneElement(ele, { const pendingClass = idx === itemsCount - 2 ? lastCls : '';
const readyClass = idx === itemsCount - 1 ? lastCls : '';
return cloneElement(ele, {
class: classNames([ class: classNames([
!reverse && !!pending !reverse && !!pending ? pendingClass : readyClass,
? idx === itemsCount - 2 getPositionCls(ele, idx),
? lastCls
: ''
: idx === itemsCount - 1
? lastCls
: '',
mode === 'alternate'
? idx % 2 === 0
? `${prefixCls}-item-left`
: `${prefixCls}-item-right`
: mode === 'right'
? `${prefixCls}-item-right`
: '',
]), ]),
}), });
); });
const timelineProps = { const timelineProps = {
props: { props: {

3
components/timeline/TimelineItem.jsx
View File

@ -13,6 +13,7 @@ export const TimeLineItemProps = {
color: PropTypes.string, color: PropTypes.string,
dot: PropTypes.any, dot: PropTypes.any,
pending: PropTypes.bool, pending: PropTypes.bool,
position: PropTypes.oneOf(['left', 'right', '']).def(''),
}; };
export default { export default {
@ -49,7 +50,7 @@ export default {
<div class={`${prefixCls}-item-tail`} /> <div class={`${prefixCls}-item-tail`} />
<div <div
class={dotClassName} class={dotClassName}
style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }} style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
> >
{dot} {dot}
</div> </div>

20
components/timeline/__tests__/__snapshots__/demo.test.js.snap
View File

@ -93,7 +93,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
<p>Solve initial network problems 3 2015-09-01</p> <p>Solve initial network problems 3 2015-09-01</p>
</div> </div>
</li> </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-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-blue"></div> <div class="ant-timeline-item-head ant-timeline-item-head-blue"></div>
<div class="ant-timeline-item-content"> <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> <p>Technical testing 3 2015-09-01</p>
</div> </div>
</li> </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> </ul>
`; `;

7
components/timeline/__tests__/index.test.js Normal file
View File

@ -0,0 +1,7 @@
import TimeLine from '..';
import mountTest from '../../../tests/shared/mountTest';
describe('Tag', () => {
mountTest(TimeLine);
mountTest(TimeLine.Item);
});

10
components/timeline/demo/color.md
View File

@ -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 2</p>
<p>Technical testing 3 2015-09-01</p> <p>Technical testing 3 2015-09-01</p>
</a-timeline-item> </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> </a-timeline>
</template> </template>
``` ```

14
components/timeline/demo/index.vue
View File

@ -34,12 +34,14 @@ export default {
return ( return (
<div> <div>
<md cn={md.cn} us={md.us} /> <md cn={md.cn} us={md.us} />
<Basic /> <demo-sort cols="2">
<Color /> <Basic />
<Pending /> <Color />
<Custom /> <Pending />
<Alternate /> <Custom />
<Right /> <Alternate />
<Right />
</demo-sort>
<api> <api>
<template slot="cn"> <template slot="cn">
<CN /> <CN />

21
components/timeline/index.en-US.md
View File

@ -1,12 +1,12 @@
## API ## API
```html ```html
<Timeline> <a-timeline>
<Timeline.Item>step1 2015-09-01</Timeline.Item> <a-timeline-item>step1 2015-09-01</a-timeline-item>
<Timeline.Item>step2 2015-09-01</Timeline.Item> <a-timeline-item>step2 2015-09-01</a-timeline-item>
<Timeline.Item>step3 2015-09-01</Timeline.Item> <a-timeline-item>step3 2015-09-01</a-timeline-item>
<Timeline.Item>step4 2015-09-01</Timeline.Item> <a-timeline-item>step4 2015-09-01</a-timeline-item>
</Timeline> </a-timeline>
``` ```
### Timeline ### Timeline
@ -24,7 +24,8 @@ Timeline
Node of timeline Node of timeline
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | | color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | |
| dot | Customize timeline dot | string\|slot | - | | dot | Customize timeline dot | string\|slot | - | |
| position | Customize node position | `left` \| `right` | - | 1.5.0 |

21
components/timeline/index.zh-CN.md
View File

@ -1,12 +1,12 @@
## API ## API
```html ```html
<Timeline> <a-timeline>
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item> <a-timeline-item>创建服务现场 2015-09-01</a-timeline-item>
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item> <a-timeline-item>初步排除网络异常 2015-09-01</a-timeline-item>
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item> <a-timeline-item>技术测试异常 2015-09-01</a-timeline-item>
<Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item> <a-timeline-item>网络异常正在修复 2015-09-01</a-timeline-item>
</Timeline> </a-timeline>
``` ```
### Timeline ### Timeline
@ -24,7 +24,8 @@
时间轴的每一个节点。 时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----- | ----------------------------------------------- | ------------ | ------ | | -------- | ----------------------------------------------- | ----------------- | ------ | ----- |
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue | | color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue | |
| dot | 自定义时间轴点 | string\|slot | - | | dot | 自定义时间轴点 | string\|slot | - | |
| position | 自定义节点位置 | `left` \| `right` | - | 1.5.0 |