feat: (Picker & PickerView) add mouseWheel prop (#5052)

awmleer · web-flow · commit 27c5cfda4872 · 2022-04-13T19:02:51.000+08:00
diff --git a/src/components/date-picker-view/date-picker-view.tsx b/src/components/date-picker-view/date-picker-view.tsx
@@ -15,7 +15,10 @@ import type {
   DatePickerFilter,
 } from '../date-picker/date-picker-utils'
 
-export type DatePickerViewProps = Pick<PickerViewProps, 'style'> & {
+export type DatePickerViewProps = Pick<
+  PickerViewProps,
+  'style' | 'mouseWheel'
+> & {
   value?: Date
   defaultValue?: Date
   onChange?: (value: Date) => void
@@ -73,6 +76,7 @@ export const DatePickerView: FC<DatePickerViewProps> = p => {
         )
       }
       value={pickerValue}
+      mouseWheel={props.mouseWheel}
       onChange={onChange}
     />
   )
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
@@ -29,6 +29,7 @@ export type DatePickerProps = Pick<
   | 'title'
   | 'stopPropagation'
   | 'style'
+  | 'mouseWheel'
 > & {
   value?: Date | null
   defaultValue?: Date | null
@@ -117,6 +118,7 @@ export const DatePicker: FC<DatePickerProps> = p => {
       onClick={props.onClick}
       title={props.title}
       stopPropagation={props.stopPropagation}
+      mouseWheel={props.mouseWheel}
     >
       {() => props.children?.(value)}
     </Picker>
diff --git a/src/components/picker-view/demos/demo1.tsx b/src/components/picker-view/demos/demo1.tsx
@@ -29,6 +29,10 @@ export default () => {
           }}
         />
       </DemoBlock>
+
+      <DemoBlock title='通过鼠标滚轮进行选择' padding='0'>
+        <PickerView columns={basicColumns} mouseWheel={true} />
+      </DemoBlock>
     </>
   )
 }
diff --git 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](./picker/#picker).
 | defaultValue | Default selected options                                     | `PickerValue[]`                                                | `[]`                   |
 | 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` |
+| mouseWheel   | Whether to allow interact with mouse wheel                   | `boolean`                                                      | `false`                |
 
 For the type definition of `PickerColumnItem` `PickerColumn` `PickerValue` `PickerValueExtend`, please refer to the document of [Picker](./picker).
 
@@ -70,6 +71,7 @@ DatePickerView is the content area of [DatePicker](./picker/#datepicker).
 | precision    | Precision                                                                                                                            | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day'` | `'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`                                            | -               |
 | filter       | Filter available time                                                                                                                | `DatePickerFilter`                                                                     | -               |
+| mouseWheel   | Whether to allow interact with mouse wheel                                                                                           | `boolean`                                                                              | `false`         |
 
 For the type definition and usage of `DatePickerFilter`, please refer to the document of [DatePicker](./picker#datepicker).
 
diff --git a/src/components/picker-view/index.zh.md b/src/components/picker-view/index.zh.md
@@ -10,13 +10,14 @@ PickerView 是 [Picker](./picker/#picker) 的内容区域。
 
 ### 属性
 
-| 属性         | 说明                     | 类型                                                           | 默认值                 |
-| ------------ | ------------------------ | -------------------------------------------------------------- | ---------------------- |
-| columns      | 配置每一列的选项         | `PickerColumn[] \| ((value: PickerValue[]) => PickerColumn[])` | -                      |
-| value        | 选中项                   | `PickerValue[]`                                                | -                      |
-| defaultValue | 默认选中项               | `PickerValue[]`                                                | `[]`                   |
-| onChange     | 选项改变时触发           | `(value: PickerValue[], extend: PickerValueExtend) => void`    | -                      |
-| renderLabel  | 自定义渲染每列展示的内容 | `(item: PickerColumnItem) => ReactNode`                        | `(item) => item.label` |
+| 属性         | 说明                         | 类型                                                           | 默认值                 |
+| ------------ | ---------------------------- | -------------------------------------------------------------- | ---------------------- |
+| columns      | 配置每一列的选项             | `PickerColumn[] \| ((value: PickerValue[]) => PickerColumn[])` | -                      |
+| value        | 选中项                       | `PickerValue[]`                                                | -                      |
+| defaultValue | 默认选中项                   | `PickerValue[]`                                                | `[]`                   |
+| onChange     | 选项改变时触发               | `(value: PickerValue[], extend: PickerValueExtend) => void`    | -                      |
+| renderLabel  | 自定义渲染每列展示的内容     | `(item: PickerColumnItem) => ReactNode`                        | `(item) => item.label` |
+| mouseWheel   | 是否允许通过鼠标滚轮进行选择 | `boolean`                                                      | `false`                |
 
 关于 `PickerColumnItem` `PickerColumn` `PickerValue` `PickerValueExtend` 的类型定义，请参考 [Picker](./picker) 的文档。
 
@@ -70,6 +71,7 @@ DatePickerView 是 [DatePicker](./picker/#datepicker) 的内容区域。
 | precision    | 精度                                                                                             | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day'` | `'day'` |
 | renderLabel  | 自定义渲染每列展示的内容。其中 `type` 参数为 `precision` 中的任意值，`data` 参数为默认渲染的数字 | `(type: string, data: number) => ReactNode`                                            | -       |
 | filter       | 过滤可供选择的时间                                                                               | `DatePickerFilter`                                                                     | -       |
+| mouseWheel   | 是否允许通过鼠标滚轮进行选择                                                                     | `boolean`                                                                              | `false` |
 
 关于 `DatePickerFilter` 的类型定义和使用，请参考 [DatePicker](./picker#datepicker) 的文档。
 
diff --git a/src/components/picker-view/picker-view.tsx b/src/components/picker-view/picker-view.tsx
@@ -28,13 +28,15 @@ export type PickerViewProps = {
   columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[])
   value?: PickerValue[]
   defaultValue?: PickerValue[]
+  mouseWheel?: boolean
   onChange?: (value: PickerValue[], extend: PickerValueExtend) => void
 } & Pick<PickerProps, 'renderLabel'> &
   NativeProps<'--height' | '--item-height' | '--item-font-size'>
 
 const defaultProps = {
   defaultValue: [],
   renderLabel: defaultRenderLabel,
+  mouseWheel: false,
 }
 
 export const PickerView = memo<PickerViewProps>(p => {
@@ -98,6 +100,7 @@ export const PickerView = memo<PickerViewProps>(p => {
           value={innerValue[index]}
           onSelect={handleSelect}
           renderLabel={props.renderLabel}
+          mouseWheel={props.mouseWheel}
         />
       ))}
       <div className={`${classPrefix}-mask`}>
diff --git a/src/components/picker-view/wheel.tsx b/src/components/picker-view/wheel.tsx
@@ -1,12 +1,14 @@
 import React, { memo, ReactNode, useRef } from 'react'
 import { useSpring, animated } from '@react-spring/web'
-import { useDrag } from '@use-gesture/react'
+import { useDrag, useWheel } from '@use-gesture/react'
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband'
 import { bound } from '../../utils/bound'
 import { PickerColumnItem, PickerValue } from './index'
 import isEqual from 'lodash/isEqual'
 import { useIsomorphicLayoutEffect } from 'ahooks'
 import { measureCSSLength } from '../../utils/measure-css-length'
+import { supportsPassive } from '../../utils/supports-passive'
+import { FullGestureState } from '@use-gesture/core/src/types/state'
 
 const classPrefix = `adm-picker-view`
 
@@ -16,6 +18,7 @@ type Props = {
   value: PickerValue
   onSelect: (value: PickerValue, index: number) => void
   renderLabel: (item: PickerColumnItem) => ReactNode
+  mouseWheel: boolean
 }
 
 export const Wheel = memo<Props>(
@@ -76,38 +79,63 @@ export const Wheel = memo<Props>(
       onSelect(item.value)
     }
 
-    const bind = useDrag(
+    const handleDrag = (
+      state: Pick<
+        FullGestureState<'drag'>,
+        'last' | 'offset' | 'velocity' | 'direction'
+      >
+    ) => {
+      draggingRef.current = true
+      const min = -((column.length - 1) * itemHeight.current)
+      const max = 0
+      if (state.last) {
+        draggingRef.current = false
+        const position =
+          state.offset[1] + state.velocity[1] * state.direction[1] * 50
+        const targetIndex =
+          min < max
+            ? -Math.round(bound(position, min, max) / itemHeight.current)
+            : 0
+        scrollSelect(targetIndex)
+      } else {
+        const position = state.offset[1]
+        api.start({
+          y: rubberbandIfOutOfBounds(
+            position,
+            min,
+            max,
+            itemHeight.current * 50,
+            0.2
+          ),
+        })
+      }
+    }
+
+    useDrag(
       state => {
-        draggingRef.current = true
-        const min = -((column.length - 1) * itemHeight.current)
-        const max = 0
-        if (state.last) {
-          draggingRef.current = false
-          const position =
-            state.offset[1] + state.velocity[1] * state.direction[1] * 50
-          const targetIndex =
-            min < max
-              ? -Math.round(bound(position, min, max) / itemHeight.current)
-              : 0
-          scrollSelect(targetIndex)
-        } else {
-          const position = state.offset[1]
-          api.start({
-            y: rubberbandIfOutOfBounds(
-              position,
-              min,
-              max,
-              itemHeight.current * 50,
-              0.2
-            ),
-          })
-        }
+        state.event.stopPropagation()
+        handleDrag(state)
       },
       {
         axis: 'y',
         from: () => [0, y.get()],
         filterTaps: true,
         pointer: { touch: true },
+        target: rootRef,
+      }
+    )
+
+    useWheel(
+      state => {
+        state.event.stopPropagation()
+        handleDrag(state)
+      },
+      {
+        axis: 'y',
+        from: () => [0, y.get()],
+        preventDefault: true,
+        target: props.mouseWheel ? rootRef : undefined,
+        eventOptions: supportsPassive ? { passive: false } : false,
       }
     )
 
@@ -166,7 +194,7 @@ export const Wheel = memo<Props>(
     }
 
     return (
-      <div ref={rootRef} className={`${classPrefix}-column`} {...bind()}>
+      <div ref={rootRef} className={`${classPrefix}-column`}>
         <animated.div
           style={{ translateY: y }}
           className={`${classPrefix}-column-wheel`}
diff --git a/src/components/picker/index.en.md b/src/components/picker/index.en.md
@@ -42,6 +42,7 @@ type PickerValueExtend = {
 | cancelText       | Text of the cancel button                                    | `ReactNode`                                                    | `'取消'`               |
 | children         | Render function of the selected options                      | `(items: PickerColumnItem[]) => ReactNode`                     | -                      |
 | renderLabel      | The function to custom rendering the label shown on a column | `(item: PickerColumnItem) => ReactNode`                        | `(item) => item.label` |
+| mouseWheel       | Whether to allow interact with mouse wheel                   | `boolean`                                                      | `false`                |
 
 In addition, the following attributes of [Popup](./popup) are supported: `getContainer` `afterShow` `afterClose` `onClick` `stopPropagation`
 
@@ -96,6 +97,7 @@ Same as `Picker`.
 | children     | The rendering function of the selected items                                                                                         | `(value: Date) => ReactNode`                                                           | -               |
 | 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`                                            | -               |
 | filter       | Filter available time                                                                                                                | `DatePickerFilter`                                                                     | -               |
+| mouseWheel   | Whether to allow interact with mouse wheel                                                                                           | `boolean`                                                                              | `false`         |
 
 ```typescript | pure
 type DatePickerFilter = Partial<
diff --git a/src/components/picker/index.zh.md b/src/components/picker/index.zh.md
@@ -42,6 +42,7 @@ type PickerValueExtend = {
 | cancelText       | 取消按钮的文字               | `ReactNode`                                                    | `'取消'`               |
 | children         | 所选项的渲染函数             | `(items: PickerColumnItem[]) => ReactNode`                     | -                      |
 | renderLabel      | 自定义渲染每列展示的内容     | `(item: PickerColumnItem) => ReactNode`                        | `(item) => item.label` |
+| mouseWheel       | 是否允许通过鼠标滚轮进行选择 | `boolean`                                                      | `false`                |
 
 此外还支持 [Popup](./popup) 的以下属性：`getContainer` `afterShow` `afterClose` `onClick` `stopPropagation`
 
@@ -122,6 +123,7 @@ type CascadePickerOption = {
 | children     | 所选项的渲染函数                                                                                 | `(value: Date) => ReactNode`                                                           | -       |
 | renderLabel  | 自定义渲染每列展示的内容。其中 `type` 参数为 `precision` 中的任意值，`data` 参数为默认渲染的数字 | `(type: string, data: number) => ReactNode`                                            | -       |
 | filter       | 过滤可供选择的时间                                                                               | `DatePickerFilter`                                                                     | -       |
+| mouseWheel   | 是否允许通过鼠标滚轮进行选择                                                                     | `boolean`                                                                              | `false` |
 
 ```typescript | pure
 type DatePickerFilter = Partial<
diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
@@ -36,6 +36,7 @@ export type PickerProps = {
   cancelText?: ReactNode
   children?: (items: (PickerColumnItem | null)[]) => ReactNode
   renderLabel?: (item: PickerColumnItem) => ReactNode
+  mouseWheel?: boolean
 } & Pick<
   PopupProps,
   'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'
@@ -122,6 +123,7 @@ export const Picker = memo<PickerProps>(p => {
           columns={props.columns}
           renderLabel={props.renderLabel}
           value={innerValue}
+          mouseWheel={props.mouseWheel}
           onChange={onChange}
         />
       </div>

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,10 @@ import type {`
`15`	`15`	`DatePickerFilter,`
`16`	`16`	`} from '../date-picker/date-picker-utils'`
`17`	`17`
`18`		`-export type DatePickerViewProps = Pick<PickerViewProps, 'style'> & {`
	`18`	`+export type DatePickerViewProps = Pick<`
	`19`	`+ PickerViewProps,`
	`20`	`+ 'style' \| 'mouseWheel'`
	`21`	`+> & {`
`19`	`22`	`value?: Date`
`20`	`23`	`defaultValue?: Date`
`21`	`24`	`onChange?: (value: Date) => void`
`@@ -73,6 +76,7 @@ export const DatePickerView: FC<DatePickerViewProps> = p => {`
`73`	`76`	`)`
`74`	`77`	`}`
`75`	`78`	`value={pickerValue}`
	`79`	`+ mouseWheel={props.mouseWheel}`
`76`	`80`	`onChange={onChange}`
`77`	`81`	`/>`
`78`	`82`	`)`
Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,10 @@ export default () => {`
`29`	`29`	`}}`
`30`	`30`	`/>`
`31`	`31`	`</DemoBlock>`
	`32`	`+`
	`33`	`+ <DemoBlock title='通过鼠标滚轮进行选择' padding='0'>`
	`34`	`+ <PickerView columns={basicColumns} mouseWheel={true} />`
	`35`	`+ </DemoBlock>`
`32`	`36`	`</>`
`33`	`37`	`)`
`34`	`38`	`}`