From fdb7ab1866233b04a8526ea31cbdb5688ba8eb34 Mon Sep 17 00:00:00 2001 From: katherinehhh <shunai.tang@hand-china.com> Date: Wed, 31 May 2023 10:43:56 +0800 Subject: [PATCH] refactor(sub-form):sub-form style (#1959) * style: sub nester style improve * style: sub-form style improve * fix: improve code * fix: null --------- Co-authored-by: chenos <chenlinxh@gmail.com> --- .../association-field/AssociationSelect.tsx | 2 +- .../antd/association-field/InternalNester.tsx | 45 +++++++++--- .../antd/association-field/InternalPicker.tsx | 2 +- .../antd/association-field/Nester.tsx | 71 ++++++++++++++----- 4 files changed, 90 insertions(+), 30 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx b/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx index 2e9a25aad..a93d6e688 100644 --- a/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx @@ -20,7 +20,7 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => { return ( <div key={fieldSchema.name}> - <Input.Group compact style={{ display: 'flex' }}> + <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}> <RemoteSelect style={{ width: '100%' }} {...props} diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx index 369b8bc54..00cca8174 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx @@ -1,6 +1,7 @@ import { FormLayout } from '@formily/antd'; import { RecursionField, useField, useFieldSchema } from '@formily/react'; import React, { useEffect } from 'react'; +import { css, cx } from '@emotion/css'; import { CollectionProvider } from '../../../collection-manager'; import { useInsertSchema } from './hooks'; import { useAssociationFieldContext } from './hooks'; @@ -11,21 +12,47 @@ export const InternalNester = () => { const fieldSchema = useFieldSchema(); const insertNester = useInsertSchema('Nester'); const { options: collectionField } = useAssociationFieldContext(); - + const showTitle = fieldSchema['x-decorator-props']?.showTitle ?? true; useEffect(() => { insertNester(schema.Nester); }, []); return ( <CollectionProvider name={collectionField.target}> <FormLayout layout={'vertical'}> - <RecursionField - onlyRenderProperties - basePath={field.address} - schema={fieldSchema} - filterProperties={(s) => { - return s['x-component'] === 'AssociationField.Nester'; - }} - /> + <div + className={cx( + css` + & .ant-formily-item-layout-vertical { + margin-bottom: 10px; + } + .ant-card-body { + padding: 15px 20px; + } + .ant-divider-horizontal { + margin: 10px 0; + } + `, + { + [css` + .ant-card-body { + padding: 0px 20px 20px 0px; + } + > .ant-card-bordered { + border: none; + } + `]: showTitle === false, + }, + )} + > + <RecursionField + onlyRenderProperties + basePath={field.address} + schema={fieldSchema} + filterProperties={(s) => { + return s['x-component'] === 'AssociationField.Nester'; + }} + /> + </div> </FormLayout> </CollectionProvider> ); diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx index 663b22fa3..a93cf9904 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx @@ -125,7 +125,7 @@ export const InternalPicker = observer((props: any) => { }; return ( <> - <Input.Group compact style={{ display: 'flex' }}> + <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}> <div style={{ width: '100%' }}> <Select style={{ width: '100%' }} diff --git a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx index a065b5936..1b782371b 100644 --- a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx @@ -1,9 +1,10 @@ -import { CloseCircleOutlined } from '@ant-design/icons'; +import { CloseOutlined, PlusOutlined } from '@ant-design/icons'; +import { css } from '@emotion/css'; import { ArrayField } from '@formily/core'; -import { spliceArrayState } from '@formily/core/lib/shared/internals'; +import { spliceArrayState } from '@formily/core/esm/shared/internals'; import { RecursionField, observer, useFieldSchema } from '@formily/react'; import { action } from '@formily/reactive'; -import { Button, Card, Divider } from 'antd'; +import { Card, Divider, Tooltip } from 'antd'; import React, { useContext } from 'react'; import { useTranslation } from 'react-i18next'; import { AssociationFieldContext } from './context'; @@ -29,7 +30,15 @@ const ToManyNester = observer((props) => { const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>(); const { t } = useTranslation(); return ( - <Card bordered={true} style={{ position: 'relative' }}> + <Card + bordered={true} + style={{ position: 'relative' }} + className={css` + > .ant-card-body > .ant-divider:last-child { + display: none; + } + `} + > {(field.value || []).map((value, index) => { let allowed = allowDissociate; if (!allowDissociate) { @@ -39,19 +48,43 @@ const ToManyNester = observer((props) => { <> {!field.readPretty && allowed && ( <div style={{ textAlign: 'right' }}> - <CloseCircleOutlined - style={{ zIndex: 1000, position: 'absolute', color: '#a8a3a3' }} - onClick={() => { - action(() => { - spliceArrayState(field as any, { - startIndex: index, - deleteCount: 1, - }); - field.value.splice(index, 1); - return field.onInput(field.value); - }); - }} - /> + {[ + field.editable && allowMultiple && ( + <Tooltip key={'add'} title={t('Add new')}> + <PlusOutlined + style={{ zIndex: 1000, marginRight: '10px', color: '#a8a3a3' }} + onClick={() => { + action(() => { + if (!Array.isArray(field.value)) { + field.value = []; + } + spliceArrayState(field as any, { + startIndex: index + 1, + insertCount: 1, + }); + field.value.splice(index + 1, 0, null); + return field.onInput(field.value); + }); + }} + /> + </Tooltip> + ), + <Tooltip key={'remove'} title={t('Remove')}> + <CloseOutlined + style={{ zIndex: 1000, color: '#a8a3a3' }} + onClick={() => { + action(() => { + spliceArrayState(field as any, { + startIndex: index, + deleteCount: 1, + }); + field.value.splice(index, 1); + return field.onInput(field.value); + }); + }} + /> + </Tooltip>, + ]} </div> )} <RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} /> @@ -59,7 +92,7 @@ const ToManyNester = observer((props) => { </> ); })} - {field.editable && allowMultiple && ( + {/* {field.editable && allowMultiple && ( <Button type={'dashed'} block @@ -71,7 +104,7 @@ const ToManyNester = observer((props) => { > {t('Add new')} </Button> - )} + )} */} </Card> ); });