diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 38c94a8c46..fcb13f00f9 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,13 +27,15 @@ 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, - }, className); + }, className, + mode); const pendingItem = !!pending ? ( { (!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 a977722fa1..bfaf4bc251 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 0000000000..0c7c01d8c4 --- /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 0000000000..3d94a08038 --- /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 11bf6dd4cc..13accf473d 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 80cac8121f..51db35648e 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 | By sending `alternate` the timeline will distribute the nodes to the left and right. | `standard` \| `alternate` | `standard` | ### Timeline.Item diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index efc6d77598..86501b998d 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -86,6 +86,54 @@ } } + &.alternate, + &.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; + } + } + } + } + + &.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; + } + } + } + &&-pending &-item-last &-item-tail { border-left: 2px dotted @timeline-color; display: block;