Skip to content

Commit

Permalink
fix(SearchSelect): 增加value受控支持,多选模式下为数组 (#540)
Browse files Browse the repository at this point in the history 
* fix(Form): 修复ref获取不到表单方法

* fix(Form):使用useLayoutEffect替换useEffect绑定绑定ForwardedRef

* refactor:(Form) 修改Ref类型定义

* fix(Form): 修复无法重置(initialValue)表单问题

* fix(Form): 类型导出错误

* feat(search-select):增加多选功能

* fix(form):增加设置表单值方法

* feat(form):增加必传表单项标注 #534

* fix(search-select):增加Tag依赖

* fix(form):增加获取异常信息方法

* fix(form):修复afterSubmit回调失效问题

* fix(search-select):缺失依赖

* refactor(search-select):重命名类型名称

* style(search-select): 多选select样式

* style(search-select): 多选select下拉弹层样式

* fix(Table):data不支持对象内包含布尔类型 #517

* style(search-select):规范样式命名

* style(SearchSelect): 规范命名

* ifx(SearchSelect): 增加value受控支持,多选模式下为数组

* fix(SearchSelect): 修复defaultValue支持
  • Loading branch information
@nullptr-z
nullptr-z committed Feb 17, 2022
1 parent 83a598c commit 3644b9c
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 34 deletions.
36 changes: 19 additions & 17 deletions packages/react-search-select/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,25 @@ import ReactDOM from 'react-dom';
import { SearchSelect } from 'uiw';

const Demo = () => {
const [option, setOption] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [value, setValue] = React.useState(undefined);
function handleSearch(e) {
console.log('handleSearch',e)
setLoading(true)
setTimeout(() => {
setOption([
{ label: 'a', value: 2 },
{ label: 'aa', value: 3 },
{ label: 'aaa', value: 4 },
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);
const [value, setValue] = React.useState([2,5]);
function handleSearch(e) {
setValue([3,4])
setLoading(true)
setTimeout(() => {
setOption();
setLoading(false);
}, 2000);
}
Expand All @@ -42,15 +45,14 @@ const Demo = () => {
style={{ maxWidth: 200 }}
showSearch={true}
allowClear
value={[2,3]}
value={value}
disabled={false}
placeholder="请输入选择"
onSearch={handleSearch}
// onSelect={(value)=>console.log('onSelect',value)}
loading={loading}
option={option}
onChange={(value) => {
console.log('onChange',value)
setValue(value)
}}
/>
Expand Down Expand Up @@ -162,13 +164,13 @@ ReactDOM.render(<Demo />, _mount_);
|--------- |-------- |--------- |-------- |
| allowClear | 支持清除 | Boolean | `false` |
| disabled | 禁用选择器 | Boolean | `false` |
| mode | 是否可以多选; 'multiple','single' | String | 'single' |
| mode | 选择模式: `multiple` `single` | String | `single` |
| defaultValue | 指定默认选中的条目 | String/Number | - |
| value | 指定选中的条目的值 | String/Number | - |
| value | 指定选中的条目的值 | String/Number 多选模式下`value`皆为`Array<String/Number>` | - |
| placeholder | 选择框默认文字 | String | - |
| showSearch | 使单选模式可搜索 | Boolean | - |
| size | 选择框尺寸 | Enum{`large`, `default`, `small` } | `default` |
| onChange | 选中 option，或 input 的 value，调用此函数 | `function(value, option:Option/Array<Option>)` | - |
| onChange | 选中 option，或 input 的 value，调用此函数 | `function(value: String/Number, option:Array<Option>)` | - |
| onSearch | 文本框值变化时回调 | `function(value: String)` | - |
| onSelect | 被选中时调用，参数为选中项的 value | `function(value: String/Number )` | - |
| loading | 加载中状态 | Boolean | false |
52 changes: 35 additions & 17 deletions packages/react-search-select/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import { useRef } from 'react';
import { useEffect } from 'react';
import './style/index.less';

type ValueType = string | number | undefined;
type ValueType = string | number;
export interface SearchSelectProps extends IProps, DropdownProps {
mode?: 'single' | 'multiple';
size?: 'large' | 'default' | 'small';
loading: boolean;
loading?: boolean;
showSearch?: boolean;
allowClear: boolean;
defaultValue?: string | number;
value?: ValueType;
allowClear?: boolean;
defaultValue?: ValueType | Array<ValueType>;
value?: ValueType | Array<ValueType>;
option: SearchSelectOptionData[];
onSelect?: (value: ValueType | Array<ValueType>) => void;
onSearch?: (value: string) => void;
Expand Down Expand Up @@ -56,9 +56,7 @@ export default function SearchSelect(props: SearchSelectProps) {
const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
const isMultiple = useMemo(() => mode === 'multiple', [mode]);
const [innerIsOpen, setInnerIsOpen] = useState(false);
const [selectedValue, setSelectedValue] = useState<Array<SearchSelectOptionData>>(
option.filter((item) => item.value === value),
);
const [selectedValue, setSelectedValue] = useState<Array<SearchSelectOptionData>>([]);
const [selectedLabel, setSelectedLabel] = useState('');
const [selectIconType, setSelectIconType] = useState('');
const divRef = useRef<HTMLDivElement>(null);
Expand All @@ -67,12 +65,34 @@ export default function SearchSelect(props: SearchSelectProps) {
valueRef.current = useMemo(() => selectedValue, [selectedValue]);

useEffect(() => {
if (defaultValue) {
const defaultMenuItem = option.filter((opt) => opt.value === defaultValue);
setSelectedValue(defaultMenuItem);
if (value === undefined && defaultValue !== undefined) {
selectedValueChange(defaultValue);
}
}, []);

useEffect(() => {
if (value !== undefined) {
selectedValueChange(value!);
}
}, [JSON.stringify(value)]);

function selectedValueChange(changeValue: ValueType | Array<ValueType>) {
let opts: Array<SearchSelectOptionData> = [];
if (Array.isArray(changeValue)) {
opts = option.filter((item) => {
const findResult = changeValue.find((v) => item.value === v);
return findResult;
});
} else if (!isMultiple) {
const findResult = option.find((item) => item.value === changeValue);
if (findResult) {
setSelectedLabel(findResult.label);
opts.push(findResult);
}
}
setSelectedValue(opts);
}

function removeSelectItem(index: number) {
const selectedValue = valueRef.current as SearchSelectOptionData[];
selectedValue.splice(index, 1);
Expand All @@ -83,12 +103,11 @@ export default function SearchSelect(props: SearchSelectProps) {
function handleItemClick(item: SearchSelectOptionData) {
setInnerIsOpen(false);
const values = [item];
setSelectedValue(values);
setSelectedLabel(item.label);
const resultValue = item.value;
value === undefined && setSelectedValue(values); // 如果存在props.value,内部不维护value状态
onSelect && onSelect(resultValue);
// 支持form组件
handleSelectChange(resultValue);
handleSelectChange(resultValue); // 支持form组件
}

function handleItemsClick(item: SearchSelectOptionData) {
Expand All @@ -99,11 +118,10 @@ export default function SearchSelect(props: SearchSelectProps) {
} else {
values = [...selectedValue, item];
}
setSelectedValue(values);
const resultValue = values.map((item) => item.value);
value === undefined && setSelectedValue(values);
onSelect && onSelect(resultValue);
// // 支持form组件
handleSelectChange(resultValue);
handleSelectChange(resultValue); // 支持form组件
}

// 渲染icon
Expand Down

0 comments on commit 3644b9c

Please sign in to comment.