@formily-design/formily-antd 1.0.0

package/esm/components/ArrayTable/preview.js

@@ -0,0 +1,384 @@
+import React from 'react';
+import { Table } from 'antd';
+import { TreeNode, createBehavior, createResource } from '@formily-design/core';
+import { useTreeNode, TreeNodeWidget, DroppableWidget, useNodeIdProps, } from '@formily-design/react';
+import { ArrayBase } from '@formily/antd-v5';
+import { observer } from '@formily/react';
+import { LoadTemplate } from '../../common/LoadTemplate';
+import cls from 'classnames';
+import { queryNodesByComponentPath, hasNodeByComponentPath, findNodeByComponentPath, createEnsureTypeItemsNode, } from '../../shared';
+import { useDropTemplate } from '../../hooks';
+import { createArrayBehavior } from '../ArrayBase';
+import './styles.less';
+import { createVoidFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+const ensureObjectItemsNode = createEnsureTypeItemsNode('object');
+const HeaderCell = (props) => {
+    var _a;
+    return (React.createElement("th", Object.assign({}, props, { "data-designer-node-id": (_a = props.className.match(/data-id\:([^\s]+)/)) === null || _a === void 0 ? void 0 : _a[1] }), props.children));
+};
+const BodyCell = (props) => {
+    var _a;
+    return (React.createElement("td", Object.assign({}, props, { "data-designer-node-id": (_a = props.className.match(/data-id\:([^\s]+)/)) === null || _a === void 0 ? void 0 : _a[1] }), props.children));
+};
+export const ArrayTable = observer((props) => {
+    const node = useTreeNode();
+    const nodeId = useNodeIdProps();
+    useDropTemplate('ArrayTable', (source) => {
+        const sortHandleNode = new TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'ArrayTable.Column',
+                'x-component-props': {
+                    title: `Title`,
+                },
+            },
+            children: [
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'ArrayTable.SortHandle',
+                    },
+                },
+            ],
+        });
+        const indexNode = new TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'ArrayTable.Column',
+                'x-component-props': {
+                    title: `Title`,
+                },
+            },
+            children: [
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'ArrayTable.Index',
+                    },
+                },
+            ],
+        });
+        const columnNode = new TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'ArrayTable.Column',
+                'x-component-props': {
+                    title: `Title`,
+                },
+            },
+            children: source.map((node) => {
+                node.props.title = undefined;
+                return node;
+            }),
+        });
+        const operationNode = new TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'ArrayTable.Column',
+                'x-component-props': {
+                    title: `Title`,
+                },
+            },
+            children: [
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'ArrayTable.Remove',
+                    },
+                },
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'ArrayTable.MoveDown',
+                    },
+                },
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'ArrayTable.MoveUp',
+                    },
+                },
+            ],
+        });
+        const objectNode = new TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'object',
+            },
+            children: [sortHandleNode, indexNode, columnNode, operationNode],
+        });
+        const additionNode = new TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                title: 'Addition',
+                'x-component': 'ArrayTable.Addition',
+            },
+        });
+        return [objectNode, additionNode];
+    });
+    const columns = queryNodesByComponentPath(node, [
+        'ArrayTable',
+        '*',
+        'ArrayTable.Column',
+    ]);
+    const additions = queryNodesByComponentPath(node, [
+        'ArrayTable',
+        'ArrayTable.Addition',
+    ]);
+    const defaultRowKey = () => {
+        return node.id;
+    };
+    const renderTable = () => {
+        if (node.children.length === 0)
+            return React.createElement(DroppableWidget, null);
+        return (React.createElement(ArrayBase, { disabled: true },
+            React.createElement(Table, Object.assign({ size: "small", bordered: true }, props, { scroll: { x: '100%' }, className: cls('ant-formily-array-table', props.className), style: Object.assign({ marginBottom: 10 }, props.style), rowKey: defaultRowKey, dataSource: [{ id: '1' }], pagination: false, components: {
+                    header: {
+                        cell: HeaderCell,
+                    },
+                    body: {
+                        cell: BodyCell,
+                    },
+                } }),
+                columns.map((node) => {
+                    const children = node.children.map((child) => {
+                        return React.createElement(TreeNodeWidget, { node: child, key: child.id });
+                    });
+                    const props = node.props['x-component-props'];
+                    return (React.createElement(Table.Column, Object.assign({}, props, { title: React.createElement("div", { "data-content-editable": "x-component-props.title" }, props.title), dataIndex: node.id, className: `data-id:${node.id}`, key: node.id, render: (value, record, key) => {
+                            return (React.createElement(ArrayBase.Item, { key: key, index: key, record: null }, children.length > 0 ? children : 'Droppable'));
+                        } })));
+                }),
+                columns.length === 0 && (React.createElement(Table.Column, { render: () => React.createElement(DroppableWidget, null) }))),
+            additions.map((child) => {
+                return React.createElement(TreeNodeWidget, { node: child, key: child.id });
+            })));
+    };
+    useDropTemplate('ArrayTable.Column', (source) => {
+        return source.map((node) => {
+            node.props.title = undefined;
+            return node;
+        });
+    });
+    return (React.createElement("div", Object.assign({}, nodeId, { className: "dn-array-table" }),
+        renderTable(),
+        React.createElement(LoadTemplate, { actions: [
+                {
+                    title: node.getMessage('addSortHandle'),
+                    icon: 'AddSort',
+                    onClick: () => {
+                        if (hasNodeByComponentPath(node, [
+                            'ArrayTable',
+                            '*',
+                            'ArrayTable.Column',
+                            'ArrayTable.SortHandle',
+                        ]))
+                            return;
+                        const tableColumn = new TreeNode({
+                            componentName: 'Field',
+                            props: {
+                                type: 'void',
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                    title: `Title`,
+                                },
+                            },
+                            children: [
+                                {
+                                    componentName: 'Field',
+                                    props: {
+                                        type: 'void',
+                                        'x-component': 'ArrayTable.SortHandle',
+                                    },
+                                },
+                            ],
+                        });
+                        ensureObjectItemsNode(node).prepend(tableColumn);
+                    },
+                },
+                {
+                    title: node.getMessage('addIndex'),
+                    icon: 'AddIndex',
+                    onClick: () => {
+                        if (hasNodeByComponentPath(node, [
+                            'ArrayTable',
+                            '*',
+                            'ArrayTable.Column',
+                            'ArrayTable.Index',
+                        ]))
+                            return;
+                        const tableColumn = new TreeNode({
+                            componentName: 'Field',
+                            props: {
+                                type: 'void',
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                    title: `Title`,
+                                },
+                            },
+                            children: [
+                                {
+                                    componentName: 'Field',
+                                    props: {
+                                        type: 'void',
+                                        'x-component': 'ArrayTable.Index',
+                                    },
+                                },
+                            ],
+                        });
+                        const sortNode = findNodeByComponentPath(node, [
+                            'ArrayTable',
+                            '*',
+                            'ArrayTable.Column',
+                            'ArrayTable.SortHandle',
+                        ]);
+                        if (sortNode) {
+                            sortNode.parent.insertAfter(tableColumn);
+                        }
+                        else {
+                            ensureObjectItemsNode(node).prepend(tableColumn);
+                        }
+                    },
+                },
+                {
+                    title: node.getMessage('addColumn'),
+                    icon: 'AddColumn',
+                    onClick: () => {
+                        const operationNode = findNodeByComponentPath(node, [
+                            'ArrayTable',
+                            '*',
+                            'ArrayTable.Column',
+                            (name) => {
+                                return (name === 'ArrayTable.Remove' ||
+                                    name === 'ArrayTable.MoveDown' ||
+                                    name === 'ArrayTable.MoveUp');
+                            },
+                        ]);
+                        const tableColumn = new TreeNode({
+                            componentName: 'Field',
+                            props: {
+                                type: 'void',
+                                'x-component': 'ArrayTable.Column',
+                                'x-component-props': {
+                                    title: `Title`,
+                                },
+                            },
+                        });
+                        if (operationNode) {
+                            operationNode.parent.insertBefore(tableColumn);
+                        }
+                        else {
+                            ensureObjectItemsNode(node).append(tableColumn);
+                        }
+                    },
+                },
+                {
+                    title: node.getMessage('addOperation'),
+                    icon: 'AddOperation',
+                    onClick: () => {
+                        const oldOperationNode = findNodeByComponentPath(node, [
+                            'ArrayTable',
+                            '*',
+                            'ArrayTable.Column',
+                            (name) => {
+                                return (name === 'ArrayTable.Remove' ||
+                                    name === 'ArrayTable.MoveDown' ||
+                                    name === 'ArrayTable.MoveUp');
+                            },
+                        ]);
+                        const oldAdditionNode = findNodeByComponentPath(node, [
+                            'ArrayTable',
+                            'ArrayTable.Addition',
+                        ]);
+                        if (!oldOperationNode) {
+                            const operationNode = new TreeNode({
+                                componentName: 'Field',
+                                props: {
+                                    type: 'void',
+                                    'x-component': 'ArrayTable.Column',
+                                    'x-component-props': {
+                                        title: `Title`,
+                                    },
+                                },
+                                children: [
+                                    {
+                                        componentName: 'Field',
+                                        props: {
+                                            type: 'void',
+                                            'x-component': 'ArrayTable.Remove',
+                                        },
+                                    },
+                                    {
+                                        componentName: 'Field',
+                                        props: {
+                                            type: 'void',
+                                            'x-component': 'ArrayTable.MoveDown',
+                                        },
+                                    },
+                                    {
+                                        componentName: 'Field',
+                                        props: {
+                                            type: 'void',
+                                            'x-component': 'ArrayTable.MoveUp',
+                                        },
+                                    },
+                                ],
+                            });
+                            ensureObjectItemsNode(node).append(operationNode);
+                        }
+                        if (!oldAdditionNode) {
+                            const additionNode = new TreeNode({
+                                componentName: 'Field',
+                                props: {
+                                    type: 'void',
+                                    title: 'Addition',
+                                    'x-component': 'ArrayTable.Addition',
+                                },
+                            });
+                            ensureObjectItemsNode(node).insertAfter(additionNode);
+                        }
+                    },
+                },
+            ] })));
+});
+ArrayBase.mixin(ArrayTable);
+ArrayTable.Behavior = createBehavior(createArrayBehavior('ArrayTable'), {
+    name: 'ArrayTable.Column',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'ArrayTable.Column',
+    designerProps: {
+        droppable: true,
+        allowDrop: (node) => {
+            var _a, _b;
+            return node.props['type'] === 'object' &&
+                ((_b = (_a = node.parent) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['x-component']) === 'ArrayTable';
+        },
+        propsSchema: createVoidFieldSchema(AllSchemas.ArrayTable.Column),
+    },
+    designerLocales: AllLocales.ArrayTableColumn,
+});
+ArrayTable.Resource = createResource({
+    icon: 'ArrayTableSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'array',
+                'x-decorator': 'FormItem',
+                'x-component': 'ArrayTable',
+            },
+        },
+    ],
+});

package/esm/components/ArrayTable/styles.less

@@ -0,0 +1,2 @@
+.dn-array-table {
+}

package/esm/components/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/Card/index.js

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/Card/preview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Card as AntdCard } from 'antd';
+import { DnFC } from '@formily-design/react';
+export declare const Card: DnFC<React.ComponentProps<typeof AntdCard>>;

package/esm/components/Card/preview.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Card as AntdCard } from 'antd';
+import { createBehavior, createResource } from '@formily-design/core';
+import { createVoidFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+export const Card = (props) => {
+    return (React.createElement(AntdCard, Object.assign({}, props, { title: React.createElement("span", { "data-content-editable": "x-component-props.title" }, props.title) }), props.children));
+};
+Card.Behavior = createBehavior({
+    name: 'Card',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'Card',
+    designerProps: {
+        droppable: true,
+        propsSchema: createVoidFieldSchema(AllSchemas.Card),
+    },
+    designerLocales: AllLocales.Card,
+});
+Card.Resource = createResource({
+    icon: 'CardSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'Card',
+                'x-component-props': {
+                    title: 'Title',
+                },
+            },
+        },
+    ],
+});

package/esm/components/Cascader/index.d.ts

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/Cascader/index.js

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/Cascader/preview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Cascader as FormilyCascader } from '@formily/antd-v5';
+import { DnFC } from '@formily-design/react';
+export declare const Cascader: DnFC<React.ComponentProps<typeof FormilyCascader>>;

package/esm/components/Cascader/preview.js

@@ -0,0 +1,28 @@
+import { Cascader as FormilyCascader } from '@formily/antd-v5';
+import { createBehavior, createResource } from '@formily-design/core';
+import { createFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+export const Cascader = FormilyCascader;
+Cascader.Behavior = createBehavior({
+    name: 'Cascader',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'Cascader',
+    designerProps: {
+        propsSchema: createFieldSchema(AllSchemas.Cascader),
+    },
+    designerLocales: AllLocales.Cascader,
+});
+Cascader.Resource = createResource({
+    icon: 'CascaderSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                title: 'Cascader',
+                'x-decorator': 'FormItem',
+                'x-component': 'Cascader',
+            },
+        },
+    ],
+});

package/esm/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/Checkbox/index.js

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/Checkbox/preview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Checkbox as FormilyCheckbox } from '@formily/antd-v5';
+import { DnFC } from '@formily-design/react';
+export declare const Checkbox: DnFC<React.ComponentProps<typeof FormilyCheckbox>>;

package/esm/components/Checkbox/preview.js

@@ -0,0 +1,33 @@
+import { Checkbox as FormilyCheckbox } from '@formily/antd-v5';
+import { createBehavior, createResource } from '@formily-design/core';
+import { createFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+export const Checkbox = FormilyCheckbox;
+Checkbox.Behavior = createBehavior({
+    name: 'Checkbox.Group',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'Checkbox.Group',
+    designerProps: {
+        propsSchema: createFieldSchema(AllSchemas.Checkbox.Group),
+    },
+    designerLocales: AllLocales.CheckboxGroup,
+});
+Checkbox.Resource = createResource({
+    icon: 'CheckboxGroupSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'Array<string | number>',
+                title: 'Checkbox Group',
+                'x-decorator': 'FormItem',
+                'x-component': 'Checkbox.Group',
+                enum: [
+                    { label: '选项1', value: 1 },
+                    { label: '选项2', value: 2 },
+                ],
+            },
+        },
+    ],
+});

package/esm/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/DatePicker/index.js

@@ -0,0 +1 @@
+export * from './preview';

package/esm/components/DatePicker/preview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DatePicker as FormilyDatePicker } from '@formily/antd-v5';
+import { DnFC } from '@formily-design/react';
+export declare const DatePicker: DnFC<React.ComponentProps<typeof FormilyDatePicker>>;

package/esm/components/DatePicker/preview.js

@@ -0,0 +1,50 @@
+import { DatePicker as FormilyDatePicker } from '@formily/antd-v5';
+import { createBehavior, createResource } from '@formily-design/core';
+import { createFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+export const DatePicker = FormilyDatePicker;
+DatePicker.Behavior = createBehavior({
+    name: 'DatePicker',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'DatePicker',
+    designerProps: {
+        propsSchema: createFieldSchema(AllSchemas.DatePicker),
+    },
+    designerLocales: AllLocales.DatePicker,
+}, {
+    name: 'DatePicker.RangePicker',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'DatePicker.RangePicker',
+    designerProps: {
+        propsSchema: createFieldSchema(AllSchemas.DatePicker.RangePicker),
+    },
+    designerLocales: AllLocales.DateRangePicker,
+});
+DatePicker.Resource = createResource({
+    icon: 'DatePickerSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'string',
+                title: 'DatePicker',
+                'x-decorator': 'FormItem',
+                'x-component': 'DatePicker',
+            },
+        },
+    ],
+}, {
+    icon: 'DateRangePickerSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'string[]',
+                title: 'DateRangePicker',
+                'x-decorator': 'FormItem',
+                'x-component': 'DatePicker.RangePicker',
+            },
+        },
+    ],
+});

package/esm/components/Field/index.d.ts

@@ -0,0 +1,2 @@
+export * from './preview';
+export * from './shared';

package/esm/components/Field/index.js

@@ -0,0 +1,2 @@
+export * from './preview';
+export * from './shared';

package/esm/components/Field/preview.d.ts

@@ -0,0 +1,3 @@
+import { ISchema } from '@formily/react';
+import { DnFC } from '@formily-design/react';
+export declare const Field: DnFC<ISchema>;