feat: picker增加resistance属性，以支持通过鼠标滚轮进行选择时产生段落感

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<DatePickerViewProps> = p => {
       loadingContent={props.loadingContent}
       value={pickerValue}
       mouseWheel={props.mouseWheel}
+      wheelResistance={props.wheelResistance}
       onChange={onChange}
     />
   )

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<DatePickerRef, DatePickerProps>(
         title={props.title}
         stopPropagation={props.stopPropagation}
         mouseWheel={props.mouseWheel}
+        wheelResistance={props.wheelResistance}
         destroyOnClose={props.destroyOnClose}
         forceRender={props.forceRender}
       >

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` | - |

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` | - |

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: (
     <div className={`${classPrefix}-loading-content`}>
       <SpinLoading />
@@ -114,6 +116,7 @@ export const PickerView = memo<PickerViewProps>(p => {
               onSelect={handleSelect}
               renderLabel={props.renderLabel}
               mouseWheel={props.mouseWheel}
+              wheelResistance={props.wheelResistance}
             />
           ))}
           <div className={`${classPrefix}-mask`}>

src/components/picker-view/wheel.tsx

@@ -25,6 +25,7 @@
   onSelect: (value: PickerValue, index: number) => void
   renderLabel: (item: PickerColumnItem) => ReactNode
   mouseWheel: boolean
+  wheelResistance: boolean
 }
 
 export const Wheel = memo<Props>(
@@ -160,13 +161,17 @@
         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 @@
     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

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'` |

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'` |

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}
           />
         </div>