@thienvu18/designable-formily-setters 2.0.1 → 2.0.2

package/esm/components/DataSourceSetter/DataSettingPanel.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Form as FormCore } from '@formily/core';
-import { ITreeDataSource } from './types';
-import './styles.less';
+import { Form as FormCore } from '@formily/core'
+import React from 'react'
+import './styles.less'
+import { ITreeDataSource } from './types'
 export interface IDataSettingPanelProps {
-    treeDataSource: ITreeDataSource;
-    allowExtendOption?: boolean;
-    effects?: (form: FormCore<any>) => void;
+  treeDataSource: ITreeDataSource
+  allowExtendOption?: boolean
+  effects?: (form: FormCore<any>) => void
 }
-export declare const DataSettingPanel: React.FC<IDataSettingPanelProps>;
+export declare const DataSettingPanel: React.FC<IDataSettingPanelProps>

package/esm/components/DataSourceSetter/DataSettingPanel.js

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

package/esm/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/esm/components/DataSourceSetter/Header.js

@@ -1,8 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { observer } from '@formily/reactive-react';
-import { usePrefix } from '@thienvu18/designable-react';
-import './styles.less';
+import { observer } from '@formily/reactive-react'
+import { usePrefix } from '@thienvu18/designable-react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import './styles.less'
 export const Header = observer(({ extra, title }) => {
-    const prefix = usePrefix('data-source-setter');
-    return (_jsxs("div", { className: `${prefix + '-layout-item-header'}`, children: [_jsx("div", { className: `${prefix + '-layout-item-title'}`, children: title }), extra] }));
-});
+  const prefix = usePrefix('data-source-setter')
+  return _jsxs('div', {
+    className: `${prefix + '-layout-item-header'}`,
+    children: [
+      _jsx('div', {
+        className: `${prefix + '-layout-item-title'}`,
+        children: title,
+      }),
+      extra,
+    ],
+  })
+})

package/esm/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/esm/components/DataSourceSetter/Title.js

@@ -1,46 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { clone, toArr } from '@formily/shared';
-import { observer } from '@formily/reactive-react';
-import { IconWidget, TextWidget, usePrefix } from '@thienvu18/designable-react';
-import { traverseTree } from './shared';
-import './styles.less';
+import { observer } from '@formily/reactive-react'
+import { clone, toArr } from '@formily/shared'
+import { IconWidget, TextWidget, usePrefix } from '@thienvu18/designable-react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { traverseTree } from './shared'
+import './styles.less'
 export const Title = observer((props) => {
-    const prefix = usePrefix('data-source-setter-node-title');
-    const getTitleValue = (dataSource) => {
-        const optionalKeys = ['label', 'title', 'header'];
-        let nodeTitle;
-        optionalKeys.some((key) => {
-            const title = toArr(dataSource).find((item) => item.label === key)?.value;
-            if (title !== undefined) {
-                nodeTitle = title;
-                return true;
-            }
-            return false;
-        });
-        if (nodeTitle === undefined) {
-            toArr(dataSource || []).some((item) => {
-                if (item.value && typeof item.value === 'string') {
-                    nodeTitle = item.value;
-                    return true;
-                }
-                return false;
-            });
+  const prefix = usePrefix('data-source-setter-node-title')
+  const getTitleValue = (dataSource) => {
+    const optionalKeys = ['label', 'title', 'header']
+    let nodeTitle
+    optionalKeys.some((key) => {
+      const title = toArr(dataSource).find((item) => item.label === key)?.value
+      if (title !== undefined) {
+        nodeTitle = title
+        return true
+      }
+      return false
+    })
+    if (nodeTitle === undefined) {
+      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 (_jsx(TextWidget, { token: "SettingComponents.DataSourceSetter.defaultTitle" }));
-        else
-            return nodeTitle + '';
-    };
-    return (_jsxs("div", { className: prefix, children: [_jsx("span", { style: { marginRight: '5px' }, children: renderTitle(props?.map || []) }), _jsx(IconWidget, { className: prefix + '-icon', infer: "Remove", onClick: () => {
-                    const newDataSource = clone(props?.treeDataSource?.dataSource);
-                    traverseTree(newDataSource || [], (dataItem, i, data) => {
-                        if (data[i].key === props.duplicateKey)
-                            toArr(data).splice(i, 1);
-                    });
-                    props.treeDataSource.dataSource = newDataSource;
-                } })] }));
-});
+        return false
+      })
+    }
+    return nodeTitle
+  }
+  const renderTitle = (dataSource) => {
+    const nodeTitle = getTitleValue(dataSource)
+    if (nodeTitle === undefined)
+      return _jsx(TextWidget, {
+        token: 'SettingComponents.DataSourceSetter.defaultTitle',
+      })
+    else return nodeTitle + ''
+  }
+  return _jsxs('div', {
+    className: prefix,
+    children: [
+      _jsx('span', {
+        style: { marginRight: '5px' },
+        children: renderTitle(props?.map || []),
+      }),
+      _jsx(IconWidget, {
+        className: prefix + '-icon',
+        infer: 'Remove',
+        onClick: () => {
+          const newDataSource = clone(props?.treeDataSource?.dataSource)
+          traverseTree(newDataSource || [], (dataItem, i, data) => {
+            if (data[i].key === props.duplicateKey) toArr(data).splice(i, 1)
+          })
+          props.treeDataSource.dataSource = newDataSource
+        },
+      }),
+    ],
+  })
+})

package/esm/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/esm/components/DataSourceSetter/TreePanel.js

@@ -1,94 +1,134 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { Tree, Button } from 'antd';
-import { uid } from '@formily/shared';
-import { observer } from '@formily/reactive-react';
-import { usePrefix, TextWidget, IconWidget } from '@thienvu18/designable-react';
-import { Title } from './Title';
-import { Header } from './Header';
-import { traverseTree } from './shared';
-import './styles.less';
-import { GlobalRegistry } from '@thienvu18/designable-core';
+import { observer } from '@formily/reactive-react'
+import { uid } from '@formily/shared'
+import { GlobalRegistry } from '@thienvu18/designable-core'
+import { IconWidget, TextWidget, usePrefix } from '@thienvu18/designable-react'
+import { Button, Tree } from 'antd'
+import { Fragment } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { Header } from './Header'
+import { Title } from './Title'
+import { traverseTree } from './shared'
+import './styles.less'
 const limitTreeDrag = ({ dropPosition }) => {
-    if (dropPosition === 0) {
-        return false;
-    }
-    return true;
-};
+  if (dropPosition === 0) {
+    return false
+  }
+  return true
+}
 export const TreePanel = observer((props) => {
-    const prefix = 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;
-        traverseTree(data, (item, index, arr) => {
-            if (arr[index].key === dragKey) {
-                arr.splice(index, 1);
-                dragObj = item;
-            }
-        });
-        if (!info.dropToGap) {
-            traverseTree(data, (item) => {
-                if (item.key === dropKey) {
-                    item.children = item.children || [];
-                    item.children.unshift(dragObj);
-                }
-            });
+  const prefix = 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
+    traverseTree(data, (item, index, arr) => {
+      if (arr[index].key === dragKey) {
+        arr.splice(index, 1)
+        dragObj = item
+      }
+    })
+    if (!info.dropToGap) {
+      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) {
-            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
+    ) {
+      traverseTree(data, (item) => {
+        if (item.key === dropKey) {
+          item.children = item.children || []
+          item.children.unshift(dragObj)
         }
-        else {
-            let ar;
-            let i;
-            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
+      traverseTree(data, (item, index, arr) => {
+        if (item.key === dropKey) {
+          ar = arr
+          i = index
         }
-        props.treeDataSource.dataSource = data;
-    };
-    return (_jsxs(Fragment, { children: [_jsx(Header, { title: _jsx(TextWidget, { token: "SettingComponents.DataSourceSetter.dataSourceTree" }), extra: _jsx(Button, { type: "text", onClick: () => {
-                        const uuid = uid();
-                        const dataSource = props.treeDataSource.dataSource;
-                        const initialKeyValuePairs = props.defaultOptionValue?.map((item) => ({ ...item })) || [
-                            {
-                                label: 'label',
-                                value: `${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: _jsx(IconWidget, { infer: "Add" }), children: _jsx(TextWidget, { token: "SettingComponents.DataSourceSetter.addNode" }) }) }), _jsx("div", { className: `${prefix + '-layout-item-content'}`, children: _jsx(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 (_jsx(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 _jsxs(Fragment, {
+    children: [
+      _jsx(Header, {
+        title: _jsx(TextWidget, {
+          token: 'SettingComponents.DataSourceSetter.dataSourceTree',
+        }),
+        extra: _jsx(Button, {
+          type: 'text',
+          onClick: () => {
+            const uuid = uid()
+            const dataSource = props.treeDataSource.dataSource
+            const initialKeyValuePairs = props.defaultOptionValue?.map(
+              (item) => ({ ...item })
+            ) || [
+              {
+                label: 'label',
+                value: `${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: _jsx(IconWidget, { infer: 'Add' }),
+          children: _jsx(TextWidget, {
+            token: 'SettingComponents.DataSourceSetter.addNode',
+          }),
+        }),
+      }),
+      _jsx('div', {
+        className: `${prefix + '-layout-item-content'}`,
+        children: _jsx(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 _jsx(
+              Title,
+              { ...rest, treeDataSource: props.treeDataSource },
+              key
+            )
+          },
+          onSelect: (selectedKeys) => {
+            if (selectedKeys[0]) {
+              props.treeDataSource.selectedKey = selectedKeys[0].toString()
+            }
+          },
+        }),
+      }),
+    ],
+  })
+})

package/esm/components/DataSourceSetter/index.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Form } from '@formily/core';
-import { IDataSourceItem } from './types';
-import './styles.less';
+import { Form } from '@formily/core'
+import React from 'react'
+import './styles.less'
+import { IDataSourceItem } from './types'
 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;
+  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>;
+export declare const DataSourceSetter: React.FC<IDataSourceSetterProps>