@thienvu18/designable-formily-setters 2.0.0 → 2.0.2

package/lib/components/DataSourceSetter/DataSettingPanel.js

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

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

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

package/lib/components/DataSourceSetter/Header.js

@@ -1,11 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const reactive_react_1 = require("@formily/reactive-react");
-const designable_react_1 = require("@thienvu18/designable-react");
-require("./styles.less");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.Header = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const reactive_react_1 = require('@formily/reactive-react')
+const designable_react_1 = require('@thienvu18/designable-react')
+require('./styles.less')
 exports.Header = (0, reactive_react_1.observer)(({ extra, title }) => {
-    const prefix = (0, designable_react_1.usePrefix)('data-source-setter');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `${prefix + '-layout-item-header'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `${prefix + '-layout-item-title'}`, children: title }), extra] }));
-});
+  const prefix = (0, designable_react_1.usePrefix)('data-source-setter')
+  return (0, jsx_runtime_1.jsxs)('div', {
+    className: `${prefix + '-layout-item-header'}`,
+    children: [
+      (0, jsx_runtime_1.jsx)('div', {
+        className: `${prefix + '-layout-item-title'}`,
+        children: title,
+      }),
+      extra,
+    ],
+  })
+})

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

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

package/lib/components/DataSourceSetter/Title.js

@@ -1,49 +1,72 @@
-"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");
+'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;
-            });
+  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 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;
-                } })] }));
-});
+        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

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

package/lib/components/DataSourceSetter/TreePanel.js

@@ -1,97 +1,139 @@
-"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");
+'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;
-};
+  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);
-                }
-            });
+  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 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);
-            }
+      })
+    } else {
+      let ar
+      let i
+      ;(0, shared_2.traverseTree)(data, (item, index, arr) => {
+        if (item.key === dropKey) {
+          ar = arr
+          i = index
         }
-        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();
-                        }
-                    } }) })] }));
-});
+      })
+      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()
+            }
+          },
+        }),
+      }),
+    ],
+  })
+})