@formily-design/formily-setters 1.0.0

package/lib/components/RemoteDataSourceSetter/index.js

@@ -0,0 +1,64 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoteDataSourceSetter = void 0;
+const react_1 = __importStar(require("react"));
+const antd_1 = require("antd");
+const react_2 = require("@formily-design/react");
+const RemoteDataSourcePanel_1 = require("./RemoteDataSourcePanel");
+const classnames_1 = __importDefault(require("classnames"));
+const react_3 = require("@formily/react");
+exports.RemoteDataSourceSetter = (0, react_3.observer)((props) => {
+    const { onChange, value, className } = props;
+    const theme = (0, react_2.useTheme)();
+    const prefix = (0, react_2.usePrefix)('remote-data-source-setter');
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const [currentRemoteData, setCurrentRemoteData] = (0, react_1.useState)(value);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    const handleOk = () => {
+        onChange(currentRemoteData);
+        closeModal();
+    };
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(antd_1.Button, { block: true, onClick: openModal },
+            react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.editConfigure" })),
+        react_1.default.createElement(antd_1.Modal, { title: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.editConfigure" }), width: "65%", styles: { body: { padding: 10 } }, transitionName: "", maskTransitionName: "", open: modalVisible, onCancel: closeModal, onOk: handleOk, okText: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.confirm" }), cancelText: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.DataSourceSetter.cancel" }) },
+            react_1.default.createElement("div", { className: `${(0, classnames_1.default)(prefix, className)} ${prefix + '-' + theme} ${prefix + '-layout'}` },
+                react_1.default.createElement(RemoteDataSourcePanel_1.RemoteDataSourcePanel, { value: currentRemoteData, onChange: setCurrentRemoteData })))));
+});

package/lib/components/RemoteDataSourceSetter/styles.less

@@ -0,0 +1,33 @@
+.dn-data-source-setter {
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    transition: all 0.25s ease-in-out;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &-tabs {
+    margin-bottom: 8px;
+  }
+}
+
+.dn-remote-data-source-panel {
+  &-section {
+    padding: 16px;
+    min-height: 300px;
+  }
+
+  &-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+}

package/lib/components/RemoteDataSourceSetter/types.d.ts

@@ -0,0 +1,8 @@
+export interface IRemoteDataSource {
+    url: string;
+    method: string;
+    headers?: Record<string, string>;
+    params?: Record<string, string>;
+    beforeRequest?: string;
+    dataHandler?: string;
+}

package/lib/components/RemoteDataSourceSetter/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IValidatorSetterProps {
+    value?: any;
+    onChange?: (value: any) => void;
+}
+export declare const ValidatorSetter: React.FC<IValidatorSetterProps>;

package/lib/components/ValidatorSetter/index.js

@@ -0,0 +1,146 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidatorSetter = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@formily/react");
+const core_1 = require("@formily-design/core");
+const antd_v5_1 = require("@formily/antd-v5");
+const react_settings_form_1 = require("@formily-design/react-settings-form");
+const antd_1 = require("antd");
+const ValidatorSchema = {
+    type: 'array',
+    items: {
+        type: 'object',
+        'x-decorator': 'ArrayItems.Item',
+        'x-decorator-props': {
+            style: {
+                alignItems: 'center',
+                borderRadius: 3,
+                paddingTop: 6,
+                paddingBottom: 6,
+            },
+        },
+        properties: {
+            sortable: {
+                type: 'void',
+                'x-component': 'ArrayItems.SortHandle',
+                'x-component-props': { style: { marginRight: 10 } },
+            },
+            drawer: {
+                type: 'void',
+                'x-component': 'DrawerSetter',
+                properties: {
+                    triggerType: {
+                        type: 'string',
+                        enum: ['onInput', 'onFocus', 'onBlur'],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                    },
+                    validator: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ValueInput',
+                        'x-component-props': {
+                            include: ['EXPRESSION'],
+                        },
+                    },
+                    message: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input.TextArea',
+                    },
+                    format: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            allowClear: true,
+                        },
+                    },
+                    pattern: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-component-props': {
+                            prefix: '/',
+                            suffix: '/',
+                        },
+                    },
+                    len: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    max: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    min: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    exclusiveMaximum: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    exclusiveMinimum: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'NumberPicker',
+                    },
+                    whitespace: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                    required: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                },
+            },
+            moveDown: {
+                type: 'void',
+                'x-component': 'ArrayItems.MoveDown',
+                'x-component-props': { style: { marginLeft: 10 } },
+            },
+            moveUp: {
+                type: 'void',
+                'x-component': 'ArrayItems.MoveUp',
+                'x-component-props': { style: { marginLeft: 5 } },
+            },
+            remove: {
+                type: 'void',
+                'x-component': 'ArrayItems.Remove',
+                'x-component-props': { style: { marginLeft: 5 } },
+            },
+        },
+    },
+    properties: {
+        addValidatorRules: {
+            type: 'void',
+            'x-component': 'ArrayItems.Addition',
+            'x-component-props': {
+                style: {
+                    marginBottom: 10,
+                },
+            },
+        },
+    },
+};
+exports.ValidatorSetter = (0, react_2.observer)((props) => {
+    const field = (0, react_2.useField)();
+    return (react_1.default.createElement(react_settings_form_1.FoldItem, { label: field.title },
+        react_1.default.createElement(react_settings_form_1.FoldItem.Base, null,
+            react_1.default.createElement(antd_1.Select, { value: Array.isArray(props.value) ? undefined : props.value, onChange: props.onChange, allowClear: true, placeholder: core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ValidatorSetter.pleaseSelect'), options: core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ValidatorSetter.formats') })),
+        react_1.default.createElement(react_settings_form_1.FoldItem.Extra, null,
+            react_1.default.createElement(react_2.SchemaContext.Provider, { value: new react_2.Schema(ValidatorSchema) },
+                react_1.default.createElement(antd_v5_1.ArrayItems, null)))));
+});

package/lib/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DataSourceSetter';
+export * from './ReactionsSetter';
+export * from './ValidatorSetter';
+export * from './RemoteDataSourceSetter';

package/lib/components/index.js

@@ -0,0 +1,20 @@
+"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("./DataSourceSetter"), exports);
+__exportStar(require("./ReactionsSetter"), exports);
+__exportStar(require("./ValidatorSetter"), exports);
+__exportStar(require("./RemoteDataSourceSetter"), exports);

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import './locales';
+export * from './components';

package/lib/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 });
+require("./locales");
+__exportStar(require("./components"), exports);

package/lib/locales/en-US.d.ts

@@ -0,0 +1,110 @@
+declare const _default: {
+    'en-US': {
+        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/lib/locales/en-US.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ValidatorFormats = [
+    { label: 'URL', value: 'url' },
+    { label: 'Email', value: 'email' },
+    { label: 'Number', value: 'number' },
+    { label: 'Integer', value: 'integer' },
+    { label: 'ID', value: 'idcard' },
+    { label: 'Phone Number', value: 'phone' },
+    { label: 'Currency', value: 'money' },
+    { label: 'Chinese', value: 'zh' },
+    { label: 'Date', value: 'date' },
+    { label: 'Zip', value: 'zip' },
+];
+exports.default = {
+    'en-US': {
+        settings: {
+            'x-validator': {
+                title: 'Validator',
+                addValidatorRules: 'Add Validator Rules',
+                drawer: 'Edit Rules',
+                triggerType: {
+                    title: 'Trigger Type',
+                    placeholder: 'Please Select',
+                    dataSource: ['onInput', 'onFocus', 'onBlur'],
+                },
+                format: {
+                    title: 'Format',
+                    placeholder: 'Please Select',
+                    dataSource: ValidatorFormats,
+                },
+                validator: {
+                    title: 'Custom Validator',
+                    tooltip: 'Format: function (value){ return "Error Message"}',
+                },
+                pattern: 'RegExp',
+                len: 'Length Limit',
+                max: 'Length/Value Lt',
+                min: 'Length/Value Gt',
+                exclusiveMaximum: 'Length/Value Lte',
+                exclusiveMinimum: 'Length/Value Gte',
+                whitespace: 'No Whitespace',
+                required: 'Required',
+                message: {
+                    title: 'Error Message',
+                    tooltip: 'The error message is only effective for one built-in rule of the current rule set. If you need to customize the error message for different built-in rules, please split into multiple rules',
+                },
+            },
+        },
+        SettingComponents: {
+            DataSourceSetter: {
+                nodeProperty: 'Node Property',
+                pleaseSelectNode: 'please select node from the tree on the left',
+                addKeyValuePair: 'Add Key Value Pair',
+                configureDataSource: 'Configure',
+                dataSource: 'Options',
+                defaultTitle: 'Default Title',
+                dataSourceTree: 'Options Tree',
+                addNode: 'Add Node',
+                label: 'label',
+                value: 'value',
+                item: 'Item',
+                staticData: 'Static Data',
+                remoteData: 'Remote Data',
+                confirm: 'Confirm',
+                cancel: 'Cancel',
+                editConfigure: 'Edit Configure',
+            },
+            RemoteDataSource: {
+                basic: 'Basic',
+                url: 'Request URL',
+                method: 'Method',
+                headers: 'Headers',
+                params: 'Parameters',
+                handlers: 'Data Processing',
+                beforeRequest: 'Before Request',
+                dataHandler: 'Data Handler',
+                addHeader: 'Add Header',
+                addParam: 'Add Parameter',
+            },
+            ReactionsSetter: {
+                configureReactions: 'Configure',
+                relationsFields: 'Associated Fields',
+                variableName: 'Variable Name',
+                variableNameValidateMessage: 'This is not a standard variable name',
+                pleaseInput: 'Please Input',
+                sourceField: 'Source Field',
+                sourceProperty: 'Field Property',
+                variableType: 'Variable Type',
+                operations: 'Operations',
+                addRelationField: 'Add Associated Field',
+                propertyReactions: 'Property Reactions(Only Support Javascript Expression)',
+                actionReactions: 'Action Reactions(Optional, Support Javascript Statement)',
+                visible: 'Show/None',
+                hidden: 'Show/UI Hidden',
+                display: 'Display',
+                pattern: 'Pattern',
+                title: 'Title',
+                description: 'Description',
+                value: 'Value',
+                initialValue: 'InitialValue',
+                dataSource: 'Options',
+                required: 'Required',
+                component: 'Component',
+                componentProps: 'Component Props',
+                decorator: 'Decorator',
+                decoratorProps: 'Decorator Props',
+                pleaseSelect: 'Please Select',
+                expressionValueTypeIs: 'Expression value type is',
+            },
+            ValidatorSetter: {
+                pleaseSelect: 'Please Select',
+                formats: ValidatorFormats,
+            },
+        },
+    },
+};

package/lib/locales/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/locales/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@formily-design/core");
+const zh_CN_1 = __importDefault(require("./zh-CN"));
+const en_US_1 = __importDefault(require("./en-US"));
+const ko_KR_1 = __importDefault(require("./ko-KR"));
+core_1.GlobalRegistry.registerDesignerLocales(zh_CN_1.default, en_US_1.default, ko_KR_1.default);

package/lib/locales/ko-KR.d.ts

@@ -0,0 +1,110 @@
+declare const _default: {
+    'ko-KR': {
+        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;