fix(association-field): show add new button when no data
This commit is contained in:
parent
fe835ad296
commit
261ca0dbbb
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user