From 8e37cd89f92ee2541f641fd860785cfd2361b2b3 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 5 Dec 2018 12:32:46 +0800 Subject: [PATCH] fix: timeline style error and add `reverse` `mode` --- .eslintrc | 5 +- components/timeline/Timeline.jsx | 52 ++++++++--- .../__tests__/__snapshots__/demo.test.js.snap | 92 ++++++++++++++++--- components/timeline/demo/alternate.md | 30 ++++++ components/timeline/demo/index.vue | 9 +- components/timeline/demo/pending.md | 26 +++++- components/timeline/demo/right.md | 25 +++++ components/timeline/index.en-US.md | 3 + components/timeline/index.zh-CN.md | 2 + 9 files changed, 209 insertions(+), 35 deletions(-) create mode 100644 components/timeline/demo/alternate.md create mode 100644 components/timeline/demo/right.md diff --git a/.eslintrc b/.eslintrc index e12a6e6111..d83133fcf3 100644 --- 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" } -} \ No newline at end of file +} diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.jsx index 598a6da499..b12d08421a 100644 --- 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 ? ( @@ -44,6 +51,28 @@ export default { {pendingNode} ) : 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 ( ) }, diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap index fb60a14a22..05ce152ac7 100644 --- 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`] = ` + +`; + exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `