add: timeline mode stamp #18035
add: timeline mode stamp #18035
Conversation
|
Deploy preview for ant-design ready! Built with commit f0aac11 |
Codecov Report
@@ Coverage Diff @@
## feature #18035 +/- ##
===========================================
- Coverage 96.12% 96.1% -0.02%
===========================================
Files 271 271
Lines 7478 7480 +2
Branches 2093 2054 -39
===========================================
+ Hits 7188 7189 +1
- Misses 288 289 +1
Partials 2 2
Continue to review full report at Codecov.
|
|
在原有 stamp 的基础上，新修改为 new img
|
|
@afc163 大佬 这个 是啥意思？？ |
|
|
||
| ReactDOM.render( | ||
| <Timeline mode="stamp-left"> | ||
| <Timeline.Item stamp="2015-09-01">Create a services site</Timeline.Item> |
There was a problem hiding this comment.
用 label 比较好，stmap 语义受限了。
感觉不需要有 mode 了。
There was a problem hiding this comment.
先修改了名称。
mode 的话，因为轴线改变，各个元素的位置动了。不用整体 mode 来控制，单个处理较复杂。暂时先这样，之后再想想。
😂😂😂
|
这一版 failed 的 2个 是其他 组件报的 😓 奇怪哟 |
| @@ -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'; | |||
There was a problem hiding this comment.
我感觉这两个 mode 都没必要了。mode="left" + label === label-left
There was a problem hiding this comment.
这个自动的比较好，没必要这么复杂，如果有 label 就根据 mode 当前的位置自动适应左右就好
There was a problem hiding this comment.
😂😂😂 感觉 这样处理起来有点 复杂呀
如果使用一个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 ，即tailheadcontent按照现在的 class 是无法分开的。
要实现这个功能的话：
-
1 最直接分开 mode，
tail、head、head-custom、content再定义一套 -
2 无新 mode，
tailheadcontent等 class 分2个，这样改动很大。TimelineItem.tsx需要判断 所有的 item 中，是否有一个 是有值的，才启动 lable 模式- 根据是否是 label 模式 来 定义两种 class 来适配 这4个 div
-
现有元素不管是哪种 mode ，单个 div 样式保持
ant-timeline-item-tail一致的，如果改动，就不能保证一致。
-
3 无新 mode，
tailheadcontent也使用现有的。但是需要自动适配 label 的有无。同样需要 循环判断 是否启动 label ，并且 现有的 4个div css 基本需要都改动。而且 改动 难度 都较大。
😅😅😅
There was a problem hiding this comment.
和 ant-timeline-item-content 并列放置一个 ant-timeline-item-label，根据 ant-timeline-item-[right/left] 来定位 label 的位置
There was a problem hiding this comment.
但是这个时候，tail head content 的位置 大小 都发生了变动 在一个ant-timeline-item-right 里，不太容易 进行2个定义吧
There was a problem hiding this comment.
@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个 遍历啊
There was a problem hiding this comment.
你 在上面说的 .some
是在每一个 item 去执行总的数组中去判断 是否 有一个有 label 吗？
这样 每一次 都执行个 some 不太好吧
There was a problem hiding this comment.
恩。现在的代码已经拿到了要渲染的 childrens
const truthyItems = timeLineItems.filter(item => !!item);再 some 一下
const isLabel = truthyItems.some(item => item.props.label !== undefined)之后吧样式设置下
classNames({ [`${prefixCls}-label`]: isLabel })There was a problem hiding this comment.
😂 嗯，那就行。。。
之前 一直 想规避 这个 2次的遍历，还以为你们不接受 2次 遍历呢
🤔 This is a ...
🔗 Related issue link
#17966
💡 Background and solution
📝 Changelog
stamp-left可将时间戳放在左侧，内容放在右侧。stamp-right可将时间戳放在右侧，内容放在左侧☑️ Self Check before Merge
View rendered components/timeline/demo/stamp.md
View rendered components/timeline/index.en-US.md
View rendered components/timeline/index.zh-CN.md