fix(client): fieldNames of RecordPicker

This commit is contained in:
chenos 2022-07-25 22:37:20 +08:00
parent fad794b647
commit 9038d111ea
5 changed files with 143 additions and 158 deletions

View File

@ -3,6 +3,7 @@ import { ArrayCollapse, FormItem as Item, FormLayout } from '@formily/antd';
import { Field } from '@formily/core'; import { Field } from '@formily/core';
import { ISchema, useField, useFieldSchema } from '@formily/react'; import { ISchema, useField, useFieldSchema } from '@formily/react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import _ from 'lodash';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useCompile, useDesignable } from '../..'; import { useCompile, useDesignable } from '../..';
@ -11,7 +12,6 @@ import { useCollection, useCollectionManager } from '../../../collection-manager
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
import { BlockItem } from '../block-item'; import { BlockItem } from '../block-item';
import { HTMLEncode } from '../input/shared'; import { HTMLEncode } from '../input/shared';
import * as _ from 'lodash';
const divWrap = (schema: ISchema) => { const divWrap = (schema: ISchema) => {
return { return {
@ -83,7 +83,7 @@ FormItem.Designer = (props) => {
if (fieldSchema['x-read-pretty'] === true) { if (fieldSchema['x-read-pretty'] === true) {
readOnlyMode = 'read-pretty'; readOnlyMode = 'read-pretty';
} }
return ( return (
<GeneralSchemaDesigner> <GeneralSchemaDesigner>
{collectionField && ( {collectionField && (
@ -208,92 +208,94 @@ FormItem.Designer = (props) => {
<SchemaSettings.ModalItem <SchemaSettings.ModalItem
title={t('Set validation rules')} title={t('Set validation rules')}
components={{ ArrayCollapse, FormLayout }} components={{ ArrayCollapse, FormLayout }}
schema={{ schema={
type: 'object', {
title: t('Set validation rules'), type: 'object',
properties: { title: t('Set validation rules'),
rules: { properties: {
type: 'array', rules: {
default: fieldSchema?.['x-validator'], type: 'array',
'x-component': 'ArrayCollapse', default: fieldSchema?.['x-validator'],
'x-decorator': 'FormItem', 'x-component': 'ArrayCollapse',
'x-component-props': { 'x-decorator': 'FormItem',
accordion: true,
},
maxItems: 3,
items: {
type: 'object',
'x-component': 'ArrayCollapse.CollapsePanel',
'x-component-props': { 'x-component-props': {
header: '{{ t("Validation rule") }}', accordion: true,
}, },
properties: { maxItems: 3,
index: { items: {
type: 'void', type: 'object',
'x-component': 'ArrayCollapse.Index', 'x-component': 'ArrayCollapse.CollapsePanel',
'x-component-props': {
header: '{{ t("Validation rule") }}',
}, },
layout: { properties: {
type: 'void', index: {
'x-component': 'FormLayout', type: 'void',
'x-component-props': { 'x-component': 'ArrayCollapse.Index',
labelStyle: { },
marginTop: '6px', layout: {
}, type: 'void',
labelCol: 8, 'x-component': 'FormLayout',
wrapperCol: 16, 'x-component-props': {
labelStyle: {
marginTop: '6px',
},
labelCol: 8,
wrapperCol: 16,
},
properties: {
...validateSchema,
message: {
type: 'string',
title: '{{ t("Error message") }}',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
'x-component-props': {
autoSize: {
minRows: 2,
maxRows: 2,
},
},
},
},
},
remove: {
type: 'void',
'x-component': 'ArrayCollapse.Remove',
},
moveUp: {
type: 'void',
'x-component': 'ArrayCollapse.MoveUp',
},
moveDown: {
type: 'void',
'x-component': 'ArrayCollapse.MoveDown',
}, },
properties: {
...validateSchema,
message: {
type: 'string',
title: '{{ t("Error message") }}',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
'x-component-props': {
autoSize: {
minRows: 2,
maxRows: 2
}
}
},
}
}, },
remove: {
type: 'void',
'x-component': 'ArrayCollapse.Remove',
},
moveUp: {
type: 'void',
'x-component': 'ArrayCollapse.MoveUp',
},
moveDown: {
type: 'void',
'x-component': 'ArrayCollapse.MoveDown',
},
}
},
properties: {
add: {
type: 'void',
title: '{{ t("Add validation rule") }}',
'x-component': 'ArrayCollapse.Addition',
'x-reactions': {
dependencies: ['rules'],
fulfill: {
state: {
disabled: '{{$deps[0].length >= 3}}'
}
}
}
}, },
} properties: {
} add: {
} type: 'void',
} as ISchema} title: '{{ t("Add validation rule") }}',
'x-component': 'ArrayCollapse.Addition',
'x-reactions': {
dependencies: ['rules'],
fulfill: {
state: {
disabled: '{{$deps[0].length >= 3}}',
},
},
},
},
},
},
},
} as ISchema
}
onSubmit={(v) => { onSubmit={(v) => {
const rules = []; const rules = [];
for (const rule of v.rules) { for (const rule of v.rules) {
rules.push(_.pickBy(rule, _.identity)) rules.push(_.pickBy(rule, _.identity));
} }
const schema = { const schema = {
['x-uid']: fieldSchema['x-uid'], ['x-uid']: fieldSchema['x-uid'],
@ -307,13 +309,13 @@ FormItem.Designer = (props) => {
if (!!rule.maxValue || !!rule.minValue) { if (!!rule.maxValue || !!rule.minValue) {
rule['percentMode'] = true; rule['percentMode'] = true;
} }
if (rule.percentFormat) { if (rule.percentFormat) {
rule['percentFormats'] = true; rule['percentFormats'] = true;
} }
} }
} }
const concatValidator = _.concat([], collectionField?.uiSchema?.['x-validator'] || [], rules) const concatValidator = _.concat([], collectionField?.uiSchema?.['x-validator'] || [], rules);
field.validator = concatValidator; field.validator = concatValidator;
fieldSchema['x-validator'] = rules; fieldSchema['x-validator'] = rules;
schema['x-validator'] = rules; schema['x-validator'] = rules;
@ -365,64 +367,67 @@ FormItem.Designer = (props) => {
breakRemoveOn: { breakRemoveOn: {
'x-component': 'Grid', 'x-component': 'Grid',
}, },
}) });
} },
}); });
}} }}
/> />
)} )}
{form && !form?.readPretty && collectionField?.interface !== 'o2m' && fieldSchema?.['x-component-props']?.['pattern-disable'] != true && ( {form &&
<SchemaSettings.SelectItem !form?.readPretty &&
key="pattern" collectionField?.interface !== 'o2m' &&
title={t('Pattern')} fieldSchema?.['x-component-props']?.['pattern-disable'] != true && (
options={[ <SchemaSettings.SelectItem
{ label: t('Editable'), value: 'editable' }, key="pattern"
{ label: t('Readonly'), value: 'readonly' }, title={t('Pattern')}
{ label: t('Easy-reading'), value: 'read-pretty' }, options={[
]} { label: t('Editable'), value: 'editable' },
value={readOnlyMode} { label: t('Readonly'), value: 'readonly' },
onChange={(v) => { { label: t('Easy-reading'), value: 'read-pretty' },
const schema: ISchema = { ]}
['x-uid']: fieldSchema['x-uid'], value={readOnlyMode}
}; onChange={(v) => {
const schema: ISchema = {
['x-uid']: fieldSchema['x-uid'],
};
switch (v) { switch (v) {
case 'readonly': { case 'readonly': {
fieldSchema['x-read-pretty'] = false; fieldSchema['x-read-pretty'] = false;
fieldSchema['x-disabled'] = true; fieldSchema['x-disabled'] = true;
schema['x-read-pretty'] = false; schema['x-read-pretty'] = false;
schema['x-disabled'] = true; schema['x-disabled'] = true;
field.readPretty = false; field.readPretty = false;
field.disabled = true; field.disabled = true;
break; 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', { dn.emit('patch', {
schema, schema,
}); });
dn.refresh(); dn.refresh();
}} }}
/> />
)} )}
{collectionField?.target && fieldSchema['x-component'] === 'CollectionField' && ( {collectionField?.target && fieldSchema['x-component'] === 'CollectionField' && (
<SchemaSettings.SelectItem <SchemaSettings.SelectItem
key="title-field" key="title-field"
@ -434,15 +439,10 @@ FormItem.Designer = (props) => {
['x-uid']: fieldSchema['x-uid'], ['x-uid']: fieldSchema['x-uid'],
}; };
const fieldNames = { const fieldNames = {
...collectionField?.uiSchema?.['x-component-props']?.['fieldNames'],
...field.componentProps.fieldNames, ...field.componentProps.fieldNames,
label, 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'] = fieldSchema['x-component-props'] || {};
fieldSchema['x-component-props']['fieldNames'] = fieldNames; fieldSchema['x-component-props']['fieldNames'] = fieldNames;
schema['x-component-props'] = fieldSchema['x-component-props']; schema['x-component-props'] = fieldSchema['x-component-props'];

View File

@ -1,6 +1,7 @@
import { ArrayField } from '@formily/core'; import { ArrayField } from '@formily/core';
import { RecursionField, useField, useFieldSchema } from '@formily/react'; import { RecursionField, useField, useFieldSchema } from '@formily/react';
import { Select } from 'antd'; import { Select } from 'antd';
import { differenceBy, unionBy } from 'lodash';
import React, { createContext, useContext, useEffect, useState } from 'react'; import React, { createContext, useContext, useEffect, useState } from 'react';
import { useTableSelectorProps as useTsp } from '../../../block-provider/TableSelectorProvider'; import { useTableSelectorProps as useTsp } from '../../../block-provider/TableSelectorProvider';
import { CollectionProvider, useCollection } from '../../../collection-manager'; import { CollectionProvider, useCollection } from '../../../collection-manager';
@ -8,7 +9,6 @@ import { FormProvider, SchemaComponentOptions } from '../../core';
import { useCompile } from '../../hooks'; import { useCompile } from '../../hooks';
import { ActionContext, useActionContext } from '../action'; import { ActionContext, useActionContext } from '../action';
import { useFieldNames } from './useFieldNames'; import { useFieldNames } from './useFieldNames';
import { differenceBy, unionBy } from 'lodash';
const RecordPickerContext = createContext(null); const RecordPickerContext = createContext(null);

View File

@ -43,7 +43,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
ellipsisWithTooltipRef?.current?.setPopoverVisible(false); ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
}} }}
> >
{compile(record?.[fieldNames?.label || 'label'])} {compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id}
</a> </a>
</span> </span>
{index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>, </span> : null} {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>, </span> : null}

View File

@ -98,7 +98,8 @@ export const TableColumnDesigner = (props) => {
value={fieldNames?.['label']} value={fieldNames?.['label']}
onChange={(label) => { onChange={(label) => {
const fieldNames = { const fieldNames = {
...fieldSchema['x-component-props']['fieldNames'], ...collectionField?.uiSchema?.['x-component-props']['fieldNames'],
...fieldSchema?.['x-component-props']?.['fieldNames'],
label, label,
}; };
fieldSchema['x-component-props']['fieldNames'] = fieldNames; fieldSchema['x-component-props']['fieldNames'] = fieldNames;

View File

@ -5230,14 +5230,7 @@
resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
"@types/react-dom@^16.9.8": "@types/react-dom@^16.9.8", "@types/react-dom@^17.0.0":
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":
version "17.0.11" version "17.0.11"
resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466" resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q== integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
@ -5297,7 +5290,7 @@
"@types/history" "*" "@types/history" "*"
"@types/react" "*" "@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" version "17.0.34"
resolved "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102" resolved "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102"
integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg== integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==
@ -5306,15 +5299,6 @@
"@types/scheduler" "*" "@types/scheduler" "*"
csstype "^3.0.2" 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": "@types/resolve@1.17.1":
version "1.17.1" version "1.17.1"
resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6" resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"