fix(association-field): show add new button when no data

This commit is contained in:
chenos 2023-05-31 12:27:24 +08:00
parent fe835ad296
commit 261ca0dbbb

View File

@ -4,7 +4,7 @@ import { ArrayField } from '@formily/core';
import { spliceArrayState } from '@formily/core/esm/shared/internals';
import { RecursionField, observer, useFieldSchema } from '@formily/react';
import { action } from '@formily/reactive';
import { Card, Divider, Tooltip } from 'antd';
import { Button, Card, Divider, Tooltip } from 'antd';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { AssociationFieldContext } from './context';
@ -29,7 +29,7 @@ const ToManyNester = observer((props) => {
const fieldSchema = useFieldSchema();
const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
const { t } = useTranslation();
return (
return (field.value || []).length > 0 ? (
<Card
bordered={true}
style={{ position: 'relative' }}
@ -46,10 +46,8 @@ const ToManyNester = observer((props) => {
}
return (
<>
{!field.readPretty && allowed && (
<div style={{ textAlign: 'right' }}>
{[
field.editable && allowMultiple && (
{field.editable && allowMultiple && (
<Tooltip key={'add'} title={t('Add new')}>
<PlusOutlined
style={{ zIndex: 1000, marginRight: '10px', color: '#a8a3a3' }}
@ -68,7 +66,8 @@ const ToManyNester = observer((props) => {
}}
/>
</Tooltip>
),
)}
{!field.readPretty && allowed && (
<Tooltip key={'remove'} title={t('Remove')}>
<CloseOutlined
style={{ zIndex: 1000, color: '#a8a3a3' }}
@ -83,28 +82,35 @@ const ToManyNester = observer((props) => {
});
}}
/>
</Tooltip>,
]}
</div>
</Tooltip>
)}
</div>
<RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
<Divider />
</>
);
})}
{/* {field.editable && allowMultiple && (
</Card>
) : (
<>
{field.editable && allowMultiple && (
<Tooltip key={'add'} title={t('Add new')}>
<Button
type={'dashed'}
type={'default'}
className={css`
border: 1px solid #f0f0f0 !important;
box-shadow: none;
`}
block
icon={<PlusOutlined />}
onClick={() => {
const result = field.value;
result.push({});
field.value = result;
}}
>
{t('Add new')}
</Button>
)} */}
</Card>
></Button>
</Tooltip>
)}
</>
);
});