feat: add handle index on change events #1062
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" Walkthrough本次更改主要调整了 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Slider
participant Consumer
User->>Slider: 拖动滑块
Slider->>Consumer: onChange(value, index)
User-->>Slider: 释放滑块
Slider->>Consumer: onChangeComplete(value, index)
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/Range.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. tests/Slider.test.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. tests/marks.test.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🔇 Additional comments (16)
✨ 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/Slider.tsx(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/Slider.tsx (2)
docs/examples/editable.tsx (1)
value(12-69)docs/examples/multiple.tsx (1)
value(19-49)
🔇 Additional comments (4)
src/Slider.tsx (4)
80-80: 更新了 onChangeComplete 回调函数签名，添加了 index 参数与
onChange类似，onChangeComplete回调函数签名也添加了index参数，保持了接口的一致性。这个改进使开发者能够在交互完成时也能获取到句柄索引信息。同样需要注意，这是一个破坏性变更，可能需要更新现有代码。
303-303: 更新 onChange 调用以传递句柄索引现在在
triggerChange函数中调用onChange时会传递draggingIndex作为第二个参数，与更新后的接口签名保持一致。这确保了在值变化时，外部回调函数能够接收到正确的句柄索引。
322-322: 更新 onChangeComplete 调用以传递句柄索引在
finishChange函数中调用onChangeComplete时现在会传递draggingIndex作为第二个参数，与更新后的接口签名保持一致。注意，原有的废弃回调onAfterChange仍然保持不变，只传递值而不传递索引。
409-409: 在 changeToCloseValue 函数中更新 onChangeComplete 调用在
changeToCloseValue函数中调用onChangeComplete时也传递了draggingIndex作为第二个参数，保持了代码的一致性。这确保了在点击轨道或标记改变值时，正确的句柄索引也会被传递给回调函数。
| @@ -72,12 +72,12 @@ export interface SliderProps<ValueType = number | number[]> { | |||
| step?: number | null; | |||
| value?: ValueType; | |||
| defaultValue?: ValueType; | |||
| onChange?: (value: ValueType) => void; | |||
| onChange?: (value: ValueType, index: number) => void; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
更新了 onChange 回调函数签名，添加了 index 参数
在 SliderProps 接口中，onChange 回调函数签名现在包含了一个额外的 index 参数，用于表示正在操作的滑块句柄的索引。这个改进使开发者能够根据特定句柄的索引执行计算或逻辑。
请注意，这是一个破坏性变更，可能需要更新现有的使用此组件的代码。
建议在文档中明确说明这个变更，并更新示例代码以展示如何利用这个新参数。例如，在 docs/examples/multiple.tsx 和 docs/examples/editable.tsx 中的示例可以更新为：
-onChange={(nextValue) => {
+onChange={(nextValue, handleIndex) => {
+ console.log('Changed handle index:', handleIndex);
// 其他逻辑...
}}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents (early access)
In src/Slider.tsx at line 75, the onChange callback signature in the SliderProps
interface has been updated to include an additional index parameter representing
the handle index. To fix this, update all existing usages of the onChange prop
to accept and handle the new index argument accordingly. Additionally, update
the component documentation and example files such as docs/examples/multiple.tsx
and docs/examples/editable.tsx to reflect this signature change and demonstrate
how to use the index parameter in the callback.
| onChange?: (value: ValueType, index: number) => void; | ||
| /** @deprecated It's always better to use `onChange` instead */ | ||
| onBeforeChange?: (value: ValueType) => void; | ||
| /** @deprecated Use `onChangeComplete` instead */ | ||
| onAfterChange?: (value: ValueType) => void; | ||
| onChangeComplete?: (value: ValueType) => void; | ||
| onChangeComplete?: (value: ValueType, index: number) => void; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
建议：考虑更新现有示例代码
从相关代码片段看，现有的示例代码（如 docs/examples/multiple.tsx 和 docs/examples/editable.tsx）还没有利用新增的 index 参数。为了帮助用户理解这个新功能，建议更新这些示例，展示如何使用句柄索引。
🏁 Script executed:
#!/bin/bash
# 检查当前是否有使用新 index 参数的示例代码
# 在 docs 目录下搜索 onChange 或 onChangeComplete 的使用
echo "检查示例代码中的回调函数使用情况："
rg -A 2 "onChange(.*\).* =>\s*{|onChangeComplete(.*\).* =>\s*{" docs/Length of output: 462
🏁 Script executed:
#!/bin/bash
# 重新检查 docs/examples 目录中是否有使用新 index 参数的回调
echo "查找 docs/examples 目录中 onChange 和 onChangeComplete 的调用："
rg "onChange\s*=" -n docs/examples
rg "onChangeComplete\s*=" -n docs/examplesLength of output: 5236
更新示例以演示 index 参数
现有示例（如 docs/examples/multiple.tsx、docs/examples/editable.tsx 等）在调用 onChange 和 onChangeComplete 时仅使用了单个参数。为了帮助用户理解新加入的第二个 index 回调参数，建议：
- 在相关示例中将回调签名由
(value) => { … }
改为
(value, index) => { … } - 并在示例逻辑中展示如何根据
index区分不同滑块句柄或进行不同处理。
请按需更新以下文件：
- docs/examples/multiple.tsx
- docs/examples/editable.tsx
- （可选）其他使用
onChange/onChangeComplete的示例文件
🤖 Prompt for AI Agents (early access)
In src/Slider.tsx around lines 75 to 80, the onChange and onChangeComplete
callbacks now include a second index parameter that is not demonstrated in the
example files. Update the example files docs/examples/multiple.tsx and
docs/examples/editable.tsx to change the callback signatures from using a single
value parameter to using both value and index parameters. Modify the example
logic to show how to handle different slider handles based on the index, helping
users understand and utilize the new index argument effectively.
Adds the index handle to change events, so it is possible to make calculations based on the index that the user selects.
Summary by CodeRabbit