diff --git a/src/components/date-picker-view/date-picker-view.tsx b/src/components/date-picker-view/date-picker-view.tsx index 1d0d9c4dc7..1e92be649d 100644 --- a/src/components/date-picker-view/date-picker-view.tsx +++ b/src/components/date-picker-view/date-picker-view.tsx @@ -22,7 +22,7 @@ export type RenderLabel = (type: Precision | 'now', data: number) => ReactNode export type DatePickerViewProps = Pick< PickerViewProps, - 'style' | 'mouseWheel' | 'loading' | 'loadingContent' + 'style' | 'mouseWheel' | 'wheelResistance' | 'loading' | 'loadingContent' > & { value?: PickerDate defaultValue?: PickerDate @@ -91,6 +91,7 @@ export const DatePickerView: FC = p => { loadingContent={props.loadingContent} value={pickerValue} mouseWheel={props.mouseWheel} + wheelResistance={props.wheelResistance} onChange={onChange} /> ) diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx index dc76a7d716..21c13515b6 100644 --- a/src/components/date-picker/date-picker.tsx +++ b/src/components/date-picker/date-picker.tsx @@ -44,6 +44,7 @@ export type DatePickerProps = Pick< | 'stopPropagation' | 'style' | 'mouseWheel' + | 'wheelResistance' | 'forceRender' | 'destroyOnClose' > & { @@ -150,6 +151,7 @@ export const DatePicker = forwardRef( title={props.title} stopPropagation={props.stopPropagation} mouseWheel={props.mouseWheel} + wheelResistance={props.wheelResistance} destroyOnClose={props.destroyOnClose} forceRender={props.forceRender} > diff --git a/src/components/picker-view/index.en.md b/src/components/picker-view/index.en.md index 402f765005..5ee2d9c356 100644 --- a/src/components/picker-view/index.en.md +++ b/src/components/picker-view/index.en.md @@ -17,6 +17,7 @@ PickerView is the content area of [Picker](/components/picker/#picker). | columns | Options to configure each column | `PickerColumn[] \| ((value: PickerValue[]) => PickerColumn[])` | - | | defaultValue | Default selected options | `PickerValue[]` | `[]` | | mouseWheel | Whether to allow interact with mouse wheel | `boolean` | `false` | +| wheelResistance | Enable increased resistance to scrolling when selecting through mouse wheel | `boolean` | `true` | | onChange | Triggered when the options are changed | `(value: PickerValue[], extend: PickerValueExtend) => void` | - | | renderLabel | The function to custom rendering the label shown on a column | `(item: PickerColumnItem) => ReactNode` | `(item) => item.label` | | value | Selected options | `PickerValue[]` | - | @@ -82,6 +83,7 @@ type PickerDate = Date & { | max | Max value | `PickerDate` | ten years later | | min | Minimum value | `PickerDate` | ten years ago | | mouseWheel | Whether to allow interact with mouse wheel | `boolean` | `false` | +| wheelResistance | Enable increased resistance to scrolling when selecting through mouse wheel | `boolean` | `true` | | onChange | Triggered when the options are changed | `(value: PickerDate) => void` | - | | precision | Precision | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day' \| 'quarter'` | `'day'` | | renderLabel | The function to custom rendering the label shown on a column. `type` means any value in `precision`, `data` means the default number | `(type: string, data: number) => ReactNode` | - | diff --git a/src/components/picker-view/index.zh.md b/src/components/picker-view/index.zh.md index 0aae90c301..429b515fff 100644 --- a/src/components/picker-view/index.zh.md +++ b/src/components/picker-view/index.zh.md @@ -17,6 +17,7 @@ PickerView 是 [Picker](/zh/components/picker/#picker) 的内容区域。 | columns | 配置每一列的选项 | `PickerColumn[] \| ((value: PickerValue[]) => PickerColumn[])` | - | | defaultValue | 默认选中项 | `PickerValue[]` | `[]` | | mouseWheel | 是否允许通过鼠标滚轮进行选择 | `boolean` | `false` | +| wheelResistance | 启用通过鼠标滚轮进行选择时,增强滚动的段落感 | `boolean` | `true` | | onChange | 选项改变时触发 | `(value: PickerValue[], extend: PickerValueExtend) => void` | - | | renderLabel | 自定义渲染每列展示的内容 | `(item: PickerColumnItem) => ReactNode` | `(item) => item.label` | | value | 选中项 | `PickerValue[]` | - | @@ -82,6 +83,7 @@ type PickerDate = Date & { | max | 最大值 | `PickerDate` | 十年后 | | min | 最小值 | `PickerDate` | 十年前 | | mouseWheel | 是否允许通过鼠标滚轮进行选择 | `boolean` | `false` | +| wheelResistance | 启用通过鼠标滚轮进行选择时,增强滚动的段落感 | `boolean` | `true` | | onChange | 选项改变时触发 | `(value: PickerDate) => void` | - | | precision | 精度 | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day' \| 'quarter'` | `'day'` | | renderLabel | 自定义渲染每列展示的内容。其中 `type` 参数为 `precision` 中的任意值,`data` 参数为默认渲染的数字 | `(type: string, data: number) => ReactNode` | - | diff --git a/src/components/picker-view/picker-view.tsx b/src/components/picker-view/picker-view.tsx index fc82597215..260fbccf0b 100644 --- a/src/components/picker-view/picker-view.tsx +++ b/src/components/picker-view/picker-view.tsx @@ -31,6 +31,7 @@ export type PickerViewProps = { value?: PickerValue[] defaultValue?: PickerValue[] mouseWheel?: boolean + wheelResistance?: boolean loading?: boolean loadingContent?: ReactNode onChange?: (value: PickerValue[], extend: PickerValueExtend) => void @@ -41,6 +42,7 @@ const defaultProps = { defaultValue: [], renderLabel: defaultRenderLabel, mouseWheel: false, + wheelResistance: true, loadingContent: (
@@ -114,6 +116,7 @@ export const PickerView = memo(p => { onSelect={handleSelect} renderLabel={props.renderLabel} mouseWheel={props.mouseWheel} + wheelResistance={props.wheelResistance} /> ))}
diff --git a/src/components/picker-view/wheel.tsx b/src/components/picker-view/wheel.tsx index 03ab973683..f17625b782 100644 --- a/src/components/picker-view/wheel.tsx +++ b/src/components/picker-view/wheel.tsx @@ -25,6 +25,7 @@ type Props = { onSelect: (value: PickerValue, index: number) => void renderLabel: (item: PickerColumnItem) => ReactNode mouseWheel: boolean + wheelResistance: boolean } export const Wheel = memo( @@ -160,13 +161,17 @@ export const Wheel = memo( draggingRef.current = false const speed = velocity * whellDir * 50 - const position = scrollY + distance * whellDir + speed + const position = + scrollY + + (distance / (props.wheelResistance ? 4 : 1)) * whellDir + + speed const boundNum = bound(position, min, max) const targetIndex = -Math.round(boundNum / itemHeight.current) scrollSelect(targetIndex) } else { - const position = scrollY + distance * whellDir + const position = + scrollY + (distance / (props.wheelResistance ? 4 : 1)) * whellDir api.start({ y: rubberbandIfOutOfBounds( @@ -306,6 +311,7 @@ export const Wheel = memo( if (prev.onSelect !== next.onSelect) return false if (prev.renderLabel !== next.renderLabel) return false if (prev.mouseWheel !== next.mouseWheel) return false + if (prev.wheelResistance !== next.wheelResistance) return false if (!isEqual(prev.column, next.column)) return false return true diff --git a/src/components/picker/index.en.md b/src/components/picker/index.en.md index 9b6b7578eb..db4f2ac6ad 100644 --- a/src/components/picker/index.en.md +++ b/src/components/picker/index.en.md @@ -46,6 +46,7 @@ type PickerValueExtend = { | destroyOnClose | Destroy `dom` when not visible | `boolean` | `false` | | forceRender | Render content forcely | `boolean` | `false` | | mouseWheel | Whether to allow interact with mouse wheel | `boolean` | `false` | +| wheelResistance | Enable increased resistance to scrolling when selecting through mouse wheel | `boolean` | `true` | | onCancel | Triggered when cancelling | `() => void` | - | | onClose | Triggered when confirming or cancelling | `() => void` | - | | onConfirm | Triggered when confirming | `(value: PickerValue[], extend: PickerValueExtend) => void` | - | @@ -160,6 +161,7 @@ type PickerDate = Date & { | max | Max value | `PickerDate` | ten years later | | min | Minimum value | `PickerDate` | ten years ago | | mouseWheel | Whether to allow interact with mouse wheel | `boolean` | `false` | +| wheelResistance | Enable increased resistance to scrolling when selecting through mouse wheel | `boolean` | `true` | | onConfirm | Triggered when confirming | `(value: PickerDate) => void` | - | | onSelect | Triggered when the options are changed | `(value: PickerDate) => void` | - | | precision | Precision | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day' \| 'quarter'` | `'day'` | diff --git a/src/components/picker/index.zh.md b/src/components/picker/index.zh.md index a2919a1198..2aa661d657 100644 --- a/src/components/picker/index.zh.md +++ b/src/components/picker/index.zh.md @@ -46,6 +46,7 @@ type PickerValueExtend = { | destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean` | `false` | | forceRender | 强制渲染内容 | `boolean` | `false` | | mouseWheel | 是否允许通过鼠标滚轮进行选择 | `boolean` | `false` | +| wheelResistance | 启用通过鼠标滚轮进行选择时,增强滚动的段落感 | `boolean` | `true` | | onCancel | 取消时触发 | `() => void` | - | | onClose | 确认和取消时都会触发关闭事件 | `() => void` | - | | onConfirm | 确认时触发 | `(value: PickerValue[], extend: PickerValueExtend) => void` | - | @@ -162,6 +163,7 @@ type PickerDate = Date & { | max | 最大值 | `PickerDate` | 十年后 | | min | 最小值 | `PickerDate` | 十年前 | | mouseWheel | 是否允许通过鼠标滚轮进行选择 | `boolean` | `false` | +| wheelResistance | 启用通过鼠标滚轮进行选择时,增强滚动的段落感 | `boolean` | `true` | | onConfirm | 确认时触发 | `(value: PickerDate) => void` | - | | onSelect | 选项改变时触发 | `(value: PickerDate) => void` | - | | precision | 精度 | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day' \| 'quarter'` | `'day'` | diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx index 22ad6d2b8e..71fd1ebcb6 100644 --- a/src/components/picker/picker.tsx +++ b/src/components/picker/picker.tsx @@ -57,6 +57,7 @@ export type PickerProps = { ) => ReactNode renderLabel?: (item: PickerColumnItem) => ReactNode mouseWheel?: boolean + wheelResistance?: boolean popupClassName?: string popupStyle?: CSSProperties } & Pick< @@ -188,6 +189,7 @@ export const Picker = memo( renderLabel={props.renderLabel} value={innerValue} mouseWheel={props.mouseWheel} + wheelResistance={props.wheelResistance} onChange={onChange} />