From a648adace87cef7251dd318180b67411f606d2cb Mon Sep 17 00:00:00 2001 From: SemmyWong <67748948+semmywong@users.noreply.github.com> Date: Tue, 25 Jan 2022 10:50:44 +0800 Subject: [PATCH] feat: add TreeSelect component into schema components (#167) * feat: migrate TreeSelect into schema components * fix: modify enum to tredata * fix: options replace treeData * feat: migrate TreeSelect into schema components * fix: modify enum to tredata * fix: options replace treeData --- .../client/src/schema-component/antd/index.ts | 1 + .../antd/tree-select/ReadPretty.tsx | 56 ++++++++++++ .../antd/tree-select/TreeSelect.tsx | 23 +++++ .../antd/tree-select/demos/demo1.tsx | 85 +++++++++++++++++++ .../antd/tree-select/index.md | 6 ++ .../antd/tree-select/index.ts | 1 + 6 files changed, 172 insertions(+) create mode 100644 packages/client/src/schema-component/antd/tree-select/ReadPretty.tsx create mode 100644 packages/client/src/schema-component/antd/tree-select/TreeSelect.tsx create mode 100644 packages/client/src/schema-component/antd/tree-select/demos/demo1.tsx create mode 100644 packages/client/src/schema-component/antd/tree-select/index.ts diff --git a/packages/client/src/schema-component/antd/index.ts b/packages/client/src/schema-component/antd/index.ts index 20c760cff..6c41f79f5 100644 --- a/packages/client/src/schema-component/antd/index.ts +++ b/packages/client/src/schema-component/antd/index.ts @@ -16,4 +16,5 @@ export * from './page'; export * from './password'; export * from './radio'; export * from './time-picker'; +export * from './tree-select'; export * from './upload'; diff --git a/packages/client/src/schema-component/antd/tree-select/ReadPretty.tsx b/packages/client/src/schema-component/antd/tree-select/ReadPretty.tsx new file mode 100644 index 000000000..c05a596fa --- /dev/null +++ b/packages/client/src/schema-component/antd/tree-select/ReadPretty.tsx @@ -0,0 +1,56 @@ +import { usePrefixCls } from '@formily/antd/esm/__builtins__'; +import { Field } from '@formily/core'; +import { observer, useField } from '@formily/react'; +import { isArr } from '@formily/shared'; +import { Tag } from 'antd'; +import { TreeSelectProps } from 'antd/lib/tree-select'; +import cls from 'classnames'; +import React from 'react'; + +export const ReadPretty: React.FC> = observer((props) => { + const field = useField(); + const { placeholder } = props; + const prefixCls = usePrefixCls('description-tree-select', props); + const dataSource = field?.dataSource?.length ? field.dataSource : props?.treeData?.length ? props.treeData : []; + const getSelected = () => { + const value = props.value; + if (props.multiple) { + if (props.labelInValue) { + return isArr(value) ? value : []; + } else { + return isArr(value) ? value.map((val) => ({ label: val, value: val })) : []; + } + } else { + if (props.labelInValue) { + return value ? [value] : []; + } else { + return value ? [{ label: value, value }] : []; + } + } + }; + + const findLabel = (value: any, dataSource: any[]) => { + for (let i = 0; i < dataSource?.length; i++) { + const item = dataSource[i]; + if (item?.value === value) { + return item?.label; + } else { + const childLabel = findLabel(value, item?.children); + if (childLabel) return childLabel; + } + } + }; + + const getLabels = () => { + const selected = getSelected(); + if (!selected?.length) return {placeholder}; + return selected.map(({ value, label }, key) => { + return {findLabel(value, dataSource) || label || placeholder}; + }); + }; + return ( +
+ {getLabels()} +
+ ); +}); diff --git a/packages/client/src/schema-component/antd/tree-select/TreeSelect.tsx b/packages/client/src/schema-component/antd/tree-select/TreeSelect.tsx new file mode 100644 index 000000000..51bf5f6b9 --- /dev/null +++ b/packages/client/src/schema-component/antd/tree-select/TreeSelect.tsx @@ -0,0 +1,23 @@ +import { LoadingOutlined } from '@ant-design/icons'; +import { connect, mapProps, mapReadPretty } from '@formily/react'; +import { TreeSelect as AntdTreeSelect } from 'antd'; +import React from 'react'; +import { ReadPretty } from './ReadPretty'; + +export const TreeSelect = connect( + AntdTreeSelect, + mapProps( + { + dataSource: 'treeData', + }, + (props, field) => { + return { + ...props, + suffixIcon: field?.['loading'] || field?.['validating'] ? : props.suffixIcon, + }; + }, + ), + mapReadPretty(ReadPretty), +); + +export default TreeSelect; diff --git a/packages/client/src/schema-component/antd/tree-select/demos/demo1.tsx b/packages/client/src/schema-component/antd/tree-select/demos/demo1.tsx new file mode 100644 index 000000000..e70c4e9ef --- /dev/null +++ b/packages/client/src/schema-component/antd/tree-select/demos/demo1.tsx @@ -0,0 +1,85 @@ +/** + * title: TreeSelect + */ +import { FormItem } from '@formily/antd'; +import { SchemaComponent, SchemaComponentProvider, TreeSelect } from '@nocobase/client'; +import React from 'react'; + +const dataSource = [ + { + label: '选项1', + value: 1, + children: [ + { + label: 'Child Node1', + value: '0-0-0', + }, + { + label: 'Child Node2', + value: '0-0-1', + }, + { + label: 'Child Node3', + value: '0-0-2', + }, + ], + }, + { + label: '选项2', + value: 2, + children: [ + { + label: 'Child Node1', + value: '0-1-0', + }, + { + label: 'Child Node2', + value: '0-1-1', + }, + { + label: 'Child Node3', + value: '0-1-2', + }, + ], + }, +]; +const schema = { + type: 'object', + properties: { + input: { + type: 'string', + title: `Editable`, + 'x-decorator': 'FormItem', + 'x-component': 'TreeSelect', + 'x-component-props': { + treeData: dataSource, + }, + 'x-reactions': { + target: 'read', + fulfill: { + state: { + value: '{{$self.value}}', + }, + }, + }, + }, + read: { + type: 'string', + title: `Read pretty`, + 'x-read-pretty': true, + 'x-decorator': 'FormItem', + 'x-component': 'TreeSelect', + 'x-component-props': { + treeData: dataSource, + }, + }, + }, +}; + +export default () => { + return ( + + + + ); +}; diff --git a/packages/client/src/schema-component/antd/tree-select/index.md b/packages/client/src/schema-component/antd/tree-select/index.md index 952499987..35653f795 100644 --- a/packages/client/src/schema-component/antd/tree-select/index.md +++ b/packages/client/src/schema-component/antd/tree-select/index.md @@ -6,3 +6,9 @@ group: --- # TreeSelect + +## Examples + +### TreeSelect + + diff --git a/packages/client/src/schema-component/antd/tree-select/index.ts b/packages/client/src/schema-component/antd/tree-select/index.ts new file mode 100644 index 000000000..f516e4c28 --- /dev/null +++ b/packages/client/src/schema-component/antd/tree-select/index.ts @@ -0,0 +1 @@ +export * from './TreeSelect';