From 406813e932287d88cbfa1771b374333ae9fd4aaa Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 8 Nov 2022 22:39:01 +0800 Subject: [PATCH] feat(client): search and select collection --- packages/core/client/src/locale/en_US.ts | 1 + packages/core/client/src/locale/ja_JP.ts | 1 + packages/core/client/src/locale/ru_RU.ts | 1 + packages/core/client/src/locale/tr_TR.ts | 1 + packages/core/client/src/locale/zh_CN.ts | 1 + .../schema-initializer/SchemaInitializer.tsx | 2 ++ .../schema-initializer/SelectCollection.tsx | 34 +++++++++++++++++++ .../client/src/schema-initializer/utils.ts | 27 ++++++++++++--- 8 files changed, 63 insertions(+), 5 deletions(-) create mode 100644 packages/core/client/src/schema-initializer/SelectCollection.tsx diff --git a/packages/core/client/src/locale/en_US.ts b/packages/core/client/src/locale/en_US.ts index 11abb4cb4..60ddf9e42 100644 --- a/packages/core/client/src/locale/en_US.ts +++ b/packages/core/client/src/locale/en_US.ts @@ -581,4 +581,5 @@ export default { "Please select the records to be updated": "Please select the records to be updated", "Selector": "Selector", "Inner": "Inner", + "Search and select collection": "Search and select collection", } diff --git a/packages/core/client/src/locale/ja_JP.ts b/packages/core/client/src/locale/ja_JP.ts index 0bf6352e2..0c7ad9320 100644 --- a/packages/core/client/src/locale/ja_JP.ts +++ b/packages/core/client/src/locale/ja_JP.ts @@ -588,4 +588,5 @@ export default { "Error message": "エラーメッセージ", "Record picker": "レコードピッカー", "Sortable": "ソート可能", + "Search and select collection": "Search and select collection", } diff --git a/packages/core/client/src/locale/ru_RU.ts b/packages/core/client/src/locale/ru_RU.ts index b568c9ee8..b2e98e4c5 100644 --- a/packages/core/client/src/locale/ru_RU.ts +++ b/packages/core/client/src/locale/ru_RU.ts @@ -557,4 +557,5 @@ export default { "Print": "Печать", 'Single select and radio fields can be used as the grouping field': 'Одиночное поле выбора и радиополя могут использоваться в качестве поля группировки', 'Sign up successfully, and automatically jump to the sign in page': 'Зарегистрируйтесь успешно и автоматически перейдете на страницу входа', + "Search and select collection": "Search and select collection", } diff --git a/packages/core/client/src/locale/tr_TR.ts b/packages/core/client/src/locale/tr_TR.ts index db0f08f41..222179d8a 100644 --- a/packages/core/client/src/locale/tr_TR.ts +++ b/packages/core/client/src/locale/tr_TR.ts @@ -556,4 +556,5 @@ export default { "Print": "Yazdır", 'Single select and radio fields can be used as the grouping field': 'Gruplama alanı olarak tek seçim ve radyo alanları kullanılabilir', 'Sign up successfully, and automatically jump to the sign in page': 'Başarılı bir şekilde kaydolun ve otomatik olarak oturum açma sayfasına geçin', + "Search and select collection": "Search and select collection", } diff --git a/packages/core/client/src/locale/zh_CN.ts b/packages/core/client/src/locale/zh_CN.ts index e8b444389..77f918b13 100644 --- a/packages/core/client/src/locale/zh_CN.ts +++ b/packages/core/client/src/locale/zh_CN.ts @@ -734,4 +734,5 @@ export default { "Please select the records to be updated": "请选择要更新的记录", "Selector": "选择器", "Inner": "里面", + "Search and select collection": "搜索并选择数据表", } diff --git a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx index 29324225c..fefe7a08f 100644 --- a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx +++ b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx @@ -188,6 +188,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => { eventKey={item.key} key={item.key} onClick={(info) => { + item?.clearKeywords(); onClick({ ...info, item }); }} > @@ -215,6 +216,7 @@ SchemaInitializer.Item = (props: SchemaInitializerItemProps) => { eventKey={eventKey ? `${eventKey}-${index}` : info.key} icon={typeof icon === 'string' ? : icon} onClick={(opts) => { + info?.clearKeywords(); onClick({ ...opts, item: info }); }} > diff --git a/packages/core/client/src/schema-initializer/SelectCollection.tsx b/packages/core/client/src/schema-initializer/SelectCollection.tsx new file mode 100644 index 000000000..b01420a53 --- /dev/null +++ b/packages/core/client/src/schema-initializer/SelectCollection.tsx @@ -0,0 +1,34 @@ +import { Divider, Input } from 'antd'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useCollectionManager } from '../collection-manager'; + +export const SelectCollection = ({ value, onChange, setSelected }) => { + const { t } = useTranslation(); + const { collections } = useCollectionManager(); + + return ( +
+ { + const names = collections + .filter((collection) => { + if (!collection.title) { + return; + } + return collection.title.toUpperCase().includes(e.target.value.toUpperCase()); + }) + .map((item) => item.name); + setSelected(names); + onChange(e.target.value); + }} + /> + +
+ ); +}; diff --git a/packages/core/client/src/schema-initializer/utils.ts b/packages/core/client/src/schema-initializer/utils.ts index 69a2873fd..e7719d11d 100644 --- a/packages/core/client/src/schema-initializer/utils.ts +++ b/packages/core/client/src/schema-initializer/utils.ts @@ -1,10 +1,12 @@ import { ISchema, Schema, useFieldSchema, useForm } from '@formily/react'; import { uid } from '@formily/shared'; +import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { SchemaInitializerItemOptions } from '../'; import { useCollection, useCollectionManager } from '../collection-manager'; import { useDesignable } from '../schema-component'; import { useSchemaTemplateManager } from '../schema-templates'; +import { SelectCollection } from './SelectCollection'; export const itemsMerge = (items1, items2) => { return items1; @@ -427,17 +429,28 @@ export const useCollectionDataSourceItems = (componentName) => { const { t } = useTranslation(); const { collections } = useCollectionManager(); const { getTemplatesByCollection } = useSchemaTemplateManager(); + const [selected, setSelected] = useState([]); + const [value, onChange] = useState(null); + const clearKeywords = () => { + setSelected([]); + onChange(null); + }; return [ { key: 'tableBlock', type: 'itemGroup', - title: t('Select collection'), + title: React.createElement(SelectCollection, { + value, + onChange, + setSelected, + }), children: collections ?.filter((item) => { - if(item.inherit){ - return false - }else{ - return !(item?.isThrough && item?.autoCreate); + const b = !value || selected.includes(item.name); + if (item.inherit) { + return false; + } else { + return b && !(item?.isThrough && item?.autoCreate); } }) ?.map((item, index) => { @@ -453,6 +466,7 @@ export const useCollectionDataSourceItems = (componentName) => { type: 'item', name: item.name, title: item.title, + clearKeywords, }; } return { @@ -465,6 +479,7 @@ export const useCollectionDataSourceItems = (componentName) => { type: 'item', name: item.name, title: t('Blank block'), + clearKeywords, }, { type: 'divider', @@ -482,6 +497,7 @@ export const useCollectionDataSourceItems = (componentName) => { mode: 'copy', name: item.name, template, + clearKeywords, title: templateName || t('Untitled'), }; }), @@ -497,6 +513,7 @@ export const useCollectionDataSourceItems = (componentName) => { return { type: 'item', mode: 'reference', + clearKeywords, name: item.name, template, title: templateName || t('Untitled'),