@formily-design/formily-setters 1.0.0

package/esm/locales/zh-CN.d.ts

@@ -0,0 +1,110 @@
+declare const _default: {
+    'zh-CN': {
+        settings: {
+            'x-validator': {
+                title: string;
+                addValidatorRules: string;
+                drawer: string;
+                triggerType: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: string[];
+                };
+                format: {
+                    title: string;
+                    placeholder: string;
+                    dataSource: {
+                        label: string;
+                        value: string;
+                    }[];
+                };
+                validator: {
+                    title: string;
+                    tooltip: string;
+                };
+                pattern: string;
+                len: string;
+                max: string;
+                min: string;
+                exclusiveMaximum: string;
+                exclusiveMinimum: string;
+                whitespace: string;
+                required: string;
+                message: {
+                    title: string;
+                    tooltip: string;
+                };
+            };
+        };
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: string;
+                pleaseSelectNode: string;
+                addKeyValuePair: string;
+                configureDataSource: string;
+                dataSource: string;
+                defaultTitle: string;
+                dataSourceTree: string;
+                addNode: string;
+                label: string;
+                value: string;
+                item: string;
+                staticData: string;
+                remoteData: string;
+                confirm: string;
+                cancel: string;
+                editConfigure: string;
+            };
+            RemoteDataSource: {
+                basic: string;
+                url: string;
+                method: string;
+                headers: string;
+                params: string;
+                handlers: string;
+                beforeRequest: string;
+                dataHandler: string;
+                addHeader: string;
+                addParam: string;
+            };
+            ReactionsSetter: {
+                configureReactions: string;
+                relationsFields: string;
+                variableName: string;
+                variableNameValidateMessage: string;
+                pleaseInput: string;
+                sourceField: string;
+                sourceProperty: string;
+                variableType: string;
+                operations: string;
+                addRelationField: string;
+                propertyReactions: string;
+                actionReactions: string;
+                visible: string;
+                hidden: string;
+                display: string;
+                pattern: string;
+                title: string;
+                description: string;
+                value: string;
+                initialValue: string;
+                dataSource: string;
+                required: string;
+                component: string;
+                componentProps: string;
+                decorator: string;
+                decoratorProps: string;
+                pleaseSelect: string;
+                expressionValueTypeIs: string;
+            };
+            ValidatorSetter: {
+                pleaseSelect: string;
+                formats: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+        };
+    };
+};
+export default _default;

package/esm/locales/zh-CN.js

@@ -0,0 +1,115 @@
+const ValidatorFormats = [
+    { label: 'URL地址', value: 'url' },
+    { label: '邮箱格式', value: 'email' },
+    { label: '数字格式', value: 'number' },
+    { label: '整数格式', value: 'integer' },
+    { label: '身份证格式', value: 'idcard' },
+    { label: '手机号格式', value: 'phone' },
+    { label: '货币格式', value: 'money' },
+    { label: '中文格式', value: 'zh' },
+    { label: '日期格式', value: 'date' },
+    { label: '邮编格式', value: 'zip' },
+];
+export default {
+    'zh-CN': {
+        settings: {
+            'x-validator': {
+                title: '校验规则',
+                addValidatorRules: '添加校验规则',
+                drawer: '配置规则',
+                triggerType: {
+                    title: '触发类型',
+                    placeholder: '请选择',
+                    dataSource: ['输入时', '聚焦时', '失焦时'],
+                },
+                format: {
+                    title: '格式校验',
+                    placeholder: '请选择',
+                    dataSource: ValidatorFormats,
+                },
+                validator: {
+                    title: '自定义校验器',
+                    tooltip: '格式: function (value){ return "Error Message"}',
+                },
+                pattern: '正则表达式',
+                len: '长度限制',
+                max: '长度/数值小于',
+                min: '长度/数值大于',
+                exclusiveMaximum: '长度/数值小于等于',
+                exclusiveMinimum: '长度/数值大于等于',
+                whitespace: '不允许空白符',
+                required: '是否必填',
+                message: {
+                    title: '错误消息',
+                    tooltip: '错误消息只对当前规则集的一个内置规则生效，如果需要对不同内置规则定制错误消息，请拆分成多条规则',
+                },
+            },
+        },
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: '节点属性',
+                pleaseSelectNode: '请先选择左侧树节点',
+                addKeyValuePair: '添加键值对',
+                configureDataSource: '配置可选项',
+                dataSource: '可选项',
+                defaultTitle: '默认标题',
+                dataSourceTree: '可选项节点树',
+                addNode: '新增节点',
+                label: '键名',
+                value: '键值',
+                item: '选项',
+                staticData: '静态数据',
+                remoteData: '远程数据',
+                confirm: '确定',
+                cancel: '取消',
+                editConfigure: '编辑配置',
+            },
+            RemoteDataSource: {
+                basic: '基本配置',
+                url: '请求地址',
+                method: '请求方式',
+                headers: '请求头',
+                params: '请求参数',
+                handlers: '数据处理',
+                beforeRequest: '请求前置处理',
+                dataHandler: '请求数据处理',
+                addHeader: '添加请求头',
+                addParam: '添加请求参数',
+            },
+            ReactionsSetter: {
+                configureReactions: '配置响应器',
+                relationsFields: '依赖字段',
+                variableName: '变量名',
+                variableNameValidateMessage: '不符合变量命名规则',
+                pleaseInput: '请输入',
+                sourceField: '来源字段',
+                sourceProperty: '字段属性',
+                variableType: '变量类型',
+                operations: '操作',
+                addRelationField: '添加依赖字段',
+                propertyReactions: '属性响应(仅支持JS表达式)',
+                actionReactions: '动作响应(高级，可选，支持JS语句)',
+                visible: '显示/隐藏',
+                hidden: 'UI隐藏',
+                display: '展示状态',
+                pattern: 'UI形态',
+                title: '标题',
+                description: '描述',
+                value: '字段值',
+                initialValue: '默认值',
+                dataSource: '可选项',
+                required: '是否必填',
+                component: '组件',
+                componentProps: '组件属性',
+                decorator: '容器',
+                decoratorProps: '容器属性',
+                pleaseSelect: '请选择',
+                expressionValueTypeIs: '表达式值类型为',
+            },
+            ValidatorSetter: {
+                pleaseSelect: '请选择',
+                formats: ValidatorFormats,
+            },
+        },
+    },
+};

package/lib/components/DataSourceSetter/DataSettingPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Form as FormCore } from '@formily/core';
+import { ITreeDataSource } from './types';
+import './styles.less';
+export interface IDataSettingPanelProps {
+    treeDataSource: ITreeDataSource;
+    allowExtendOption?: boolean;
+    effects?: (form: FormCore<any>) => void;
+}
+export declare const DataSettingPanel: React.FC<IDataSettingPanelProps>;

package/lib/components/DataSourceSetter/DataSettingPanel.js

@@ -0,0 +1,102 @@
+"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.DataSettingPanel = void 0;
+const react_1 = __importStar(require("react"));
+const antd_1 = require("antd");
+const icons_1 = require("@ant-design/icons");
+const antd_v5_1 = require("@formily/antd-v5");
+const core_1 = require("@formily/core");
+const reactive_react_1 = require("@formily/reactive-react");
+const react_2 = require("@formily/react");
+const react_settings_form_1 = require("@formily-design/react-settings-form");
+const react_3 = require("@formily-design/react");
+const Header_1 = require("./Header");
+const shared_1 = require("./shared");
+require("./styles.less");
+const SchemaField = (0, react_2.createSchemaField)({
+    components: {
+        FormItem: antd_v5_1.FormItem,
+        Input: antd_v5_1.Input,
+        ArrayItems: antd_v5_1.ArrayItems,
+        ValueInput: react_settings_form_1.ValueInput,
+    },
+});
+exports.DataSettingPanel = (0, reactive_react_1.observer)((props) => {
+    const { allowExtendOption, effects } = props;
+    const prefix = (0, react_3.usePrefix)('data-source-setter');
+    const form = (0, react_1.useMemo)(() => {
+        let values;
+        (0, shared_1.traverseTree)(props.treeDataSource.dataSource, (dataItem) => {
+            if (dataItem.key === props.treeDataSource.selectedKey) {
+                values = dataItem;
+            }
+        });
+        return (0, core_1.createForm)({
+            values,
+            effects: effects,
+        });
+    }, [
+        props.treeDataSource.selectedKey,
+        props.treeDataSource.dataSource.length,
+    ]);
+    if (!props.treeDataSource.selectedKey)
+        return (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(Header_1.Header, { title: react_1.default.createElement(react_3.TextWidget, { token: "SettingComponents.DataSourceSetter.nodeProperty" }), extra: null }),
+            react_1.default.createElement("div", { className: `${prefix + '-layout-item-content'}` },
+                react_1.default.createElement(react_3.TextWidget, { token: "SettingComponents.DataSourceSetter.pleaseSelectNode" }))));
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Header_1.Header, { title: react_1.default.createElement(react_3.TextWidget, { token: "SettingComponents.DataSourceSetter.nodeProperty" }), extra: allowExtendOption ? (react_1.default.createElement(antd_1.Button, { type: "text", onClick: () => {
+                    form.setFieldState('map', (state) => {
+                        state.value.push({});
+                    });
+                }, icon: react_1.default.createElement(icons_1.PlusOutlined, null) },
+                react_1.default.createElement(react_3.TextWidget, { token: "SettingComponents.DataSourceSetter.addKeyValuePair" }))) : null }),
+        react_1.default.createElement("div", { className: `${prefix + '-layout-item-content'}` },
+            react_1.default.createElement(antd_v5_1.Form, { form: form, labelWidth: 60, wrapperWidth: 160 },
+                react_1.default.createElement(SchemaField, null,
+                    react_1.default.createElement(SchemaField.Array, { name: "map", "x-component": "ArrayItems" },
+                        react_1.default.createElement(SchemaField.Object, { "x-decorator": "ArrayItems.Item", "x-decorator-props": { type: 'divide' } },
+                            react_1.default.createElement(SchemaField.String, { title: react_1.default.createElement(react_3.TextWidget, { token: "SettingComponents.DataSourceSetter.label" }), "x-decorator": "FormItem", "x-disabled": !allowExtendOption, name: "label", "x-component": "Input" }),
+                            react_1.default.createElement(SchemaField.String, { title: react_1.default.createElement(react_3.TextWidget, { token: "SettingComponents.DataSourceSetter.value" }), "x-decorator": "FormItem", name: "value", "x-component": "ValueInput" }),
+                            react_1.default.createElement(SchemaField.Void, { "x-component": "ArrayItems.Remove", "x-visible": allowExtendOption, "x-component-props": {
+                                    style: {
+                                        margin: 5,
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    },
+                                } }))))))));
+});

package/lib/components/DataSourceSetter/Header.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import './styles.less';
+export interface IHeaderProps {
+    extra: ReactNode | null;
+    title: ReactNode | string;
+}
+export declare const Header: React.FC<IHeaderProps>;

package/lib/components/DataSourceSetter/Header.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const react_1 = __importDefault(require("react"));
+const reactive_react_1 = require("@formily/reactive-react");
+const react_2 = require("@formily-design/react");
+require("./styles.less");
+exports.Header = (0, reactive_react_1.observer)(({ extra, title }) => {
+    const prefix = (0, react_2.usePrefix)('data-source-setter');
+    return (react_1.default.createElement("div", { className: `${prefix + '-layout-item-header'}` },
+        react_1.default.createElement("div", { className: `${prefix + '-layout-item-title'}` }, title),
+        extra));
+});

package/lib/components/DataSourceSetter/Title.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { INodeItem, ITreeDataSource } from './types';
+import './styles.less';
+export interface ITitleProps extends INodeItem {
+    treeDataSource: ITreeDataSource;
+}
+export declare const Title: React.FC<ITitleProps>;

package/lib/components/DataSourceSetter/Title.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const react_1 = __importDefault(require("react"));
+const shared_1 = require("@formily/shared");
+const reactive_react_1 = require("@formily/reactive-react");
+const react_2 = require("@formily-design/react");
+const shared_2 = require("./shared");
+require("./styles.less");
+exports.Title = (0, reactive_react_1.observer)((props) => {
+    const prefix = (0, react_2.usePrefix)('data-source-setter-node-title');
+    const getTitleValue = (dataSource) => {
+        const optionalKeys = ['label', 'title', 'header'];
+        let nodeTitle;
+        optionalKeys.some((key) => {
+            var _a;
+            const title = (_a = (0, shared_1.toArr)(dataSource).find((item) => item.label === key)) === null || _a === void 0 ? void 0 : _a.value;
+            if (title !== undefined) {
+                nodeTitle = title;
+                return true;
+            }
+            return false;
+        });
+        if (nodeTitle === undefined) {
+            (0, shared_1.toArr)(dataSource || []).some((item) => {
+                if (item.value && typeof item.value === 'string') {
+                    nodeTitle = item.value;
+                    return true;
+                }
+                return false;
+            });
+        }
+        return nodeTitle;
+    };
+    const renderTitle = (dataSource) => {
+        const nodeTitle = getTitleValue(dataSource);
+        if (nodeTitle === undefined)
+            return (react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.defaultTitle" }));
+        else
+            return nodeTitle + '';
+    };
+    return (react_1.default.createElement("div", { className: prefix },
+        react_1.default.createElement("span", { style: { marginRight: '5px' } }, renderTitle((props === null || props === void 0 ? void 0 : props.map) || [])),
+        react_1.default.createElement(react_2.IconWidget, { className: prefix + '-icon', infer: "Remove", onClick: () => {
+                var _a;
+                const newDataSource = (0, shared_1.clone)((_a = props === null || props === void 0 ? void 0 : props.treeDataSource) === null || _a === void 0 ? void 0 : _a.dataSource);
+                (0, shared_2.traverseTree)(newDataSource || [], (dataItem, i, data) => {
+                    if (data[i].key === props.duplicateKey)
+                        (0, shared_1.toArr)(data).splice(i, 1);
+                });
+                props.treeDataSource.dataSource = newDataSource;
+            } })));
+});

package/lib/components/DataSourceSetter/TreePanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ITreeDataSource } from './types';
+import './styles.less';
+export interface ITreePanelProps {
+    treeDataSource: ITreeDataSource;
+    allowTree: boolean;
+    defaultOptionValue: {
+        label: string;
+        value: any;
+    }[];
+}
+export declare const TreePanel: React.FC<ITreePanelProps>;

package/lib/components/DataSourceSetter/TreePanel.js

@@ -0,0 +1,134 @@
+"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.TreePanel = void 0;
+const react_1 = __importStar(require("react"));
+const antd_1 = require("antd");
+const shared_1 = require("@formily/shared");
+const reactive_react_1 = require("@formily/reactive-react");
+const react_2 = require("@formily-design/react");
+const Title_1 = require("./Title");
+const Header_1 = require("./Header");
+const shared_2 = require("./shared");
+require("./styles.less");
+const core_1 = require("@formily-design/core");
+const limitTreeDrag = ({ dropPosition }) => {
+    if (dropPosition === 0) {
+        return false;
+    }
+    return true;
+};
+exports.TreePanel = (0, reactive_react_1.observer)((props) => {
+    const prefix = (0, react_2.usePrefix)('data-source-setter');
+    const dropHandler = (info) => {
+        var _a, _b;
+        const dropKey = (_a = info.node) === null || _a === void 0 ? void 0 : _a.key;
+        const dragKey = (_b = info.dragNode) === null || _b === void 0 ? void 0 : _b.key;
+        const dropPos = info.node.pos.split('-');
+        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+        const data = [...props.treeDataSource.dataSource];
+        // Find dragObject
+        let dragObj;
+        (0, shared_2.traverseTree)(data, (item, index, arr) => {
+            if (arr[index].key === dragKey) {
+                arr.splice(index, 1);
+                dragObj = item;
+            }
+        });
+        if (!info.dropToGap) {
+            (0, shared_2.traverseTree)(data, (item) => {
+                if (item.key === dropKey) {
+                    item.children = item.children || [];
+                    item.children.unshift(dragObj);
+                }
+            });
+        }
+        else if ((info.node.children || []).length > 0 &&
+            info.node.expanded &&
+            dropPosition === 1) {
+            (0, shared_2.traverseTree)(data, (item) => {
+                if (item.key === dropKey) {
+                    item.children = item.children || [];
+                    item.children.unshift(dragObj);
+                }
+            });
+        }
+        else {
+            let ar;
+            let i;
+            (0, shared_2.traverseTree)(data, (item, index, arr) => {
+                if (item.key === dropKey) {
+                    ar = arr;
+                    i = index;
+                }
+            });
+            if (dropPosition === -1) {
+                ar.splice(i, 0, dragObj);
+            }
+            else {
+                ar.splice(i + 1, 0, dragObj);
+            }
+        }
+        props.treeDataSource.dataSource = data;
+    };
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(Header_1.Header, { title: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.dataSourceTree" }), extra: react_1.default.createElement(antd_1.Button, { type: "text", onClick: () => {
+                    var _a;
+                    const uuid = (0, shared_1.uid)();
+                    const dataSource = props.treeDataSource.dataSource;
+                    const initialKeyValuePairs = ((_a = props.defaultOptionValue) === null || _a === void 0 ? void 0 : _a.map((item) => ({ ...item }))) || [
+                        {
+                            label: 'label',
+                            value: `${core_1.GlobalRegistry.getDesignerMessage(`SettingComponents.DataSourceSetter.item`)} ${dataSource.length + 1}`,
+                        },
+                        { label: 'value', value: uuid },
+                    ];
+                    props.treeDataSource.dataSource = dataSource.concat({
+                        key: uuid,
+                        duplicateKey: uuid,
+                        map: initialKeyValuePairs,
+                        children: [],
+                    });
+                }, icon: react_1.default.createElement(react_2.IconWidget, { infer: "Add" }) },
+                react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.addNode" })) }),
+        react_1.default.createElement("div", { className: `${prefix + '-layout-item-content'}` },
+            react_1.default.createElement(antd_1.Tree, { blockNode: true, draggable: true, allowDrop: props.allowTree ? () => true : limitTreeDrag, defaultExpandAll: true, defaultExpandParent: true, autoExpandParent: true, showLine: { showLeafIcon: false }, treeData: props.treeDataSource.dataSource, onDragEnter: () => { }, onDrop: dropHandler, titleRender: (titleProps) => {
+                    return (react_1.default.createElement(Title_1.Title, { ...titleProps, treeDataSource: props.treeDataSource }));
+                }, onSelect: (selectedKeys) => {
+                    if (selectedKeys[0]) {
+                        props.treeDataSource.selectedKey = selectedKeys[0].toString();
+                    }
+                } }))));
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Form } from '@formily/core';
+import { IDataSourceItem } from './types';
+import './styles.less';
+export interface IDataSourceSetterProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onChange: (dataSource: IDataSourceItem[]) => void;
+    value: IDataSourceItem[];
+    allowTree?: boolean;
+    allowExtendOption?: boolean;
+    defaultOptionValue?: {
+        label: string;
+        value: any;
+    }[];
+    effects?: (form: Form<any>) => void;
+}
+export declare const DataSourceSetter: React.FC<IDataSourceSetterProps>;