@thienvu18/designable-formily-setters 2.0.0

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,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@formily/shared");
+const reactive_react_1 = require("@formily/reactive-react");
+const designable_react_1 = require("@thienvu18/designable-react");
+const shared_2 = require("./shared");
+require("./styles.less");
+exports.Title = (0, reactive_react_1.observer)((props) => {
+    const prefix = (0, designable_react_1.usePrefix)('data-source-setter-node-title');
+    const getTitleValue = (dataSource) => {
+        const optionalKeys = ['label', 'title', 'header'];
+        let nodeTitle;
+        optionalKeys.some((key) => {
+            const title = (0, shared_1.toArr)(dataSource).find((item) => item.label === key)?.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 ((0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.defaultTitle" }));
+        else
+            return nodeTitle + '';
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: prefix, children: [(0, jsx_runtime_1.jsx)("span", { style: { marginRight: '5px' }, children: renderTitle(props?.map || []) }), (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { className: prefix + '-icon', infer: "Remove", onClick: () => {
+                    const newDataSource = (0, shared_1.clone)(props?.treeDataSource?.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,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreePanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const antd_1 = require("antd");
+const shared_1 = require("@formily/shared");
+const reactive_react_1 = require("@formily/reactive-react");
+const designable_react_1 = require("@thienvu18/designable-react");
+const Title_1 = require("./Title");
+const Header_1 = require("./Header");
+const shared_2 = require("./shared");
+require("./styles.less");
+const designable_core_1 = require("@thienvu18/designable-core");
+const limitTreeDrag = ({ dropPosition }) => {
+    if (dropPosition === 0) {
+        return false;
+    }
+    return true;
+};
+exports.TreePanel = (0, reactive_react_1.observer)((props) => {
+    const prefix = (0, designable_react_1.usePrefix)('data-source-setter');
+    const dropHandler = (info) => {
+        const dropKey = info.node?.key;
+        const dragKey = info.dragNode?.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 ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.dataSourceTree" }), extra: (0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", onClick: () => {
+                        const uuid = (0, shared_1.uid)();
+                        const dataSource = props.treeDataSource.dataSource;
+                        const initialKeyValuePairs = props.defaultOptionValue?.map((item) => ({ ...item })) || [
+                            {
+                                label: 'label',
+                                value: `${designable_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: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Add" }), children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.addNode" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix + '-layout-item-content'}`, children: (0, jsx_runtime_1.jsx)(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) => {
+                        const { key, ...rest } = titleProps;
+                        return ((0, jsx_runtime_1.jsx)(Title_1.Title, { ...rest, treeDataSource: props.treeDataSource }, key));
+                    }, 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>;

package/lib/components/DataSourceSetter/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceSetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const antd_1 = require("antd");
+const reactive_1 = require("@formily/reactive");
+const reactive_react_1 = require("@formily/reactive-react");
+const designable_react_1 = require("@thienvu18/designable-react");
+const DataSettingPanel_1 = require("./DataSettingPanel");
+const TreePanel_1 = require("./TreePanel");
+const shared_1 = require("./shared");
+require("./styles.less");
+exports.DataSourceSetter = (0, reactive_react_1.observer)((props) => {
+    const { className, value = [], onChange, allowTree = true, allowExtendOption = true, defaultOptionValue, effects = () => { }, } = props;
+    const theme = (0, designable_react_1.useTheme)();
+    const prefix = (0, designable_react_1.usePrefix)('data-source-setter');
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const treeDataSource = (0, react_1.useMemo)(() => (0, reactive_1.observable)({
+        dataSource: (0, shared_1.transformValueToData)(value),
+        selectedKey: '',
+    }), [value, modalVisible]);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { block: true, onClick: openModal, children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" }) }), (0, jsx_runtime_1.jsx)(antd_1.Modal, { title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" }), width: "65%", styles: { body: { padding: 10 } }, transitionName: "", maskTransitionName: "", open: modalVisible, onCancel: closeModal, onOk: () => {
+                    onChange((0, shared_1.transformDataToValue)(treeDataSource.dataSource));
+                    closeModal();
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${(0, classnames_1.default)(prefix, className)} ${prefix + '-' + theme} ${prefix + '-layout'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `${prefix + '-layout-item left'}`, children: (0, jsx_runtime_1.jsx)(TreePanel_1.TreePanel, { defaultOptionValue: defaultOptionValue, allowTree: allowTree, treeDataSource: treeDataSource }) }), (0, jsx_runtime_1.jsx)("div", { className: `${prefix + '-layout-item right'}`, children: (0, jsx_runtime_1.jsx)(DataSettingPanel_1.DataSettingPanel, { allowExtendOption: allowExtendOption, treeDataSource: treeDataSource, effects: effects }) })] }) })] }));
+});

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

@@ -0,0 +1,9 @@
+import { IDataSourceItem, INodeItem } from './types';
+export interface INode {
+    key?: string;
+    map?: any;
+    children?: INode[];
+}
+export declare const traverseTree: <T extends INode>(data: T[], callback: (dataItem: T, i: number, data: T[]) => any) => void;
+export declare const transformValueToData: (value: IDataSourceItem[]) => INodeItem[];
+export declare const transformDataToValue: (data: INodeItem[]) => IDataSourceItem[];

package/lib/components/DataSourceSetter/shared.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformDataToValue = exports.transformValueToData = exports.traverseTree = void 0;
+const shared_1 = require("@formily/shared");
+const traverseTree = (data, callback) => {
+    for (let i = 0; i < data.length; i++) {
+        callback(data[i], i, data);
+        if (data[i]?.children) {
+            (0, exports.traverseTree)(data[i]?.children, callback);
+        }
+    }
+};
+exports.traverseTree = traverseTree;
+const transformValueToData = (value) => {
+    const data = (0, shared_1.clone)(value);
+    (0, exports.traverseTree)(data, (item, i, dataSource) => {
+        const dataItem = {
+            key: '',
+            duplicateKey: '',
+            map: [],
+            children: [],
+        };
+        for (const [key, value] of Object.entries(dataSource[i] || {})) {
+            if (key !== 'children')
+                dataItem.map.push({ label: key, value: value });
+        }
+        const uuid = (0, shared_1.uid)();
+        dataItem.key = uuid;
+        dataItem.duplicateKey = uuid;
+        dataItem.children = dataSource[i].children || [];
+        dataSource[i] = dataItem;
+    });
+    return data;
+};
+exports.transformValueToData = transformValueToData;
+const transformDataToValue = (data) => {
+    const value = (0, shared_1.clone)(data);
+    (0, exports.traverseTree)(value, (item, i, dataSource) => {
+        const valueItem = {
+            children: [],
+        };
+        (0, shared_1.toArr)(dataSource[i].map).forEach((item) => {
+            if (item.label)
+                valueItem[item.label] = item.value;
+        });
+        valueItem.children = dataSource[i]?.children || [];
+        dataSource[i] = valueItem;
+    });
+    return value;
+};
+exports.transformDataToValue = transformDataToValue;

package/lib/components/DataSourceSetter/styles.less

@@ -0,0 +1,81 @@
+
+.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);
+  }
+  &-node-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-icon {
+      transition: all 0.15s ease-in-out;
+      opacity: 0;
+
+      &:hover {
+        color: var(--dn-color-primary, #1677ff);
+      }
+    }
+  }
+
+  &-layout {
+    display: flex;
+    justify-content: space-around;
+    border: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+    border-radius: 3px;
+
+    .@{ant-prefix}-tree-treenode {
+      padding-right: 10px;
+      white-space: nowrap;
+
+      &:hover {
+        .dn-data-source-setter-node-title-icon {
+          opacity: 1;
+        }
+      }
+    }
+
+    &-item {
+      position: relative;
+
+      &.left {
+        width: 40%;
+        border-right: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+      }
+
+      &.right {
+        width: 60%;
+      }
+
+      &-header {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 8px 12px 9px;
+        border-bottom: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+        border-radius: 2px 2px 0 0;
+      }
+
+      &-content {
+        padding: 2%;
+        height: 300px;
+        max-height: 300px;
+        overflow: scroll;
+      }
+    }
+  }
+}
+@ant-prefix: ant;

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

@@ -0,0 +1,18 @@
+export interface IDataSourceItem {
+    label?: '';
+    value?: any;
+    children?: any[];
+}
+export interface INodeItem {
+    key: string;
+    duplicateKey?: string;
+    map?: {
+        label: string;
+        value: any;
+    }[];
+    children?: INodeItem[];
+}
+export interface ITreeDataSource {
+    dataSource: INodeItem[];
+    selectedKey: string;
+}

package/lib/components/DataSourceSetter/types.js

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IFieldProperty {
+    [key: string]: string;
+}
+export interface IFieldPropertySetterProps {
+    extraLib?: string;
+    value?: IFieldProperty;
+    onChange?: (value: IFieldProperty) => void;
+}
+export declare const FieldPropertySetter: React.FC<IFieldPropertySetterProps>;

package/lib/components/ReactionsSetter/FieldPropertySetter.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldPropertySetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const designable_react_1 = require("@thienvu18/designable-react");
+const antd_1 = require("antd");
+const designable_react_settings_form_1 = require("@thienvu18/designable-react-settings-form");
+const shared_1 = require("@formily/shared");
+const properties_1 = require("./properties");
+const template = (code) => {
+    if (!code)
+        return;
+    return code.trim();
+};
+const FieldPropertySetter = (props) => {
+    const [selectKeys, setSelectKeys] = (0, react_1.useState)(['visible']);
+    const prefix = (0, designable_react_1.usePrefix)('field-property-setter');
+    const value = { ...props.value };
+    const parseExpression = (expression) => {
+        if (!expression)
+            return '';
+        return String(expression).match(/^\{\{([\s\S]*)\}\}$/)?.[1] || '';
+    };
+    const filterEmpty = (value) => {
+        return (0, shared_1.reduce)(value, (buf, value, key) => {
+            if (!value || value === '{{}}')
+                return buf;
+            buf[key] = value;
+            return buf;
+        }, {});
+    };
+    const currentProperty = properties_1.FieldProperties.find((item) => item.key === selectKeys[0]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: prefix, children: [(0, jsx_runtime_1.jsx)(antd_1.Menu, { mode: "vertical", style: {
+                    width: 200,
+                    height: 300,
+                    paddingRight: 4,
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                }, defaultSelectedKeys: selectKeys, selectedKeys: selectKeys, onSelect: ({ selectedKeys }) => {
+                    setSelectKeys(selectedKeys);
+                }, children: properties_1.FieldProperties.map((key) => {
+                    if ((0, shared_1.isPlainObj)(key)) {
+                        return ((0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: `SettingComponents.ReactionsSetter.${key.token || key.key}` }) }, key.key));
+                    }
+                    return ((0, jsx_runtime_1.jsx)(antd_1.Menu.Item, { children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: `SettingComponents.ReactionsSetter.${key}` }) }, key));
+                }) }), (0, jsx_runtime_1.jsxs)("div", { className: prefix + '-coder-wrapper', children: [(0, jsx_runtime_1.jsxs)("div", { className: prefix + '-coder-start', children: [`$self.${selectKeys[0]} = (`, (0, jsx_runtime_1.jsxs)("span", { style: {
+                                    fontSize: 14,
+                                    marginLeft: 10,
+                                    color: '#888',
+                                    fontWeight: 'normal',
+                                }, children: ['//', ' ', (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.ReactionsSetter.expressionValueTypeIs" }), ' ', '`', currentProperty?.type, '`'] })] }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-coder', children: (0, jsx_runtime_1.jsx)(designable_react_settings_form_1.MonacoInput, { language: "javascript.expression", extraLib: props.extraLib, helpCode: template(currentProperty?.helpCode), value: parseExpression(value[selectKeys[0]]), options: {
+                                lineNumbers: 'off',
+                                wordWrap: 'on',
+                                glyphMargin: false,
+                                folding: false,
+                                lineDecorationsWidth: 0,
+                                lineNumbersMinChars: 0,
+                                minimap: {
+                                    enabled: false,
+                                },
+                            }, onChange: (expression) => {
+                                props.onChange?.(filterEmpty({
+                                    ...value,
+                                    [selectKeys[0]]: `{{${expression}}}`,
+                                }));
+                            } }, selectKeys[0]) }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-coder-end', children: `)` })] })] }));
+};
+exports.FieldPropertySetter = FieldPropertySetter;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@thienvu18/designable-core';
+import { TreeSelectProps } from 'antd';
+export interface IPathSelectorProps extends Omit<TreeSelectProps<any>, 'onChange'> {
+    value?: string;
+    onChange?: (value: string, node: TreeNode) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const PathSelector: React.FC<IPathSelectorProps>;

package/lib/components/ReactionsSetter/PathSelector.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PathSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const designable_react_1 = require("@thienvu18/designable-react");
+const antd_1 = require("antd");
+const transformDataSource = (node) => {
+    const currentNode = node;
+    const dots = (count) => {
+        let dots = '';
+        for (let i = 0; i < count; i++) {
+            dots += '.';
+        }
+        return dots;
+    };
+    const targetPath = (parentNode, targetNode) => {
+        const path = [];
+        const transform = (node) => {
+            if (node && node !== parentNode) {
+                path.push(node.props.name || node.id);
+            }
+            else {
+                transform(node.parent);
+            }
+        };
+        transform(targetNode);
+        return path.reverse().join('.');
+    };
+    const hasNoVoidChildren = (node) => {
+        return node.children?.some((node) => {
+            if (node.props.type !== 'void' && node !== currentNode)
+                return true;
+            return hasNoVoidChildren(node);
+        });
+    };
+    const findRoot = (node) => {
+        if (!node?.parent)
+            return node;
+        if (node?.parent?.componentName !== node.componentName)
+            return node.parent;
+        return findRoot(node.parent);
+    };
+    const findArrayParent = (node) => {
+        if (!node?.parent)
+            return;
+        if (node.parent.props.type === 'array')
+            return node.parent;
+        if (node.parent === root)
+            return;
+        return findArrayParent(node.parent);
+    };
+    const transformRelativePath = (arrayNode, targetNode) => {
+        if (targetNode.depth === currentNode.depth)
+            return `.${targetNode.props.name || targetNode.id}`;
+        return `${dots(currentNode.depth - arrayNode.depth)}[].${targetPath(arrayNode, targetNode)}`;
+    };
+    const transformChildren = (children, path = []) => {
+        return children.reduce((buf, node) => {
+            if (node === currentNode)
+                return buf;
+            if (node.props.type === 'array' && !node.contains(currentNode))
+                return buf;
+            if (node.props.type === 'void' && !hasNoVoidChildren(node))
+                return buf;
+            const currentPath = path.concat(node.props.name || node.id);
+            const arrayNode = findArrayParent(node);
+            const label = node.props.title ||
+                node.props['x-component-props']?.title ||
+                node.props.name ||
+                node.designerProps.title;
+            const value = arrayNode
+                ? transformRelativePath(arrayNode, node)
+                : currentPath.join('.');
+            return buf.concat({
+                label,
+                value,
+                node,
+                children: transformChildren(node.children, currentPath),
+            });
+        }, []);
+    };
+    const root = findRoot(node);
+    if (root) {
+        return transformChildren(root.children);
+    }
+    return [];
+};
+const PathSelector = (props) => {
+    const baseNode = (0, designable_react_1.useSelectedNode)();
+    const dataSource = transformDataSource(baseNode);
+    const findNode = (dataSource, value) => {
+        for (let i = 0; i < dataSource.length; i++) {
+            const item = dataSource[i];
+            if (item.value === value)
+                return item.node;
+            if (item.children?.length) {
+                const fondedChild = findNode(item.children, value);
+                if (fondedChild)
+                    return fondedChild;
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(antd_1.TreeSelect, { ...props, onChange: (value) => {
+            props.onChange(value, findNode(dataSource, value));
+        }, treeDefaultExpandAll: true, treeData: dataSource }));
+};
+exports.PathSelector = PathSelector;

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

@@ -0,0 +1,5 @@
+export interface IDependency {
+    name: string;
+    path: string;
+}
+export declare const initDeclaration: () => Promise<void>;

package/lib/components/ReactionsSetter/declarations.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initDeclaration = void 0;
+const designable_react_settings_form_1 = require("@thienvu18/designable-react-settings-form");
+const loadDependencies = async (deps) => {
+    return Promise.all(deps.map(async ({ name, path }) => ({
+        name,
+        path,
+        library: await fetch(`${(0, designable_react_settings_form_1.getNpmCDNRegistry)()}/${name}/${path}`).then((res) => res.text()),
+    })));
+};
+const initDeclaration = async () => {
+    return designable_react_settings_form_1.MonacoInput.loader.init().then(async (monaco) => {
+        const deps = await loadDependencies([
+            { name: '@formily/core', path: 'dist/formily.core.all.d.ts' },
+        ]);
+        deps?.forEach(({ name, library }) => {
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(`declare module '${name}'{ ${library} }`, `file:///node_modules/${name}/index.d.ts`);
+        });
+        monaco.languages.typescript.typescriptDefaults.addExtraLib(`
+    import { Form, Field } from '@formily/core'
+    declare global {
+      /*
+       * Form Model
+       **/
+      declare var $form: Form
+      /*
+       * Form Values
+       **/
+      declare var $values: any
+      /*
+       * Field Model
+       **/
+      declare var $self: Field
+      /*
+       * create an persistent observable state object
+       **/
+      declare var $observable: <T>(target: T, deps?: any[]) => T
+      /*
+       * create a persistent data
+       **/
+      declare var $memo: <T>(callback: () => T, deps?: any[]) => T
+      /*
+       * handle side-effect logic
+       **/
+      declare var $effect: (callback: () => void | (() => void), deps?: any[]) => void
+      /*
+       * set initial component props to current field
+       **/
+      declare var $props: (props: any) => void
+    }
+    `, `file:///node_modules/formily_global.d.ts`);
+    });
+};
+exports.initDeclaration = initDeclaration;