import React, { Fragment } from 'react'; import { ISchemaFieldComponentProps, SchemaField, } from '@formily/react-schema-renderer'; import { toArr, isFn, FormPath } from '@formily/shared'; import { ArrayList } from '@formily/react-shared-components'; import { CircleButton } from '../circle-button'; import { TextButton } from '../text-button'; import { Card } from 'antd'; import { PlusOutlined, DeleteOutlined, DownOutlined, UpOutlined, } from '@ant-design/icons'; import styled from 'styled-components'; const ArrayComponents = { CircleButton, TextButton, AdditionIcon: () => , RemoveIcon: () => , MoveDownIcon: () => , MoveUpIcon: () => , }; export const ArrayCards: any = styled( (props: ISchemaFieldComponentProps & { className: string }) => { const { value, schema, className, editable, path, mutators } = props; const { renderAddition, renderRemove, renderMoveDown, renderMoveUp, renderEmpty, renderExtraOperations, ...componentProps } = schema.getExtendsComponentProps() || {}; const schemaItems = Array.isArray(schema.items) ? schema.items[schema.items.length - 1] : schema.items; const onAdd = () => { if (schemaItems) { mutators.push(schemaItems.getEmptyValue()); } }; return (
{toArr(value).map((item, index) => { return ( {index + 1} . {componentProps.title || schema.title} } extra={ mutators.remove(index)} /> mutators.moveDown(index)} /> mutators.moveUp(index)} /> {isFn(renderExtraOperations) ? renderExtraOperations(index) : renderExtraOperations} } > {schemaItems && ( )} ); })} {({ children, allowAddition }) => { return (
{children}
); }}
{({ children, isEmpty }) => { if (!isEmpty) { return (
{children}
); } }}
); }, )` width: 100%; .ant-card { .ant-card { box-shadow: none; } .ant-card-body { padding: 20px 10px 0 10px; } .array-cards-addition { box-shadow: none; border: 1px solid #eee; transition: all 0.35s ease-in-out; &:hover { border: 1px solid #ccc; } } .empty-wrapper { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; img { height: 85px; } .ant-btn { color: #888; } } } .card-list-empty.card-list-item.add-pointer { cursor: pointer; } .array-cards-addition { margin-top: 10px; margin-bottom: 3px; background: #fff; display: flex; cursor: pointer; padding: 5px 0; justify-content: center; box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1); } .card-list-item { margin-top: 10px; border: 1px solid #eee; } .card-list-item:first-child { margin-top: 0 !important; } .ant-card-extra { display: flex; button { margin-right: 8px; } } `; ArrayCards.isFieldComponent = true; export default ArrayCards;