refactor: New Picker interactive #46685

zombieJ · 2023-12-28T13:03:23Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	【到 issue 中复制】
🇨🇳 Chinese	【到 issue 中复制】

Chinese

🔥 重构 DatePicker 组件
- ⚡️ 优化 disabledDate 检查逻辑，现在会提供 info.type 告知当前面板信息。
- 🆕 DatePicker 新增 multiple 支持多选能力。
- 🆕 新增配套 pickerValue、defaultPickerValue 属性用于受控管理展开面板所在日期。
  - defaultPickerValue 现在会在每次面板展开时都进行重置。
- 🐞 修复输入框功能按键会唤起弹出框的问题，现在只有在交互按键、以及输入内容变化时唤起。
- 🆕 新增 preserveInvalidOnBlur 属性用于无障碍时失去焦点需要保留输入内容的场景。
- 🆕 format 支持 align 属性，允许通过掩码模式输入内容。
- 🆕 支持 required 属性。
- 🆕 RangePicker 下的 id 属性支持分别设置 start 和 end 输入框的 id。
- 🆕 RangePicker 的 onFocus 和 onBlur 事件会额外提供一个 info.range 告知当前的焦点来自于哪个输入框。
- 🆕 时间面板支持 scrollOnChange 设置滚动时间时自动选择对应的时间。
- 🆕 添加 needConfirm 属性，允许设置需要确认、或者不确认的提交模式。
- 🆕 添加 cmponents 属性，允许自定义部分面板。
- 🆕 面板中所有的日期相关信息都会允许通过 locale 进行配置。
- 🆕 format 支持 LT、LTS 日期格式。
- 🆕 新增 minDate 和 maxDate 用于设置面板切换范围。
- 🆕 RangePicker 支持 order 属性。
- 🆕 DatePicker 支持 showWeek 属性。
- 🐞 通过输入框输入日期后失去焦点会提交变更，而不是丢失输入内容（即不再强制需要按下回车提交）。
- 🐞 修复 use12Hours 下，disabledTime 获取的 hour 也会被裁剪成 0~12 的问题。
- 🐞 修复某些交互下，禁用日期没有生效依然可以提交的问题。
- 🛠 allowClear 触发事件从 onMouseDown 切换为 onClick。
- 🛠 移除键盘对面板交互，它需要基于无障碍重新设计。
- 🛠 废弃 onKetDown 的 preventDefault 参数，请直接通过 event.preventDefault 进行调用。
- 💄 移除 RangePicker 的虚线样式，减少视觉干扰。
- 💄 移除 RangePicker 在选择开始或者结束时间时的禁用范围，优化交互体验。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

stackblitz · 2023-12-28T13:03:26Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2023-12-28T13:04:06Z

Visual Regression Report for PR #46685 Failed ❌

Target branch: feature (5f7323a)
View Full Report

image name	expected	actual	diff
date-picker-basic.png
date-picker-basic.css-var.png
date-picker-cell-render.png
date-picker-cell-render.css-var.png
date-picker-component-token.png
date-picker-component-token.css-var.png
date-picker-disabled-date.png
date-picker-disabled-date.css-var.png
date-picker-disabled.png
date-picker-disabled.css-var.png

Check Full Report for details

github-actions · 2023-12-28T13:04:15Z

socket-security · 2023-12-28T13:13:31Z

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
rc-picker	4.0.0-alpha.35	None	`+0`	885 kB

github-actions · 2023-12-28T13:14:44Z

size-limit report 📦

Path	Size
`./dist/antd.min.js`	332.51 KB (+1.47 KB 🔺)
`./dist/antd-with-locales.min.js`	378.5 KB (+1.53 KB 🔺)

codecov · 2023-12-28T13:19:08Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (5f7323a) 100.00% compared to head (4a467f9) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #46685   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          732       734    +2     
  Lines        12548     12531   -17     
  Branches      3291      3272   -19     
=========================================
- Hits         12548     12531   -17

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

components/calendar/generateCalendar.tsx

components/date-picker/__tests__/RangePicker.test.tsx

afc163 · 2024-01-11T10:27:21Z

先在 feature 吧所有浮层的 image test 都加上，这样这里能直接比较 diff，稳一点。

zombieJ · 2024-01-12T02:35:12Z

先在 feature 吧所有浮层的 image test 都加上，这样这里能直接比较 diff，稳一点。

直接展开浮层会叠在一起，要把每个 Demo 都做一遍就过于重复了。看起来要先去做一个浮层单独对比的能力。

github-actions · 2024-01-15T07:41:54Z

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

crazyair · 2024-01-15T07:42:11Z

components/calendar/__tests__/index.test.tsx

@@ -16,7 +19,7 @@ import Select from '../../select';
 import Header, { type CalendarHeaderProps } from '../Header';

 const ref: {
-  calendarProps?: PickerPanelProps<unknown>;
+  calendarProps?: PickerPanelProps<any>;


rc-picker 里的 PickerPanelProps 是不是 PickerPanelProps<T = any> 这个泛型是必填的吗

crazyair · 2024-01-15T07:42:51Z

components/date-picker/__tests__/RangePicker.test.tsx

@@ -30,7 +34,7 @@ describe('RangePicker', () => {
  it('should not throw error when value is reset to `[]`', () => {
    const birthday = dayjs('2000-01-01', 'YYYY-MM-DD');
    const wrapper1 = render(<RangePicker value={[birthday, birthday]} open />);
-    const wrapper2 = render(<RangePicker value={[] as unknown as null} open />);
+    const wrapper2 = render(<RangePicker value={[] as unknown as RangeValue<dayjs.Dayjs>} open />);


value 不能直接传 [] 吗

crazyair · 2024-01-15T07:45:06Z

components/select/style/multiple.ts

-          .add(token.controlPaddingHorizontal)
-          .equal(),
-      },
+      // [`


没有删掉

crazyair · 2024-01-15T07:46:02Z

components/date-picker/index.zh-CN.md

 ```

+注意：`align` 定义为 `5.13.0` 新增。


13 不是要改成 14 吗

afc163 · 2024-01-15T07:48:47Z

https://camo.githubusercontent.com/a56b724982e160b9a5ef0df0280cb6b3b25638812ddaa00aa3993404d0631ad5/68747470733a2f2f616e74642d76697375616c2d646966662e6f73732d636e2d7368616e676861692e616c6979756e63732e636f6d2f70722d34363638352f76697375616c52656772657373696f6e5265706f72742f696d616765732f626173652f646174652d7069636b65722d64697361626c65642d646174652e706e67
https://camo.githubusercontent.com/64e3610a92c4d5e26c3b761b84618f79aba9a35f801d738d46ceea7f27668d92/68747470733a2f2f616e74642d76697375616c2d646966662e6f73732d636e2d7368616e676861692e616c6979756e63732e636f6d2f70722d34363638352f76697375616c52656772657373696f6e5265706f72742f696d616765732f63757272656e742f646174652d7069636b65722d64697361626c65642d646174652e706e67

小时这一列的 disabled 颜色丢了。https://preview-46685-ant-design.surge.sh/components/date-picker-cn#components-date-picker-demo-disabled-date

afc163 · 2024-01-15T08:07:18Z

blur 输入框后浮层经常不会消失。

afc163 · 2024-01-15T08:10:52Z

还有 footer 的高度也不一致。

afc163 · 2024-01-15T08:16:23Z

maxDate、minDate、order、required 等属性貌似没有在 API 文档中出现。

maxDate、minDate 最好替换掉原来的 disabled 范围的演示。

zombieJ added 15 commits December 25, 2023 16:11

chore: init

3b6f4c1

chore: link picker

df6f95a

chore: move files

c16a6bc

chore: update style

3f91749

chore: update types

5e85082

test: update snapshot

fe59b45

test: update snapshot

bd765ea

test: update snapshot

31257f4

test: update snapshot

d8d2efc

test: update snapshot

3cd46cb

test: fix test case

bfa2adf

test: update snapshot

bdd5df4

test: update snapshot

56a297c

test: update snapshot

81ab39f

test: update snapshot

eaa0359

chore: merge feature

5c48371

zombieJ added 6 commits January 2, 2024 11:09

chore: clesn up useless types

4ea2405

chore: update types

72b51bb

chore: fix types

6faec7d

chore: fix types

2576570

chore: fix types

8e7007c

chore: fix types

d3dc3ae

crazyair reviewed Jan 2, 2024

View reviewed changes

components/calendar/generateCalendar.tsx Outdated Show resolved Hide resolved

crazyair reviewed Jan 2, 2024

View reviewed changes

components/date-picker/__tests__/RangePicker.test.tsx Outdated Show resolved Hide resolved

chore: fix ts

45aa76a

zombieJ marked this pull request as ready for review January 11, 2024 09:45

zombieJ added 2 commits January 12, 2024 10:13

fix: week style

0c0fdf8

docs: update dayjs note

16d6651

zombieJ added 8 commits January 12, 2024 13:50

Merge remote-tracking branch 'origin/feature' into picker

f1501ac

fix: style missing

1d6294d

chore: fix footer extra style missing

3964ec9

test: update snapshot

2f02ab6

Merge remote-tracking branch 'origin/feature' into picker

5f59ebe

test: update snapshot

8dbfe2e

test: update snapshot

b878930

test: update snapshot

4a467f9

li-jia-nan approved these changes Jan 15, 2024

View reviewed changes

zombieJ merged commit fe31458 into feature Jan 15, 2024
104 of 105 checks passed

zombieJ deleted the picker branch January 15, 2024 07:41

crazyair reviewed Jan 15, 2024

View reviewed changes

components/select/style/multiple.ts

.add(token.controlPaddingHorizontal)

.equal(),

},

// [`

Copy link

Member

crazyair Jan 15, 2024

Choose a reason for hiding this comment

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

没有删掉

crazyair reviewed Jan 15, 2024

View reviewed changes

components/date-picker/index.zh-CN.md

```

注意：`align` 定义为 `5.13.0` 新增。

Copy link

Member

crazyair Jan 15, 2024

Choose a reason for hiding this comment

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

13 不是要改成 14 吗

zombieJ restored the picker branch January 15, 2024 08:20

This was referenced Jan 15, 2024

Revert "refactor: New Picker interactive" #46981

Merged

feat: New Picker #46982

Merged

afc163 deleted the picker branch February 8, 2024 05:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: New Picker interactive #46685

refactor: New Picker interactive #46685

zombieJ commented Dec 28, 2023 •

edited

stackblitz bot commented Dec 28, 2023

github-actions bot commented Dec 28, 2023 •

edited

github-actions bot commented Dec 28, 2023 •

edited

socket-security bot commented Dec 28, 2023 •

edited

github-actions bot commented Dec 28, 2023 •

edited

codecov bot commented Dec 28, 2023 •

edited

afc163 commented Jan 11, 2024

zombieJ commented Jan 12, 2024

github-actions bot commented Jan 15, 2024

crazyair Jan 15, 2024

crazyair Jan 15, 2024

crazyair Jan 15, 2024

crazyair Jan 15, 2024

afc163 commented Jan 15, 2024 •

edited

afc163 commented Jan 15, 2024

afc163 commented Jan 15, 2024

afc163 commented Jan 15, 2024

refactor: New Picker interactive #46685

refactor: New Picker interactive #46685

Conversation

zombieJ commented Dec 28, 2023 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Chinese

☑️ Self-Check before Merge

stackblitz bot commented Dec 28, 2023

github-actions bot commented Dec 28, 2023 • edited

Visual Regression Report for PR #46685 Failed ❌

github-actions bot commented Dec 28, 2023 • edited

socket-security bot commented Dec 28, 2023 • edited

github-actions bot commented Dec 28, 2023 • edited

size-limit report 📦

codecov bot commented Dec 28, 2023 • edited

Codecov Report

afc163 commented Jan 11, 2024

zombieJ commented Jan 12, 2024

github-actions bot commented Jan 15, 2024

crazyair Jan 15, 2024

Choose a reason for hiding this comment

crazyair Jan 15, 2024

Choose a reason for hiding this comment

crazyair Jan 15, 2024

Choose a reason for hiding this comment

crazyair Jan 15, 2024

Choose a reason for hiding this comment

afc163 commented Jan 15, 2024 • edited

afc163 commented Jan 15, 2024

afc163 commented Jan 15, 2024

afc163 commented Jan 15, 2024

zombieJ commented Dec 28, 2023 •

edited

github-actions bot commented Dec 28, 2023 •

edited

github-actions bot commented Dec 28, 2023 •

edited

socket-security bot commented Dec 28, 2023 •

edited

github-actions bot commented Dec 28, 2023 •

edited

codecov bot commented Dec 28, 2023 •

edited

afc163 commented Jan 15, 2024 •

edited