Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add: timeline mode stamp #18035

Closed
wants to merge 4 commits into from
Closed

add: timeline mode stamp #18035

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8107df4
add: timeline mode stamp
xrkffgg Aug 1, 2019
7696bff
add: timeline stamp-left stamp-right
xrkffgg Aug 2, 2019
fe2a6eb
完善显示方式；隐藏其他模式。
xrkffgg Aug 2, 2019
f0aac11
修改stamp -> lable，调整 测试代码。
xrkffgg Aug 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions components/timeline/Timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export interface TimelineProps {
pendingDot?: React.ReactNode;
style?: React.CSSProperties;
reverse?: boolean;
mode?: 'left' | 'alternate' | 'right' | 'stamp-left' | 'stamp-right';
mode?: 'left' | 'alternate' | 'right' | 'label-left' | 'label-right';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我感觉这两个 mode 都没必要了。mode="left" + label === label-left

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个自动的比较好，没必要这么复杂，如果有 label 就根据 mode 当前的位置自动适应左右就好

Copy link
Member Author

@xrkffgg xrkffgg Aug 3, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😂😂😂 感觉 这样处理起来有点 复杂呀
如果使用一个mode，单个 model 的样式 有两套。
按照现有的定义，需要修改 tail 、 head 、 head-custom 、content 。
比如啊：

  • ant-timeline-item-right 的定义是在 Timeline.tsx 文件中
  • 在Timeline.tsx 是不太好获取 label 的值
  • 这样就使得 right 模式 和 label-right 模式 都使用的是 ant-timeline-item-right 的父 class
  • 这使得 在 TimelineItem.tsx 中 使用的是相同的父 class ，即 tail head content 按照现在的 class 是无法分开的。

要实现这个功能的话：

  • 1 最直接分开 mode， tail 、 head 、 head-custom 、content 再定义一套

  • 2 无新 mode，tail head content 等 class 分2个，这样改动很大。

    • TimelineItem.tsx 需要判断 所有的 item 中，是否有一个 是有值的，才启动 lable 模式
    • 根据是否是 label 模式 来 定义两种 class 来适配 这4个 div

    • 现有元素不管是哪种 mode ，单个 div 样式保持 ant-timeline-item-tail 一致的，如果改动，就不能保证一致。

  • 3 无新 mode，tail head content 也使用现有的。但是需要自动适配 label 的有无。同样需要 循环判断 是否启动 label ，并且 现有的 4个div css 基本需要都改动。而且 改动 难度 都较大。

😅😅😅

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

和 ant-timeline-item-content 并列放置一个 ant-timeline-item-label，根据 ant-timeline-item-[right/left] 来定位 label 的位置

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

但是这个时候，tail head content 的位置 大小 都发生了变动 在一个ant-timeline-item-right 里，不太容易 进行2个定义吧

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shaodahong
还是有点疑问
如果

<Timeline>
    <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.Item label="2019-01-01">Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>

像这样的，只在最后一个 item 写了 label，这种情况下，如果要启用 label 模式，则在 li 层 增加 ant-timeline-label 样式时，这就需要遍历完成后 才能判断 。

当前代码的 遍历 是在处理 每一个 item 的 样式
所以 我感觉 还是需要 2个 遍历啊

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

你 在上面说的 .some

是在每一个 item 去执行总的数组中去判断 是否 有一个有 label 吗？
这样 每一次 都执行个 some 不太好吧

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

恩。现在的代码已经拿到了要渲染的 childrens

const truthyItems = timeLineItems.filter(item => !!item);

再 some 一下

const isLabel = truthyItems.some(item => item.props.label !== undefined)

之后吧样式设置下

classNames({ [`${prefixCls}-label`]: isLabel })

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😂 嗯，那就行。。。

之前 一直 想规避 这个 2次的遍历，还以为你们不接受 2次 遍历呢

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我不知道官方接不接收，但是这个性能影响几乎忽略不计

}

export default class Timeline extends React.Component<TimelineProps, any> {
Expand Down Expand Up @@ -64,8 +64,8 @@ export default class Timeline extends React.Component<TimelineProps, any> {
if (mode === 'left') return `${prefixCls}-item-left`;
if (mode === 'right') return `${prefixCls}-item-right`;
if (ele.props.position === 'right') return `${prefixCls}-item-right`;
if (mode === 'stamp-left') return `${prefixCls}-item-stamp-left`;
if (mode === 'stamp-right') return `${prefixCls}-item-stamp-right`;
if (mode === 'label-left') return `${prefixCls}-item-label-left`;
if (mode === 'label-right') return `${prefixCls}-item-label-right`;
return '';
};

Expand Down
8 changes: 4 additions & 4 deletions components/timeline/TimelineItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export interface TimeLineItemProps {
prefixCls?: string;
className?: string;
color?: string;
stamp?: string;
label?: string;
dot?: React.ReactNode;
pending?: boolean;
position?: string;
Expand All @@ -20,7 +20,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
prefixCls: customizePrefixCls,
className,
color = '',
stamp = '',
label = '',
children,
pending,
position,
Expand All @@ -45,7 +45,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (

return (
<li {...restProps} className={itemClassName}>
{stamp.length === 10 ? <div className={`${prefixCls}-item-stamp`}>{stamp}</div> : null}
{label.length === 10 ? <div className={`${prefixCls}-item-label`}>{label}</div> : null}
<div className={`${prefixCls}-item-tail`} />
<div
className={dotClassName}
Expand All @@ -63,7 +63,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
TimelineItem.defaultProps = {
color: 'blue',
pending: false,
stamp: '',
label: '',
position: '',
};

Expand Down
40 changes: 20 additions & 20 deletions components/timeline/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,15 +621,15 @@ exports[`renders ./components/timeline/demo/right.md correctly 1`] = `
</ul>
`;

exports[`renders ./components/timeline/demo/stamp-left.md correctly 1`] = `
exports[`renders ./components/timeline/demo/label-left.md correctly 1`] = `
<ul
class="ant-timeline ant-timeline-stamp-left"
class="ant-timeline ant-timeline-label-left"
>
<li
class="ant-timeline-item"
class="ant-timeline-item ant-timeline-item-label-left"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-01
</div>
Expand All @@ -646,10 +646,10 @@ exports[`renders ./components/timeline/demo/stamp-left.md correctly 1`] = `
</div>
</li>
<li
class="ant-timeline-item"
class="ant-timeline-item ant-timeline-item-label-left"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-02
</div>
Expand All @@ -666,10 +666,10 @@ exports[`renders ./components/timeline/demo/stamp-left.md correctly 1`] = `
</div>
</li>
<li
class="ant-timeline-item"
class="ant-timeline-item ant-timeline-item-label-left"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-03
</div>
Expand Down Expand Up @@ -710,10 +710,10 @@ exports[`renders ./components/timeline/demo/stamp-left.md correctly 1`] = `
</div>
</li>
<li
class="ant-timeline-item ant-timeline-item-last"
class="ant-timeline-item ant-timeline-item-last ant-timeline-item-label-left"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-04
</div>
Expand All @@ -732,15 +732,15 @@ exports[`renders ./components/timeline/demo/stamp-left.md correctly 1`] = `
</ul>
`;

exports[`renders ./components/timeline/demo/stamp-right.md correctly 1`] = `
exports[`renders ./components/timeline/demo/label-right.md correctly 1`] = `
<ul
class="ant-timeline ant-timeline-stamp-right"
class="ant-timeline ant-timeline-label-right"
>
<li
class="ant-timeline-item"
class="ant-timeline-item ant-timeline-item-label-right"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-01
</div>
Expand All @@ -757,10 +757,10 @@ exports[`renders ./components/timeline/demo/stamp-right.md correctly 1`] = `
</div>
</li>
<li
class="ant-timeline-item"
class="ant-timeline-item ant-timeline-item-label-right"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-02
</div>
Expand All @@ -777,10 +777,10 @@ exports[`renders ./components/timeline/demo/stamp-right.md correctly 1`] = `
</div>
</li>
<li
class="ant-timeline-item"
class="ant-timeline-item ant-timeline-item-label-right"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-03
</div>
Expand Down Expand Up @@ -821,10 +821,10 @@ exports[`renders ./components/timeline/demo/stamp-right.md correctly 1`] = `
</div>
</li>
<li
class="ant-timeline-item ant-timeline-item-last"
class="ant-timeline-item ant-timeline-item-last ant-timeline-item-label-right"
>
<div
class="ant-timeline-item-stamp"
class="ant-timeline-item-label"
>
2015-09-04
</div>
Expand Down
14 changes: 7 additions & 7 deletions components/timeline/demo/stamp-left.md → components/timeline/demo/label-left.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
order: 5
title:
zh-CN: 左侧时间戳轴点
en-US: Stamp-left
en-US: Label-left
---

## zh-CN
Expand All @@ -11,25 +11,25 @@ title:

## en-US

Stamp left, content right.
Label left, content right.

```jsx
import { Timeline, Icon } from 'antd';

ReactDOM.render(
<Timeline mode="stamp-left">
<Timeline.Item stamp="2015-09-01">Create a services site</Timeline.Item>
<Timeline.Item stamp="2015-09-02" color="green">
<Timeline mode="label-left">
<Timeline.Item label="2015-09-01">Create a services site</Timeline.Item>
<Timeline.Item label="2015-09-02" color="green">
Solve initial network problems
</Timeline.Item>
<Timeline.Item
stamp="2015-09-03"
label="2015-09-03"
dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}
color="red"
>
Technical testing
</Timeline.Item>
<Timeline.Item stamp="2015-09-04">Network problems being solved</Timeline.Item>
<Timeline.Item label="2015-09-04">Network problems being solved</Timeline.Item>
</Timeline>,
mountNode,
);
Expand Down
14 changes: 7 additions & 7 deletions components/timeline/demo/stamp-right.md → components/timeline/demo/label-right.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
order: 5
title:
zh-CN: 右侧时间戳轴点
en-US: Stamp-right
en-US: Label-right
---

## zh-CN
Expand All @@ -11,25 +11,25 @@ title:

## en-US

Stamp right, content left.
Label right, content left.

```jsx
import { Timeline, Icon } from 'antd';

ReactDOM.render(
<Timeline mode="stamp-right">
<Timeline.Item stamp="2015-09-01">Create a services site</Timeline.Item>
<Timeline.Item stamp="2015-09-02" color="green">
<Timeline mode="label-right">
<Timeline.Item label="2015-09-01">Create a services site</Timeline.Item>
<Timeline.Item label="2015-09-02" color="green">
Solve initial network problems
</Timeline.Item>
<Timeline.Item
stamp="2015-09-03"
label="2015-09-03"
dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}
color="red"
>
Technical testing
</Timeline.Item>
<Timeline.Item stamp="2015-09-04">Network problems being solved</Timeline.Item>
<Timeline.Item label="2015-09-04">Network problems being solved</Timeline.Item>
</Timeline>,
mountNode,
);
Expand Down
4 changes: 2 additions & 2 deletions components/timeline/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +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" />` | 3.3.0 |
| reverse | reverse nodes or not | boolean | false | 3.5.0 |
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` \| `stamp-left` \| `stamp-right` | - | 3.8.0 |
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` \| `label-left` \| `label-right` | - | 3.8.0 |

### Timeline.Item

Expand All @@ -42,4 +42,4 @@ Node of timeline
| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` | |
| dot | Customize timeline dot | string\|ReactNode | - | |
| position | Customize node position | `left` \| `right` | - | 3.17.0 |
| stamp | Timeline stamp , currently only supported 'yyyy-MM-dd' | string | - | |
| label | Timeline label , currently only supported 'yyyy-MM-dd' | string | - | |
4 changes: 2 additions & 2 deletions components/timeline/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ title: Timeline
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false | |
| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | string\|ReactNode | `<Icon type="loading" />` | 3.3.0 |
| reverse | 节点排序 | boolean | false | 3.5.0 |
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` \| `stamp-left` \| `stamp-right` | - | 3.8.0 |
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` \| `label-left` \| `label-right` | - | 3.8.0 |

### Timeline.Item

Expand All @@ -43,4 +43,4 @@ title: Timeline
| color | 指定圆圈颜色 `blue, red, green, gray`，或自定义的色值 | string | blue | |
| dot | 自定义时间轴点 | string\|ReactNode | - | |
| position | 自定义节点位置 | `left` \| `right` | - | 3.17.0 |
| stamp | 轴点时间戳，目前仅支持 'yyyy-MM-dd' | string | - | |
| label | 轴点时间戳，目前仅支持 'yyyy-MM-dd' | string | - | |
10 changes: 5 additions & 5 deletions components/timeline/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
font-size: @font-size-base;
list-style: none;

&-stamp {
&-label {
display: none;
}

Expand Down Expand Up @@ -148,10 +148,10 @@
}
}

&.@{timeline-prefix-cls}-stamp-left {
&.@{timeline-prefix-cls}-label-left {
.@{timeline-prefix-cls}-item {
display: flex;
&-stamp {
&-label {
top: -6px;
width: 72px;
position: relative;
Expand All @@ -177,10 +177,10 @@
}
}

&.@{timeline-prefix-cls}-stamp-right {
&.@{timeline-prefix-cls}-label-right {
.@{timeline-prefix-cls}-item {
display: flex;
&-stamp {
&-label {
top: -6px;
left: calc(100% - 72px);
width: 72px;
Expand Down