Revert "Feature time line.reverse (#10026)" (#10056)

This reverts commit 92a07d1b9d.
2024-12-02 20:19:44 +08:00 · 2018-04-15 16:51:05 +08:00 · 2018-04-15 16:51:05 +08:00 · 88cacb6c35
commit 88cacb6c35
parent 92a07d1b9d
7 changed files with 97 additions and 160 deletions
--- 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<TimelineProps, any> {
@ -20,50 +19,30 @@ export default class Timeline extends React.Component<TimelineProps, any> {
  };

  render() {
-    const {
-      prefixCls,
-      pending = null, pendingDot = <Icon type="loading" />,
-      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<any>, idx) =>
+      React.cloneElement(ele, {
+        last: idx === (React.Children.count(falsylessItems) - 1),
+      }),
+    );
+    const pendingItem = (!!pending) ? (
      <TimelineItem
        pending={!!pending}
-        dot={pendingDot}
+        dot={pendingDot || <Icon type="loading" />}
      >
        {pendingNode}
      </TimelineItem>
    ) : 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<any>, idx) =>
-      React.cloneElement(ele, {
-        className: classNames([
-          ele.props.className,
-          !!reverse
-            ? (idx === itemsCount - 1) && lastCls
-            : !!pending ? (idx === itemsCount - 2) && lastCls
-            : '',
-        ]),
-      }),
-    );
-
    return (
-      <ul {...ulProps} className={classString}>
+      <ul {...restProps} className={classString}>
        {items}
+        {pendingItem}
      </ul>
    );
  }
--- 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<TimeLineItemProps, any
  static defaultProps = {
    prefixCls: 'ant-timeline',
    color: 'blue',
+    last: false,
    pending: false,
  };

  render() {
-    const { prefixCls, className, color = '', children, pending, dot, ...restProps } = this.props;
+    const { prefixCls, className, color = '', last, children, pending, dot, ...restProps } = this.props;

    const itemClassName = classNames({
      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-last`]: last,
      [`${prefixCls}-item-pending`]: pending,
    }, className);

--- a/components/timeline/tests/snapshots/demo.test.js.snap
+++ b/components/timeline/tests/snapshots/demo.test.js.snap
@ -50,7 +50,7 @@ exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
    </div>
  </li>
  <li
-    class="ant-timeline-item"
+    class="ant-timeline-item ant-timeline-item-last"
  >
    <div
      class="ant-timeline-item-tail"
@ -125,7 +125,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
    </div>
  </li>
  <li
-    class="ant-timeline-item"
+    class="ant-timeline-item ant-timeline-item-last"
  >
    <div
      class="ant-timeline-item-tail"
@ -205,7 +205,7 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
    </div>
  </li>
  <li
-    class="ant-timeline-item"
+    class="ant-timeline-item ant-timeline-item-last"
  >
    <div
      class="ant-timeline-item-tail"
@ -223,83 +223,72 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
 `;

 exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
-<div>
-  <ul
-    class="ant-timeline ant-timeline-pending"
+<ul
+  class="ant-timeline ant-timeline-pending"
+>
+  <li
+    class="ant-timeline-item"
  >
-    <li
-      class="ant-timeline-item"
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
    >
-      <div
-        class="ant-timeline-item-tail"
-      />
-      <div
-        class="ant-timeline-item-head ant-timeline-item-head-blue"
-      />
-      <div
-        class="ant-timeline-item-content"
-      >
-        Create a services site 2015-09-01
-      </div>
-    </li>
-    <li
-      class="ant-timeline-item"
-    >
-      <div
-        class="ant-timeline-item-tail"
-      />
-      <div
-        class="ant-timeline-item-head ant-timeline-item-head-blue"
-      />
-      <div
-        class="ant-timeline-item-content"
-      >
-        Solve initial network problems 2015-09-01
-      </div>
-    </li>
-    <li
-      class="ant-timeline-item ant-timeline-item-last"
-    >
-      <div
-        class="ant-timeline-item-tail"
-      />
-      <div
-        class="ant-timeline-item-head ant-timeline-item-head-blue"
-      />
-      <div
-        class="ant-timeline-item-content"
-      >
-        Technical testing 2015-09-01
-      </div>
-    </li>
-    <li
-      class="ant-timeline-item ant-timeline-item-pending"
-    >
-      <div
-        class="ant-timeline-item-tail"
-      />
-      <div
-        class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
-      >
-        <i
-          class="anticon anticon-spin anticon-loading"
-        />
-      </div>
-      <div
-        class="ant-timeline-item-content"
-      >
-        Recording...
-      </div>
-    </li>
-  </ul>
-  <button
-    class="ant-btn"
-    style="margin-top:16px"
-    type="button"
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
  >
-    <span>
-      Reverse Toggle
-    </span>
-  </button>
-</div>
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-pending"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
+    >
+      <i
+        class="anticon anticon-spin anticon-loading"
+      />
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      Recording...
+    </div>
+  </li>
+</ul>
 `;
--- 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 (
-      <div>
-        <Timeline pending="Recording..." reverse={this.state.reverse}>
-          <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
-          <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
-          <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
-        </Timeline>
-        <Button style={{ marginTop: 16 }} onClick={this.handleClick}>Reverse Toggle</Button>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<PendingTimeLine />, mountNode);
+ReactDOM.render(
+  <Timeline pending="Recording...">
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
+  </Timeline>
+, mountNode);
 ````
--- 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 | `<Icon type="loading" />` |
-| reverse | reverse nodes or not | boolean | false |

 ### Timeline.Item

--- 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 | `<Icon type="loading" />` |
-| reverse | 节点排序 | boolean | false |

 ### Timeline.Item

--- 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;
-    }
-  }
 }