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;