test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:39:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: Select组件reload期间禁用 Close: #8818

Browse Source
This commit is contained in:
lurunze1226 2023-11-27 14:16:41 +08:00
parent ce53af623a
commit b5472f7382
2 changed files with 100 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
docs/zh-CN/components/form/select.md
View File

@ -1261,3 +1261,70 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |
| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
### 刷新数据源 reload
```schema: scope="body"
{
"type": "form",
"body": [
{
"type": "control",
"label": "点击刷新",
"mode": "horizontal",
"body": [
{
"type": "action",
"label": "点击刷新Select数据源",
"level": "primary",
"className": "mb-2",
"onEvent": {
"click": {
"actions": [
{
"componentId": "select_reload",
"actionType": "reload",
}
],
"debounce": {
"wait": 200
}
}
}
}
]
},
{
"name": "watchField",
"type": "input-text",
"label": "监听字段刷新",
"mode": "horizontal",
"placeholder": "输入内容刷新Select数据源",
"onEvent": {
"change": {
"actions": [
{
"componentId": "select_reload",
"actionType": "reload",
}
],
"debounce": {
"wait": 250
}
}
}
},
{
"label": "Select",
"type": "select",
"name": "select",
"id": "select_reload",
"mode": "horizontal",
"source": "/api/mock2/form/getOptions?waitSeconds=3",
"multiple": true,
"clearable": true
}
]
}
```

63
packages/amis-ui/src/components/Select.tsx
View File

@ -477,14 +477,19 @@ export class Select extends React.Component<SelectProps, SelectState> {
@autobind
open() {
this.props.disabled ||
this.setState(
{
isOpen: true,
highlightedIndex: -1
},
() => setTimeout(this.focus, 500)
);
const {disabled, loading} = this.props;
if (disabled || loading) {
return;
}
this.setState(
{
isOpen: true,
highlightedIndex: -1
},
() => setTimeout(this.focus, 500)
);
}
@autobind
@ -505,38 +510,36 @@ export class Select extends React.Component<SelectProps, SelectState> {
@autobind
toggle(e?: React.MouseEvent<HTMLDivElement>) {
const {disabled, loading} = this.props;
if (
e &&
this.menu.current &&
this.menu.current.contains(e.target as HTMLElement)
(e &&
this.menu.current &&
this.menu.current.contains(e.target as HTMLElement)) ||
disabled ||
loading
) {
return;
}
this.props.disabled ||
this.setState(
{
isOpen: !this.state.isOpen,
highlightedIndex: -1
},
this.state.isOpen ? undefined : () => setTimeout(this.focus, 500)
);
this.setState(
{
isOpen: !this.state.isOpen,
highlightedIndex: -1
},
this.state.isOpen ? undefined : () => setTimeout(this.focus, 500)
);
}
@autobind
onFocus(e: any) {
const {simpleValue} = this.props;
const {selection} = this.state;
const {simpleValue, disabled, loading} = this.props;
const {selection, isOpen} = this.state;
const value = simpleValue ? selection.map(item => item.value) : selection;
this.props.disabled ||
this.state.isOpen ||
this.setState(
{
isFocused: true
},
this.focus
);
if (!disabled && !loading && !isOpen) {
this.setState({isFocused: true}, this.focus);
}
this.props.onFocus &&
this.props.onFocus({
@ -1345,7 +1348,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
[`Select--searchable`]: searchable,
'is-opened': isOpen,
'is-focused': this.state.isFocused,
'is-disabled': disabled,
'is-disabled': disabled || loading,
'is-mobile': mobileUI,
'is-error': hasError,
[`Select--border${ucFirst(borderMode)}`]: borderMode