@formily-design/formily-setters 1.0.0

package/esm/components/ReactionsSetter/index.js

@@ -0,0 +1,282 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { clone, uid } from '@formily/shared';
+import { createForm, isVoidField } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import { GlobalRegistry } from '@formily-design/core';
+import { requestIdle } from '@formily-design/shared';
+import { usePrefix, TextWidget } from '@formily-design/react';
+import { MonacoInput } from '@formily-design/react-settings-form';
+import { Form, ArrayTable, Input, Select, FormItem, FormCollapse, } from '@formily/antd-v5';
+import { Modal, Card, Button, Tag, Tooltip } from 'antd';
+import { PathSelector } from './PathSelector';
+import { FieldPropertySetter } from './FieldPropertySetter';
+import { FulfillRunHelper } from './helpers';
+import { initDeclaration } from './declarations';
+import './styles.less';
+const TypeView = ({ value }) => {
+    const text = String(value);
+    if (text.length <= 26)
+        return React.createElement(Tag, null, text);
+    return (React.createElement(Tag, null,
+        React.createElement(Tooltip, { title: React.createElement("div", { style: { fontSize: 12 } },
+                React.createElement("code", null,
+                    React.createElement("pre", { style: { whiteSpace: 'pre-wrap', padding: 0, margin: 0 } }, text))) },
+            text.substring(0, 24),
+            "...")));
+};
+const SchemaField = createSchemaField({
+    components: {
+        Card,
+        FormCollapse,
+        Input,
+        TypeView,
+        Select,
+        FormItem,
+        PathSelector,
+        FieldPropertySetter,
+        ArrayTable,
+        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',
+};
+export const ReactionsSetter = (props) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [innerVisible, setInnerVisible] = useState(false);
+    const prefix = usePrefix('reactions-setter');
+    const form = useMemo(() => {
+        return createForm({
+            values: clone(props.value),
+        });
+    }, [modalVisible, props.value]);
+    const formCollapse = useMemo(() => FormCollapse.createFormCollapse(['deps', 'state']), [modalVisible]);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    useEffect(() => {
+        if (modalVisible) {
+            requestIdle(() => {
+                initDeclaration().then(() => {
+                    setInnerVisible(true);
+                });
+            }, {
+                timeout: 400,
+            });
+        }
+        else {
+            setInnerVisible(false);
+        }
+    }, [modalVisible]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { block: true, onClick: openModal },
+            React.createElement(TextWidget, { token: "SettingComponents.ReactionsSetter.configureReactions" })),
+        React.createElement(Modal, { title: 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.createElement("div", { className: prefix }, innerVisible && (React.createElement(Form, { form: form },
+                React.createElement(SchemaField, null,
+                    React.createElement(SchemaField.Void, { "x-component": "FormCollapse", "x-component-props": {
+                            formCollapse,
+                            defaultActiveKey: ['deps', 'state'],
+                            style: { marginBottom: 10 },
+                        } },
+                        React.createElement(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                key: 'deps',
+                                header: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.relationsFields'),
+                            } },
+                            React.createElement(SchemaField.Array, { name: "dependencies", default: [{}], "x-component": "ArrayTable" },
+                                React.createElement(SchemaField.Object, null,
+                                    React.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceField'),
+                                            width: 240,
+                                        } },
+                                        React.createElement(SchemaField.String, { name: "source", "x-decorator": "FormItem", "x-component": "PathSelector", "x-component-props": {
+                                                placeholder: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseSelect'),
+                                            } })),
+                                    React.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceProperty'),
+                                            width: 200,
+                                        } },
+                                        React.createElement(SchemaField.String, { name: "property", default: "value", "x-decorator": "FormItem", "x-component": "Select", "x-component-props": { showSearch: true }, enum: FieldStateProperties })),
+                                    React.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableName'),
+                                            width: 200,
+                                        } },
+                                        React.createElement(SchemaField.String, { name: "name", "x-decorator": "FormItem", "x-validator": {
+                                                pattern: /^[$_a-zA-Z]+[$_a-zA-Z0-9]*$/,
+                                                message: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableNameValidateMessage'),
+                                            }, "x-component": "Input", "x-component-props": {
+                                                addonBefore: '$deps.',
+                                                placeholder: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseInput'),
+                                            }, "x-reactions": (field) => {
+                                                if (isVoidField(field))
+                                                    return;
+                                                field.query('.source').take((source) => {
+                                                    var _a, _b;
+                                                    if (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_${uid()}`;
+                                                    }
+                                                });
+                                            } })),
+                                    React.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableType'),
+                                            ellipsis: {
+                                                showTitle: false,
+                                            },
+                                            width: 200,
+                                            align: 'center',
+                                        } },
+                                        React.createElement(SchemaField.String, { name: "type", default: "any", "x-decorator": "FormItem", "x-component": "TypeView", "x-reactions": (field) => {
+                                                if (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 (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.createElement(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                            title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.operations'),
+                                            align: 'center',
+                                            width: 80,
+                                        } },
+                                        React.createElement(SchemaField.Markup, { type: "void", "x-component": "ArrayTable.Remove" }))),
+                                React.createElement(SchemaField.Void, { title: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.addRelationField'), "x-component": "ArrayTable.Addition", "x-component-props": { style: { marginTop: 8 } } }))),
+                        React.createElement(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                header: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.propertyReactions'),
+                                key: 'state',
+                                className: 'reaction-state',
+                            } },
+                            React.createElement(SchemaField.Markup, { name: "fulfill.state", "x-component": "FieldPropertySetter" })),
+                        React.createElement(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                key: 'run',
+                                header: GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.actionReactions'),
+                                className: 'reaction-runner',
+                            } },
+                            React.createElement(SchemaField.String, { name: "fulfill.run", "x-component": "MonacoInput", "x-component-props": {
+                                    width: '100%',
+                                    height: 400,
+                                    language: 'typescript',
+                                    helpCode: 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'},`;
+                                        })}
+                          }
+                          `;
+                                    }
+                                } }))))))))));
+};

package/esm/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/esm/components/ReactionsSetter/properties.js

@@ -0,0 +1,41 @@
+import { BooleanHelper, PatternHelper, StringHelper, AnyHelper, DataSourceHelper, DecoratorPropsHelper, DisplayHelper, ComponentPropsHelper, } from './helpers';
+export const FieldProperties = [
+    {
+        key: 'visible',
+        type: 'boolean',
+        helpCode: BooleanHelper,
+    },
+    { key: 'hidden', type: 'boolean', helpCode: BooleanHelper },
+    {
+        key: 'display',
+        type: '"visible" | "hidden" | "none"',
+        helpCode: DisplayHelper,
+    },
+    {
+        key: 'pattern',
+        type: '"editable" | "disabled" | "readOnly" | "readPretty"',
+        helpCode: PatternHelper,
+    },
+    { key: 'title', type: 'string', helpCode: StringHelper },
+    { key: 'description', type: 'string', helpCode: StringHelper },
+    { key: 'value', type: 'any', helpCode: AnyHelper },
+    { key: 'initialValue', type: 'any', helpCode: AnyHelper },
+    { key: 'required', type: 'boolean', helpCode: BooleanHelper },
+    {
+        key: 'dataSource',
+        type: 'Array<{label?:string,value?:any}>',
+        helpCode: DataSourceHelper,
+    },
+    {
+        key: 'componentProps',
+        token: 'componentProps',
+        type: 'object',
+        helpCode: ComponentPropsHelper,
+    },
+    {
+        key: 'decoratorProps',
+        token: 'decoratorProps',
+        type: 'object',
+        helpCode: DecoratorPropsHelper,
+    },
+];

package/esm/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/esm/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/esm/components/ReactionsSetter/types.js

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

package/esm/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/esm/components/RemoteDataSourceSetter/RemoteDataSourcePanel.js

@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+import { Form, Input, Select, Tabs, Button } from 'antd';
+import { MonacoInput } from '@formily-design/react-settings-form';
+import { usePrefix, TextWidget } from '@formily-design/react';
+import './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;
+        }, {}),
+    };
+}
+export const RemoteDataSourcePanel = (props) => {
+    const prefix = usePrefix('remote-data-source-panel');
+    const { value, onChange } = props;
+    const [form] = Form.useForm();
+    useEffect(() => {
+        if (value) {
+            form.setFieldsValue(toFormValues(value));
+        }
+    }, [value]);
+    const handleValuesChange = () => {
+        onChange(toDataSourceConfigData(form.getFieldsValue()));
+    };
+    const tabsItems = [
+        {
+            key: 'basic',
+            label: React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.basic" }),
+            children: (React.createElement("div", { className: `${prefix}-section` },
+                React.createElement(Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    React.createElement(Form.Item, { label: React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.url" }), name: "url" },
+                        React.createElement(Input, { placeholder: "https://api.example.com/data" })),
+                    React.createElement(Form.Item, { label: React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.method" }), name: "method" },
+                        React.createElement(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.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.headers" }),
+            children: (React.createElement("div", { className: `${prefix}-section` },
+                React.createElement(Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    React.createElement(Form.List, { name: "headers" }, (fields, { add, remove }) => (React.createElement(React.Fragment, null,
+                        fields.map((field) => (React.createElement("div", { key: field.key, className: `${prefix}-row` },
+                            React.createElement(Form.Item, { ...field, label: "", style: { marginBottom: 0 }, name: [field.name, 'key'] },
+                                React.createElement(Input, { placeholder: "Key", style: { width: '45%' } })),
+                            React.createElement("span", { style: { margin: '0 8px' } }, "-"),
+                            React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, 'value'] },
+                                React.createElement(Input, { placeholder: "Value", style: { width: '45%' } })),
+                            React.createElement(Button, { type: "text", danger: true, onClick: () => remove(field.name), style: { marginLeft: 8 } }, "X")))),
+                        React.createElement(Button, { type: "dashed", onClick: () => add({ key: '', value: '' }), block: true },
+                            React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.addHeader" })))))))),
+        },
+        {
+            key: 'params',
+            label: React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.params" }),
+            children: (React.createElement("div", { className: `${prefix}-section` },
+                React.createElement(Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    React.createElement(Form.List, { name: "params" }, (fields, { add, remove }) => (React.createElement(React.Fragment, null,
+                        fields.map((field) => (React.createElement("div", { key: field.key, className: `${prefix}-row` },
+                            React.createElement(Form.Item, { ...field, label: "", style: { marginBottom: 0 }, name: [field.name, 'key'] },
+                                React.createElement(Input, { placeholder: "Key", style: { width: '45%' } })),
+                            React.createElement("span", { style: { margin: '0 8px' } }, "-"),
+                            React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, 'value'] },
+                                React.createElement(Input, { placeholder: "Value", style: { width: '45%' } })),
+                            React.createElement(Button, { type: "text", danger: true, onClick: () => remove(field.name), style: { marginLeft: 8 } }, "X")))),
+                        React.createElement(Button, { type: "dashed", onClick: () => add({ key: '', value: '' }), block: true },
+                            React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.addParam" })))))))),
+        },
+        {
+            key: 'handlers',
+            label: React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.handlers" }),
+            children: (React.createElement("div", { className: `${prefix}-section` },
+                React.createElement(Form, { form: form, layout: "vertical", onValuesChange: handleValuesChange },
+                    React.createElement(Form.Item, { label: React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.beforeRequest" }), name: "beforeRequest" },
+                        React.createElement(MonacoInput, { language: "javascript.expression", height: 150, helpLink: false })),
+                    React.createElement(Form.Item, { label: React.createElement(TextWidget, { token: "SettingComponents.RemoteDataSource.dataHandler" }), name: "dataHandler" },
+                        React.createElement(MonacoInput, { language: "javascript.expression", height: 150, helpLink: false }))))),
+        },
+    ];
+    return (React.createElement("div", { className: prefix },
+        React.createElement(Tabs, { items: tabsItems, defaultActiveKey: "basic", size: "small" })));
+};

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

package/esm/components/RemoteDataSourceSetter/index.js

@@ -0,0 +1,25 @@
+import React, { Fragment, useState } from 'react';
+import { Button, Modal } from 'antd';
+import { TextWidget, usePrefix, useTheme } from '@formily-design/react';
+import { RemoteDataSourcePanel } from './RemoteDataSourcePanel';
+import cls from 'classnames';
+import { observer } from '@formily/react';
+export const RemoteDataSourceSetter = observer((props) => {
+    const { onChange, value, className } = props;
+    const theme = useTheme();
+    const prefix = usePrefix('remote-data-source-setter');
+    const [modalVisible, setModalVisible] = useState(false);
+    const [currentRemoteData, setCurrentRemoteData] = useState(value);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    const handleOk = () => {
+        onChange(currentRemoteData);
+        closeModal();
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(Button, { block: true, onClick: openModal },
+            React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.editConfigure" })),
+        React.createElement(Modal, { title: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.editConfigure" }), width: "65%", styles: { body: { padding: 10 } }, transitionName: "", maskTransitionName: "", open: modalVisible, onCancel: closeModal, onOk: handleOk, okText: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.confirm" }), cancelText: React.createElement(TextWidget, { token: "SettingComponents.DataSourceSetter.cancel" }) },
+            React.createElement("div", { className: `${cls(prefix, className)} ${prefix + '-' + theme} ${prefix + '-layout'}` },
+                React.createElement(RemoteDataSourcePanel, { value: currentRemoteData, onChange: setCurrentRemoteData })))));
+});

package/esm/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/esm/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/esm/components/RemoteDataSourceSetter/types.js

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