@formily-design/formily-setters 1.0.0

package/lib/components/ReactionsSetter/index.js

@@ -0,0 +1,319 @@
+"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.ReactionsSetter = void 0;
+const react_1 = __importStar(require("react"));
+const shared_1 = require("@formily/shared");
+const core_1 = require("@formily/core");
+const react_2 = require("@formily/react");
+const core_2 = require("@formily-design/core");
+const shared_2 = require("@formily-design/shared");
+const react_3 = require("@formily-design/react");
+const react_settings_form_1 = require("@formily-design/react-settings-form");
+const antd_v5_1 = require("@formily/antd-v5");
+const antd_1 = require("antd");
+const PathSelector_1 = require("./PathSelector");
+const FieldPropertySetter_1 = require("./FieldPropertySetter");
+const helpers_1 = require("./helpers");
+const declarations_1 = require("./declarations");
+require("./styles.less");
+const TypeView = ({ value }) => {
+    const text = String(value);
+    if (text.length <= 26)
+        return react_1.default.createElement(antd_1.Tag, null, text);
+    return (react_1.default.createElement(antd_1.Tag, null,
+        react_1.default.createElement(antd_1.Tooltip, { title: react_1.default.createElement("div", { style: { fontSize: 12 } },
+                react_1.default.createElement("code", null,
+                    react_1.default.createElement("pre", { style: { whiteSpace: 'pre-wrap', padding: 0, margin: 0 } }, text))) },
+            text.substring(0, 24),
+            "...")));
+};
+const SchemaField = (0, react_2.createSchemaField)({
+    components: {
+        Card: antd_1.Card,
+        FormCollapse: antd_v5_1.FormCollapse,
+        Input: antd_v5_1.Input,
+        TypeView,
+        Select: antd_v5_1.Select,
+        FormItem: antd_v5_1.FormItem,
+        PathSelector: PathSelector_1.PathSelector,
+        FieldPropertySetter: FieldPropertySetter_1.FieldPropertySetter,
+        ArrayTable: antd_v5_1.ArrayTable,
+        MonacoInput: react_settings_form_1.MonacoInput,
+    },
+});
+const FieldStateProperties = [
+    'value',
+    'initialValue',
+    'inputValue',
+    'inputValues',
+    'modified',
+    'initialized',
+    'title',
+    'description',
+    'mounted',
+    'unmounted',
+    'active',
+    'visited',
+    'loading',
+    'errors',
+    'warnings',
+    'successes',
+    'feedbacks',
+    'valid',
+    'invalid',
+    'pattern',
+    'display',
+    'disabled',
+    'readOnly',
+    'readPretty',
+    'visible',
+    'hidden',
+    'editable',
+    'validateStatus',
+    'validating',
+];
+const FieldStateValueTypes = {
+    modified: 'boolean',
+    initialized: 'boolean',
+    title: 'string',
+    description: 'string',
+    mounted: 'boolean',
+    unmounted: 'boolean',
+    active: 'boolean',
+    visited: 'boolean',
+    loading: 'boolean',
+    errors: 'string[]',
+    warnings: 'string[]',
+    successes: 'string[]',
+    feedbacks: `Array<
+  triggerType?: 'onInput' | 'onFocus' | 'onBlur'
+  type?: 'error' | 'success' | 'warning'
+  code?:
+    | 'ValidateError'
+    | 'ValidateSuccess'
+    | 'ValidateWarning'
+    | 'EffectError'
+    | 'EffectSuccess'
+    | 'EffectWarning'
+  messages?: string[]
+>
+`,
+    valid: 'boolean',
+    invalid: 'boolean',
+    pattern: "'editable' | 'disabled' | 'readOnly' | 'readPretty'",
+    display: "'visible' | 'hidden' | 'none'",
+    disabled: 'boolean',
+    readOnly: 'boolean',
+    readPretty: 'boolean',
+    visible: 'boolean',
+    hidden: 'boolean',
+    editable: 'boolean',
+    validateStatus: "'error' | 'warning' | 'success' | 'validating'",
+    validating: 'boolean',
+};
+const ReactionsSetter = (props) => {
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const [innerVisible, setInnerVisible] = (0, react_1.useState)(false);
+    const prefix = (0, react_3.usePrefix)('reactions-setter');
+    const form = (0, react_1.useMemo)(() => {
+        return (0, core_1.createForm)({
+            values: (0, shared_1.clone)(props.value),
+        });
+    }, [modalVisible, props.value]);
+    const formCollapse = (0, react_1.useMemo)(() => antd_v5_1.FormCollapse.createFormCollapse(['deps', 'state']), [modalVisible]);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    (0, react_1.useEffect)(() => {
+        if (modalVisible) {
+            (0, shared_2.requestIdle)(() => {
+                (0, declarations_1.initDeclaration)().then(() => {
+                    setInnerVisible(true);
+                });
+            }, {
+                timeout: 400,
+            });
+        }
+        else {
+            setInnerVisible(false);
+        }
+    }, [modalVisible]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(antd_1.Button, { block: true, onClick: openModal },
+            react_1.default.createElement(react_3.TextWidget, { token: "SettingComponents.ReactionsSetter.configureReactions" })),
+        react_1.default.createElement(antd_1.Modal, { title: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.configureReactions'), width: "70%", centered: true, bodyStyle: { padding: 10 }, transitionName: "", maskTransitionName: "", visible: modalVisible, onCancel: closeModal, destroyOnClose: true, onOk: () => {
+                form.submit((values) => {
+                    var _a;
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values);
+                });
+                closeModal();
+            } },
+            react_1.default.createElement("div", { className: prefix }, innerVisible && (react_1.default.createElement(antd_v5_1.Form, { form: form },
+                react_1.default.createElement(SchemaField, null,
+                    react_1.default.createElement(SchemaField.Void, { "x-component": "FormCollapse", "x-component-props": {
+                            formCollapse,
+                            defaultActiveKey: ['deps', 'state'],
+                            style: { marginBottom: 10 },
+                        } },
+                        react_1.default.createElement(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                key: 'deps',
+                                header: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.relationsFields'),
+                            } },
+                            react_1.default.createElement(SchemaField.Array, { name: "dependencies", default: [{}], "x-component": "ArrayTable" },
+                                react_1.default.createElement(SchemaField.Object, null,
+                                    react_1.default.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceField'),
+                                            width: 240,
+                                        } },
+                                        react_1.default.createElement(SchemaField.String, { name: "source", "x-decorator": "FormItem", "x-component": "PathSelector", "x-component-props": {
+                                                placeholder: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseSelect'),
+                                            } })),
+                                    react_1.default.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceProperty'),
+                                            width: 200,
+                                        } },
+                                        react_1.default.createElement(SchemaField.String, { name: "property", default: "value", "x-decorator": "FormItem", "x-component": "Select", "x-component-props": { showSearch: true }, enum: FieldStateProperties })),
+                                    react_1.default.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableName'),
+                                            width: 200,
+                                        } },
+                                        react_1.default.createElement(SchemaField.String, { name: "name", "x-decorator": "FormItem", "x-validator": {
+                                                pattern: /^[$_a-zA-Z]+[$_a-zA-Z0-9]*$/,
+                                                message: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableNameValidateMessage'),
+                                            }, "x-component": "Input", "x-component-props": {
+                                                addonBefore: '$deps.',
+                                                placeholder: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseInput'),
+                                            }, "x-reactions": (field) => {
+                                                if ((0, core_1.isVoidField)(field))
+                                                    return;
+                                                field.query('.source').take((source) => {
+                                                    var _a, _b;
+                                                    if ((0, core_1.isVoidField)(source))
+                                                        return;
+                                                    if (source.value &&
+                                                        !field.value &&
+                                                        !field.modified) {
+                                                        field.value =
+                                                            ((_b = (_a = source.inputValues[1]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.name) ||
+                                                                `v_${(0, shared_1.uid)()}`;
+                                                    }
+                                                });
+                                            } })),
+                                    react_1.default.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableType'),
+                                            ellipsis: {
+                                                showTitle: false,
+                                            },
+                                            width: 200,
+                                            align: 'center',
+                                        } },
+                                        react_1.default.createElement(SchemaField.String, { name: "type", default: "any", "x-decorator": "FormItem", "x-component": "TypeView", "x-reactions": (field) => {
+                                                if ((0, core_1.isVoidField)(field))
+                                                    return;
+                                                const property = field
+                                                    .query('.property')
+                                                    .get('inputValues');
+                                                if (!property)
+                                                    return;
+                                                property[0] = property[0] || 'value';
+                                                field.query('.source').take((source) => {
+                                                    var _a, _b;
+                                                    if ((0, core_1.isVoidField)(source))
+                                                        return;
+                                                    if (source.value) {
+                                                        if (property[0] === 'value' ||
+                                                            property[0] === 'initialValue' ||
+                                                            property[0] === 'inputValue') {
+                                                            field.value =
+                                                                ((_b = (_a = source.inputValues[1]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.type) ||
+                                                                    'any';
+                                                        }
+                                                        else if (property[0] === 'inputValues') {
+                                                            field.value = `any[]`;
+                                                        }
+                                                        else if (property[0]) {
+                                                            field.value =
+                                                                FieldStateValueTypes[property[0]];
+                                                        }
+                                                        else {
+                                                            field.value = 'any';
+                                                        }
+                                                    }
+                                                });
+                                            } })),
+                                    react_1.default.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.operations'),
+                                            align: 'center',
+                                            width: 80,
+                                        } },
+                                        react_1.default.createElement(SchemaField.Markup, { type: "void", "x-component": "ArrayTable.Remove" }))),
+                                react_1.default.createElement(SchemaField.Void, { title: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.addRelationField'), "x-component": "ArrayTable.Addition", "x-component-props": { style: { marginTop: 8 } } }))),
+                        react_1.default.createElement(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                header: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.propertyReactions'),
+                                key: 'state',
+                                className: 'reaction-state',
+                            } },
+                            react_1.default.createElement(SchemaField.Markup, { name: "fulfill.state", "x-component": "FieldPropertySetter" })),
+                        react_1.default.createElement(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                key: 'run',
+                                header: core_2.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.actionReactions'),
+                                className: 'reaction-runner',
+                            } },
+                            react_1.default.createElement(SchemaField.String, { name: "fulfill.run", "x-component": "MonacoInput", "x-component-props": {
+                                    width: '100%',
+                                    height: 400,
+                                    language: 'typescript',
+                                    helpCode: helpers_1.FulfillRunHelper,
+                                    options: {
+                                        minimap: {
+                                            enabled: false,
+                                        },
+                                    },
+                                }, "x-reactions": (field) => {
+                                    const deps = field.query('dependencies').value();
+                                    if (Array.isArray(deps)) {
+                                        field.componentProps.extraLib = `
+                          declare var $deps : {
+                            ${deps.map(({ name, type }) => {
+                                            if (!name)
+                                                return '';
+                                            return `${name}?:${type || 'any'},`;
+                                        })}
+                          }
+                          `;
+                                    }
+                                } }))))))))));
+};
+exports.ReactionsSetter = ReactionsSetter;

package/lib/components/ReactionsSetter/properties.d.ts

@@ -0,0 +1,11 @@
+export declare const FieldProperties: ({
+    key: string;
+    type: string;
+    helpCode: string;
+    token?: undefined;
+} | {
+    key: string;
+    token: string;
+    type: string;
+    helpCode: string;
+})[];

package/lib/components/ReactionsSetter/properties.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldProperties = void 0;
+const helpers_1 = require("./helpers");
+exports.FieldProperties = [
+    {
+        key: 'visible',
+        type: 'boolean',
+        helpCode: helpers_1.BooleanHelper,
+    },
+    { key: 'hidden', type: 'boolean', helpCode: helpers_1.BooleanHelper },
+    {
+        key: 'display',
+        type: '"visible" | "hidden" | "none"',
+        helpCode: helpers_1.DisplayHelper,
+    },
+    {
+        key: 'pattern',
+        type: '"editable" | "disabled" | "readOnly" | "readPretty"',
+        helpCode: helpers_1.PatternHelper,
+    },
+    { key: 'title', type: 'string', helpCode: helpers_1.StringHelper },
+    { key: 'description', type: 'string', helpCode: helpers_1.StringHelper },
+    { key: 'value', type: 'any', helpCode: helpers_1.AnyHelper },
+    { key: 'initialValue', type: 'any', helpCode: helpers_1.AnyHelper },
+    { key: 'required', type: 'boolean', helpCode: helpers_1.BooleanHelper },
+    {
+        key: 'dataSource',
+        type: 'Array<{label?:string,value?:any}>',
+        helpCode: helpers_1.DataSourceHelper,
+    },
+    {
+        key: 'componentProps',
+        token: 'componentProps',
+        type: 'object',
+        helpCode: helpers_1.ComponentPropsHelper,
+    },
+    {
+        key: 'decoratorProps',
+        token: 'decoratorProps',
+        type: 'object',
+        helpCode: helpers_1.DecoratorPropsHelper,
+    },
+];

package/lib/components/ReactionsSetter/styles.less

@@ -0,0 +1,103 @@
+.dn-reactions-setter {
+  width: 100%;
+  min-height: 623px;
+  overflow: hidden;
+
+  ::-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);
+  }
+
+  .ant-collapse {
+    border: 1px solid #d9d9d9;
+
+    &-header {
+      padding: 8px 10px !important;
+
+      border-bottom: 1px solid #d9d9d9 !important;
+      font-weight: 500 !important;
+
+      .ant-collapse-arrow {
+        margin-right: 4px !important;
+      }
+    }
+
+    &-item {
+      border: none !important;
+    }
+
+    &-content {
+      border: none !important;
+      transition: none !important;
+    }
+
+    &-content-box {
+      padding: 12px !important;
+    }
+  }
+
+  .reaction-runner {
+    .ant-collapse-content-box {
+      padding: 12px 0 !important;
+    }
+  }
+
+  .reaction-state {
+    .ant-collapse-content-box {
+      padding: 12px 0 !important;
+    }
+  }
+
+  .dn-field-property-setter {
+    display: flex;
+    height: 300px;
+
+    &-coder-wrapper {
+      display: flex;
+      flex-grow: 2;
+      height: 100%;
+      padding-left: 10px;
+      position: relative;
+      flex-direction: column;
+    }
+
+    &-coder-start {
+      font-size: 18px;
+      line-height: 30px;
+      margin-bottom: 4px;
+
+      font-weight: 300;
+      flex-grow: 0;
+      opacity: 0.96;
+      height: 31px;
+    }
+
+    &-coder-end {
+      font-size: 18px;
+      height: 31px;
+
+      margin-top: 4px;
+      margin-bottom: 4px;
+      line-height: 30px;
+      font-weight: 300;
+      flex-grow: 0;
+      opacity: 0.96;
+    }
+
+    &-coder {
+      min-width: 0;
+      flex-grow: 2;
+      padding-left: 10px;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+export interface IReaction {
+    dependencies?: {
+        [key: string]: string;
+    };
+    fulfill?: {
+        state?: {
+            [key: string]: string;
+        };
+        schema?: {
+            [key: string]: string;
+        };
+    };
+}

package/lib/components/ReactionsSetter/types.js

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './styles.less';
+import { IRemoteDataSource } from './types';
+export interface IRemoteDataSourcePanelProps {
+    value?: IRemoteDataSource;
+    onChange: (value: IRemoteDataSource) => void;
+}
+export declare const RemoteDataSourcePanel: React.FC<IRemoteDataSourcePanelProps>;

package/lib/components/RemoteDataSourceSetter/RemoteDataSourcePanel.js

@@ -0,0 +1,140 @@
+"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.RemoteDataSourcePanel = void 0;
+const react_1 = __importStar(require("react"));
+const antd_1 = require("antd");
+const react_settings_form_1 = require("@formily-design/react-settings-form");
+const react_2 = require("@formily-design/react");
+require("./styles.less");
+/** 转换配置数据为表单数据 */
+function toFormValues(dataSourceConfig) {
+    return {
+        ...dataSourceConfig,
+        headers: Object.entries(dataSourceConfig.headers || {}).map(([key, value]) => ({ key, value })),
+        params: Object.entries(dataSourceConfig.params || {}).map(([key, value]) => ({ key, value })),
+    };
+}
+/** 转换表单数据为配置数据 */
+function toDataSourceConfigData(values) {
+    var _a, _b;
+    return {
+        ...values,
+        headers: (_a = values.headers) === null || _a === void 0 ? void 0 : _a.reduce((pre, cur) => {
+            pre[cur.key] = cur.value;
+            return pre;
+        }, {}),
+        params: (_b = values.params) === null || _b === void 0 ? void 0 : _b.reduce((pre, cur) => {
+            pre[cur.key] = cur.value;
+            return pre;
+        }, {}),
+    };
+}
+const RemoteDataSourcePanel = (props) => {
+    const prefix = (0, react_2.usePrefix)('remote-data-source-panel');
+    const { value, onChange } = props;
+    const [form] = antd_1.Form.useForm();
+    (0, react_1.useEffect)(() => {
+        if (value) {
+            form.setFieldsValue(toFormValues(value));
+        }
+    }, [value]);
+    const handleValuesChange = () => {
+        onChange(toDataSourceConfigData(form.getFieldsValue()));
+    };
+    const tabsItems = [
+        {
+            key: 'basic',
+            label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.basic" }),
+            children: (react_1.default.createElement("div", { className: `${prefix}-section` },
+                react_1.default.createElement(antd_1.Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    react_1.default.createElement(antd_1.Form.Item, { label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.url" }), name: "url" },
+                        react_1.default.createElement(antd_1.Input, { placeholder: "https://api.example.com/data" })),
+                    react_1.default.createElement(antd_1.Form.Item, { label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.method" }), name: "method" },
+                        react_1.default.createElement(antd_1.Select, { options: [
+                                { label: 'GET', value: 'GET' },
+                                { label: 'POST', value: 'POST' },
+                                { label: 'PUT', value: 'PUT' },
+                                { label: 'DELETE', value: 'DELETE' },
+                                { label: 'PATCH', value: 'PATCH' },
+                            ] }))))),
+        },
+        {
+            key: 'headers',
+            label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.headers" }),
+            children: (react_1.default.createElement("div", { className: `${prefix}-section` },
+                react_1.default.createElement(antd_1.Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    react_1.default.createElement(antd_1.Form.List, { name: "headers" }, (fields, { add, remove }) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        fields.map((field) => (react_1.default.createElement("div", { key: field.key, className: `${prefix}-row` },
+                            react_1.default.createElement(antd_1.Form.Item, { ...field, label: "", style: { marginBottom: 0 }, name: [field.name, 'key'] },
+                                react_1.default.createElement(antd_1.Input, { placeholder: "Key", style: { width: '45%' } })),
+                            react_1.default.createElement("span", { style: { margin: '0 8px' } }, "-"),
+                            react_1.default.createElement(antd_1.Form.Item, { style: { marginBottom: 0 }, name: [field.name, 'value'] },
+                                react_1.default.createElement(antd_1.Input, { placeholder: "Value", style: { width: '45%' } })),
+                            react_1.default.createElement(antd_1.Button, { type: "text", danger: true, onClick: () => remove(field.name), style: { marginLeft: 8 } }, "X")))),
+                        react_1.default.createElement(antd_1.Button, { type: "dashed", onClick: () => add({ key: '', value: '' }), block: true },
+                            react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.addHeader" })))))))),
+        },
+        {
+            key: 'params',
+            label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.params" }),
+            children: (react_1.default.createElement("div", { className: `${prefix}-section` },
+                react_1.default.createElement(antd_1.Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    react_1.default.createElement(antd_1.Form.List, { name: "params" }, (fields, { add, remove }) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        fields.map((field) => (react_1.default.createElement("div", { key: field.key, className: `${prefix}-row` },
+                            react_1.default.createElement(antd_1.Form.Item, { ...field, label: "", style: { marginBottom: 0 }, name: [field.name, 'key'] },
+                                react_1.default.createElement(antd_1.Input, { placeholder: "Key", style: { width: '45%' } })),
+                            react_1.default.createElement("span", { style: { margin: '0 8px' } }, "-"),
+                            react_1.default.createElement(antd_1.Form.Item, { style: { marginBottom: 0 }, name: [field.name, 'value'] },
+                                react_1.default.createElement(antd_1.Input, { placeholder: "Value", style: { width: '45%' } })),
+                            react_1.default.createElement(antd_1.Button, { type: "text", danger: true, onClick: () => remove(field.name), style: { marginLeft: 8 } }, "X")))),
+                        react_1.default.createElement(antd_1.Button, { type: "dashed", onClick: () => add({ key: '', value: '' }), block: true },
+                            react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.addParam" })))))))),
+        },
+        {
+            key: 'handlers',
+            label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.handlers" }),
+            children: (react_1.default.createElement("div", { className: `${prefix}-section` },
+                react_1.default.createElement(antd_1.Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    react_1.default.createElement(antd_1.Form.Item, { label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.beforeRequest" }), name: "beforeRequest" },
+                        react_1.default.createElement(react_settings_form_1.MonacoInput, { language: "javascript.expression", height: 150, helpLink: false })),
+                    react_1.default.createElement(antd_1.Form.Item, { label: react_1.default.createElement(react_2.TextWidget, { token: "SettingComponents.RemoteDataSource.dataHandler" }), name: "dataHandler" },
+                        react_1.default.createElement(react_settings_form_1.MonacoInput, { language: "javascript.expression", height: 150, helpLink: false }))))),
+        },
+    ];
+    return (react_1.default.createElement("div", { className: prefix },
+        react_1.default.createElement(antd_1.Tabs, { items: tabsItems, defaultActiveKey: "basic", size: "small" })));
+};
+exports.RemoteDataSourcePanel = RemoteDataSourcePanel;

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

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