feat: add vertical props #260
Conversation
Walkthrough此次更改涉及对分段控制组件的样式和功能进行增强，主要通过引入新变量以提高可维护性和可读性。此外，更新了组件的布局属性，添加了垂直方向的样式，并增强了动画效果。测试覆盖率也得到了提升，增加了对新功能的验证，确保组件在不同状态下的表现符合预期。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Segmented
participant MotionThumb
User->>App: 选择选项
App->>Segmented: 触发 onChange
Segmented->>MotionThumb: 更新位置和样式
MotionThumb-->>Segmented: 返回新样式
Segmented-->>App: 更新状态
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 (
|
![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
Outside diff range, codebase verification and nitpick comments (2)
src/MotionThumb.tsx (2)
31-70: 调整了 calcThumbStyle 函数以支持垂直布局。函数现在接受一个可选的
vertical参数，并根据该参数调整返回的样式对象。这些更改使组件能够在垂直和水平布局中正确渲染。建议在函数中添加一些注释，以提高代码的可读性和可维护性。
Line range hint
85-207: MotionThumb 组件现在支持垂直布局。组件的逻辑已更新，以处理垂直布局中的动画和样式计算。
vertical属性默认为false，确保了向后兼容性。建议在处理方向和布局时，保持代码风格和逻辑的一致性，可能需要进一步重构以简化代码结构。
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
tests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
Files selected for processing (5)
- assets/index.less (4 hunks)
- docs/demo/basic.tsx (2 hunks)
- src/MotionThumb.tsx (7 hunks)
- src/index.tsx (6 hunks)
- tests/index.test.tsx (1 hunks)
Additional comments not posted (19)
docs/demo/basic.tsx (2)
1-3: 导入语句的重排序重排序导入语句是一种改善代码可读性的常见做法，没有问题。
14-20: 新增垂直选项的Segmented组件实例添加了具有垂直属性的
Segmented组件实例，这与 PR 目标一致。建议在代码中添加注释，解释vertical属性的用途和效果，以提高代码的可读性和可维护性。assets/index.less (8)
3-3: 变量定义良好
@disabled-color使用fade函数来调整黑色的透明度，这是 UI 组件中表示禁用状态的常见做法。
4-4: 变量定义良好
@selected-bg-color设置为white，用于突出显示选中的项目，这是一种简单且常用的做法。
5-5: 变量定义良好
@text-color设置为特定的黑色阴影，这是 UI 组件中文本颜色的典型选择。
6-6: 变量定义良好
@transition-duration设置为0.3s，这是 UI 组件中过渡动画的合理持续时间，确保动画平滑。
7-7: 变量定义良好
@transition-timing-function使用cubic-bezier函数，这是定义平滑过渡效果的常用方法。
13-13: 类更新良好
.segmented-disabled-item()类使用@disabled-color变量，增强了禁用状态的清晰度，确保了组件的一致性。
19-19: 类更新良好
.segmented-item-selected()类使用@selected-bg-color变量，确保选中状态清晰定义，提升用户体验。
30-32: 布局和方向样式更新良好更新了布局属性，明确了布局方向，并符合标准 CSS flexbox 实践。添加了垂直方向的样式，允许更灵活的组件使用。
Also applies to: 85-100
src/index.tsx (4)
42-42: 新增属性vertical的类型定义在
SegmentedProps接口中添加了vertical属性，类型为boolean。这是一个可选属性，用于控制组件的垂直布局。此更改符合 PR 的目标，增加了组件的灵活性。
132-132: 在组件中使用vertical属性在
Segmented组件的解构赋值中引入了vertical属性。这允许组件根据此属性调整布局方向。代码的实现与 PR 目标一致，正确地将属性传递到组件的其他部分。
186-186: 根据vertical属性动态添加 CSS 类此行代码通过条件表达式
{[${prefixCls}-vertical]: vertical}动态添加 CSS 类，以支持垂直布局的样式。这种实现方式简洁且有效，符合现代前端开发的最佳实践。
194-194: 将vertical属性传递给MotionThumb组件在
MotionThumb组件的调用中，将vertical属性作为参数传递。这确保了MotionThumb组件能够接收并根据垂直布局的需要进行相应的动画处理。这是一个良好的实践，确保了组件之间的正确数据流动和功能协同。src/MotionThumb.tsx (3)
12-14: 扩展了 ThumbReact 类型以支持垂直布局。新增的
top、bottom和height属性有助于在垂直布局中正确计算组件的位置和大小。
26-26: 为 MotionThumbInterface 添加了可选的垂直布局属性。
vertical属性允许组件根据布局方向调整其行为，这增加了组件的灵活性和可用性。
72-72: 增强了 toPX 函数的健壮性。函数现在可以接受
undefined作为输入，并在此情况下返回undefined，这使得函数在处理可选属性时更为健壮。tests/index.test.tsx (2)
559-569: 测试垂直渲染的用例审查通过。此测试用例正确地检查了垂直渲染的
Segmented组件。使用快照测试和类验证是适当的。
570-651: 测试处理拇指动画的用例审查通过。此测试用例全面地覆盖了用户交互和动画效果。使用
jest.runAllTimers()和fireEvent.animationEnd来测试动画是恰当的。确保组件在状态转换时的行为符合预期。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #260 +/- ##
==========================================
+ Coverage 98.29% 98.44% +0.15%
==========================================
Files 2 2
Lines 117 129 +12
Branches 28 30 +2
==========================================
+ Hits 115 127 +12
Misses 2 2 ☔ View full report in Codecov by Sentry. |
| ); | ||
| expectMatchChecked(container, [true, false, false]); | ||
| }); | ||
| it('should render vertical segmented and handle thumb animations correctly', () => { |
There was a problem hiding this comment.
| it('should render vertical segmented and handle thumb animations correctly', () => { | |
| it('should render vertical segmented and handle thumb animations correctly', () => { |
Summary by CodeRabbit
新功能
样式改进
测试