tachybase_todo/packages/app/src/components/form.fields/remote-select/index.tsx
2021-01-04 20:53:30 +08:00

57 lines
1.6 KiB
TypeScript

import React, { useEffect } from 'react'
import { connect } from '@formily/react-schema-renderer'
import moment from 'moment'
import { Select } from 'antd'
import {
mapStyledProps,
mapTextComponent,
compose,
isStr,
isArr
} from '../shared'
import { useRequest } from 'umi';
import api from '@/api-client';
import { Spin } from '@nocobase/client'
function RemoteSelectComponent(props) {
const { value, onChange, disabled, resourceName, associatedKey, filter, labelField, valueField = 'id', objectValue, placeholder } = props;
const { data = [], loading = true } = useRequest(() => {
return api.resource(resourceName).list({
associatedKey,
filter,
});
}, {
refreshDeps: [resourceName, associatedKey]
});
return (
<>
<Select
placeholder={placeholder}
disabled={disabled}
notFoundContent={loading ? <Spin/> : undefined}
allowClear
loading={loading}
value={value && typeof value === 'object' ? value[valueField] : value}
onChange={(value, option) => {
if (value === null || typeof value === 'undefined') {
onChange(undefined);
return;
}
// @ts-ignore
const item = option.item;
onChange(objectValue ? item : value);
}}
>
{!loading && data.map(item => (<Select.Option item={item} value={item[valueField]}>{item[labelField]}</Select.Option>))}
</Select>
</>
);
}
export const RemoteSelect = connect({
getProps: mapStyledProps,
getComponent: mapTextComponent,
})(RemoteSelectComponent)
export default RemoteSelect