refactor: datepicker #3023
refactor: datepicker #3023
Conversation
概览该 PR 对 DatePicker 和 Picker 相关组件进行了类型调整和重构，提升了类型安全性和组件模块化程度。主要改动包括：修改 confirm 函数参数类型、将内置接口拆分至独立类型文件、引入自定义 Hook 整合日期逻辑、调整日期边界为动态日期、更新文档中相关 API 的描述、以及在 Form 示例中新增 DatePicker 组件。同时，Picker 组件也通过移除内部类型定义和简化事件处理实现了代码的简洁化。 变更摘要
时序图sequenceDiagram
participant U as 用户
participant DP as DatePicker 组件
participant HC as handleConfirm / useDatePicker Hook
participant S as 状态管理
U->>DP: 触发日期选择
DP->>HC: 执行确认函数
HC->>S: 更新日期和描述状态
S-->>HC: 返回最新状态
HC-->>DP: 传递更新信息
DP-->>U: 刷新组件显示
可能相关的 PR
诗
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
3.x
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3023 +/- ##
=============================================
+ Coverage 85.92% 85.97% +0.04%
=============================================
Files 280 281 +1
Lines 18158 18251 +93
Branches 2734 2746 +12
=============================================
+ Hits 15603 15691 +88
- Misses 2550 2555 +5
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (13)
src/packages/datepicker/types.taro.ts (1)
1-18: 类型定义结构清晰，但属性排除较多DatePickerProps类型定义的结构和命名方式与picker组件保持一致，这是个良好的实践。通过排除原始组件中的特定属性，创建了一个更适合Taro环境的类型定义。
不过，从
pickerProps中排除了大量属性（defaultValue、title、onConfirm等8个属性），建议确认是否所有这些属性都必须排除，或者考虑添加注释说明排除这些属性的原因，以便其他开发者理解。可以考虑添加简短注释说明为什么需要排除这些特定属性：
export type DatePickerProps = Omit<DatePickerWebProps, 'pickerProps'> & { pickerProps: Partial< Omit< PickerProps, + // 排除这些属性是因为它们由DatePicker组件内部管理 | 'defaultValue' | 'threeDimensional' | 'title' | 'value' | 'onConfirm' | 'onClose' | 'onCancel' | 'onChange' > > }src/packages/form/demos/h5/demo7.tsx (1)
121-153: 在表单中集成 DatePicker 组件DatePicker 在表单中的集成实现得很好，包含了必要的处理逻辑：
- 使用
trigger="onConfirm"指定触发表单值更新的事件- 通过
getValueFromEvent正确地将日期字符串转换为 Date 对象- 设置了合理的
initialValue- 使用 Cell 组件提供良好的用户界面
建议考虑以下几点改进：
- 使用
toLocaleDateString()依赖于浏览器环境，可能导致不同地区显示格式不一致，考虑使用更可控的日期格式化方法- 考虑添加表单验证规则，例如日期范围限制
<Form.Item label="DatePicker" name="DatePicker" trigger="onConfirm" getValueFromEvent={(...args) => { return new Date(args[1].join('/')) }} onClick={(event, ref: any) => { ref.open() }} initialValue={new Date()} + rules={[{ required: true, message: '请选择日期' }]} > <DatePicker> {(value: any) => { return ( <Cell style={{ padding: 0, '--nutui-cell-divider-border-bottom': '0', }} className="nutui-cell--clickable" title={ value - ? new Date(value).toLocaleDateString() + ? `${new Date(value).getFullYear()}-${String(new Date(value).getMonth() + 1).padStart(2, '0')}-${String(new Date(value).getDate()).padStart(2, '0')}` : 'Please select' } extra={<ArrowRight />} align="center" /> ) }} </DatePicker> </Form.Item>src/packages/datepicker/index.taro.ts (2)
1-1: 架构改进：导入方式变更将DatePicker从命名导入改为默认导入，使导入方式更加规范和一致。这种改变表明组件的导出方式已经标准化，有助于统一代码库中的导入模式。
3-3: 架构改进：类型定义分离将DatePickerProps类型定义从组件文件移至专用的类型文件(./types.taro)是一个良好的架构决策。这样做能够提高代码的组织性，使类型定义更加集中和可维护，同时减轻了组件文件的负担。
src/packages/datepicker/index.ts (1)
3-3: Types properly separated from implementationThe
DatePickerPropstype is now imported from a dedicated types file, which follows good practice of separating types from component implementation.src/packages/datepicker/demos/taro/demo1.tsx (1)
37-51: 优化事件处理逻辑将确认操作封装到一个高阶函数中是一个良好的设计模式，可以很好地处理不同场景下的确认逻辑。但有一处需要注意：
if (setValue) { if (isEqual(values, ['2026', '02', '21'])) { - setValue('2026/03/22') - setDesc('2026年03月22日') + // 建议添加注释说明这个特殊日期判断的业务意义 + setValue('2026/03/22') + setDesc('2026年03月22日') } else { setValue(values.join('/')) setDesc(options.map((option) => option.label).join('')) }这段代码中有一个硬编码的日期判断，建议添加注释说明这个特殊逻辑的业务意图，或者如果只是示例代码，也应该说明这一点。
src/packages/datepicker/types.ts (1)
11-56: 全面的Props接口定义
DatePickerProps接口定义非常全面，包含了所有必要的属性和事件处理器。使用Omit排除从PickerProps继承的属性也很合理，避免了属性冲突。有几点建议：
- 对于
children?: any类型，建议使用更具体的React类型如React.ReactNode- 可以考虑为一些关键属性添加JSDoc注释，特别是像
filter和formatter这样的函数属性- 对于
BasicComponent继承的属性，确保在文档中也有相应的说明- children?: any + children?: React.ReactNodesrc/packages/datepicker/demos/h5/demo1.tsx (2)
37-51: 重复的特殊日期处理逻辑与Taro版本一样，这里也有特定日期的硬编码判断。建议将这些共享逻辑抽取到一个单独的工具函数中，以避免重复代码：
-if (isEqual(values, ['2026', '02', '21'])) { - setValue('2026/03/22') - setDesc('2026年03月22日') -} +// 抽取到单独的函数，例如： +if (isSpecialDate(values)) { + const { value, desc } = getSpecialDateMapping(values); + setValue(value) + setDesc(desc) +}考虑在两个平台之间共享这个函数，以减少重复代码。
66-69: 日期初始化方式使用
new Date(defaultValue1)来初始化日期是合理的，但要注意defaultValue1的格式（年-月-日）可能在某些浏览器中解析不一致。考虑使用更明确的日期创建方式：-defaultValue={new Date(defaultValue1)} +defaultValue={new Date(defaultValue1.replace(/-/g, '/'))}或者可以在
useDatePicker中直接返回Date对象而不是字符串。src/packages/datepicker/datepicker.tsx (3)
96-106: 为 open/close 方法添加单元测试可提高覆盖率
从静态分析来看，这些新增方法的测试还没有覆盖，建议添加简单测试，保证功能不被意外破坏。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 98-99: src/packages/datepicker/datepicker.tsx#L98-L99
Added lines #L98 - L99 were not covered by tests
[warning] 101-102: src/packages/datepicker/datepicker.tsx#L101-L102
Added lines #L101 - L102 were not covered by tests
133-133: setSelectedDate 的分支可补充测试
当新旧日期不相等时执行setSelectedDate，可考虑在单测中覆盖该分支，提升用例完整度。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 133-133: src/packages/datepicker/datepicker.tsx#L133
Added line #L133 was not covered by tests
139-141: handleCancel 中的回退逻辑值得测试
此处将innerDate重置为selectedDate，对用户的取消操作有直接影响，测试覆盖后能更好保障功能稳定。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 139-141: src/packages/datepicker/datepicker.tsx#L139-L141
Added lines #L139 - L141 were not covered by testssrc/packages/datepicker/utils.ts (1)
243-244: 为边界回退和特殊类型分支添加测试
formatValue回退到startDate，以及month-day/year-month/datehour等分支逻辑在测试覆盖层面尚有不足。如需全面保障，可以为此等场景增添单测，防止潜在回归。Also applies to: 283-284, 287-288, 314-315
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 243-244: src/packages/datepicker/utils.ts#L243-L244
Added lines #L243 - L244 were not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
src/packages/calendar/demos/h5/demo6.tsx(1 hunks)src/packages/calendar/demos/taro/demo6.tsx(1 hunks)src/packages/datepicker/__test__/datepicker.spec.tsx(1 hunks)src/packages/datepicker/datepicker.taro.tsx(5 hunks)src/packages/datepicker/datepicker.tsx(5 hunks)src/packages/datepicker/demos/h5/demo1.tsx(3 hunks)src/packages/datepicker/demos/h5/demo2.tsx(1 hunks)src/packages/datepicker/demos/h5/demo8.tsx(2 hunks)src/packages/datepicker/demos/taro/demo1.tsx(3 hunks)src/packages/datepicker/demos/taro/demo2.tsx(1 hunks)src/packages/datepicker/doc.en-US.md(1 hunks)src/packages/datepicker/doc.md(1 hunks)src/packages/datepicker/doc.taro.md(1 hunks)src/packages/datepicker/doc.zh-TW.md(1 hunks)src/packages/datepicker/index.taro.ts(1 hunks)src/packages/datepicker/index.ts(1 hunks)src/packages/datepicker/types.taro.ts(1 hunks)src/packages/datepicker/types.ts(1 hunks)src/packages/datepicker/utils.ts(1 hunks)src/packages/form/demos/h5/demo7.tsx(2 hunks)src/packages/form/demos/taro/demo7.tsx(2 hunks)src/packages/picker/__tests__/picker.spec.tsx(2 hunks)src/packages/picker/picker.taro.tsx(3 hunks)src/packages/picker/picker.tsx(1 hunks)src/packages/picker/types.taro.ts(1 hunks)src/packages/picker/types.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
src/packages/picker/__tests__/picker.spec.tsx (1)
Learnt from: xiaoyatong
PR: jdf2e/nutui-react#2990
File: src/packages/pickerview/__test__/pickerview.spec.tsx:0-0
Timestamp: 2025-02-25T02:21:32.906Z
Learning: In React component tests, avoid using setTimeout with fixed delays. Instead, use act() to wrap async state updates and waitFor() for assertions, which makes tests more stable and reliable.
🪛 GitHub Check: codecov/patch
src/packages/datepicker/datepicker.tsx
[warning] 98-99: src/packages/datepicker/datepicker.tsx#L98-L99
Added lines #L98 - L99 were not covered by tests
[warning] 101-102: src/packages/datepicker/datepicker.tsx#L101-L102
Added lines #L101 - L102 were not covered by tests
[warning] 133-133: src/packages/datepicker/datepicker.tsx#L133
Added line #L133 was not covered by tests
[warning] 139-141: src/packages/datepicker/datepicker.tsx#L139-L141
Added lines #L139 - L141 were not covered by tests
src/packages/datepicker/utils.ts
[warning] 115-115: src/packages/datepicker/utils.ts#L115
Added line #L115 was not covered by tests
[warning] 147-147: src/packages/datepicker/utils.ts#L147
Added line #L147 was not covered by tests
[warning] 243-244: src/packages/datepicker/utils.ts#L243-L244
Added lines #L243 - L244 were not covered by tests
[warning] 283-284: src/packages/datepicker/utils.ts#L283-L284
Added lines #L283 - L284 were not covered by tests
[warning] 287-288: src/packages/datepicker/utils.ts#L287-L288
Added lines #L287 - L288 were not covered by tests
[warning] 314-315: src/packages/datepicker/utils.ts#L314-L315
Added lines #L314 - L315 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (39)
src/packages/picker/types.taro.ts (1)
1-8: 类型定义结构清晰、逻辑合理这个新文件很好地分离了Taro环境下的Picker组件类型定义。通过使用TypeScript的类型组合功能，从Web版本的类型定义中派生并自定义了Taro版本的属性，特别是对
popupProps进行了专门处理，排除了某些特定属性。这种模式使代码更加模块化和易于维护。src/packages/datepicker/demos/h5/demo2.tsx (1)
29-31: 动态日期限制更新将固定日期更改为动态日期是一个很好的改进。这使得示例更加灵活，并且在未来不会过时。使用
defaultValue变量保持日期一致性也是一个良好的实践。建议考虑添加注释说明这些日期的用途，特别是为什么结束日期被设置为当年的7月1日。
src/packages/datepicker/doc.en-US.md (1)
92-92:✅ Verification successful
filter 属性类型签名更新
将 filter 属性的类型从处理单个选项
(type: string, option: PickerOption) => PickerOption[]更改为处理选项集合(type: string, options: PickerOptions) => PickerOptions是一个有意义的改进。这样可以让开发者更灵活地过滤多个选项。确保在组件实现中相应地更新了此函数的调用方式，并在各语言版本的文档中保持一致。
🏁 Script executed:
#!/bin/bash # 检查其他语言文档中 filter 属性的定义是否保持一致 echo "检查中文文档:" rg -A 1 "filter.*PickerOptions" src/packages/datepicker/doc.md || echo "未找到匹配项" echo "\n检查繁体中文文档:" rg -A 1 "filter.*PickerOptions" src/packages/datepicker/doc.zh-TW.md || echo "未找到匹配项" echo "\n检查 Taro 文档:" rg -A 1 "filter.*PickerOptions" src/packages/datepicker/doc.taro.md || echo "未找到匹配项"Length of output: 789
确认 filter 属性签名更新一致性
经过验证，所有语言版本的文档（中文、繁体中文和 Taro 文档）中 filter 属性的签名均已更新为
(type: string, options: PickerOptions) => PickerOptions。请确保组件实现中对该函数的调用方式也同步更新，以保持整体一致性。
- 中文文档、繁体中文文档和 Taro 文档均显示更新后的签名。
- 英文文档中的描述与预期一致。
src/packages/datepicker/__test__/datepicker.spec.tsx (1)
4-4:✅ Verification successful
导入语句更新
DatePicker 组件的导入方式从命名导入
import { DatePicker } from '../datepicker'更改为默认导入import DatePicker from '../datepicker'，这表明组件的导出方式已更改。确保 DatePicker 组件在其源文件中确实使用了
export default导出，并且所有导入该组件的地方都已相应更新。
🏁 Script executed:
#!/bin/bash # 检查 DatePicker 组件的导出方式和其他导入该组件的文件 echo "检查 DatePicker 组件的导出方式:" rg -A 3 "export.*default.*DatePicker" src/packages/datepicker/datepicker.tsx || echo "未找到默认导出" echo "\n检查可能需要更新的其他导入:" rg "import \{ DatePicker \} from .*datepicker" --type ts --type tsx || echo "未找到使用命名导入的文件"Length of output: 468
导入验证通过：默认导入方式已正确应用
- 已验证
src/packages/datepicker/datepicker.tsx中 DatePicker 组件使用了export default DatePicker导出。- 搜索中未发现任何文件仍使用
{ DatePicker }命名导入。请确保项目中其他引用 DatePicker 的位置均采用默认导入方式。
src/packages/form/demos/h5/demo7.tsx (1)
15-15: 添加 DatePicker 导入在导入列表中添加 DatePicker 组件，为后续在表单中使用做准备。
src/packages/datepicker/demos/taro/demo2.tsx (1)
27-29: 改进：更动态地设置日期范围修改后的代码使用当前日期作为起始日期，并设置当年7月1日作为结束日期，这比之前使用固定日期更加灵活。这种动态设置日期的方式有利于组件的长期维护，因为它会随着时间的推移自动调整，而不会因为固定日期过时而需要频繁更新代码。
src/packages/datepicker/demos/h5/demo8.tsx (3)
16-16: 添加了时间部分在日期字符串中添加了"06:00"时间部分，使日期时间更加完整。
18-22: 本地化：改进日期显示格式将日期显示格式更改为中文格式（年月日时），提高了组件对中文用户的友好度。这种本地化的改进使界面更易于中国用户理解和使用。
55-55: 标题更新以匹配功能将Cell标题从"选择时分秒"更改为"选择年月日时"，使其与实际功能保持一致。标题应准确反映用户将执行的操作，这个更改提高了用户界面的清晰度和一致性。
src/packages/form/demos/taro/demo7.tsx (2)
15-15: 导入DatePicker组件在导入列表中添加DatePicker组件，为后续在表单中使用该组件做准备。
121-153: 功能增强：表单中集成DatePicker在Form组件中添加了DatePicker的集成示例，展示了如何正确配置DatePicker与表单交互。这个示例演示了几个关键点：
- 使用
trigger="onConfirm"指定触发表单值更新的事件- 通过
getValueFromEvent将选择的日期值转换为Date对象- 实现
onClick处理程序打开DatePicker- 使用render props模式自定义显示Cell
这是一个很好的实现示例，对于理解如何在表单中正确使用DatePicker非常有价值。
src/packages/datepicker/doc.zh-TW.md (1)
102-102: 接口签名更新正确
filter属性的类型签名从原来的(type: string, option: PickerOption) => PickerOption[]更改为(type: string, options: PickerOptions) => PickerOptions，这表明过滤函数现在处理的是整个选项集合而不是单个选项，这是一个合理的改进。src/packages/picker/__tests__/picker.spec.tsx (2)
5-5: Import statement correctly addedThe
PickerOptionsimport from the pickerview package has been correctly added to support the type changes in this file.
17-17: Type modification correctly aligned with component changesThe
childrenproperty type has been updated fromPickerOption[]toPickerOptions, which aligns with the overall refactoring approach for the picker components.src/packages/datepicker/index.ts (1)
1-1: Default import pattern adopted correctlyChanged from named import to default import for the DatePicker component.
src/packages/datepicker/doc.md (2)
102-102: 接口签名更新符合重构目标
filter属性的类型签名从(type: string, option: PickerOption) => PickerOption[]更改为(type: string, options: PickerOptions) => PickerOptions，与组件实现变更保持一致。此变更使过滤函数能够处理整个选项集合，而不仅仅是单个选项。
104-107:✅ Verification successful
确认文档保留了事件处理程序
注意：文档中保留了
onConfirm、onCancel、onClose和onChange属性的说明，但根据 AI 摘要，这些属性已从组件的 API 中移除。请确认这些事件处理程序是否仍然存在于组件实现中。
🏁 Script executed:
#!/bin/bash # 检查 DatePicker 组件实现中是否仍然存在这些事件处理程序 # 搜索 DatePickerProps 定义中的事件处理程序 rg -A2 -B2 "onConfirm|onCancel|onClose|onChange" --type=typescript src/packages/datepicker/types.ts echo "-------------------" # 搜索 DatePicker 组件实现中的事件处理程序使用 rg -A2 -B2 "onConfirm|onCancel|onClose|onChange" --type=typescript src/packages/datepicker/datepicker.tsxLength of output: 326
🏁 Script executed:
#!/bin/bash # 为避免 "--type=typescript" 导致的不识别错误，直接搜索相关关键词以确认事件处理程序是否存在 echo "检查 src/packages/datepicker/types.ts 中的事件定义：" rg -A2 -B2 "onConfirm|onCancel|onClose|onChange" src/packages/datepicker/types.ts || echo "在 types.ts 中未找到匹配项" echo "-------------------" echo "检查 src/packages/datepicker/datepicker.tsx 中的事件引用：" rg -A2 -B2 "onConfirm|onCancel|onClose|onChange" src/packages/datepicker/datepicker.tsx || echo "在 datepicker.tsx 中未找到匹配项"Length of output: 1731
确认事件处理程序依旧存在
经过核查，发现在文件
src/packages/datepicker/types.ts中，onConfirm、onCancel、onClose和onChange均有相应的类型定义，而在src/packages/datepicker/datepicker.tsx中也有对应的事件调用。文档中保留这部分说明与实际实现一致，无需修改。src/packages/picker/picker.taro.tsx (5)
17-17: 导入 Popup 组件的方式更直观此改动直接导入
Popup组件，移除了对PopupProps的额外依赖，简化了使用方式。
22-22: 统一使用ComponentDefaults采用
ComponentDefaults可以统一组件的默认属性，减少重复代码并提高可维护性。
24-24: 从types.taro引入PickerProps在多端(包括 Taro)场景下，将
PickerProps拆分到独立的types.taro可简化跨平台维护，避免重复定义。
143-143: 显式声明事件类型，提升类型安全在
onClick中显式声明参数类型，可提高可读性并减少运行时错误。
153-153: 与取消事件一致，对确认事件也进行类型注解同理为
onClick回调添加事件类型声明，增强一致性。src/packages/picker/picker.tsx (3)
16-16: 直接导入 Popup 组件从
popup/index直接导入有助于简化依赖关系，减少对PopupProps的冗余使用。
21-21: 引入ComponentDefaults统一默认属性使用公共的
ComponentDefaults集中管理默认属性，避免重复定义并保持风格一致。
22-22: 合并导入PickerActions,PickerProps,PickerRef从
./types一次性导入所有相关类型，提升可读性与可维护性。src/packages/picker/types.ts (2)
1-8: 针对 Picker 依赖的必要类型做统一导入将
PopupProps,BasicComponent, 以及与 Picker 相关的类型集中导入，明确依赖关系且利于后续维护。
17-42: 新增PickerProps接口结构清晰且易于扩展此处定义的
PickerProps接口整合了常见的可配置参数，并将与PopupProps的冲突属性进行适当剔除，接口在使用上更灵活、可读性更高。src/packages/datepicker/demos/taro/demo1.tsx (1)
10-21: 良好的抽象和代码复用！将日期处理逻辑抽象到自定义Hook中是一个很好的实践，这样可以在多个组件中复用这段逻辑。
useDatePicker提供了统一的日期格式化和默认值处理，大大简化了组件内部的逻辑。src/packages/datepicker/types.ts (1)
5-9: 良好的类型定义为组件定义明确的Ref类型和Actions接口是良好的做法，这有助于TypeScript用户理解如何正确使用组件的命令式API。
src/packages/datepicker/demos/h5/demo1.tsx (1)
10-21: 代码复用一致性很好地在H5版本中应用了相同的
useDatePickerHook，保持了代码的一致性。这种方式使维护更加简单，因为两个平台版本共享了相同的逻辑结构。src/packages/datepicker/datepicker.taro.tsx (6)
1-6: 导入 React Hook 并使用 ForwardRefRenderFunction 的方式很好
此段代码运用ForwardRefRenderFunction来创建可透传ref的函数式组件，便于外部调用者控制内部逻辑或方法，目前看不到明显问题。
38-41: InternalPicker 函数的声明方式清晰可读
通过ForwardRefRenderFunction将DatePickerRef和Partial<DatePickerProps>结合，令组件的类型定义更灵活且清晰。
84-90: 建议确认数值回退逻辑
当props.value或props.defaultValue为无效日期时，会回退到startDate。在部分业务场景下，这种回退方式或需额外确认，避免带来用户混淆。
107-136: 日期比较逻辑实现得当
handleDateComparison与handleConfirmDateComparison能有效校验并更新选中日期，同时重用formatValue函数来确保所选日期在合规区间内。实现思路合理、简洁。
224-245: 基于 children 回调与 Picker 条件渲染的做法值得肯定
当children为函数时可灵活定制渲染，且仅在pickerOptions.length大于 0 时才渲染<Picker>，很好地避免了无用渲染。
248-251: 通过 forwardRef 将功能暴露给外部
此处利用React.forwardRef将组件交由外部获取open/close等方法，满足更灵活的使用需求。src/packages/datepicker/datepicker.tsx (2)
1-6: React Hook 与 ForwardRefRenderFunction 导入保持一致
整体导入与上一文件类似，保持了组件的跨平台一致性。无明显问题。
36-39: InternalPicker 声明兼容性良好
与 Taro 版本的写法保持同步，类型签名相同，不会对现有使用方式产生破坏性影响。src/packages/datepicker/utils.ts (1)
66-66: 请确认秒数与分钟使用相同数值是否合乎预期
此处\${type}Seconds`: minute将秒数设置与分钟相同，若要精确区分秒与分钟，可能需要改为boundary.getSeconds()` 或其他策略。可考虑如下修正示例：
- [`${type}Seconds`]: minute, + [`${type}Seconds`]: boundary.getSeconds(),
| defaultValue={new Date(defaultValue1)} | ||
| showChinese | ||
| onCancel={() => setShow1(false)} | ||
| onConfirm={(options, values) => { | ||
| setShow1(false) | ||
| confirm(values, options) | ||
| console.log('onconfirm') | ||
| }} | ||
| onClose={() => setShow1(false)} | ||
| onConfirm={handleConfirm(setDesc1)} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
事件命名更新
注意到组件接口从使用onCancel改为了onClose，这是一个潜在的破坏性更改。确保所有使用该组件的地方都已更新。
🏁 Script executed:
#!/bin/bash
# 检查是否有组件仍在使用旧的onCancel属性
rg "onCancel" --type=tsx --type=jsxLength of output: 63
请修改验证脚本以确保旧属性 onCancel 已完全移除
当前提供的命令因对 tsx 类型不识别而无法判断是否还有旧属性的使用。请将验证命令调整为下面的脚本，并手动确认输出，如有相关引用再统一修正所有组件调用处：
- 确认以下两点：
- 组件接口已从
onCancel更新为onClose； - 所有使用该组件的地方均已同步更新，且没有遗漏旧的
onCancel用法。
- 组件接口已从
请运行上述脚本并检查输出，确保未发现任何旧的 onCancel 引用。如果输出为空，说明更新已到位；如有输出，请相应调整使用该组件的代码。
🏁 Script executed:
[run_scripts]
#!/bin/bash
# 新的验证脚本：在所有 tsx 和 jsx 文件中搜索 onCancel
rg "onCancel" -g "*.tsx" -g "*.jsx"Length of output: 7160
请更新所有组件中 onCancel 的引用，确保统一使用 onClose
经过验证，在文件 src/packages/datepicker/demos/taro/demo1.tsx 中已将属性更新为 onClose，但通过脚本搜查代码库的结果显示，在多个组件中（例如 actionsheet、datepicker、dialog、avatarcropper、picker、shortpassword 等）仍存在对 onCancel 的调用。这可能引起接口不一致和潜在破坏性问题。
请检查并确认以下内容：
- 确保所有使用该组件的地方（包括但不限于以下文件）已将
onCancel更新为onClose：src/packages/actionsheet/actionsheet.taro.tsx及相关 demo 文件src/packages/datepicker/datepicker.taro.tsx与src/packages/datepicker/datepicker.tsxsrc/packages/dialog/confirm.tsx、src/packages/dialog/dialog.taro.tsx、src/packages/dialog/dialog.tsx等src/packages/avatarcropper/avatarcropper.taro.tsx与src/packages/avatarcropper/avatarcropper.tsx- 以及其它相关文件中对
onCancel的引用
请逐一核实这些调用，根据组件接口最新的设计（仅支持 onClose）进行统一更新，确保所有调用逻辑不会因接口的不一致而导致错误。
| @@ -99,7 +99,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type | |||
| | endDate | 结束日期 | `Date` | `十年后` | | |||
| | formatter | 选项格式化函数 | `(type: string, option: PickerOption) => PickerOption` | `-` | | |||
| | pickerProps | 透传picker属性 | `object` | `-` | | |||
| | filter | 选项过滤函数 | `(type: string, option: PickerOption) => PickerOption[]` | `-` | | |||
| | filter | 选项过滤函数 | `(type: string, options: PickerOptions) => PickerOptions` | `-` | | |||
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
API 参数类型变更
filter属性的类型发生了变化，从处理单个选项到处理选项数组。这是一个重要的API变更，确保在文档中明确说明这一变化，以及如何迁移现有代码。
旧类型: (type: string, option: PickerOption) => PickerOption[]
新类型: (type: string, options: PickerOptions) => PickerOptions
🏁 Script executed:
#!/bin/bash
# 检查是否有组件使用了旧的filter属性格式
rg "filter\s*=\s*{\s*\(\s*type\s*,\s*option\s*\)" --type=tsx --type=jsxLength of output: 214
文档更新建议：明确说明 filter 属性 API 类型变更
目前 src/packages/datepicker/doc.taro.md 中的示例未体现出旧代码的移除或替换。请更新文档，确保包含以下要点：
-
API 变更说明
- 旧类型：
(type: string, option: PickerOption) => PickerOption[] - 新类型：
(type: string, options: PickerOptions) => PickerOptions
- 旧类型：
-
迁移指导
在文档中增加详细指南，帮助用户从旧 API 过渡到新 API。
另外，为确保代码库中没有残留的旧格式使用，请运行上面的验证脚本检查组件中是否还有旧的 filter 属性定义。如果验证命令返回匹配内容，请逐一修改对应组件以完全迁移至新 API。
---
🏁 Script executed:
```shell
[run_scripts]
#!/bin/bash
# 使用正确转义的正则表达式查找使用旧的 filter 属性格式的代码
rg -P "filter\\s*=\\s*\\{\\s*\\(\\s*type\\s*,\\s*option\\s*\\)" --type=tsx --type=jsx
Length of output: 227
请更新文档说明 filter 属性的 API 参数类型变更
- 文档中应清晰描述此次 API 变更：由旧的
(type: string, option: PickerOption) => PickerOption[]变更为新的(type: string, options: PickerOptions) => PickerOptions。 - 补充迁移指导，帮助用户完成从旧类型到新类型的代码转换。
- 请使用上面的验证脚本确认代码库中没有残留使用旧格式的实例（如有发现，请一并修改）。
🏁 Script executed:
[run_scripts]
#!/bin/bash
# 使用正确转义并指定文件扩展名的正则表达式查找旧的 filter 属性格式的代码
rg -P "filter\\s*=\\s*\\{\\s*\\(\\s*type\\s*,\\s*option\\s*\\)" -g "*.tsx" -g "*.jsx"Length of output: 199
请更新文档以准确反映 API 参数类型变更
-
类型说明更新
旧类型:(type: string, option: PickerOption) => PickerOption[]
新类型:(type: string, options: PickerOptions) => PickerOptions -
文档示例补充
当前文档示例未展示旧代码的移除或替换，建议增加详细的迁移指导，帮助用户从旧 API 过渡到新 API。 -
验证建议
虽然自动化搜索未检测到代码库中存在旧格式filter属性的使用，但请手动核查确保不存在遗漏情况。
| formatter: (type: string, option: PickerOption) => PickerOption | ||
| filter: (type: string, options: PickerOptions) => PickerOptions | ||
| onClose: () => void | ||
| onCancel: () => void | ||
| onConfirm: ( | ||
| selectedOptions: PickerOptions, | ||
| selectedValue: PickerValue[] | ||
| ) => void |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
确保事件处理器类型匹配实际使用
确保这些事件处理器的类型与组件实际实现匹配，尤其是onClose和onCancel方法。根据文档变更，似乎这些事件处理器已从公共API中移除，但在类型定义中仍然存在。需要明确这些方法是否仍然是公共API的一部分。
🏁 Script executed:
#!/bin/bash
# 检查DatePicker组件内部对这些事件处理器的使用
rg "(onClose|onCancel|onConfirm)" src/packages/datepicker/datepicker.tsxLength of output: 289
请检查事件处理器类型定义与组件实际调用方式的一致性
经验证，在 src/packages/datepicker/datepicker.tsx 中，onClose、onCancel 和 onConfirm 均被调用，并且使用了可选链运算符（例如 onClose?.()），这表明它们在实际使用时可能是可选的。请确认这些处理器是否应继续作为公共 API 保留，并根据下列情况进行相应调整：
- 如果继续保留，请将
src/packages/datepicker/types.ts中的事件处理器类型修改为可选属性（例如改为onClose?: () => void），以与组件使用方式匹配。 - 如果计划从公共 API 中移除，则须同时更新类型定义和组件实现，确保不再传递或调用这些方法。
| @@ -32,14 +38,14 @@ const Demo6 = () => { | |||
| const dateArr = [...[chooseData[0][3], chooseData[1][3]]] | |||
| setDate([...dateArr]) | |||
| } | |||
| const confirm = (values: (string | number)[], options: any[]) => { | |||
| const confirm = (values: PickerValue[], options: any[]) => { | |||
There was a problem hiding this comment.
可以给 options 的 类型改一下
已修改
| @@ -1,4 +1,4 @@ | |||
| import { DatePicker } from './datepicker.taro' | |||
| import DatePicker from './datepicker' | |||
| import { PickerProps } from '@/packages/picker/types.taro' | ||
| import { DatePickerProps as DatePickerWebProps } from './types' | ||
|
|
||
| export type DatePickerProps = Omit<DatePickerWebProps, 'pickerProps'> & { |
There was a problem hiding this comment.
这里是因为popup有一个事件的ts类型是区分taro和非taro的，所以透传popupProps需要区分
已修改，应该是因为index.taro 导出的文件不对造成的 |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
useDatePicker，简化日期处理逻辑。更新
PickerOption接口中的children属性类型，以支持更复杂的选项结构。文档
filter属性的类型签名，反映了参数和返回值的变化。