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