From 88cacb6c352c4f9d08e05c38baba661e26cb8b1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Sun, 15 Apr 2018 16:51:05 +0800 Subject: [PATCH] Revert "Feature time line.reverse (#10026)" (#10056) This reverts commit 92a07d1b9d082246ad8676b8cb1ed40c4ef24ca5. --- components/timeline/Timeline.tsx | 45 ++---- components/timeline/TimelineItem.tsx | 5 +- .../__tests__/__snapshots__/demo.test.js.snap | 147 ++++++++---------- components/timeline/demo/pending.md | 42 ++--- components/timeline/index.en-US.md | 1 - components/timeline/index.zh-CN.md | 1 - components/timeline/style/index.less | 16 +- 7 files changed, 97 insertions(+), 160 deletions(-) diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 843cf453c1..5605586b44 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -10,7 +10,6 @@ export interface TimelineProps { pending?: React.ReactNode; pendingDot?: React.ReactNode; style?: React.CSSProperties; - reverse?: boolean; } export default class Timeline extends React.Component { @@ -20,50 +19,30 @@ export default class Timeline extends React.Component { }; render() { - const { - prefixCls, - pending = null, pendingDot = , - children, className, reverse = false, - ...ulProps, - } = this.props; + const { prefixCls, children, pending, pendingDot, className, ...restProps } = this.props; const pendingNode = typeof pending === 'boolean' ? null : pending; const classString = classNames(prefixCls, { [`${prefixCls}-pending`]: !!pending, - [`${prefixCls}-reverse`]: !!reverse, }, className); - - const pendingItem = !!pending ? ( + // Remove falsy items + const falsylessItems = React.Children.toArray(children).filter(item => !!item); + const items = React.Children.map(falsylessItems, (ele: React.ReactElement, idx) => + React.cloneElement(ele, { + last: idx === (React.Children.count(falsylessItems) - 1), + }), + ); + const pendingItem = (!!pending) ? ( } > {pendingNode} ) : null; - - const timeLineItems = !!reverse - ? [pendingItem, ...React.Children.toArray(children)] - : [...React.Children.toArray(children), pendingItem]; - - // Remove falsy items - const falsylessItems = timeLineItems.filter(item => !!item); - const itemsCount = React.Children.count(falsylessItems); - const lastCls = `${prefixCls}-item-last`; - const items = React.Children.map(falsylessItems, (ele: React.ReactElement, idx) => - React.cloneElement(ele, { - className: classNames([ - ele.props.className, - !!reverse - ? (idx === itemsCount - 1) && lastCls - : !!pending ? (idx === itemsCount - 2) && lastCls - : '', - ]), - }), - ); - return ( -
    +
      {items} + {pendingItem}
    ); } diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx index 1e8e27d661..63b2e1f9a3 100644 --- a/components/timeline/TimelineItem.tsx +++ b/components/timeline/TimelineItem.tsx @@ -7,6 +7,7 @@ export interface TimeLineItemProps { color?: string; dot?: React.ReactNode; pending?: boolean; + last?: boolean; style?: React.CSSProperties; } @@ -14,14 +15,16 @@ export default class TimelineItem extends React.Component
  • -
      +
    • -
    • +
      +
      -
      -
      -
      - Create a services site 2015-09-01 -
      -
      • -
    • -
      -
      -
      - Solve initial network problems 2015-09-01 -
      -
      • -
    • -
      -
      -
      - Technical testing 2015-09-01 -
      -
      • -
    • -
      -
      - -
      -
      - Recording... -
      -
      • -
    -
    • +
  • - - Reverse Toggle - - - +
    +
    +
    + Solve initial network problems 2015-09-01 +
    +
    • +
  • +
    +
    +
    + Technical testing 2015-09-01 +
    +
    • +
  • +
    +
    + +
    +
    + Recording... +
    +
    • +
`; diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md index 170d796f05..ce30a3315d 100644 --- a/components/timeline/demo/pending.md +++ b/components/timeline/demo/pending.md @@ -1,44 +1,26 @@ --- order: 2 title: - zh-CN: 最后一个及排序 - en-US: Last node and Reversing + zh-CN: 最后一个 + en-US: Last node --- ## zh-CN -当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。 +当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点（用于时间正序排列）。当 pending 值为 false ，可用定制元件替换默认时间图点。 ## en-US -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, `pendingDot={a React Element}` is used to customize the dot of the pending item. -`reverse={true}` is used for reversing nodes. +When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`. Used in ascend chronological order. When `pending` is not false, set `pendingDot={a React Element}` to replace the default pending dot. ````jsx -import { Timeline, Button } from 'antd'; +import { Timeline } from 'antd'; -class PendingTimeLine extends React.Component { - state = { - reverse: false, - } - - handleClick = () => { - this.setState({ reverse: !this.state.reverse }); - } - - render() { - return ( -
- - Create a services site 2015-09-01 - Solve initial network problems 2015-09-01 - Technical testing 2015-09-01 - - -
- ); - } -} - -ReactDOM.render(, mountNode); +ReactDOM.render( + + Create a services site 2015-09-01 + Solve initial network problems 2015-09-01 + Technical testing 2015-09-01 + +, mountNode); ```` diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md index 11bf6dd4cc..88410fdb01 100644 --- a/components/timeline/index.en-US.md +++ b/components/timeline/index.en-US.md @@ -30,7 +30,6 @@ Timeline | -------- | ----------- | ---- | ------- | | pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` | | pendingDot | Set the dot of the last ghost node when pending is true | \|string\|ReactNode | `` | -| reverse | reverse nodes or not | boolean | false | ### Timeline.Item diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index 80cac8121f..a97f348201 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -31,7 +31,6 @@ title: Timeline | --- | --- | --- | --- | | pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false | | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | \|string\|ReactNode | `` | -| reverse | 节点排序 | boolean | false | ### Timeline.Item diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index a0cc2aca17..73c8ad747b 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -78,6 +78,7 @@ &-last { .@{timeline-prefix-cls}-item-tail { + border-left: 2px dotted @timeline-color; display: none; } .@{timeline-prefix-cls}-item-content { @@ -87,21 +88,6 @@ } &&-pending &-item-last &-item-tail { - border-left: 2px dotted @timeline-color; display: block; } - - &&-reverse &-item-last &-item-tail { - display: none; - } - - &&-reverse &-item-pending { - .@{timeline-prefix-cls}-item-tail { - border-left: 2px dotted @timeline-color; - display: block; - } - .@{timeline-prefix-cls}-item-content { - min-height: 48px; - } - } }