antd-mobile模糊搜索匹配的picker

可以搜索模糊匹配的picker，暂只支持一维数组。

import React, { useEffect, useState } from 'react'
import { Modal, Button, List ,PickerView, InputItem} from 'antd-mobile'
import { PickerData } from 'antd-mobile/lib/picker/PropsType';

interface Props{
  title:string;
  pickerData:PickerData[];
  value:string|number;
  onChange:(v:string|number)=> void;
  disabled?:boolean;
}

function SearchPicker(props:Props) {
  const [visible, setVisible] = useState(false)
  const [keyword,setKeyword] = useState('')
  const [tempValue,setTempValue] = useState('')

  const show =()=>{
    if(props.disabled){
      return
    }
    setVisible(true)
  }
  const close =()=>{
    setVisible(false)
    setKeyword("")
  }
  const submit=()=>{
    props.onChange(tempValue)
    close()
  }
  
  return (
    <>
       <List.Item arrow="horizontal" onClick={show} extra={props.pickerData?.find(v=>v.value===props.value)?.label||'请选择'}>{props.title||''}</List.Item>
       <Modal
          visible={visible}
          maskClosable={true}
          popup
          animationType="slide-up"
          title={props.title||''}
          onClose={close}
        >
          <div style={{display:"flex", justifyContent:"space-between"}}>
          <Button size='small' style={{width:70}} type='ghost' onClick={close}>取消</Button>
            <Button size='small' style={{width:70}} type='primary' onClick={submit}>确定</Button>
          </div>
          <InputItem placeholder='搜索' value={keyword} onChange={(e)=>{setKeyword(e) }} />
          <PickerView cols={1} data={props.pickerData.filter(v=>keyword?String(v.label).includes(keyword):true)} value={[tempValue]} onChange={(v)=>setTempValue(v?.[0]) } />
        </Modal>
    </>
   
  );
}

export default SearchPicker;