refactor: association select display loading when data is loading (#1925)

* refactor: association select loading

* refactor: association select loading

* refactor: loading
This commit is contained in:
katherinehhh 2023-05-26 11:39:16 +08:00 committed by GitHub
parent efbd7c7020
commit 644b6eccb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 6 deletions

View File

@ -192,7 +192,6 @@ const InternalRemoteSelect = connect(
run();
firstRun.current = true;
};
return (
<Select
dropdownMatchSelectWidth={false}
@ -205,7 +204,7 @@ const InternalRemoteSelect = connect(
objectValue={objectValue}
value={value}
{...others}
loading={loading}
loading={data! ? loading : true}
options={mapOptionsToTags(options)}
/>
);

View File

@ -2,7 +2,7 @@ import { LoadingOutlined } from '@ant-design/icons';
import { connect, mapProps, mapReadPretty } from '@formily/react';
import { isValid, toArr } from '@formily/shared';
import type { SelectProps } from 'antd';
import { Select as AntdSelect } from 'antd';
import { Select as AntdSelect, Spin, Empty } from 'antd';
import React from 'react';
import { ReadPretty } from './ReadPretty';
import { defaultFieldNames, getCurrentOptions } from './shared';
@ -12,7 +12,7 @@ type Props = SelectProps<any, any> & { objectValue?: boolean; onChange?: (v: any
const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
const ObjectSelect = (props: Props) => {
const { value, options, onChange, fieldNames, mode, ...others } = props;
const { value, options, onChange, fieldNames, mode, loading, ...others } = props;
const toValue = (v: any) => {
if (isEmptyObject(v)) {
return;
@ -38,6 +38,7 @@ const ObjectSelect = (props: Props) => {
value={toValue(value)}
allowClear
labelInValue
notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
options={options}
fieldNames={fieldNames}
showSearch
@ -70,13 +71,13 @@ const filterOption = (input, option) => (option?.label ?? '').toLowerCase().incl
const InternalSelect = connect(
(props: Props) => {
const { objectValue, value, ...others } = props;
const { objectValue, loading, value, ...others } = props;
let mode: any = props.multiple ? 'multiple' : props.mode;
if (mode && !['multiple', 'tags'].includes(mode)) {
mode = undefined;
}
if (objectValue) {
return <ObjectSelect {...others} value={value} mode={mode} />;
return <ObjectSelect {...others} value={value} mode={mode} loading={loading} />;
}
return (
<AntdSelect
@ -84,6 +85,7 @@ const InternalSelect = connect(
filterOption={filterOption}
allowClear
dropdownMatchSelectWidth={false}
notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
value={value}
{...others}
onChange={(changed) => {