feat: 添加手动控制选中值的功能到 Picker 组件

Author: lzm0x219

src/components/picker/demos/demo1.tsx

@@ -72,6 +72,45 @@ function RenderChildrenDemo() {
   )
 }
 
+// 手动控制选中值
+function SelectedDemo() {
+  const [value, setValue] = useState<(string | null)[]>([])
+
+  const [selectValue, setSelectValue] = useState<(string | null)[]>([])
+  return (
+    <Picker
+      columns={basicColumns}
+      value={value}
+      title={
+        <div
+          onClick={() => {
+            setSelectValue(['Fri', 'pm'])
+          }}
+        >
+          设置为星期五下午
+        </div>
+      }
+      selectValue={selectValue}
+      onConfirm={setValue}
+      onSelect={(val, extend) => {
+        console.log('onSelect', val, extend.items)
+        setSelectValue(val)
+      }}
+    >
+      {(items, { open }) => {
+        return (
+          <Space align='center'>
+            <Button onClick={open}>选择</Button>
+            {items.every(item => item === null)
+              ? '未选择'
+              : items.map(item => item?.label ?? '未选择').join(' - ')}
+          </Space>
+        )
+      }}
+    </Picker>
+  )
+}
+
 export default () => {
   return (
     <>
@@ -83,6 +122,10 @@ export default () => {
         <RenderChildrenDemo />
       </DemoBlock>
 
+      <DemoBlock title='使用 selectValue 来控制选择值'>
+        <SelectedDemo />
+      </DemoBlock>
+
       <DemoBlock title='使用 actions 来控制显示/隐藏'>
         <Space direction='vertical' block>
           <ActionsDemo />

src/components/picker/picker.tsx

@@ -1,30 +1,24 @@
-import React, {
-  useState,
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-  memo,
-} from 'react'
-import type { ReactNode, CSSProperties } from 'react'
+import { useMemoizedFn } from 'ahooks'
 import classNames from 'classnames'
-import Popup, { PopupProps } from '../popup'
-import { mergeProps } from '../../utils/with-default-props'
+import type { CSSProperties, ReactNode } from 'react'
+import React, { forwardRef, memo, useEffect, useImperativeHandle } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { usePropsValue } from '../../utils/use-props-value'
-import {
-  PickerColumn,
-  PickerColumnItem,
-  PickerValue,
-  PickerValueExtend,
-} from './index'
+import { mergeProps } from '../../utils/with-default-props'
+import { useConfig } from '../config-provider'
 import PickerView from '../picker-view'
 import {
   generateColumnsExtend,
   useColumnsExtend,
 } from '../picker-view/columns-extend'
-import { useConfig } from '../config-provider'
-import { useMemoizedFn } from 'ahooks'
+import Popup, { PopupProps } from '../popup'
 import SafeArea from '../safe-area'
+import {
+  PickerColumn,
+  PickerColumnItem,
+  PickerValue,
+  PickerValueExtend,
+} from './index'
 import { defaultRenderLabel } from './picker-utils'
 
 export type PickerActions = {
@@ -40,6 +34,7 @@ export type PickerProps = {
   columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[])
   value?: PickerValue[]
   defaultValue?: PickerValue[]
+  selectValue?: PickerValue[]
   loading?: boolean
   loadingContent?: ReactNode
   onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void
@@ -130,7 +125,11 @@ export const Picker = memo(
 
     const extend = useColumnsExtend(props.columns, value)
 
-    const [innerValue, setInnerValue] = useState<PickerValue[]>(value)
+    const [innerValue, setInnerValue] = usePropsValue({
+      value: props.selectValue,
+      defaultValue: value,
+    })
+
     useEffect(() => {
       if (innerValue !== value) {
         setInnerValue(value)