@formily-design/formily-antd 1.0.0

package/esm/components/Field/shared.js

@@ -0,0 +1,242 @@
+import { ReactionsSetter, DataSourceSetter, ValidatorSetter, RemoteDataSourceSetter, } from '@formily-design/formily-setters';
+import { FormItemSwitcher } from '../../common/FormItemSwitcher';
+import { AllSchemas } from '../../schemas';
+export const createComponentSchema = (component, decorator) => {
+    return {
+        'component-group': component && {
+            type: 'void',
+            'x-component': 'CollapseItem',
+            'x-reactions': {
+                fulfill: {
+                    state: {
+                        visible: '{{!!$form.values["x-component"]}}',
+                    },
+                },
+            },
+            properties: {
+                'x-component-props': component,
+            },
+        },
+        'decorator-group': decorator && {
+            type: 'void',
+            'x-component': 'CollapseItem',
+            'x-component-props': { defaultExpand: false },
+            'x-reactions': {
+                fulfill: {
+                    state: {
+                        visible: '{{!!$form.values["x-decorator"]}}',
+                    },
+                },
+            },
+            properties: {
+                'x-decorator-props': decorator,
+            },
+        },
+        'component-style-group': {
+            type: 'void',
+            'x-component': 'CollapseItem',
+            'x-component-props': { defaultExpand: false },
+            'x-reactions': {
+                fulfill: {
+                    state: {
+                        visible: '{{!!$form.values["x-component"]}}',
+                    },
+                },
+            },
+            properties: {
+                'x-component-props.style': AllSchemas.CSSStyle,
+            },
+        },
+        'decorator-style-group': {
+            type: 'void',
+            'x-component': 'CollapseItem',
+            'x-component-props': { defaultExpand: false },
+            'x-reactions': {
+                fulfill: {
+                    state: {
+                        visible: '{{!!$form.values["x-decorator"]}}',
+                    },
+                },
+            },
+            properties: {
+                'x-decorator-props.style': AllSchemas.CSSStyle,
+            },
+        },
+    };
+};
+export const createFieldSchema = (component, decorator = AllSchemas.FormItem) => {
+    return {
+        type: 'object',
+        properties: Object.assign({ 'field-group': {
+                type: 'void',
+                'x-component': 'CollapseItem',
+                properties: {
+                    name: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                    },
+                    title: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                    },
+                    description: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input.TextArea',
+                    },
+                    'x-display': {
+                        type: 'string',
+                        enum: ['visible', 'hidden', 'none', ''],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            defaultValue: 'visible',
+                        },
+                    },
+                    'x-pattern': {
+                        type: 'string',
+                        enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            defaultValue: 'editable',
+                        },
+                    },
+                    default: {
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ValueInput',
+                    },
+                    'x-datasource-type': {
+                        type: 'string',
+                        enum: [
+                            { value: 'static', label: '静态数据' },
+                            { value: 'remote', label: '远程数据' },
+                        ],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Radio.Group',
+                        'x-component-props': {
+                            defaultValue: 'static',
+                            optionType: 'button',
+                        },
+                    },
+                    enum: {
+                        'x-decorator': 'FormItem',
+                        'x-component': DataSourceSetter,
+                        'x-reactions': {
+                            dependencies: ['x-datasource-type'],
+                            fulfill: {
+                                state: {
+                                    visible: '{{!$form.values["x-datasource-type"] || $form.values["x-datasource-type"] === "static"}}',
+                                },
+                            },
+                        },
+                    },
+                    'x-datasource-effect': {
+                        'x-decorator': 'FormItem',
+                        'x-component': RemoteDataSourceSetter,
+                        'x-reactions': {
+                            fulfill: {
+                                state: {
+                                    visible: '{{$form.values["x-datasource-type"] === "remote"}}',
+                                },
+                            },
+                        },
+                    },
+                    'x-fetchdata-onsearch': {
+                        type: 'boolean',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                        'x-reactions': {
+                            fulfill: {
+                                state: {
+                                    visible: '{{$form.values["x-datasource-type"] === "remote"}}',
+                                },
+                            },
+                        },
+                    },
+                    'x-reactions': {
+                        'x-decorator': 'FormItem',
+                        'x-component': ReactionsSetter,
+                    },
+                    'x-validator': {
+                        type: 'array',
+                        'x-component': ValidatorSetter,
+                    },
+                    required: {
+                        type: 'boolean',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                },
+            } }, createComponentSchema(component, decorator)),
+    };
+};
+export const createVoidFieldSchema = (component, decorator = AllSchemas.FormItem) => {
+    return {
+        type: 'object',
+        properties: Object.assign({ 'field-group': {
+                type: 'void',
+                'x-component': 'CollapseItem',
+                properties: {
+                    name: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                    },
+                    title: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-reactions': {
+                            fulfill: {
+                                state: {
+                                    hidden: '{{$form.values["x-decorator"] !== "FormItem"}}',
+                                },
+                            },
+                        },
+                    },
+                    description: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input.TextArea',
+                        'x-reactions': {
+                            fulfill: {
+                                state: {
+                                    hidden: '{{$form.values["x-decorator"] !== "FormItem"}}',
+                                },
+                            },
+                        },
+                    },
+                    'x-display': {
+                        type: 'string',
+                        enum: ['visible', 'hidden', 'none', ''],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            defaultValue: 'visible',
+                        },
+                    },
+                    'x-pattern': {
+                        type: 'string',
+                        enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            defaultValue: 'editable',
+                        },
+                    },
+                    'x-reactions': {
+                        'x-decorator': 'FormItem',
+                        'x-component': ReactionsSetter,
+                    },
+                    'x-decorator': {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': FormItemSwitcher,
+                    },
+                },
+            } }, createComponentSchema(component, decorator)),
+    };
+};

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

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

package/esm/components/Form/index.js

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Form as FormilyForm } from '@formily/antd-v5';
+import { DnFC } from '@formily-design/react';
+import './styles.less';
+export declare const Form: DnFC<React.ComponentProps<typeof FormilyForm>>;

package/esm/components/Form/preview.js

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { createBehavior, createResource } from '@formily-design/core';
+import { createForm } from '@formily/core';
+import { observer } from '@formily/react';
+import { Form as FormilyForm } from '@formily/antd-v5';
+import { usePrefix } from '@formily-design/react';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+import { RemoteDataSourceSetter } from '@formily-design/formily-setters';
+import './styles.less';
+export const Form = observer((props) => {
+    const prefix = usePrefix('designable-form');
+    const form = useMemo(() => createForm({
+        designable: true,
+    }), []);
+    return (React.createElement(FormilyForm, Object.assign({}, props, { style: Object.assign({}, props.style), className: prefix, form: form }), props.children));
+});
+Form.Behavior = createBehavior({
+    name: 'Form',
+    selector: (node) => node.componentName === 'Form',
+    designerProps(node) {
+        return {
+            draggable: !node.isRoot,
+            cloneable: !node.isRoot,
+            deletable: !node.isRoot,
+            droppable: true,
+            propsSchema: {
+                type: 'object',
+                properties: {
+                    'datasource-group': {
+                        type: 'void',
+                        'x-component': 'CollapseItem',
+                        properties: {
+                            api: {
+                                'x-decorator': 'FormItem',
+                                'x-component': RemoteDataSourceSetter,
+                            },
+                            initApi: {
+                                'x-decorator': 'FormItem',
+                                'x-component': RemoteDataSourceSetter,
+                            },
+                        },
+                    },
+                    'component-group': {
+                        type: 'void',
+                        'x-component': 'CollapseItem',
+                        properties: AllSchemas.FormLayout.properties,
+                    },
+                    'component-style-group': {
+                        type: 'void',
+                        'x-component': 'CollapseItem',
+                        'x-component-props': { defaultExpand: false },
+                        properties: {
+                            style: AllSchemas.CSSStyle,
+                        },
+                    },
+                    // ...(AllSchemas.FormLayout.properties as any),
+                    // style: AllSchemas.CSSStyle,
+                },
+            },
+            defaultProps: {
+                labelCol: 6,
+                wrapperCol: 12,
+            },
+        };
+    },
+    designerLocales: AllLocales.Form,
+});
+Form.Resource = createResource({
+    title: { 'zh-CN': '表单', 'en-US': 'Form' },
+    icon: 'FormLayoutSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'object',
+                'x-component': 'Form',
+            },
+        },
+    ],
+});

package/esm/components/Form/styles.less

@@ -0,0 +1,32 @@
+.dn-designable-form {
+  .ant-input,
+  .ant-input-number,
+  .ant-input-affix-wrapper,
+  .ant-cascader-picker,
+  .ant-picker-input,
+  .ant-picker,
+  .ant-cascader-picker-label,
+  .ant-slider,
+  .ant-checkbox,
+  .ant-rate,
+  .ant-switch,
+  .ant-radio,
+  .ant-radio-wrapper,
+  .ant-checkbox-group,
+  .ant-checkbox-wrapper,
+  .ant-radio-group,
+  .ant-upload,
+  .ant-transfer,
+  .ant-select,
+  .ant-select-selector {
+    pointer-events: none !important;
+
+    input {
+      pointer-events: none !important;
+    }
+  }
+
+  .anticon svg {
+    pointer-events: none;
+  }
+}

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

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

package/esm/components/FormCollapse/index.js

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CollapseProps, CollapsePanelProps } from 'antd/lib/collapse';
+import { DnFC } from '@formily-design/react';
+export declare const FormCollapse: DnFC<CollapseProps> & {
+    CollapsePanel?: React.FC<CollapsePanelProps>;
+};

package/esm/components/FormCollapse/preview.js

@@ -0,0 +1,116 @@
+import React, { Fragment, useState } from 'react';
+import { observer } from '@formily/react';
+import { Collapse } from 'antd';
+import { TreeNode, createBehavior, createResource } from '@formily-design/core';
+import { useTreeNode, useNodeIdProps, DroppableWidget, TreeNodeWidget, } from '@formily-design/react';
+import { toArr } from '@formily/shared';
+import { LoadTemplate } from '../../common/LoadTemplate';
+import { useDropTemplate } from '../../hooks';
+import { createVoidFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+import { matchComponent } from '../../shared';
+const parseCollapse = (parent) => {
+    const tabs = [];
+    parent.children.forEach((node) => {
+        if (matchComponent(node, 'FormCollapse.CollapsePanel')) {
+            tabs.push(node);
+        }
+    });
+    return tabs;
+};
+export const FormCollapse = observer((props) => {
+    const [activeKey, setActiveKey] = useState([]);
+    const node = useTreeNode();
+    const nodeId = useNodeIdProps();
+    const designer = useDropTemplate('FormCollapse', (source) => {
+        const panelNode = new TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'FormCollapse.CollapsePanel',
+                'x-component-props': {
+                    header: `Unnamed Title`,
+                },
+            },
+            children: source,
+        });
+        setActiveKey(toArr(activeKey).concat(panelNode.id));
+        return [panelNode];
+    });
+    const panels = parseCollapse(node);
+    const renderCollapse = () => {
+        var _a;
+        if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length))
+            return React.createElement(DroppableWidget, null);
+        return (React.createElement(Collapse, Object.assign({}, props, { activeKey: panels.map((tab) => tab.id) }), panels.map((panel) => {
+            const props = panel.props['x-component-props'] || {};
+            return (React.createElement(Collapse.Panel, Object.assign({}, props, { style: Object.assign({}, props.style), header: React.createElement("span", { "data-content-editable": "x-component-props.header", "data-content-editable-node-id": panel.id }, props.header), key: panel.id }), React.createElement('div', {
+                [designer.props.nodeIdAttrName]: panel.id,
+                style: {
+                    padding: '20px 0',
+                },
+            }, panel.children.length ? (React.createElement(TreeNodeWidget, { node: panel })) : (React.createElement(DroppableWidget, null)))));
+        })));
+    };
+    return (React.createElement("div", Object.assign({}, nodeId),
+        renderCollapse(),
+        React.createElement(LoadTemplate, { actions: [
+                {
+                    title: node.getMessage('addCollapsePanel'),
+                    icon: 'AddPanel',
+                    onClick: () => {
+                        const tabPane = new TreeNode({
+                            componentName: 'Field',
+                            props: {
+                                type: 'void',
+                                'x-component': 'FormCollapse.CollapsePanel',
+                                'x-component-props': {
+                                    header: `Unnamed Title`,
+                                },
+                            },
+                        });
+                        node.append(tabPane);
+                        const keys = toArr(activeKey);
+                        setActiveKey(keys.concat(tabPane.id));
+                    },
+                },
+            ] })));
+});
+FormCollapse.CollapsePanel = (props) => {
+    return React.createElement(Fragment, null, props.children);
+};
+FormCollapse.Behavior = createBehavior({
+    name: 'FormCollapse',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'FormCollapse',
+    designerProps: {
+        droppable: true,
+        allowAppend: (target, source) => target.children.length === 0 ||
+            source.every((node) => node.props['x-component'] === 'FormCollapse.CollapsePanel'),
+        propsSchema: createVoidFieldSchema(AllSchemas.FormCollapse),
+    },
+    designerLocales: AllLocales.FormCollapse,
+}, {
+    name: 'FormCollapse.CollapsePanel',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'FormCollapse.CollapsePanel',
+    designerProps: {
+        droppable: true,
+        allowDrop: (node) => node.props['x-component'] === 'FormCollapse',
+        propsSchema: createVoidFieldSchema(AllSchemas.FormCollapse.CollapsePanel),
+    },
+    designerLocales: AllLocales.FormCollapsePanel,
+});
+FormCollapse.Resource = createResource({
+    icon: 'CollapseSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'FormCollapse',
+            },
+        },
+    ],
+});

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

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

package/esm/components/FormGrid/index.js

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormGrid as FormilyGird } from '@formily/antd-v5';
+import { DnFC } from '@formily-design/react';
+import './styles.less';
+type formilyGrid = typeof FormilyGird;
+export declare const FormGrid: DnFC<React.ComponentProps<formilyGrid>> & {
+    GridColumn?: React.FC<React.ComponentProps<formilyGrid['GridColumn']>>;
+};
+export {};

package/esm/components/FormGrid/preview.js

@@ -0,0 +1,131 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { FormGrid as FormilyGird } from '@formily/antd-v5';
+import { TreeNode, createBehavior, createResource } from '@formily-design/core';
+import { useTreeNode, useNodeIdProps, DroppableWidget, } from '@formily-design/react';
+import { observer } from '@formily/reactive-react';
+import { LoadTemplate } from '../../common/LoadTemplate';
+import { createFieldSchema } from '../Field';
+import { AllSchemas } from '../../schemas';
+import { AllLocales } from '../../locales';
+import './styles.less';
+export const FormGrid = observer((props) => {
+    const node = useTreeNode();
+    const nodeId = useNodeIdProps();
+    if (node.children.length === 0)
+        return React.createElement(DroppableWidget, Object.assign({}, props));
+    return (React.createElement("div", Object.assign({}, nodeId, { className: "dn-grid" }),
+        React.createElement(FormilyGird, Object.assign({}, props), props.children),
+        React.createElement(LoadTemplate, { actions: [
+                {
+                    title: node.getMessage('addGridColumn'),
+                    icon: 'AddColumn',
+                    onClick: () => {
+                        const column = new TreeNode({
+                            componentName: 'Field',
+                            props: {
+                                type: 'void',
+                                'x-component': 'FormGrid.GridColumn',
+                            },
+                        });
+                        node.append(column);
+                    },
+                },
+            ] })));
+});
+FormGrid.GridColumn = observer((_a) => {
+    var { gridSpan } = _a, props = __rest(_a, ["gridSpan"]);
+    return (React.createElement(DroppableWidget, Object.assign({}, props, { "data-grid-span": gridSpan }), props.children));
+});
+FormGrid.Behavior = createBehavior({
+    name: 'FormGrid',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'FormGrid',
+    designerProps: {
+        droppable: true,
+        allowDrop: (node) => node.props['x-component'] !== 'FormGrid',
+        propsSchema: createFieldSchema(AllSchemas.FormGrid),
+    },
+    designerLocales: AllLocales.FormGrid,
+}, {
+    name: 'FormGrid.GridColumn',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'FormGrid.GridColumn',
+    designerProps: {
+        droppable: true,
+        resizable: {
+            width(node) {
+                var _a, _b;
+                const span = Number((_b = (_a = node.props['x-component-props']) === null || _a === void 0 ? void 0 : _a.gridSpan) !== null && _b !== void 0 ? _b : 1);
+                return {
+                    plus: () => {
+                        if (span + 1 > 12)
+                            return;
+                        node.props['x-component-props'] =
+                            node.props['x-component-props'] || {};
+                        node.props['x-component-props'].gridSpan = span + 1;
+                    },
+                    minus: () => {
+                        if (span - 1 < 1)
+                            return;
+                        node.props['x-component-props'] =
+                            node.props['x-component-props'] || {};
+                        node.props['x-component-props'].gridSpan = span - 1;
+                    },
+                };
+            },
+        },
+        resizeXPath: 'x-component-props.gridSpan',
+        resizeStep: 1,
+        resizeMin: 1,
+        resizeMax: 12,
+        allowDrop: (node) => node.props['x-component'] === 'FormGrid',
+        propsSchema: createFieldSchema(AllSchemas.FormGrid.GridColumn),
+    },
+    designerLocales: AllLocales.FormGridColumn,
+});
+FormGrid.Resource = createResource({
+    icon: 'GridSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'FormGrid',
+            },
+            children: [
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'FormGrid.GridColumn',
+                    },
+                },
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'FormGrid.GridColumn',
+                    },
+                },
+                {
+                    componentName: 'Field',
+                    props: {
+                        type: 'void',
+                        'x-component': 'FormGrid.GridColumn',
+                    },
+                },
+            ],
+        },
+    ],
+});

package/esm/components/FormGrid/styles.less

@@ -0,0 +1,5 @@
+.dn-grid-column {
+  margin: 4px;
+  min-height: 60px;
+  border: 1px dashed #aaa;
+}

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

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

package/esm/components/FormLayout/index.js

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

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

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