* feat: add Cacader component into schema component * docs: change document language * Nocobase next color select (#157) * feat: add useCompile hook * feat: add ColorSelect component into schema component * optimize: rename checkbox component file (#155) * optimize: rename checkbox component file * optimize: rename checkbox component file * feat: optimize antd-config-orovider * feat: move admin-layout and auth-layout to route-switch * feat: add application demo * feat: add radio into schema component (#154) * feat: add radio to schema component * docs: add Radio demos into schema component * rafactor: change import path * docs: change demo language * fix: add title and description to demos Co-authored-by: chenos <chenlinxh@gmail.com> * feat: add input into schema component (#158) * feat: add Input Component to schema compoennt * code cleanup Co-authored-by: chenos <chenlinxh@gmail.com> * feat: add RemoteSchemaComponent * feat: add admin layout * feat: add menu into schema component * fix: remove antd/dist/antd.css * feat: improve application demo * feat: add DatePicker into schema components (#161) * feat: add DatePicker into schema components * improve code Co-authored-by: chenos <chenlinxh@gmail.com> * feature/nocobase next password (#159) * feat: add Password Component into schema components * improve code Co-authored-by: chenos <chenlinxh@gmail.com> * feat: add InputNumber Component into schema component (#160) * feat: add InputNumber Component into schema component * improve code Co-authored-by: chenos <chenlinxh@gmail.com> * feat(client-menu): improve code * feat: acl (#153) * feat: getRepository * getRepository return type * export action * add: acl * feat: setResourceAction * feat: action alias * chore: code struct * feat: removeResourceAction * chore: file name * ignorecase * remove ACL * feat: ACL * feat: role toJSON * using emit Co-authored-by: chenos <chenlinxh@gmail.com> * Acl (#162) * feat: getRepository * getRepository return type * export action * add: acl * feat: setResourceAction * feat: action alias * chore: code struct * feat: removeResourceAction * chore: file name * ignorecase * remove ACL * feat: ACL * feat: role toJSON * using emit * chore: test Co-authored-by: chenos <chenlinxh@gmail.com> * Feat/plugin collection manager (#147) * refactor: collection manager plugin * feat(database): magic attribute model * MagicAttributeModel * load collections & fields options * collections filterTargetKey * Feat/plugin UI schema v0.6 (#143) * v0.6 * plugin-ui-schema: insert && getJsonSchema * plugin-ui-schema: insert schema with sort * plugin-ui-schema: node with x-index * insert adjacent method * chore: insert * typo * insert with x-uid * fix: getSchema by subtree * add ui-schema actions * fix: mysql compatibility * remove ui-schema when remove node tree * ui schema patch * ui_schemas.create * test cases * test cases * fix(database): reset changed before update * feat: insert ui schema node after created * feat: patch ui schema node after updated * fix: sqlite error * uid * cleanup * test cases * feat: ui_schema items type support * fix: insert items node * fix: get inner type * change items struct * add insert return value * add insert return value Co-authored-by: chenos <chenlinxh@gmail.com> * update yarn.lock * rename * feat(client): plugin manager toolbar * feat: add demo for plugin manager toolbar * feat: improve the toolbar of the plugin manager * feat: improve document title and page title support * feat: add IconPicker component into schema components * feat: improve icon component * migrate TimePicker component into schema components (#164) * feat: add TimePicker component into schema components * improve * TimePicker.RangePicker Co-authored-by: chenos <chenlinxh@gmail.com> * Load Options Lazily * feat: extract read pretty * fix: useEffect only on update * feat: add Cacader component into schema component * docs: change document language * feat: extract read pretty * Load Options Lazily * improve code Co-authored-by: chenos <chenlinxh@gmail.com> Co-authored-by: ChengLei Shao <chareice@live.com>
97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { LoadingOutlined } from '@ant-design/icons';
|
|
import { ArrayField } from '@formily/core';
|
|
import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
|
|
import { toArr } from '@formily/shared';
|
|
import { Cascader as AntdCascader } from 'antd';
|
|
import { isBoolean, omit } from 'lodash';
|
|
import React from 'react';
|
|
import { defaultFieldNames } from './defaultFieldNames';
|
|
import { ReadPretty } from './ReadPretty';
|
|
|
|
const useDefLoadData = (props: any) => props.loadData;
|
|
|
|
export const Cascader = connect(
|
|
(props: any) => {
|
|
const field = useField<ArrayField>();
|
|
const {
|
|
value,
|
|
onChange,
|
|
labelInValue,
|
|
fieldNames = defaultFieldNames,
|
|
useLoadData = useDefLoadData,
|
|
changeOnSelectLast,
|
|
changeOnSelect,
|
|
...others
|
|
} = props;
|
|
const loadData = useLoadData(props);
|
|
// 兼容值为 object[] 的情况
|
|
const toValue = () => {
|
|
return toArr(value).map((item) => {
|
|
if (typeof item === 'object') {
|
|
return item[fieldNames.value];
|
|
}
|
|
return item;
|
|
});
|
|
};
|
|
const displayRender = (labels: string[], selectedOptions: any[]) => {
|
|
const values = toArr(value);
|
|
if (values.length !== labels.length) {
|
|
labels = toValue();
|
|
selectedOptions = values;
|
|
}
|
|
if (selectedOptions.length === 0) {
|
|
selectedOptions = values;
|
|
}
|
|
return labels.map((label, i) => {
|
|
let option = selectedOptions[i];
|
|
if (!option || typeof option === 'string' || typeof option === 'number') {
|
|
option = { [fieldNames.label]: label, [fieldNames.value]: label };
|
|
}
|
|
if (i === labels.length - 1) {
|
|
return <span key={option[fieldNames.value]}>{option[fieldNames.label]}</span>;
|
|
}
|
|
return <span key={option[fieldNames.value]}>{option[fieldNames.label]} / </span>;
|
|
});
|
|
};
|
|
// if (loadData) {
|
|
// Object.assign(others, {
|
|
// loadData: (selectedOptions: any[]) => {
|
|
// // 将 field 传给 loadData
|
|
// loadData(selectedOptions, field);
|
|
// },
|
|
// });
|
|
// }
|
|
return (
|
|
<AntdCascader
|
|
{...others}
|
|
loadData={loadData}
|
|
changeOnSelect={isBoolean(changeOnSelectLast) ? !changeOnSelectLast : changeOnSelect}
|
|
value={toValue()}
|
|
fieldNames={fieldNames}
|
|
displayRender={displayRender}
|
|
onChange={(value, selectedOptions) => {
|
|
if (labelInValue) {
|
|
onChange(selectedOptions.map((option) => omit(option, [fieldNames.children])));
|
|
} else {
|
|
onChange(value);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
mapProps(
|
|
{
|
|
dataSource: 'options',
|
|
},
|
|
(props, field) => {
|
|
return {
|
|
...props,
|
|
suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
|
|
};
|
|
},
|
|
),
|
|
mapReadPretty(ReadPretty),
|
|
);
|
|
|
|
export default Cascader;
|