mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-06 00:44:17 +08:00
Timeline design change feature
added a new prop to timeline called mode where you can send 'alternate' to change the timeline design and 'right' to flip horizontally.
This commit is contained in:
Juan Rodrigo Venegas Boesch
偏右
parent
6a28b44eca
commit
121efd1f4c
@ -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<TimelineProps, any> {
|
||||
@ -18,6 +19,7 @@ export default class Timeline extends React.Component<TimelineProps, any> {
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-timeline',
|
||||
reverse: false,
|
||||
mode: '',
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -25,13 +27,15 @@ export default class Timeline extends React.Component<TimelineProps, any> {
|
||||
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 ? (
|
||||
<TimelineItem
|
||||
@ -57,6 +61,9 @@ export default class Timeline extends React.Component<TimelineProps, any> {
|
||||
(!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` : '',
|
||||
]),
|
||||
}),
|
||||
);
|
||||
|
||||
@ -1,5 +1,112 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-timeline alternate"
|
||||
>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-left"
|
||||
>
|
||||
<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 ant-timeline-item-right"
|
||||
>
|
||||
<div
|
||||
class="ant-timeline-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-head ant-timeline-item-head-green"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
Solve initial network problems 2015-09-01
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-left"
|
||||
>
|
||||
<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-clock-circle-o"
|
||||
style="font-size:16px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
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.
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-right"
|
||||
>
|
||||
<div
|
||||
class="ant-timeline-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-head ant-timeline-item-head-red"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved 2015-09-01
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-left"
|
||||
>
|
||||
<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 ant-timeline-item-last ant-timeline-item-right"
|
||||
>
|
||||
<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-clock-circle-o"
|
||||
style="font-size:16px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
Technical testing 2015-09-01
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-timeline"
|
||||
@ -303,3 +410,75 @@ exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/timeline/demo/right.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-timeline right"
|
||||
>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-right"
|
||||
>
|
||||
<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 ant-timeline-item-right"
|
||||
>
|
||||
<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-right"
|
||||
>
|
||||
<div
|
||||
class="ant-timeline-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-red"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-clock-circle-o"
|
||||
style="font-size:16px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
Technical testing 2015-09-01
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right"
|
||||
>
|
||||
<div
|
||||
class="ant-timeline-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-head ant-timeline-item-head-blue"
|
||||
/>
|
||||
<div
|
||||
class="ant-timeline-item-content"
|
||||
>
|
||||
Network problems being solved 2015-09-01
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
29
components/timeline/demo/alternate.md
Normal file
29
components/timeline/demo/alternate.md
Normal file
@ -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(
|
||||
<Timeline mode="alternate">
|
||||
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>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.</Timeline.Item>
|
||||
<Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>Technical testing 2015-09-01</Timeline.Item>
|
||||
</Timeline>,
|
||||
mountNode);
|
||||
````
|
||||
27
components/timeline/demo/right.md
Normal file
27
components/timeline/demo/right.md
Normal file
@ -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(
|
||||
<Timeline mode="right">
|
||||
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">Technical testing 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
|
||||
</Timeline>,
|
||||
mountNode);
|
||||
````
|
||||
@ -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 | `<Icon type="loading" />` |
|
||||
| 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
|
||||
|
||||
|
||||
@ -32,6 +32,7 @@ title: Timeline
|
||||
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false |
|
||||
| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | \|string\|ReactNode | `<Icon type="loading" />` |
|
||||
| reverse | 节点排序 | boolean | false |
|
||||
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `standard` \| `alternate` | `standard` |
|
||||
|
||||
### Timeline.Item
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user