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:
parent
7bf23964c1
commit
fdb7ab1866
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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%' }}
|
||||
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user