From 9038d111ea71a89798cb1499f3dadc3f9c3dbfd7 Mon Sep 17 00:00:00 2001 From: chenos Date: Mon, 25 Jul 2022 22:37:20 +0800 Subject: [PATCH] fix(client): fieldNames of RecordPicker --- .../antd/form-item/FormItem.tsx | 272 +++++++++--------- .../antd/record-picker/InputRecordPicker.tsx | 2 +- .../record-picker/ReadPrettyRecordPicker.tsx | 2 +- .../antd/table-v2/Table.Column.Designer.tsx | 3 +- yarn.lock | 20 +- 5 files changed, 142 insertions(+), 157 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx index 696b567ecfa..a34e45f959b 100644 --- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx @@ -3,6 +3,7 @@ import { ArrayCollapse, FormItem as Item, FormLayout } from '@formily/antd'; import { Field } from '@formily/core'; import { ISchema, useField, useFieldSchema } from '@formily/react'; import { uid } from '@formily/shared'; +import _ from 'lodash'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { useCompile, useDesignable } from '../..'; @@ -11,7 +12,6 @@ import { useCollection, useCollectionManager } from '../../../collection-manager import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; import { BlockItem } from '../block-item'; import { HTMLEncode } from '../input/shared'; -import * as _ from 'lodash'; const divWrap = (schema: ISchema) => { return { @@ -83,7 +83,7 @@ FormItem.Designer = (props) => { if (fieldSchema['x-read-pretty'] === true) { readOnlyMode = 'read-pretty'; } - + return ( {collectionField && ( @@ -208,92 +208,94 @@ FormItem.Designer = (props) => { = 3}}' - } - } - } }, - } - } - } - } as ISchema} + properties: { + add: { + type: 'void', + title: '{{ t("Add validation rule") }}', + 'x-component': 'ArrayCollapse.Addition', + 'x-reactions': { + dependencies: ['rules'], + fulfill: { + state: { + disabled: '{{$deps[0].length >= 3}}', + }, + }, + }, + }, + }, + }, + }, + } as ISchema + } onSubmit={(v) => { const rules = []; for (const rule of v.rules) { - rules.push(_.pickBy(rule, _.identity)) + rules.push(_.pickBy(rule, _.identity)); } const schema = { ['x-uid']: fieldSchema['x-uid'], @@ -307,13 +309,13 @@ FormItem.Designer = (props) => { if (!!rule.maxValue || !!rule.minValue) { rule['percentMode'] = true; } - + if (rule.percentFormat) { rule['percentFormats'] = true; } } } - const concatValidator = _.concat([], collectionField?.uiSchema?.['x-validator'] || [], rules) + const concatValidator = _.concat([], collectionField?.uiSchema?.['x-validator'] || [], rules); field.validator = concatValidator; fieldSchema['x-validator'] = rules; schema['x-validator'] = rules; @@ -365,64 +367,67 @@ FormItem.Designer = (props) => { breakRemoveOn: { 'x-component': 'Grid', }, - }) - } + }); + }, }); }} /> )} - {form && !form?.readPretty && collectionField?.interface !== 'o2m' && fieldSchema?.['x-component-props']?.['pattern-disable'] != true && ( - { - const schema: ISchema = { - ['x-uid']: fieldSchema['x-uid'], - }; + {form && + !form?.readPretty && + collectionField?.interface !== 'o2m' && + fieldSchema?.['x-component-props']?.['pattern-disable'] != true && ( + { + const schema: ISchema = { + ['x-uid']: fieldSchema['x-uid'], + }; - switch (v) { - case 'readonly': { - fieldSchema['x-read-pretty'] = false; - fieldSchema['x-disabled'] = true; - schema['x-read-pretty'] = false; - schema['x-disabled'] = true; - field.readPretty = false; - field.disabled = true; - break; + switch (v) { + case 'readonly': { + fieldSchema['x-read-pretty'] = false; + fieldSchema['x-disabled'] = true; + schema['x-read-pretty'] = false; + schema['x-disabled'] = true; + field.readPretty = false; + field.disabled = true; + break; + } + case 'read-pretty': { + fieldSchema['x-read-pretty'] = true; + fieldSchema['x-disabled'] = false; + schema['x-read-pretty'] = true; + schema['x-disabled'] = false; + field.readPretty = true; + break; + } + default: { + fieldSchema['x-read-pretty'] = false; + fieldSchema['x-disabled'] = false; + schema['x-read-pretty'] = false; + schema['x-disabled'] = false; + field.readPretty = false; + field.disabled = false; + break; + } } - case 'read-pretty': { - fieldSchema['x-read-pretty'] = true; - fieldSchema['x-disabled'] = false; - schema['x-read-pretty'] = true; - schema['x-disabled'] = false; - field.readPretty = true; - break; - } - default: { - fieldSchema['x-read-pretty'] = false; - fieldSchema['x-disabled'] = false; - schema['x-read-pretty'] = false; - schema['x-disabled'] = false; - field.readPretty = false; - field.disabled = false; - break; - } - } - dn.emit('patch', { - schema, - }); + dn.emit('patch', { + schema, + }); - dn.refresh(); - }} - /> - )} + dn.refresh(); + }} + /> + )} {collectionField?.target && fieldSchema['x-component'] === 'CollectionField' && ( { ['x-uid']: fieldSchema['x-uid'], }; const fieldNames = { + ...collectionField?.uiSchema?.['x-component-props']?.['fieldNames'], ...field.componentProps.fieldNames, label, }; - - // if (fieldSchema['x-component-props']?.['field']?.['uiSchema']?.['x-component-props']) { - // fieldSchema['x-component-props']['field']['uiSchema']['x-component-props']['fieldNames'] = fieldNames; - // } else { - - // } fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {}; fieldSchema['x-component-props']['fieldNames'] = fieldNames; schema['x-component-props'] = fieldSchema['x-component-props']; diff --git a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx index cffa5e4dd5c..b6046802d23 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx @@ -1,6 +1,7 @@ import { ArrayField } from '@formily/core'; import { RecursionField, useField, useFieldSchema } from '@formily/react'; import { Select } from 'antd'; +import { differenceBy, unionBy } from 'lodash'; import React, { createContext, useContext, useEffect, useState } from 'react'; import { useTableSelectorProps as useTsp } from '../../../block-provider/TableSelectorProvider'; import { CollectionProvider, useCollection } from '../../../collection-manager'; @@ -8,7 +9,6 @@ import { FormProvider, SchemaComponentOptions } from '../../core'; import { useCompile } from '../../hooks'; import { ActionContext, useActionContext } from '../action'; import { useFieldNames } from './useFieldNames'; -import { differenceBy, unionBy } from 'lodash'; const RecordPickerContext = createContext(null); diff --git a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx index 5b163b365a6..116c423245e 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx @@ -43,7 +43,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => { ellipsisWithTooltipRef?.current?.setPopoverVisible(false); }} > - {compile(record?.[fieldNames?.label || 'label'])} + {compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id} {index < arr.length - 1 ? , : null} diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx index 281f74d55cd..76986a9a5c8 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx @@ -98,7 +98,8 @@ export const TableColumnDesigner = (props) => { value={fieldNames?.['label']} onChange={(label) => { const fieldNames = { - ...fieldSchema['x-component-props']['fieldNames'], + ...collectionField?.uiSchema?.['x-component-props']['fieldNames'], + ...fieldSchema?.['x-component-props']?.['fieldNames'], label, }; fieldSchema['x-component-props']['fieldNames'] = fieldNames; diff --git a/yarn.lock b/yarn.lock index af02acc29bc..aee8b603404 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5230,14 +5230,7 @@ resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react-dom@^16.9.8": - version "16.9.16" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.16.tgz#c591f2ed1c6f32e9759dfa6eb4abfd8041f29e39" - integrity sha512-Oqc0RY4fggGA3ltEgyPLc3IV9T73IGoWjkONbsyJ3ZBn+UPPCYpU2ec0i3cEbJuEdZtkqcCF2l1zf2pBdgUGSg== - dependencies: - "@types/react" "^16" - -"@types/react-dom@^17.0.0": +"@types/react-dom@^16.9.8", "@types/react-dom@^17.0.0": version "17.0.11" resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466" integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q== @@ -5297,7 +5290,7 @@ "@types/history" "*" "@types/react" "*" -"@types/react@*", "@types/react@>=16.9.11", "@types/react@^17.0.0": +"@types/react@*", "@types/react@>=16.9.11", "@types/react@^16.9.43", "@types/react@^17.0.0": version "17.0.34" resolved "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102" integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg== @@ -5306,15 +5299,6 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^16", "@types/react@^16.9.43": - version "16.14.28" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.28.tgz#073258f3fe7bb80c748842c1f93aeaafe16dffad" - integrity sha512-83zBE6+XUVXsdL3iFzOyUewdauaU+KviKCHEGOgSW52coAuqW7tEKQM0E9+ZC0Zk6TELQ2/JgogPvp7FavzFwg== - dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" - "@types/resolve@1.17.1": version "1.17.1" resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"