diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md index cd5714ccef..45acb84a30 100644 --- a/packages/react-search-select/README.md +++ b/packages/react-search-select/README.md @@ -8,7 +8,7 @@ SearchSelect 搜索选择器 搜索选择器 ```jsx -import { SearchSelect } from 'uiw'; +import { SearchSelect, Row ,Col } from 'uiw'; // or import SearchSelect from '@uiw/react-search-select'; ``` @@ -18,7 +18,7 @@ import SearchSelect from '@uiw/react-search-select'; ```jsx import ReactDOM from 'react-dom'; -import { SearchSelect } from 'uiw'; +import { SearchSelect,Row,Col } from 'uiw'; const Demo = () => { const selectOption=[ @@ -34,34 +34,63 @@ const Demo = () => { const [option, setOption] = React.useState(selectOption); const [loading, setLoading] = React.useState(false); - const [value, setValue] = React.useState([{label: 'a8', value: 8}]); + const [values, setValues] = React.useState([{label: 'a7', value: 7},{label: 'a8', value: 8}]); + const [value, setValue] = React.useState([{label: 'a7', value: 7}]); + function handleSearch(e) { setLoading(true) setTimeout(() => { - setOption(); + const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim())) + setOption([...filterOpion]); setLoading(false); - }, 2000); + }, 500); } + return( - console.log('onSelect',value)} - loading={loading} - option={option} - onChange={(value) => { - console.log('value',value) - setValue(value) - }} - /> + + + console.log('onSelect',value)} + loading={loading} + option={option} + onChange={(value) => { + console.log('value', value) + setValues(value) + }} + /> + + + console.log('onSelect',value)} + loading={loading} + option={option} + onChange={(value) => { + console.log('value', value) + setValue(value) + }} + /> + + ); }; ReactDOM.render(, _mount_); @@ -77,19 +106,26 @@ import ReactDOM from 'react-dom'; import { Form, Row, Col, SearchSelect, Button, Notify } from 'uiw'; const Demo = () => { - const [option, setOption] = React.useState([]); + const selectOption =[ + { label: 'a1', value: 1 }, + { label: 'a2', value: 2 }, + { label: 'a3', value: 3 }, + { label: 'a4', value: 4 }, + { label: 'a5', value: 5 }, + { label: 'a6', value: 6 }, + { label: 'a7', value: 7 }, + { label: 'a8', value: 8 }, + ]; + const [option, setOption] = React.useState(selectOption); const [loading, setLoading] = React.useState(false); + function handleSearch(e) { - console.log('handleSearch',e) setLoading(true) setTimeout(() => { - setOption([ - { label: 'a', value: 2 }, - { label: 'aa', value: 3 }, - { label: 'aaa', value: 4 }, - ]); + const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim())) + setOption([...filterOpion]); setLoading(false); - }, 2000); + }, 500); } return ( @@ -119,8 +155,30 @@ const Demo = () => { }} fields={{ selectField: { + initialValue:[{label: 'a7', value: 7},{label: 'a8', value: 8}], children: ( { + console.log('onChange',v) + }} + option={option} + loading={loading} + /> + ) + }, + selectSingle: { + initialValue:[{label: 'a7', value: 7}], + children: ( + { {({ fields, state, canSubmit }) => { return (
- + {fields.selectField} + + {fields.selectSingle} + diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx index 0918b47db8..3e1f97297e 100644 --- a/packages/react-search-select/src/index.tsx +++ b/packages/react-search-select/src/index.tsx @@ -63,7 +63,7 @@ export default function SearchSelect(props: SearchSelectProps) { const isMultiple = useMemo(() => mode === 'multiple', [mode]); const [innerIsOpen, setInnerIsOpen] = useState(false); const [selectedValue, setSelectedValue] = useState>([]); - const [selectedLabel, setSelectedLabel] = useState(''); + const [selectedLabel, setSelectedLabel] = useState(''); const [selectIconType, setSelectIconType] = useState(''); const omitTagCount = useMemo( () => (maxTagCount && selectedValue.length > maxTagCount ? selectedValue.length - maxTagCount : 0), @@ -95,7 +95,6 @@ export default function SearchSelect(props: SearchSelectProps) { changeValue: ValueType | Array | SearchSelectOptionData | Array, ) { let opts: Array = []; - if (labelInValue) { if (Array.isArray(changeValue)) { opts = changeValue as Array; @@ -113,6 +112,8 @@ export default function SearchSelect(props: SearchSelectProps) { } } } + + if (!isMultiple && opts.length > 0) setSelectedLabel(opts[0].label || ''); setSelectedValue(opts); } @@ -138,6 +139,7 @@ export default function SearchSelect(props: SearchSelectProps) { } function handleChange(resultValue: ValueType | Array, values: SearchSelectOptionData[]) { + setSelectedLabel(''); onSelect && onSelect(resultValue); handleSelectChange(resultValue, values); // 支持form组件 @@ -157,7 +159,7 @@ export default function SearchSelect(props: SearchSelectProps) { // handle change function handleInputChange(e: React.ChangeEvent) { const value = e.target.value; - setInnerIsOpen(!!value); + setInnerIsOpen(true); setSelectedLabel(value); setSelectIconType(showSearch && value ? 'loading' : ''); showSearch && onSearch && onSearch(value); @@ -183,17 +185,22 @@ export default function SearchSelect(props: SearchSelectProps) { } } + function onVisibleChange(open: boolean) { + if (!open) setSelectedLabel(''); + if (!isMultiple && selectedValue.length > 0) { + setSelectedLabel(selectedValue[0].label); + } + setInnerIsOpen(open); + } + return ( 0 ? false : true} {...others} - onVisibleChange={(open) => { - if (!open && isMultiple) setSelectedLabel(''); - setInnerIsOpen(open); - }} + onVisibleChange={onVisibleChange} isOpen={innerIsOpen} menu={