feat: add position props #257
Conversation
|
Warning Rate limit exceeded@liangchaofei has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 20 minutes and 35 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Walkthrough此次更改涉及多个文件的样式和功能增强，主要集中在分段控制组件的样式、布局和交互逻辑上。引入了新的变量以提高可维护性，并添加了新的组件和属性以支持不同的布局方向，包括水平和垂直。整体结构得到优化，确保组件在不同用户界面场景中的适应性。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Segmented
participant MotionThumb
User->>App: 选择选项
App->>Segmented: 处理选择
Segmented->>MotionThumb: 更新位置
MotionThumb->>User: 显示更新后的状态
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: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- assets/index.less (4 hunks)
- docs/demo/basic.tsx (2 hunks)
- src/MotionThumb.tsx (6 hunks)
- src/index.tsx (8 hunks)
Additional comments not posted (12)
docs/demo/basic.tsx (2)
2-3: 导入顺序优化导入顺序的调整不影响功能，但改善了代码的组织结构。
代码更改已批准。
14-20: 新增Segmented组件新增的
Segmented组件配置正确，增强了用户界面。代码更改已批准。
assets/index.less (2)
3-7: 新增变量新增的颜色和过渡属性变量提高了代码的可维护性和可读性。
代码更改已批准。
Line range hint
13-115: 样式更新样式更新使用了新的变量，提高了代码的清晰度和一致性。
代码更改已批准。
src/MotionThumb.tsx (3)
12-14: 类型更新更新的类型包含了垂直定位的属性，这是支持垂直定位所必需的。
代码更改已批准。
Also applies to: 26-26
31-69: 更新calcThumbStyle函数函数更新后能够根据
position参数正确处理水平和垂直方向。代码更改已批准。
Line range hint
84-194: 更新MotionThumb函数函数更新后能够正确处理新的
position属性，确保正确处理水平和垂直方向。代码更改已批准。
src/index.tsx (5)
39-39: 添加位置属性在
SegmentedProps接口中添加了position属性，允许指定布局方向为 'horizontal' 或 'vertical'。这增强了组件的适应性。代码更改已批准。
127-127: 默认布局方向在
Segmented组件中，position属性的默认值设置为 'horizontal'，确保了向后兼容性。代码更改已批准。
178-178: 动态样式根据
position属性应用条件类，确保了基于布局方向的动态样式。代码更改已批准。
185-188: 组的动态样式根据
position属性为组应用条件类，确保了基于布局方向的动态样式。代码更改已批准。
191-191: 传递位置属性将
position属性传递给MotionThumb组件，可能会影响其渲染行为。代码更改已批准。
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- assets/index.less (4 hunks)
- docs/demo/basic.tsx (2 hunks)
- src/MotionThumb.tsx (6 hunks)
- src/index.tsx (7 hunks)
Files skipped from review due to trivial changes (1)
- assets/index.less
Files skipped from review as they are similar to previous changes (2)
- docs/demo/basic.tsx
- src/index.tsx
Additional comments not posted (12)
src/MotionThumb.tsx (12)
12-14: 添加了新的属性top,bottom,height到ThumbReact类型。这些属性是为了支持垂直方向的定位。
这些代码更改是合理的。
26-26: 在MotionThumbInterface中添加了可选属性mode。这个属性允许用户指定方向（水平或垂直）。
这些代码更改是合理的。
31-32: 在calcThumbStyle函数中添加了mode参数。这个参数用于根据指定的方向返回不同的样式。
这些代码更改是合理的。
35-48: 在calcThumbStyle函数中添加了对top,bottom,height属性的计算。这些属性是为了支持垂直方向的定位。
这些代码更改是合理的。
50-59: 在calcThumbStyle函数中添加了对垂直方向的样式处理。当
mode为vertical时，返回的样式将left,right,width设置为 0，并根据目标元素的尺寸设置top,bottom,height。这些代码更改是合理的。
61-69: 在calcThumbStyle函数中添加了对水平方向的样式处理。当
mode为horizontal时，返回的样式将top,bottom,height设置为 0，并根据目标元素的尺寸设置left,right,width。这些代码更改是合理的。
84-84: 在MotionThumb组件的 props 中添加了mode属性，并设置默认值为horizontal。这个属性允许用户指定方向（水平或垂直）。
这些代码更改是合理的。
106-107: 在useLayoutEffect中调用calcThumbStyle时传递mode参数。确保计算样式时使用正确的方向。
这些代码更改是合理的。
123-128: 在thumbStart的计算中添加了对mode的处理。根据方向决定使用
top或left值。这些代码更改是合理的。
133-138: 在thumbActive的计算中添加了对mode的处理。根据方向决定使用
top或left值。这些代码更改是合理的。
141-161: 在onAppearStart和onAppearActive函数中添加了对mode的处理。根据方向调整变换和尺寸属性，确保拇指在两个方向上都能正确动画。
这些代码更改是合理的。
189-192: 在mergedStyle中添加了垂直方向的 CSS 变量。这些变量用于支持垂直方向的定位和动画。
这些代码更改是合理的。
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #257 +/- ##
==========================================
- Coverage 98.29% 96.12% -2.17%
==========================================
Files 2 2
Lines 117 129 +12
Branches 28 38 +10
==========================================
+ Hits 115 124 +9
- Misses 2 5 +3 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
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 (4)
- docs/demo/basic.tsx (2 hunks)
- src/MotionThumb.tsx (6 hunks)
- src/index.tsx (7 hunks)
- tests/index.test.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- docs/demo/basic.tsx
Additional context used
GitHub Check: codecov/patch
src/MotionThumb.tsx
[warning] 51-51: src/MotionThumb.tsx#L51
Added line #L51 was not covered by tests
[warning] 143-143: src/MotionThumb.tsx#L143
Added line #L143 was not covered by tests
[warning] 154-154: src/MotionThumb.tsx#L154
Added line #L154 was not covered by tests
Additional comments not posted (7)
src/MotionThumb.tsx (4)
31-69: 代码看起来不错！
calcThumbStyle函数正确处理了vertical参数，并返回适当的样式。Tools
GitHub Check: codecov/patch
[warning] 51-51: src/MotionThumb.tsx#L51
Added line #L51 was not covered by tests
Line range hint
84-192: 代码看起来不错！
MotionThumb函数正确处理了vertical属性，并相应地更新了渲染逻辑。Tools
GitHub Check: codecov/patch
[warning] 143-143: src/MotionThumb.tsx#L143
Added line #L143 was not covered by tests
[warning] 154-154: src/MotionThumb.tsx#L154
Added line #L154 was not covered by tests
141-161: 代码看起来不错！
onAppearStart和onAppearActive函数正确处理了vertical属性，并返回适当的样式。Tools
GitHub Check: codecov/patch
[warning] 143-143: src/MotionThumb.tsx#L143
Added line #L143 was not covered by tests
[warning] 154-154: src/MotionThumb.tsx#L154
Added line #L154 was not covered by tests
189-192: 代码看起来不错！在渲染逻辑中使用
vertical属性是正确的，并增强了组件的灵活性。src/index.tsx (2)
Line range hint
130-189: 代码看起来不错！
Segmented函数正确处理了vertical属性，并相应地更新了渲染逻辑。
189-192: 代码看起来不错！在渲染逻辑中使用
vertical属性是正确的，并增强了组件的灵活性。tests/index.test.tsx (1)
559-569: 测试用例看起来不错！新的测试用例正确验证了
Segmented组件在设置vertical属性时的渲染行为，并增强了测试覆盖率。
| return option.title; | ||
| } | ||
|
|
||
| // read `label` when title is `undefined` |
| defaultValue, | ||
| }); | ||
|
|
||
| // ======================= Change ======================== |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/MotionThumb.tsx (7 hunks)
- src/index.tsx (6 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/index.tsx
Additional comments not posted (10)
src/MotionThumb.tsx (10)
12-14: 代码更改已批准。添加
top、bottom和height属性以支持垂直定位是必要的。
26-26: 代码更改已批准。在
MotionThumbInterface中添加可选的vertical属性，以允许用户指定拇指的方向，这是必要的。
31-32: 代码更改已批准。更新
calcThumbStyle函数以接受vertical参数是必要的，以根据指定的方向计算拇指样式。
33-69: 代码更改已批准。根据
vertical参数返回不同的样式是必要的，以根据方向计算正确的拇指样式。
84-84: 代码更改已批准。更新
MotionThumb函数以接受默认值为false的vertical属性是必要的，以允许用户指定拇指的方向。
107-108: 代码更改已批准。使用
vertical参数调用calcThumbStyle函数是必要的，以根据方向计算拇指样式。
124-129: 代码更改已批准。根据
vertical参数计算thumbStart值是必要的，以根据方向和方向计算正确的thumbStart值。
134-139: 代码更改已批准。根据
vertical参数计算thumbActive值是必要的，以根据方向和方向计算正确的thumbActive值。
143-164: 代码更改已批准。根据
vertical参数返回不同的样式是必要的，以根据方向正确设置拇指动画。
193-196: 代码更改已批准。在
mergedStyle对象中添加--thumb-start-top、--thumb-start-height、--thumb-active-top和--thumb-active-height属性是必要的，以设置垂直动画的正确样式。
|
测试覆盖率掉了。 |
There was a problem hiding this comment.
Actionable comments posted: 0
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 (2)
- src/MotionThumb.tsx (7 hunks)
- tests/index.test.tsx (2 hunks)
Additional comments not posted (10)
src/MotionThumb.tsx (8)
12-14: 代码更改已批准。添加
top、bottom和height属性以支持垂直定位是合理的。
26-26: 代码更改已批准。在
MotionThumbInterface中添加可选的vertical属性，允许用户指定拇指的方向，这是合理的。
31-70: 代码更改已批准。修改
calcThumbStyle函数以接受vertical参数并根据方向返回不同的样式是合理的。该函数根据vertical参数返回垂直或水平定位的样式。
85-85: 代码更改已批准。在
MotionThumb函数中为vertical属性添加默认值false是合理的。
108-109: 代码更改已批准。在计算上一个和下一个样式时，将
vertical参数传递给calcThumbStyle函数是合理的。
125-140: 代码更改已批准。修改
thumbStart和thumbActive的记忆值，在vertical为true时使用top属性，否则使用left或right属性，以支持垂直和水平布局，这是合理的。
144-166: 代码更改已批准。修改
onAppearStart和onAppearActive函数，根据vertical的值返回不同的变换和大小样式，以确保拇指在垂直和水平方向上都能正确动画，这是合理的。
195-198: 代码更改已批准。在
mergedStyle对象中添加--thumb-start-top、--thumb-start-height、--thumb-active-top和--thumb-active-height属性，用于在垂直和水平方向上正确动画化拇指，这是合理的。tests/index.test.tsx (2)
454-489: 代码审查通过！这个测试用例正确地验证了垂直渲染模式下分段控件的交互行为。它模拟了用户点击 "Web3" 选项的操作，并检查了分段拇指在过渡期间的运动效果。测试用例检查了点击后拇指是否具有
rc-segmented-thumb-motion-appear-active类，并验证了激活状态下应用于拇指的样式。该测试用例实现正确，提高了
rc-segmented组件垂直渲染功能的测试覆盖率。没有发现问题或改进点。
595-605: 代码审查通过！这个测试用例正确地验证了当
vertical属性设置为 true 时Segmented组件的渲染行为。它检查组件是否使用指定的选项（'iOS'、'Android'、'Web'）正确渲染，并断言渲染片段的第一个子元素与快照匹配。测试用例还验证了容器是否具有
rc-segmented-vertical类，并检查选项的状态以确保第一个选项被选中而其他选项未被选中。该测试用例实现正确，提高了
Segmented组件垂直渲染功能的测试覆盖率。没有发现问题或改进点。
There was a problem hiding this comment.
Actionable comments posted: 0
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 (1)
- tests/index.test.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- tests/index.test.tsx
测试挂了。 |
src/MotionThumb.tsx
Outdated
| ? toPX(prevStyle?.top ?? 0) | ||
| : direction === 'rtl' | ||
| ? toPX(-(prevStyle?.right as number)) | ||
| : toPX(prevStyle?.left as number), |
我尝试增加了3个单测，但是覆盖率还是提升不上去 |
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (1)
src/MotionThumb.tsx (1)
Line range hint
85-202: 处理MotionThumb函数中的vertical属性代码正确地根据布局方向调整组件的行为，确保适当的动画和样式。建议进一步优化代码结构以提高可读性。
- if (vertical) { + return vertical ? {...} : {...};
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 (2)
- src/MotionThumb.tsx (7 hunks)
- tests/index.test.tsx (2 hunks)
Additional comments not posted (3)
src/MotionThumb.tsx (2)
12-14: 新增垂直定位属性代码中新增了
top,bottom, 和height属性，这些改动符合 PR 的目标，增强了组件的布局灵活性。
26-26: 接口新增vertical属性
MotionThumbInterface中新增了可选的vertical属性，使得组件能够支持水平和垂直两种布局方式。tests/index.test.tsx (1)
454-617: 增强垂直布局动画的测试这部分代码添加了针对垂直布局动画的新测试用例。通过模拟点击操作并验证动画的正确性，确保了组件在垂直布局下的行为与预期一致。这些测试用例对于验证新添加的定位属性非常关键，有助于提高代码的健壮性和可维护性。
- 代码正确性：测试用例似乎正确地模拟了用户交互，并检查了组件的状态变化，这有助于确保组件逻辑的正确性。
- 测试覆盖率：这些测试用例增加了对垂直布局特性的覆盖，有助于提高整体测试覆盖率，这是PR中提到的一个关键目标。
- 维护性：测试用例使用了清晰的结构和命名，易于理解和维护。
建议在未来继续扩展这些测试用例，覆盖更多边界条件和异常情况，以进一步增强组件的稳定性和可靠性。
| vertical?: boolean, | ||
| ): ThumbReact => { | ||
| if (!targetElement) return null; | ||
|
|
||
| const style: ThumbReact = { | ||
| left: targetElement.offsetLeft, | ||
| right: | ||
| (targetElement.parentElement!.clientWidth as number) - | ||
| targetElement.clientWidth - | ||
| targetElement.offsetLeft, | ||
| width: targetElement.clientWidth, | ||
| top: targetElement.offsetTop, | ||
| bottom: | ||
| (targetElement.parentElement!.clientHeight as number) - | ||
| targetElement.clientHeight - | ||
| targetElement.offsetTop, | ||
| height: targetElement.clientHeight, | ||
| }; | ||
|
|
||
| const toPX = (value: number) => | ||
| if (vertical) { | ||
| // Adjusts positioning and size for vertical layout by setting horizontal properties to 0 and using vertical properties from the style object. | ||
| return { | ||
| left: 0, | ||
| right: 0, | ||
| width: 0, | ||
| top: style.top, | ||
| bottom: style.bottom, | ||
| height: style.height, | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| left: style.left, | ||
| right: style.right, | ||
| width: style.width, | ||
| top: 0, | ||
| bottom: 0, | ||
| height: 0, | ||
| }; |
There was a problem hiding this comment.
调整 calcThumbStyle 函数以支持 vertical 参数
函数现在根据 vertical 参数调整样式计算，支持组件的新功能。建议简化代码以提高可读性。
- if (vertical) {
+ return vertical ? {
left: 0,
right: 0,
width: 0,
top: style.top,
bottom: style.bottom,
height: style.height,
} : {
left: style.left,
right: style.right,
width: style.width,
top: 0,
bottom: 0,
height: 0,
};Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| vertical?: boolean, | |
| ): ThumbReact => { | |
| if (!targetElement) return null; | |
| const style: ThumbReact = { | |
| left: targetElement.offsetLeft, | |
| right: | |
| (targetElement.parentElement!.clientWidth as number) - | |
| targetElement.clientWidth - | |
| targetElement.offsetLeft, | |
| width: targetElement.clientWidth, | |
| top: targetElement.offsetTop, | |
| bottom: | |
| (targetElement.parentElement!.clientHeight as number) - | |
| targetElement.clientHeight - | |
| targetElement.offsetTop, | |
| height: targetElement.clientHeight, | |
| }; | |
| const toPX = (value: number) => | |
| if (vertical) { | |
| // Adjusts positioning and size for vertical layout by setting horizontal properties to 0 and using vertical properties from the style object. | |
| return { | |
| left: 0, | |
| right: 0, | |
| width: 0, | |
| top: style.top, | |
| bottom: style.bottom, | |
| height: style.height, | |
| }; | |
| } | |
| return { | |
| left: style.left, | |
| right: style.right, | |
| width: style.width, | |
| top: 0, | |
| bottom: 0, | |
| height: 0, | |
| }; | |
| vertical?: boolean, | |
| ): ThumbReact => { | |
| if (!targetElement) return null; | |
| const style: ThumbReact = { | |
| left: targetElement.offsetLeft, | |
| right: | |
| (targetElement.parentElement!.clientWidth as number) - | |
| targetElement.clientWidth - | |
| targetElement.offsetLeft, | |
| width: targetElement.clientWidth, | |
| top: targetElement.offsetTop, | |
| bottom: | |
| (targetElement.parentElement!.clientHeight as number) - | |
| targetElement.clientHeight - | |
| targetElement.offsetTop, | |
| height: targetElement.clientHeight, | |
| }; | |
| return vertical ? { | |
| left: 0, | |
| right: 0, | |
| width: 0, | |
| top: style.top, | |
| bottom: style.bottom, | |
| height: style.height, | |
| } : { | |
| left: style.left, | |
| right: style.right, | |
| width: style.width, | |
| top: 0, | |
| bottom: 0, | |
| height: 0, | |
| }; |
There was a problem hiding this comment.
Actionable comments posted: 0
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 (1)
- src/MotionThumb.tsx (7 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/MotionThumb.tsx
|
新pr: #260 。 这个pr先关掉了。 |
3 participants
issue: ant-design/ant-design#50519
Summary by CodeRabbit
Segmented组件，支持 'iOS'、'Android' 和 'Web' 选项的选择。MotionThumb组件现支持水平和垂直方向的布局。Segmented组件在垂直方向渲染的正确性。rc-segmented组件交互行为的测试覆盖。