@formily-design/formily-antd 1.0.0

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

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const antd_1 = require("antd");
+const core_1 = require("@formily-design/core");
+const Field_1 = require("../Field");
+const schemas_1 = require("../../schemas");
+const locales_1 = require("../../locales");
+const Card = (props) => {
+    return (react_1.default.createElement(antd_1.Card, Object.assign({}, props, { title: react_1.default.createElement("span", { "data-content-editable": "x-component-props.title" }, props.title) }), props.children));
+};
+exports.Card = Card;
+exports.Card.Behavior = (0, core_1.createBehavior)({
+    name: 'Card',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'Card',
+    designerProps: {
+        droppable: true,
+        propsSchema: (0, Field_1.createVoidFieldSchema)(schemas_1.AllSchemas.Card),
+    },
+    designerLocales: locales_1.AllLocales.Card,
+});
+exports.Card.Resource = (0, core_1.createResource)({
+    icon: 'CardSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                type: 'void',
+                'x-component': 'Card',
+                'x-component-props': {
+                    title: 'Title',
+                },
+            },
+        },
+    ],
+});

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cascader = void 0;
+const antd_v5_1 = require("@formily/antd-v5");
+const core_1 = require("@formily-design/core");
+const Field_1 = require("../Field");
+const schemas_1 = require("../../schemas");
+const locales_1 = require("../../locales");
+exports.Cascader = antd_v5_1.Cascader;
+exports.Cascader.Behavior = (0, core_1.createBehavior)({
+    name: 'Cascader',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'Cascader',
+    designerProps: {
+        propsSchema: (0, Field_1.createFieldSchema)(schemas_1.AllSchemas.Cascader),
+    },
+    designerLocales: locales_1.AllLocales.Cascader,
+});
+exports.Cascader.Resource = (0, core_1.createResource)({
+    icon: 'CascaderSource',
+    elements: [
+        {
+            componentName: 'Field',
+            props: {
+                title: 'Cascader',
+                'x-decorator': 'FormItem',
+                'x-component': 'Cascader',
+            },
+        },
+    ],
+});

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const antd_v5_1 = require("@formily/antd-v5");
+const core_1 = require("@formily-design/core");
+const Field_1 = require("../Field");
+const schemas_1 = require("../../schemas");
+const locales_1 = require("../../locales");
+exports.Checkbox = antd_v5_1.Checkbox;
+exports.Checkbox.Behavior = (0, core_1.createBehavior)({
+    name: 'Checkbox.Group',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'Checkbox.Group',
+    designerProps: {
+        propsSchema: (0, Field_1.createFieldSchema)(schemas_1.AllSchemas.Checkbox.Group),
+    },
+    designerLocales: locales_1.AllLocales.CheckboxGroup,
+});
+exports.Checkbox.Resource = (0, core_1.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/lib/components/DatePicker/index.d.ts

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

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const antd_v5_1 = require("@formily/antd-v5");
+const core_1 = require("@formily-design/core");
+const Field_1 = require("../Field");
+const schemas_1 = require("../../schemas");
+const locales_1 = require("../../locales");
+exports.DatePicker = antd_v5_1.DatePicker;
+exports.DatePicker.Behavior = (0, core_1.createBehavior)({
+    name: 'DatePicker',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'DatePicker',
+    designerProps: {
+        propsSchema: (0, Field_1.createFieldSchema)(schemas_1.AllSchemas.DatePicker),
+    },
+    designerLocales: locales_1.AllLocales.DatePicker,
+}, {
+    name: 'DatePicker.RangePicker',
+    extends: ['Field'],
+    selector: (node) => node.props['x-component'] === 'DatePicker.RangePicker',
+    designerProps: {
+        propsSchema: (0, Field_1.createFieldSchema)(schemas_1.AllSchemas.DatePicker.RangePicker),
+    },
+    designerLocales: locales_1.AllLocales.DateRangePicker,
+});
+exports.DatePicker.Resource = (0, core_1.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/lib/components/Field/index.d.ts

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

package/lib/components/Field/index.js

@@ -0,0 +1,18 @@
+"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);
+__exportStar(require("./shared"), exports);

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

package/lib/components/Field/preview.js

@@ -0,0 +1,133 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@formily/core");
+const reactive_1 = require("@formily/reactive");
+const react_2 = require("@formily/react");
+const antd_v5_1 = require("@formily/antd-v5");
+const shared_1 = require("@formily/shared");
+const core_2 = require("@formily-design/core");
+const react_3 = require("@formily-design/react");
+const shared_2 = require("@formily-design/shared");
+const Container_1 = require("../../common/Container");
+const locales_1 = require("../../locales");
+react_2.Schema.silent(true);
+const SchemaStateMap = {
+    title: 'title',
+    description: 'description',
+    default: 'value',
+    enum: 'dataSource',
+    readOnly: 'readOnly',
+    writeOnly: 'editable',
+    required: 'required',
+    'x-content': 'content',
+    'x-value': 'value',
+    'x-editable': 'editable',
+    'x-disabled': 'disabled',
+    'x-read-pretty': 'readPretty',
+    'x-read-only': 'readOnly',
+    'x-visible': 'visible',
+    'x-hidden': 'hidden',
+    'x-display': 'display',
+    'x-pattern': 'pattern',
+};
+const NeedShownExpression = {
+    title: true,
+    description: true,
+    default: true,
+    'x-content': true,
+    'x-value': true,
+};
+const isExpression = (val) => (0, shared_2.isStr)(val) && /^\{\{.*\}\}$/.test(val);
+const filterExpression = (val) => {
+    if (typeof val === 'object') {
+        const isArray = (0, shared_2.isArr)(val);
+        const results = (0, shared_1.reduce)(val, (buf, value, key) => {
+            if (isExpression(value)) {
+                return buf;
+            }
+            else {
+                const results = filterExpression(value);
+                if (results === undefined || results === null)
+                    return buf;
+                if (isArray) {
+                    return buf.concat([results]);
+                }
+                buf[key] = results;
+                return buf;
+            }
+        }, isArray ? [] : {});
+        return results;
+    }
+    if (isExpression(val)) {
+        return;
+    }
+    return val;
+};
+const toDesignableFieldProps = (schema, components, nodeIdAttrName, id) => {
+    const results = {};
+    (0, shared_1.each)(SchemaStateMap, (fieldKey, schemaKey) => {
+        const value = schema[schemaKey];
+        if (isExpression(value)) {
+            if (!NeedShownExpression[schemaKey])
+                return;
+            if (value) {
+                results[fieldKey] = value;
+                return;
+            }
+        }
+        else if (value) {
+            results[fieldKey] = filterExpression(value);
+        }
+    });
+    if (!components['FormItem']) {
+        components['FormItem'] = antd_v5_1.FormItem;
+    }
+    const decorator = schema['x-decorator'] && core_1.FormPath.getIn(components, schema['x-decorator']);
+    const component = schema['x-component'] && core_1.FormPath.getIn(components, schema['x-component']);
+    const decoratorProps = schema['x-decorator-props'] || {};
+    const componentProps = schema['x-component-props'] || {};
+    if (decorator) {
+        results.decorator = [decorator, (0, reactive_1.toJS)(decoratorProps)];
+    }
+    if (component) {
+        results.component = [component, (0, reactive_1.toJS)(componentProps)];
+    }
+    if (decorator) {
+        core_1.FormPath.setIn(results['decorator'][1], nodeIdAttrName, id);
+    }
+    else if (component) {
+        core_1.FormPath.setIn(results['component'][1], nodeIdAttrName, id);
+    }
+    results.title = results.title && (react_1.default.createElement("span", { "data-content-editable": "title" }, results.title));
+    results.description = results.description && (react_1.default.createElement("span", { "data-content-editable": "description" }, results.description));
+    return results;
+};
+exports.Field = (0, react_2.observer)((props) => {
+    const designer = (0, react_3.useDesigner)();
+    const components = (0, react_3.useComponents)();
+    const node = (0, react_3.useTreeNode)();
+    if (!node)
+        return null;
+    const fieldProps = toDesignableFieldProps(props, components, designer.props.nodeIdAttrName, node.id);
+    if (props.type === 'object') {
+        return (react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(react_2.ObjectField, Object.assign({}, fieldProps, { name: node.id }), props.children)));
+    }
+    else if (props.type === 'array') {
+        return react_1.default.createElement(react_2.ArrayField, Object.assign({}, fieldProps, { name: node.id }));
+    }
+    else if (node.props.type === 'void') {
+        return (react_1.default.createElement(react_2.VoidField, Object.assign({}, fieldProps, { name: node.id }), props.children));
+    }
+    return react_1.default.createElement(react_2.Field, Object.assign({}, fieldProps, { name: node.id }));
+});
+exports.Field.Behavior = (0, core_2.createBehavior)({
+    name: 'Field',
+    selector: 'Field',
+    designerLocales: locales_1.AllLocales.Field,
+});