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>
This commit is contained in:
katherinehhh 2023-05-31 10:43:56 +08:00 committed by GitHub
parent 7bf23964c1
commit fdb7ab1866
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 90 additions and 30 deletions

View File

@ -20,7 +20,7 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
return ( return (
<div key={fieldSchema.name}> <div key={fieldSchema.name}>
<Input.Group compact style={{ display: 'flex' }}> <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
<RemoteSelect <RemoteSelect
style={{ width: '100%' }} style={{ width: '100%' }}
{...props} {...props}

View File

@ -1,6 +1,7 @@
import { FormLayout } from '@formily/antd'; import { FormLayout } from '@formily/antd';
import { RecursionField, useField, useFieldSchema } from '@formily/react'; import { RecursionField, useField, useFieldSchema } from '@formily/react';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { css, cx } from '@emotion/css';
import { CollectionProvider } from '../../../collection-manager'; import { CollectionProvider } from '../../../collection-manager';
import { useInsertSchema } from './hooks'; import { useInsertSchema } from './hooks';
import { useAssociationFieldContext } from './hooks'; import { useAssociationFieldContext } from './hooks';
@ -11,13 +12,38 @@ export const InternalNester = () => {
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const insertNester = useInsertSchema('Nester'); const insertNester = useInsertSchema('Nester');
const { options: collectionField } = useAssociationFieldContext(); const { options: collectionField } = useAssociationFieldContext();
const showTitle = fieldSchema['x-decorator-props']?.showTitle ?? true;
useEffect(() => { useEffect(() => {
insertNester(schema.Nester); insertNester(schema.Nester);
}, []); }, []);
return ( return (
<CollectionProvider name={collectionField.target}> <CollectionProvider name={collectionField.target}>
<FormLayout layout={'vertical'}> <FormLayout layout={'vertical'}>
<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 <RecursionField
onlyRenderProperties onlyRenderProperties
basePath={field.address} basePath={field.address}
@ -26,6 +52,7 @@ export const InternalNester = () => {
return s['x-component'] === 'AssociationField.Nester'; return s['x-component'] === 'AssociationField.Nester';
}} }}
/> />
</div>
</FormLayout> </FormLayout>
</CollectionProvider> </CollectionProvider>
); );

View File

@ -125,7 +125,7 @@ export const InternalPicker = observer((props: any) => {
}; };
return ( return (
<> <>
<Input.Group compact style={{ display: 'flex' }}> <Input.Group compact style={{ display: 'flex', lineHeight: '32px' }}>
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<Select <Select
style={{ width: '100%' }} style={{ width: '100%' }}

View File

@ -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 { 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 { RecursionField, observer, useFieldSchema } from '@formily/react';
import { action } from '@formily/reactive'; import { action } from '@formily/reactive';
import { Button, Card, Divider } from 'antd'; import { Card, Divider, Tooltip } from 'antd';
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { AssociationFieldContext } from './context'; import { AssociationFieldContext } from './context';
@ -29,7 +30,15 @@ const ToManyNester = observer((props) => {
const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>(); const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
const { t } = useTranslation(); const { t } = useTranslation();
return ( 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) => { {(field.value || []).map((value, index) => {
let allowed = allowDissociate; let allowed = allowDissociate;
if (!allowDissociate) { if (!allowDissociate) {
@ -39,8 +48,30 @@ const ToManyNester = observer((props) => {
<> <>
{!field.readPretty && allowed && ( {!field.readPretty && allowed && (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
<CloseCircleOutlined {[
style={{ zIndex: 1000, position: 'absolute', color: '#a8a3a3' }} 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={() => { onClick={() => {
action(() => { action(() => {
spliceArrayState(field as any, { spliceArrayState(field as any, {
@ -52,6 +83,8 @@ const ToManyNester = observer((props) => {
}); });
}} }}
/> />
</Tooltip>,
]}
</div> </div>
)} )}
<RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} /> <RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
@ -59,7 +92,7 @@ const ToManyNester = observer((props) => {
</> </>
); );
})} })}
{field.editable && allowMultiple && ( {/* {field.editable && allowMultiple && (
<Button <Button
type={'dashed'} type={'dashed'}
block block
@ -71,7 +104,7 @@ const ToManyNester = observer((props) => {
> >
{t('Add new')} {t('Add new')}
</Button> </Button>
)} )} */}
</Card> </Card>
); );
}); });