feat: support onActive #1154
feat: support onActive #1154
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" Walkthrough本次更新在 Select 组件及其使用示例中引入了新的 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Combobox
participant Controlled
participant Select
User->>Combobox: 交互（输入、键盘事件）
Combobox->>Select: 传递 onActive 回调
Select->>Select: 选项激活状态变化
Select-->>Combobox: 调用 onActive(activeValue)
Combobox-->>Console: 输出激活值
User->>Controlled: 交互（输入、键盘事件）
Controlled->>Select: 传递 onActive 回调
Select->>Select: 选项激活状态变化
Select-->>Controlled: 调用 onActive(activeValue)
Controlled-->>Console: 输出激活日志
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
tests/Accessibility.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 #1154 +/- ##
=======================================
Coverage 98.27% 98.27%
=======================================
Files 39 39
Lines 1503 1508 +5
Branches 455 456 +1
=======================================
+ Hits 1477 1482 +5
Misses 26 26 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/examples/controlled.tsx (1)
50-52: 建议使用console.log而不是console.error在示例代码中，
onActive回调用于展示功能，应该使用console.log而不是console.error，因为这不是错误情况。=> { - console.error('onActive', value); + console.log('onActive', value); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/examples/controlled.tsx(2 hunks)src/OptionList.tsx(1 hunks)src/Select.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/Select.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/OptionList.tsx (2)
src/Select.tsx (1)
RawValueType(70-70)src/interface.ts (1)
RawValueType(3-3)
🔇 Additional comments (2)
docs/examples/controlled.tsx (1)
76-76: onActive 属性传递正确正确地将
onActive回调传递给 Select 组件，实现符合预期。src/OptionList.tsx (1)
157-172: 优化活跃选项状态更新的时序逻辑这个改动很好地优化了活跃选项的状态更新时序：
- 立即更新活跃状态：
setActive现在同步执行，确保onActive回调能够及时触发- 延迟滚动操作：只有
scrollIntoView被延迟执行，这是合理的，因为滚动是视觉操作，需要等待 DOM 更新- 正确的清理逻辑：
timeoutId声明在条件块外部，确保清理函数能够正确执行这个改动完美支持了新的
onActive功能，使得活跃状态变化能够立即通知外部组件。
| @@ -127,6 +127,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | |||
| // >>> Select | |||
| onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>; | |||
| onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>; | |||
| onActive?: (value: ValueType) => void; | |||
|
|
||
| if (index !== -1) { | ||
| setActive(index); | ||
| let timeoutId: NodeJS.Timeout; |
There was a problem hiding this comment.
不应该是用 ReturnType<typeof setTimeout> 好一点么
ref #1153
Summary by CodeRabbit