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 (
|
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}
|
||||||
|
@ -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,21 +12,47 @@ 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'}>
|
||||||
<RecursionField
|
<div
|
||||||
onlyRenderProperties
|
className={cx(
|
||||||
basePath={field.address}
|
css`
|
||||||
schema={fieldSchema}
|
& .ant-formily-item-layout-vertical {
|
||||||
filterProperties={(s) => {
|
margin-bottom: 10px;
|
||||||
return s['x-component'] === 'AssociationField.Nester';
|
}
|
||||||
}}
|
.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>
|
</FormLayout>
|
||||||
</CollectionProvider>
|
</CollectionProvider>
|
||||||
);
|
);
|
||||||
|
@ -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%' }}
|
||||||
|
@ -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,19 +48,43 @@ 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 && (
|
||||||
onClick={() => {
|
<Tooltip key={'add'} title={t('Add new')}>
|
||||||
action(() => {
|
<PlusOutlined
|
||||||
spliceArrayState(field as any, {
|
style={{ zIndex: 1000, marginRight: '10px', color: '#a8a3a3' }}
|
||||||
startIndex: index,
|
onClick={() => {
|
||||||
deleteCount: 1,
|
action(() => {
|
||||||
});
|
if (!Array.isArray(field.value)) {
|
||||||
field.value.splice(index, 1);
|
field.value = [];
|
||||||
return field.onInput(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>
|
</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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user