From 00a41f5ec584742845ba9dc558a420c91f45cda7 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 26 Feb 2020 20:58:34 +0800 Subject: [PATCH] feat: update timeline --- build/config.js | 2 +- components/timeline/Timeline.jsx | 45 ++++++++++--------- components/timeline/TimelineItem.jsx | 3 +- .../__tests__/__snapshots__/demo.test.js.snap | 20 ++++++++- components/timeline/__tests__/index.test.js | 7 +++ components/timeline/demo/color.md | 10 +++++ components/timeline/demo/index.vue | 14 +++--- components/timeline/index.en-US.md | 21 ++++----- components/timeline/index.zh-CN.md | 21 ++++----- 9 files changed, 94 insertions(+), 49 deletions(-) create mode 100644 components/timeline/__tests__/index.test.js diff --git a/build/config.js b/build/config.js index 622e99787..fac7ac199 100644 --- a/build/config.js +++ b/build/config.js @@ -1,5 +1,5 @@ module.exports = { dev: { - componentName: 'tooltip', // dev components + componentName: 'timeline', // dev components }, }; diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.jsx index d094b8eb2..cf8261d15 100644 --- 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 ? ( {pendingNode} ) : 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: { diff --git a/components/timeline/TimelineItem.jsx b/components/timeline/TimelineItem.jsx index 3957bc29c..ed7f2006f 100644 --- 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 {
{dot}
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap index 13d921048..701be3359 100644 --- 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`] = `

Solve initial network problems 3 2015-09-01

-
  • +
  • @@ -102,6 +102,24 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `

    Technical testing 3 2015-09-01

    • +
  • +
    +
    +
    +

    Technical testing 1

    +

    Technical testing 2

    +

    Technical testing 3 2015-09-01

    +
    +
    • +
  • +
    +
    +
    +

    Technical testing 1

    +

    Technical testing 2

    +

    Technical testing 3 2015-09-01

    +
    +
    • `; diff --git a/components/timeline/__tests__/index.test.js b/components/timeline/__tests__/index.test.js new file mode 100644 index 000000000..b6dbe4f3e --- /dev/null +++ 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); +}); diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md index 0ce2ef9a9..bc4f7c55e 100644 --- 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

    Technical testing 2

    Technical testing 3 2015-09-01

    + +

    Technical testing 1

    +

    Technical testing 2

    +

    Technical testing 3 2015-09-01

    +     + +

    Technical testing 1

    +

    Technical testing 2

    +

    Technical testing 3 2015-09-01

    +     ``` diff --git a/components/timeline/demo/index.vue b/components/timeline/demo/index.vue index 21b29b6b8..1d2c3a30b 100644 --- a/components/timeline/demo/index.vue +++ b/components/timeline/demo/index.vue @@ -34,12 +34,14 @@ export default { return (
    - - - - - - + + + + + + + +