refactor: Semantic structure #927
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更重构了日期选择器组件的样式和类名处理方式，采用了更具语义化的结构。引入了 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Picker
participant useSemantic
participant Context
participant SubComponent
User->>Picker: 传递 classNames/styles/rootClassName
Picker->>useSemantic: 合并/填充 classNames/styles
useSemantic-->>Picker: 返回 mergedClassNames/mergedStyles
Picker->>Context: 通过 context 提供 mergedClassNames/mergedStyles
SubComponent->>Context: 获取 mergedClassNames/mergedStyles
SubComponent->>SubComponent: 应用样式和类名
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
docs/examples/basic.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
src/PickerInput/Popup/Footer.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
src/PickerInput/Selector/Icon.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #927 +/- ##
=======================================
Coverage 98.79% 98.80%
=======================================
Files 64 65 +1
Lines 2656 2669 +13
Branches 740 742 +2
=======================================
+ Hits 2624 2637 +13
Misses 29 29
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/PickerPanel/context.ts (1)
61-62: 增加 TODO 注释标记潜在改进点添加了 TODO 注释，指出当前从 props 获取样式的方式不够理想，应当迁移到
SharedPanelContext。建议按照 TODO 完成这项改进，使样式管理更加一致。建议在后续迭代中实现此 TODO，将所有样式属性完全迁移到
SharedPanelContext中，以确保一致的样式管理模式。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
docs/examples/basic.tsx(1 hunks)src/PickerInput/Popup/Footer.tsx(4 hunks)src/PickerInput/RangePicker.tsx(8 hunks)src/PickerInput/Selector/Icon.tsx(2 hunks)src/PickerInput/Selector/Input.tsx(4 hunks)src/PickerInput/Selector/RangeSelector.tsx(4 hunks)src/PickerInput/Selector/SingleSelector/index.tsx(4 hunks)src/PickerInput/SinglePicker.tsx(8 hunks)src/PickerInput/context.tsx(2 hunks)src/PickerPanel/PanelBody.tsx(6 hunks)src/PickerPanel/PanelHeader.tsx(6 hunks)src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx(3 hunks)src/PickerPanel/TimePanel/TimePanelBody/index.tsx(4 hunks)src/PickerPanel/context.ts(5 hunks)src/PickerPanel/index.tsx(4 hunks)src/hooks/useSemantic.ts(1 hunks)src/interface.tsx(2 hunks)tests/picker.spec.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (8)
src/PickerInput/Selector/RangeSelector.tsx (2)
docs/examples/time.tsx (1)
div(17-58)docs/examples/debug.tsx (1)
div(45-110)
src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx (1)
src/PickerPanel/context.ts (1)
usePanelContext(50-52)
src/PickerInput/context.tsx (1)
src/hooks/useSemantic.ts (2)
FilledClassNames(8-10)FilledStyles(12-14)
src/PickerPanel/index.tsx (1)
src/PickerPanel/context.ts (2)
PickerHackContext(132-132)SharedPanelContext(10-10)
src/PickerPanel/TimePanel/TimePanelBody/index.tsx (2)
src/PickerPanel/context.ts (1)
PickerHackContext(132-132)docs/examples/time.tsx (1)
div(17-58)
src/hooks/useSemantic.ts (1)
src/interface.tsx (1)
SharedPickerProps(318-449)
src/PickerInput/RangePicker.tsx (1)
src/hooks/useSemantic.ts (1)
useSemantic(19-36)
src/PickerPanel/context.ts (1)
src/hooks/useSemantic.ts (2)
FilledPanelClassNames(4-4)FilledPanelStyles(6-6)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test / react component workflow
🔇 Additional comments (81)
src/hooks/useSemantic.ts (1)
1-36: 优雅的实现了语义化结构的样式处理这个新的
useSemantic钩子函数很好地实现了对classNames和styles属性的规范化，确保popup属性始终存在。使用useMemo来优化性能也是很好的做法。推荐添加几个使用示例到注释中，以便其他开发者更容易理解如何使用这个钩子。
src/PickerInput/Selector/SingleSelector/index.tsx (4)
1-1: 导入别名统一为 cls将
classnames包的导入别名从classNames改为cls有助于统一代码风格，避免与组件属性命名冲突。
113-113: 简化上下文解构直接使用
classNames而不是重命名为selectorClassNames，简化了代码并保持了一致性。
204-214: 使用 cls 替代 classNames 函数统一使用
cls函数组合类名，保持了代码风格的一致性。
229-229: 更新类名组合逻辑直接使用
classNames.prefix替代之前的变量名，与整体重构保持一致。docs/examples/basic.tsx (1)
54-63: 示例中添加了新的样式属性很好地展示了新的样式自定义能力，包括：
rootClassName用于根节点className作为普通类名- 结构化的
classNames对象这个示例对于用户理解如何使用新的语义化样式结构非常有帮助。
src/PickerInput/Selector/RangeSelector.tsx (4)
1-1: 统一导入别名为 cls将
classnames包的导入别名从classNames改为cls，与项目其他部分保持一致。
124-124: 简化上下文解构直接使用
classNames而不是使用别名，简化了代码并提高了可读性。
214-224: 使用 cls 替代 classNames 函数统一使用
cls函数来组合类名，保持了代码风格的一致性。
242-242: 更新前缀类名组合逻辑使用
cls函数和直接访问classNames.prefix，与整体重构方向一致。src/PickerInput/Selector/Icon.tsx (3)
3-3: 引入命名更改以提高一致性将
classnames的导入别名从classNames更改为cls，使其与项目中其他 picker 组件保持一致。这样有助于维护代码风格的统一性。
12-12: 上下文解构更新从
PickerContext直接解构classNames和styles，而不是使用别名，简化了代码并与语义化样式重构保持一致。
16-17: 更新样式和类名的应用方式使用
cls和直接访问classNames.suffix与styles.suffix，这表明这些属性现在被保证存在（通过useSemantic钩子填充）。这种模式与整个重构中的语义化样式处理方式保持一致。src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx (3)
1-1: 更新导入以支持语义化结构将
classnames导入别名从classNames更改为cls，并使用usePanelContext钩子统一上下文的获取方式，移除了之前的PickerHackContext使用。这种改进使代码更简洁且结构更清晰。Also applies to: 4-4
35-35: 统一上下文消费方式通过
usePanelContext解构获取classNames和styles，代替之前分开使用PickerHackContext的方式。这种变化简化了组件的上下文依赖，使代码更易于理解和维护。
106-107: 更新样式和类名的应用方式将样式属性从
styles?.popupItem更改为styles.item，将类名构造从使用classNames与pickerClassNames?.popupItem结合改为使用cls与classNames.item结合。这种更新统一了样式和类名处理的命名约定，并确保了类型安全。src/PickerInput/context.tsx (2)
3-4: 更新类型导入以支持语义化结构移除了
SemanticStructure的导入，添加了FilledClassNames和FilledStyles类型的导入。这些类型提供了更精确的类型定义，支持组件的语义化样式结构。
13-14: 更新上下文属性类型将
classNames和styles属性从可选的、以SemanticStructure为键的部分记录更改为必需的、类型为FilledClassNames和FilledStyles的属性。这种变化确保了这些属性始终存在，并使用更具体的类型，增强了类型安全性。这与通过
useSemantic钩子集中管理和标准化样式的更广泛重构相符。src/PickerInput/Popup/Footer.tsx (4)
1-1: 引入命名更改以提高一致性将
classnames的导入别名从classNames更改为cls，使其与项目中其他 picker 组件保持一致。这样有助于维护代码风格的统一性。
45-51: 扩展上下文解构扩展
PickerContext的解构，除现有的prefixCls、locale和button外，还包括classNames和styles属性。这使组件能够访问通过上下文提供的样式信息，与语义化样式结构保持一致。
79-79: 更新类名构造函数将类名构造从
classNames更改为cls，保持与项目中其他组件的一致性。
110-113: 添加语义化样式支持在根 footer
<div>上合并默认的 footer 类名${prefixCls}-footer与classNames.popup.footer，并应用来自styles.popup.footer的内联样式。这种更新使组件能够支持动态样式和类名组合，与引入的语义化样式方法一致。src/PickerInput/Selector/Input.tsx (4)
1-1: 将 classnames 库的导入命名从 classNames 改为 cls为了保持整个代码库的一致性，将 classnames 库的导入别名统一修改为
cls。这种命名约定更简洁，同时避免与从上下文中提取的classNames属性混淆。
76-80: 优化上下文属性的解构提取从
PickerContext中解构出的classNames属性替代了原来的inputClassNames，使组件属性命名更加语义化和一致。这符合整体的语义化结构重构目标。
385-394: 使用 cls 函数合并类名将原来使用
classNames函数替换为cls函数来合并类名，保持了一致的命名约定，使代码更加清晰。
407-408: 将样式责任从包装器转移到输入元素通过明确地将
className={classNames.input}和style={styles.input}添加到内部 input 组件，将样式应用责任从外部包装器 div 转移到实际的输入元素上。这种方式更符合语义化结构，使样式应用更加精确和有意义。src/PickerPanel/PanelHeader.tsx (4)
1-1: 将 classnames 库的导入命名从 classNames 改为 cls为了保持整个代码库的命名一致性，将 classnames 库的导入别名统一修改为
cls。这种修改使得代码库中的命名约定更加统一。
35-38: 从面板上下文中解构出样式和类名属性从
usePanelContext钩子中解构出classNames和styles属性，这些属性将用于组件的样式应用。这种方式使样式管理更加集中和一致，符合语义化结构重构的目标。
123-123: 使用语义化的类名和样式属性为头部元素应用
classNames.header和styles.header，使样式应用更加语义化和结构化。这种方式使组件的样式逻辑更易于理解和维护。
130-130: 统一按钮的类名应用方式使用
cls函数来合并按钮的类名，包括条件类名的应用，使代码更加一致和清晰。这种修改遵循了代码库中类名处理的统一模式。Also applies to: 143-143, 157-157, 170-170
src/PickerPanel/PanelBody.tsx (6)
1-1: 将 classnames 库的导入命名从 classNames 改为 cls为保持代码库的命名一致性，将 classnames 库的导入别名统一修改为
cls。这种修改使得整个代码库中的命名约定更加统一。
46-50: 从面板上下文中解构出样式和类名属性从
usePanelContext钩子中解构出classNames和styles属性，这些属性将用于组件的样式应用。这种方式使样式管理更加集中和一致。
68-68: 简化 PickerHackContext 的使用从
PickerHackContext中只提取onCellDblClick属性，移除了原来提取的classNames和styles。这种简化使上下文的使用更加清晰，且避免了重复提取相同的属性。
128-142: 使用语义化的单元格类名在单元格的
className属性中添加classNames.item，使用cls函数合并类名，这种方式使样式应用更加语义化和结构化。
143-143: 为单元格添加样式属性通过
style={styles.item}为单元格添加样式，使样式应用更加直接和明确。这与类名的应用方式一致，增强了样式管理的一致性。
187-188: 使用语义化的类名和样式属性为主体和内容元素应用
classNames.body、classNames.content以及相应的样式属性，使样式应用更加语义化和结构化。这种修改使组件的样式逻辑更易于理解和维护。src/PickerPanel/TimePanel/TimePanelBody/index.tsx (4)
7-7: 将 classnames 库的导入命名从 classNames 改为 cls为了保持整个代码库的命名一致性，将 classnames 库的导入别名统一修改为
cls。此处调整了导入顺序，并使用了统一的命名约定。
30-34: 从面板上下文中解构出样式和类名属性从
usePanelContext钩子中解构出classNames和styles属性，这些属性将用于组件的样式应用。这种方式使样式管理更加集中和一致，符合语义化结构重构的目标。
44-44: 简化 PickerHackContext 的使用从
PickerHackContext中只提取onCellDblClick属性，移除了原来提取的其他属性。这种简化使上下文的使用更加清晰，避免了样式和交互逻辑的混合。
274-274: 使用语义化的类名和样式属性为内容元素应用
classNames.content和styles.content，使用cls函数合并类名，这种方式使样式应用更加语义化和结构化。这与代码库中其他组件的样式应用方式保持一致。src/PickerPanel/index.tsx (5)
14-14: 从 interface 导入 PanelSemanticName 类型这里从
../interface导入PanelSemanticName类型，这是语义化重构的一部分，用于更明确地定义面板各部分的样式和类名。
23-23: 更新导入包含 SharedPanelContext从
./context导入PickerHackContext和SharedPanelContext，后者是新添加的用于处理面板样式和类名的 Context。
381-387: 创建并合并面板样式 Context添加了
sharedPanelContext用于集中管理面板样式和类名，优先级为：pickerClassNames.popup > panelClassNames > 空对象。这种方式使样式处理更加一致和可维护。
395-395: 简化依赖数组移除了
classNames和styles相关依赖，现在仅依赖parentHackContext和hideHeader，减少了不必要的重新计算。
428-464: 使用 SharedPanelContext.Provider 包装组件重构了组件返回的 JSX，使用
SharedPanelContext.Provider包装PickerHackContext.Provider，提供统一的样式和类名管理方式。这种更具语义化的结构使代码更易于维护。src/interface.tsx (3)
314-316: 新增语义化类型定义将原有的
SemanticStructure拆分为更具语义化的两个类型：
SemanticName: 用于主选择器的样式和类名PanelSemanticName: 用于弹出面板的样式和类名这种拆分使得类型定义更加精确，组件样式结构更加清晰。
332-332: 添加 rootClassName 属性新增
rootClassName属性允许直接为根元素添加类名，提供了更方便的根元素样式自定义方式。
334-339: 重构样式和类名属性类型更新了
styles和classNames属性类型，采用新的语义化类型定义：
- 使用
SemanticName作为主要选择器样式和类名的键- 添加嵌套的
popup属性使用PanelSemanticName作为弹出面板样式和类名的键这种结构使样式定义更加结构化，支持更细粒度的样式控制。
src/PickerInput/SinglePicker.tsx (7)
2-2: 标准化 classnames 导入命名将
classnames包的导入名称统一为cls，保持代码风格一致性。
35-35: 添加 useSemantic 钩子导入导入
useSemantic钩子用于规范化处理classNames和styles属性。
127-130: 重命名和添加样式相关属性
- 添加
rootClassName属性用于根元素类名- 将
styles重命名为propStyles- 将
classNames重命名为propClassNames这种命名使属性的来源和用途更加明确，区分原始属性和合并后的属性。
208-210: 使用 useSemantic 钩子处理样式使用
useSemantic钩子规范化处理classNames和styles，确保它们具有一致的结构和默认值。
634-635: 更新弹出层样式和类名应用使用合并后的样式对象
mergedStyles.popup.root和类名cls(rootClassName, mergedClassNames.popup.root)应用到弹出层，保持样式结构一致性。
646-650: 更新选择器样式和类名应用使用
cls合并多个类名源（原始类名、根类名和语义类名），同时合并样式对象。这种方式保证了样式应用的一致性和优先级。
588-599: 更新 Context 值和依赖数组将合并后的
mergedClassNames和mergedStyles提供给 Context，并更新依赖数组包含这些合并值，确保 Context 值的正确更新。src/PickerInput/RangePicker.tsx (8)
2-2: 标准化 classnames 导入命名将
classnames包的导入名称统一为cls，保持代码风格一致性。
39-39: 添加 useSemantic 钩子导入导入
useSemantic钩子用于规范化处理classNames和styles属性。
164-166: 重命名和添加样式相关属性
- 添加
rootClassName属性用于根元素类名- 将
styles重命名为propStyles- 将
classNames重命名为propClassNames这种命名使属性的来源和用途更加明确，区分原始属性和合并后的属性。
230-232: 使用 useSemantic 钩子处理样式使用
useSemantic钩子规范化处理classNames和styles，确保它们具有一致的结构和默认值。
571-573: 更新 panelProps 排除属性列表在构建传递给面板组件的属性时，排除
classNames和styles属性，防止这些属性被直接传递给面板组件。这与在单独的 context 中处理样式的重构目标一致。
774-776: 更新弹出层样式和类名应用使用合并后的样式对象
mergedStyles.popup.root和类名cls(rootClassName, mergedClassNames.popup.root)应用到弹出层，保持样式结构一致性。
788-792: 更新选择器样式和类名应用使用
cls合并多个类名源（原始类名、根类名和语义类名），同时合并样式对象。这种方式保证了样式应用的一致性和优先级。
704-715: 更新 Context 值和依赖数组将合并后的
mergedClassNames和mergedStyles提供给 Context，并更新依赖数组包含这些合并值，确保 Context 值的正确更新。src/PickerPanel/context.ts (5)
2-3: 引入了语义化类型定义，增强类型安全性从
useSemantic钩子中导入了FilledPanelClassNames和FilledPanelStyles类型，这些类型将确保组件样式结构的一致性和类型安全。
5-10: 新增 SharedPanelContext 用于集中管理样式创建了新的上下文
SharedPanelContext来集中管理面板的classNames和styles，这是重构的核心部分，使样式管理更加语义化和集中化。
43-44: 在 PanelContextProps 中增加样式属性在
PanelContextProps接口中添加了classNames和styles属性，确保这些样式能够传递到使用此上下文的组件中。
85-86: 使用 SharedPanelContext 获取样式从新的
SharedPanelContext中提取classNames和styles，实现了样式的统一管理和访问。这是重构中的关键步骤，使组件能够一致地获取样式信息。
97-98: 将样式属性添加到共享信息对象在
info对象中添加了classNames和styles属性，确保这些样式能够被正确地传递给所有使用此信息的子组件。tests/picker.spec.tsx (13)
1354-1361: 重构类名结构使用语义化命名将
popupClassNames对象重构为更具语义化的结构，包含root、header、body、content、item和footer属性，与组件的结构层次一致，提高了代码可读性和维护性。
1362-1369: 重构样式结构与类名结构保持一致样式对象
popupStyles的结构与类名结构保持一致，同样使用语义化的命名，包含相同的属性名，使代码更加一致和易于理解。
1370-1380: 更新测试用例使用新的嵌套结构测试用例更新为使用新的嵌套结构，将
classNames和styles放在popup属性下，与组件实际使用方式保持一致，确保测试的有效性。
1382-1400: 更新测试断言以验证新的样式结构更新了测试断言，验证每个 DOM 元素是否正确应用了相应的类名和样式，确保样式重构后的行为与预期一致。
1405-1407: 更新面板测试的属性名称将面板测试中的属性名从
popupBody、popupContent和popupItem更新为更简洁的body、content和item，与新的语义化结构保持一致。Also applies to: 1410-1412
1425-1430: 更新面板测试断言更新了面板测试断言，以验证新的类名和样式属性是否正确应用，确保重构后的行为与预期一致。
1435-1436: 添加根元素样式测试为测试添加了
root类名和样式，确保根元素的样式也能够正确应用，完善了测试覆盖范围。Also applies to: 1446-1447
1440-1444: 更新弹出层测试的样式结构更新了弹出层测试的样式结构，使用新的嵌套格式，确保测试与实际组件使用方式一致。
Also applies to: 1451-1455
1459-1463: 更新时间面板测试的样式应用方式更新了时间面板测试中样式的应用方式，使用新的嵌套结构，确保测试与实际组件使用方式一致。
1475-1479: 添加根元素选择与断言为测试添加了根元素的选择与断言，验证根元素是否正确应用了类名和样式，完善了测试覆盖范围。
Also applies to: 1480-1481
1491-1492: 更新面板测试的样式应用更新了面板测试中样式的应用方式，使用新的结构传递
classNames和styles，确保测试与实际组件使用方式一致。
1500-1503: 更新面板测试的断言更新了面板测试的断言，以验证新的类名和样式是否正确应用，确保重构后的行为与预期一致。
1506-1512: 新增 rootClassName 功能测试添加了对
rootClassName属性的测试，验证该属性能够正确应用到选择器根元素和下拉菜单上，这是一个有价值的新功能，使用户可以更方便地自定义根元素样式。
Summary by CodeRabbit
新功能
rootClassName属性自定义根节点和下拉弹窗的类名。重构
测试