diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 38c94a8c4600..0868b517d2ae 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -11,6 +11,7 @@ export interface TimelineProps { pendingDot?: React.ReactNode; style?: React.CSSProperties; reverse?: boolean; + mode?: 'left' | 'alternate' | 'right'; } export default class Timeline extends React.Component { @@ -18,6 +19,7 @@ export default class Timeline extends React.Component { static defaultProps = { prefixCls: 'ant-timeline', reverse: false, + mode: '', }; render() { @@ -25,12 +27,14 @@ export default class Timeline extends React.Component { prefixCls, pending = null, pendingDot, children, className, reverse, + mode, ...restProps } = this.props; const pendingNode = typeof pending === 'boolean' ? null : pending; const classString = classNames(prefixCls, { [`${prefixCls}-pending`]: !!pending, [`${prefixCls}-reverse`]: !!reverse, + [`${prefixCls}-${mode}`]: !!mode, }, className); const pendingItem = !!pending ? ( @@ -57,6 +61,9 @@ export default class Timeline extends React.Component { (!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` : '', ]), }), ); diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap index a977722fa1ef..4fb7269b5ed5 100644 --- a/components/timeline/__tests__/__snapshots__/demo.test.js.snap +++ b/components/timeline/__tests__/__snapshots__/demo.test.js.snap @@ -1,5 +1,112 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = ` +
    +
  • +
    +
    +
    + Create a services site 2015-09-01 +
    +
    • +
  • +
    +
    +
    + Solve initial network problems 2015-09-01 +
    +
    • +
  • +
    +
    + +
    +
    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +
    +
    • +
  • +
    +
    +
    + Network problems being solved 2015-09-01 +
    +
    • +
  • +
    +
    +
    + Create a services site 2015-09-01 +
    +
    • +
  • +
    +
    + +
    +
    + Technical testing 2015-09-01 +
    +
    • +
+`; + exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
    `; + +exports[`renders ./components/timeline/demo/right.md correctly 1`] = ` +
      +
    • +
      +
      +
      + Create a services site 2015-09-01 +
      +
      • +
    • +
      +
      +
      + Solve initial network problems 2015-09-01 +
      +
      • +
    • +
      +
      + +
      +
      + Technical testing 2015-09-01 +
      +
      • +
    • +
      +
      +
      + Network problems being solved 2015-09-01 +
      +
      • +
    +`; diff --git a/components/timeline/demo/alternate.md b/components/timeline/demo/alternate.md new file mode 100644 index 000000000000..7e8620112f52 --- /dev/null +++ b/components/timeline/demo/alternate.md @@ -0,0 +1,29 @@ +--- +order: 3 +title: + zh-CN: 交替展现 + en-US: Alternate +--- + +## zh-CN + +内容在时间轴两侧轮流出现。 + +## en-US + +Alternate timeline. + +````jsx +import { Timeline, Icon } from 'antd'; + +ReactDOM.render( + + Create a services site 2015-09-01 + Solve initial network problems 2015-09-01 + }>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. + Network problems being solved 2015-09-01 + Create a services site 2015-09-01 + }>Technical testing 2015-09-01 + , + mountNode); +```` diff --git a/components/timeline/demo/right.md b/components/timeline/demo/right.md new file mode 100644 index 000000000000..6ff193cb158d --- /dev/null +++ b/components/timeline/demo/right.md @@ -0,0 +1,27 @@ +--- +order: 4 +title: + zh-CN: 右侧时间轴点 + en-US: Right alternate +--- + +## zh-CN + +时间轴点可以在内容的右边。 + +## en-US + +Right alternate timeline. + +````jsx +import { Timeline, Icon } from 'antd'; + +ReactDOM.render( + + Create a services site 2015-09-01 + Solve initial network problems 2015-09-01 + } color="red">Technical testing 2015-09-01 + Network problems being solved 2015-09-01 + , + mountNode); +```` diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md index 11bf6dd4ccfc..13accf473dcd 100644 --- a/components/timeline/index.en-US.md +++ b/components/timeline/index.en-US.md @@ -31,6 +31,7 @@ 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 | +| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left` | ### Timeline.Item diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index 80cac8121fdd..d6822ba09acc 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -32,6 +32,7 @@ title: Timeline | pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false | | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | \|string\|ReactNode | `` | | reverse | 节点排序 | boolean | false | +| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | ### Timeline.Item diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index efc6d7759846..c310207cae1a 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -86,6 +86,58 @@ } } + &.@{timeline-prefix-cls}-alternate, + &.@{timeline-prefix-cls}-right { + .@{timeline-prefix-cls}-item { + + &-tail, + &-head, + &-head-custom { + left: 50%; + } + + &-head { + margin-left: -4px; + &-custom { + margin-left: 1px; + } + } + + &-left { + .@{timeline-prefix-cls}-item-content { + text-align: left; + left: 50%; + width: 50%; + } + } + + &-right { + .@{timeline-prefix-cls}-item-content { + text-align: right; + right: 50%; + margin-right: 18px; + width: 50%; + left: -30px; + } + } + } + } + + &.@{timeline-prefix-cls}-right { + .@{timeline-prefix-cls}-item-right { + .@{timeline-prefix-cls}-item-tail, + .@{timeline-prefix-cls}-item-head, + .@{timeline-prefix-cls}-item-head-custom { + left: 100%; + } + .@{timeline-prefix-cls}-item-content { + right: 0; + width: 100%; + left: -30px; + } + } + } + &&-pending &-item-last &-item-tail { border-left: 2px dotted @timeline-color; display: block;