tachybase_todo/packages/client/src/schema-component/antd/cascader/Cascader.tsx
SemmyWong 48722c7c99
feat: cacader component
* 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>
2022-01-21 09:32:13 +08:00

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;