diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md index f2b382c511..1f98080d56 100644 --- a/packages/react-search-select/README.md +++ b/packages/react-search-select/README.md @@ -57,7 +57,6 @@ function handleSearch(e) { maxTagCount={6} allowClear value={values} - disabled={false} placeholder="请输入选择" onSearch={handleSearch} // onSelect={(value)=>console.log('onSelect',value)} @@ -78,7 +77,6 @@ function handleSearch(e) { maxTagCount={6} allowClear value={value} - disabled={false} placeholder="请输入选择" onSearch={handleSearch} // onSelect={(value)=>console.log('onSelect',value)} @@ -90,6 +88,14 @@ function handleSearch(e) { }} /> + + + ); }; @@ -115,11 +121,10 @@ const Demo = () => { { label: 'a8', value: 8 }, ] + const valueAmount = 2 const [option, setOption] = React.useState(selectOption); const [loading, setLoading] = React.useState(false); - const [values, setValues] = React.useState([{label: 'a7', value: 7}]); - const [disabled, setDisabled] = React.useState(false); - const maxTagCount = 2 + const [values, setValues] = React.useState([ 1, 2, 7]); function handleSearch(e) { setLoading(true) @@ -131,7 +136,70 @@ const Demo = () => { } return( - + + console.log('onSelect',value)} + loading={loading} + option={option} + onChange={(value) => { + setValues(value) + }} + /> + + ); +}; +ReactDOM.render(, _mount_); +``` + +## 显示最大数量 + + +```jsx +import ReactDOM from 'react-dom'; +import { SearchSelect,Row,Col } from 'uiw'; + +const Demo = () => { + 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 maxTagCount = 4 + const [option, setOption] = React.useState(selectOption); + const [loading, setLoading] = React.useState(false); + const [values, setValues] = React.useState([ + { label: 'a1', value: 1 }, + { label: 'a2', value: 2 }, + { label: 'a5', value: 5 }, + { label: 'a7', value: 7 }, + { label: 'a8', value: 8 }, + ]); + + function handleSearch(e) { + setLoading(true) + setTimeout(() => { + const filterOpion= selectOption.filter(item=>!!item.label.includes(e.trim())) + setOption([...filterOpion]); + setLoading(false); + }, 500); + } + + return( + { maxTagCount={maxTagCount} allowClear value={values} - disabled={disabled} placeholder="请输入选择" onSearch={handleSearch} - // onSelect={(value)=>console.log('onSelect',value)} loading={loading} option={option} onChange={(value) => { - if(value?.length >= maxTagCount) - setDisabled(true) setValues(value) }} /> @@ -158,6 +222,47 @@ const Demo = () => { ReactDOM.render(, _mount_); ``` +## 不可搜索 + + +```jsx +import ReactDOM from 'react-dom'; +import { SearchSelect,Row,Col } from 'uiw'; + +const Demo = () => { + 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 [values, setValues] = React.useState([1,7]); + + return( + + { + setValues(value) + }} + /> + + ); +}; +ReactDOM.render(, _mount_); +``` ### 在表单中使用 @@ -307,3 +412,4 @@ ReactDOM.render(, _mount_); | onSearch | 文本框值变化时回调 | function(value: String) | - | - | | onSelect | 被选中时调用,参数为选中项的 value | function(value: String/Number ) | - | - | | loading | 加载中状态 | Boolean | `false` | - | +| valueAmount | 多选模式下,限制最多选择多少个(value的长度) | number | - | - | diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx index e167f22b3f..c03d05b3a5 100644 --- a/packages/react-search-select/src/index.tsx +++ b/packages/react-search-select/src/index.tsx @@ -15,6 +15,7 @@ export interface SearchSelectProps extends IProps, DropdownProps { mode?: 'single' | 'multiple'; size?: 'large' | 'default' | 'small'; maxTagCount?: number; + valueAmount?: number; labelInValue?: boolean; loading?: boolean; showSearch?: boolean; @@ -38,9 +39,10 @@ export default function SearchSelect(props: SearchSelectProps) { const { allowClear = false, disabled = false, + valueAmount, size = 'default', - maxTagCount, option = [], + maxTagCount, loading = false, labelInValue = false, prefixCls = 'w-search-select', @@ -125,7 +127,7 @@ export default function SearchSelect(props: SearchSelectProps) { } if (!isMultiple && opts.length > 0) setSelectedLabel(opts[0].label || ''); - setSelectedValue(opts); + setSelectedValue(opts.slice(0, valueAmount)); } function removeSelectItem(index: number) { @@ -149,7 +151,10 @@ export default function SearchSelect(props: SearchSelectProps) { } function handleItemsClick(index: number, item?: SearchSelectOptionData) { - let values: SearchSelectOptionData[] = index !== -1 ? removeSelectItem(index) : [...selectedValue, item!]; + let values: SearchSelectOptionData[] = + index !== -1 + ? removeSelectItem(index) + : [...selectedValue.slice(0, valueAmount ? valueAmount - 1 : undefined), item!]; const resultValue = values.map((item) => item.value); handleChange(resultValue, values); }