@formily-design/formily-antd 1.0.0

package/lib/components/Field/shared.js

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createVoidFieldSchema = exports.createFieldSchema = exports.createComponentSchema = void 0;
+const formily_setters_1 = require("@formily-design/formily-setters");
+const FormItemSwitcher_1 = require("../../common/FormItemSwitcher");
+const schemas_1 = require("../../schemas");
+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': schemas_1.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': schemas_1.AllSchemas.CSSStyle,
+            },
+        },
+    };
+};
+exports.createComponentSchema = createComponentSchema;
+const createFieldSchema = (component, decorator = schemas_1.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': formily_setters_1.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': formily_setters_1.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': formily_setters_1.ReactionsSetter,
+                    },
+                    'x-validator': {
+                        type: 'array',
+                        'x-component': formily_setters_1.ValidatorSetter,
+                    },
+                    required: {
+                        type: 'boolean',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                },
+            } }, (0, exports.createComponentSchema)(component, decorator)),
+    };
+};
+exports.createFieldSchema = createFieldSchema;
+const createVoidFieldSchema = (component, decorator = schemas_1.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': formily_setters_1.ReactionsSetter,
+                    },
+                    'x-decorator': {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': FormItemSwitcher_1.FormItemSwitcher,
+                    },
+                },
+            } }, (0, exports.createComponentSchema)(component, decorator)),
+    };
+};
+exports.createVoidFieldSchema = createVoidFieldSchema;

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

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

package/lib/components/Form/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./preview"), exports);

package/lib/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/lib/components/Form/preview.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@formily-design/core");
+const core_2 = require("@formily/core");
+const react_2 = require("@formily/react");
+const antd_v5_1 = require("@formily/antd-v5");
+const react_3 = require("@formily-design/react");
+const schemas_1 = require("../../schemas");
+const locales_1 = require("../../locales");
+const formily_setters_1 = require("@formily-design/formily-setters");
+require("./styles.less");
+exports.Form = (0, react_2.observer)((props) => {
+    const prefix = (0, react_3.usePrefix)('designable-form');
+    const form = (0, react_1.useMemo)(() => (0, core_2.createForm)({
+        designable: true,
+    }), []);
+    return (react_1.default.createElement(antd_v5_1.Form, Object.assign({}, props, { style: Object.assign({}, props.style), className: prefix, form: form }), props.children));
+});
+exports.Form.Behavior = (0, core_1.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': formily_setters_1.RemoteDataSourceSetter,
+                            },
+                            initApi: {
+                                'x-decorator': 'FormItem',
+                                'x-component': formily_setters_1.RemoteDataSourceSetter,
+                            },
+                        },
+                    },
+                    'component-group': {
+                        type: 'void',
+                        'x-component': 'CollapseItem',
+                        properties: schemas_1.AllSchemas.FormLayout.properties,
+                    },
+                    'component-style-group': {
+                        type: 'void',
+                        'x-component': 'CollapseItem',
+                        'x-component-props': { defaultExpand: false },
+                        properties: {
+                            style: schemas_1.AllSchemas.CSSStyle,
+                        },
+                    },
+                    // ...(AllSchemas.FormLayout.properties as any),
+                    // style: AllSchemas.CSSStyle,
+                },
+            },
+            defaultProps: {
+                labelCol: 6,
+                wrapperCol: 12,
+            },
+        };
+    },
+    designerLocales: locales_1.AllLocales.Form,
+});
+exports.Form.Resource = (0, core_1.createResource)({
+    title: { 'zh-CN': '表单', 'en-US': 'Form' },
+    icon: 'FormLayoutSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'object',
+                'x-component': 'Form',
+            },
+        },
+    ],
+});

package/lib/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/lib/components/FormCollapse/index.d.ts

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

package/lib/components/FormCollapse/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./preview"), exports);

package/lib/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/lib/components/FormCollapse/preview.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormCollapse = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@formily/react");
+const antd_1 = require("antd");
+const core_1 = require("@formily-design/core");
+const react_3 = require("@formily-design/react");
+const shared_1 = require("@formily/shared");
+const LoadTemplate_1 = require("../../common/LoadTemplate");
+const hooks_1 = require("../../hooks");
+const Field_1 = require("../Field");
+const schemas_1 = require("../../schemas");
+const locales_1 = require("../../locales");
+const shared_2 = require("../../shared");
+const parseCollapse = (parent) => {
+    const tabs = [];
+    parent.children.forEach((node) => {
+        if ((0, shared_2.matchComponent)(node, 'FormCollapse.CollapsePanel')) {
+            tabs.push(node);
+        }
+    });
+    return tabs;
+};
+exports.FormCollapse = (0, react_2.observer)((props) => {
+    const [activeKey, setActiveKey] = (0, react_1.useState)([]);
+    const node = (0, react_3.useTreeNode)();
+    const nodeId = (0, react_3.useNodeIdProps)();
+    const designer = (0, hooks_1.useDropTemplate)('FormCollapse', (source) => {
+        const panelNode = new core_1.TreeNode({
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'FormCollapse.CollapsePanel',
+                'x-component-props': {
+                    header: `Unnamed Title`,
+                },
+            },
+            children: source,
+        });
+        setActiveKey((0, shared_1.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_1.default.createElement(react_3.DroppableWidget, null);
+        return (react_1.default.createElement(antd_1.Collapse, Object.assign({}, props, { activeKey: panels.map((tab) => tab.id) }), panels.map((panel) => {
+            const props = panel.props['x-component-props'] || {};
+            return (react_1.default.createElement(antd_1.Collapse.Panel, Object.assign({}, props, { style: Object.assign({}, props.style), header: react_1.default.createElement("span", { "data-content-editable": "x-component-props.header", "data-content-editable-node-id": panel.id }, props.header), key: panel.id }), react_1.default.createElement('div', {
+                [designer.props.nodeIdAttrName]: panel.id,
+                style: {
+                    padding: '20px 0',
+                },
+            }, panel.children.length ? (react_1.default.createElement(react_3.TreeNodeWidget, { node: panel })) : (react_1.default.createElement(react_3.DroppableWidget, null)))));
+        })));
+    };
+    return (react_1.default.createElement("div", Object.assign({}, nodeId),
+        renderCollapse(),
+        react_1.default.createElement(LoadTemplate_1.LoadTemplate, { actions: [
+                {
+                    title: node.getMessage('addCollapsePanel'),
+                    icon: 'AddPanel',
+                    onClick: () => {
+                        const tabPane = new core_1.TreeNode({
+                            componentName: 'Field',
+                            props: {
+                                type: 'void',
+                                'x-component': 'FormCollapse.CollapsePanel',
+                                'x-component-props': {
+                                    header: `Unnamed Title`,
+                                },
+                            },
+                        });
+                        node.append(tabPane);
+                        const keys = (0, shared_1.toArr)(activeKey);
+                        setActiveKey(keys.concat(tabPane.id));
+                    },
+                },
+            ] })));
+});
+exports.FormCollapse.CollapsePanel = (props) => {
+    return react_1.default.createElement(react_1.Fragment, null, props.children);
+};
+exports.FormCollapse.Behavior = (0, core_1.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: (0, Field_1.createVoidFieldSchema)(schemas_1.AllSchemas.FormCollapse),
+    },
+    designerLocales: locales_1.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: (0, Field_1.createVoidFieldSchema)(schemas_1.AllSchemas.FormCollapse.CollapsePanel),
+    },
+    designerLocales: locales_1.AllLocales.FormCollapsePanel,
+});
+exports.FormCollapse.Resource = (0, core_1.createResource)({
+    icon: 'CollapseSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'FormCollapse',
+            },
+        },
+    ],
+});

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

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

package/lib/components/FormGrid/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./preview"), exports);

package/lib/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 {};