@thienvu18/designable-formily-setters 2.0.1 → 2.0.2

package/esm/components/DataSourceSetter/index.js

@@ -1,27 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useMemo, useState } from 'react';
-import cls from 'classnames';
-import { Modal, Button } from 'antd';
-import { observable } from '@formily/reactive';
-import { observer } from '@formily/reactive-react';
-import { usePrefix, useTheme, TextWidget } from '@thienvu18/designable-react';
-import { DataSettingPanel } from './DataSettingPanel';
-import { TreePanel } from './TreePanel';
-import { transformDataToValue, transformValueToData } from './shared';
-import './styles.less';
+import { observable } from '@formily/reactive'
+import { observer } from '@formily/reactive-react'
+import { TextWidget, usePrefix, useTheme } from '@thienvu18/designable-react'
+import { Button, Modal } from 'antd'
+import cls from 'classnames'
+import { Fragment, useMemo, useState } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { DataSettingPanel } from './DataSettingPanel'
+import { TreePanel } from './TreePanel'
+import { transformDataToValue, transformValueToData } from './shared'
+import './styles.less'
 export const DataSourceSetter = observer((props) => {
-    const { className, value = [], onChange, allowTree = true, allowExtendOption = true, defaultOptionValue, effects = () => { }, } = props;
-    const theme = useTheme();
-    const prefix = usePrefix('data-source-setter');
-    const [modalVisible, setModalVisible] = useState(false);
-    const treeDataSource = useMemo(() => observable({
+  const {
+    className,
+    value = [],
+    onChange,
+    allowTree = true,
+    allowExtendOption = true,
+    defaultOptionValue,
+    effects = () => {},
+  } = props
+  const theme = useTheme()
+  const prefix = usePrefix('data-source-setter')
+  const [modalVisible, setModalVisible] = useState(false)
+  const treeDataSource = useMemo(
+    () =>
+      observable({
         dataSource: transformValueToData(value),
         selectedKey: '',
-    }), [value, modalVisible]);
-    const openModal = () => setModalVisible(true);
-    const closeModal = () => setModalVisible(false);
-    return (_jsxs(Fragment, { children: [_jsx(Button, { block: true, onClick: openModal, children: _jsx(TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" }) }), _jsx(Modal, { title: _jsx(TextWidget, { token: "SettingComponents.DataSourceSetter.configureDataSource" }), width: "65%", styles: { body: { padding: 10 } }, transitionName: "", maskTransitionName: "", open: modalVisible, onCancel: closeModal, onOk: () => {
-                    onChange(transformDataToValue(treeDataSource.dataSource));
-                    closeModal();
-                }, children: _jsxs("div", { className: `${cls(prefix, className)} ${prefix + '-' + theme} ${prefix + '-layout'}`, children: [_jsx("div", { className: `${prefix + '-layout-item left'}`, children: _jsx(TreePanel, { defaultOptionValue: defaultOptionValue, allowTree: allowTree, treeDataSource: treeDataSource }) }), _jsx("div", { className: `${prefix + '-layout-item right'}`, children: _jsx(DataSettingPanel, { allowExtendOption: allowExtendOption, treeDataSource: treeDataSource, effects: effects }) })] }) })] }));
-});
+      }),
+    [value, modalVisible]
+  )
+  const openModal = () => setModalVisible(true)
+  const closeModal = () => setModalVisible(false)
+  return _jsxs(Fragment, {
+    children: [
+      _jsx(Button, {
+        block: true,
+        onClick: openModal,
+        children: _jsx(TextWidget, {
+          token: 'SettingComponents.DataSourceSetter.configureDataSource',
+        }),
+      }),
+      _jsx(Modal, {
+        title: _jsx(TextWidget, {
+          token: 'SettingComponents.DataSourceSetter.configureDataSource',
+        }),
+        width: '65%',
+        styles: { body: { padding: 10 } },
+        transitionName: '',
+        maskTransitionName: '',
+        open: modalVisible,
+        onCancel: closeModal,
+        onOk: () => {
+          onChange(transformDataToValue(treeDataSource.dataSource))
+          closeModal()
+        },
+        children: _jsxs('div', {
+          className: `${cls(prefix, className)} ${prefix + '-' + theme} ${
+            prefix + '-layout'
+          }`,
+          children: [
+            _jsx('div', {
+              className: `${prefix + '-layout-item left'}`,
+              children: _jsx(TreePanel, {
+                defaultOptionValue: defaultOptionValue,
+                allowTree: allowTree,
+                treeDataSource: treeDataSource,
+              }),
+            }),
+            _jsx('div', {
+              className: `${prefix + '-layout-item right'}`,
+              children: _jsx(DataSettingPanel, {
+                allowExtendOption: allowExtendOption,
+                treeDataSource: treeDataSource,
+                effects: effects,
+              }),
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+})

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

@@ -1,9 +1,16 @@
-import { IDataSourceItem, INodeItem } from './types';
+import { IDataSourceItem, INodeItem } from './types'
 export interface INode {
-    key?: string;
-    map?: any;
-    children?: 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[];
+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/esm/components/DataSourceSetter/shared.js

@@ -1,45 +1,43 @@
-import { uid, clone, toArr } from '@formily/shared';
+import { clone, toArr, uid } from '@formily/shared'
 export const traverseTree = (data, callback) => {
-    for (let i = 0; i < data.length; i++) {
-        callback(data[i], i, data);
-        if (data[i]?.children) {
-            traverseTree(data[i]?.children, callback);
-        }
+  for (let i = 0; i < data.length; i++) {
+    callback(data[i], i, data)
+    if (data[i]?.children) {
+      traverseTree(data[i]?.children, callback)
     }
-};
+  }
+}
 export const transformValueToData = (value) => {
-    const data = clone(value);
-    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 = uid();
-        dataItem.key = uuid;
-        dataItem.duplicateKey = uuid;
-        dataItem.children = dataSource[i].children || [];
-        dataSource[i] = dataItem;
-    });
-    return data;
-};
+  const data = clone(value)
+  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 = uid()
+    dataItem.key = uuid
+    dataItem.duplicateKey = uuid
+    dataItem.children = dataSource[i].children || []
+    dataSource[i] = dataItem
+  })
+  return data
+}
 export const transformDataToValue = (data) => {
-    const value = clone(data);
-    traverseTree(value, (item, i, dataSource) => {
-        const valueItem = {
-            children: [],
-        };
-        toArr(dataSource[i].map).forEach((item) => {
-            if (item.label)
-                valueItem[item.label] = item.value;
-        });
-        valueItem.children = dataSource[i]?.children || [];
-        dataSource[i] = valueItem;
-    });
-    return value;
-};
+  const value = clone(data)
+  traverseTree(value, (item, i, dataSource) => {
+    const valueItem = {
+      children: [],
+    }
+    toArr(dataSource[i].map).forEach((item) => {
+      if (item.label) valueItem[item.label] = item.value
+    })
+    valueItem.children = dataSource[i]?.children || []
+    dataSource[i] = valueItem
+  })
+  return value
+}

package/esm/components/DataSourceSetter/styles.less

@@ -1,4 +1,3 @@
-
 .dn-data-source-setter {
   ::-webkit-scrollbar {
     width: 5px;
@@ -51,7 +50,8 @@
 
       &.left {
         width: 40%;
-        border-right: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+        border-right: 1px solid
+          var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
       }
 
       &.right {
@@ -65,7 +65,8 @@
         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-bottom: 1px solid
+          var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
         border-radius: 2px 2px 0 0;
       }
 

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

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

package/esm/components/DataSourceSetter/types.js

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

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

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

package/esm/components/ReactionsSetter/FieldPropertySetter.js

@@ -1,65 +1,142 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { TextWidget, usePrefix } from '@thienvu18/designable-react';
-import { Menu } from 'antd';
-import { MonacoInput } from '@thienvu18/designable-react-settings-form';
-import { isPlainObj, reduce } from '@formily/shared';
-import { FieldProperties } from './properties';
+import { isPlainObj, reduce } from '@formily/shared'
+import { TextWidget, usePrefix } from '@thienvu18/designable-react'
+import { MonacoInput } from '@thienvu18/designable-react-settings-form'
+import { Menu } from 'antd'
+import { useState } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { FieldProperties } from './properties'
 const template = (code) => {
-    if (!code)
-        return;
-    return code.trim();
-};
+  if (!code) return
+  return code.trim()
+}
 export const FieldPropertySetter = (props) => {
-    const [selectKeys, setSelectKeys] = useState(['visible']);
-    const prefix = 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 reduce(value, (buf, value, key) => {
-            if (!value || value === '{{}}')
-                return buf;
-            buf[key] = value;
-            return buf;
-        }, {});
-    };
-    const currentProperty = FieldProperties.find((item) => item.key === selectKeys[0]);
-    return (_jsxs("div", { className: prefix, children: [_jsx(Menu, { mode: "vertical", style: {
-                    width: 200,
-                    height: 300,
-                    paddingRight: 4,
-                    overflowY: 'auto',
-                    overflowX: 'hidden',
-                }, defaultSelectedKeys: selectKeys, selectedKeys: selectKeys, onSelect: ({ selectedKeys }) => {
-                    setSelectKeys(selectedKeys);
-                }, children: FieldProperties.map((key) => {
-                    if (isPlainObj(key)) {
-                        return (_jsx(Menu.Item, { children: _jsx(TextWidget, { token: `SettingComponents.ReactionsSetter.${key.token || key.key}` }) }, key.key));
-                    }
-                    return (_jsx(Menu.Item, { children: _jsx(TextWidget, { token: `SettingComponents.ReactionsSetter.${key}` }) }, key));
-                }) }), _jsxs("div", { className: prefix + '-coder-wrapper', children: [_jsxs("div", { className: prefix + '-coder-start', children: [`$self.${selectKeys[0]} = (`, _jsxs("span", { style: {
-                                    fontSize: 14,
-                                    marginLeft: 10,
-                                    color: '#888',
-                                    fontWeight: 'normal',
-                                }, children: ['//', ' ', _jsx(TextWidget, { token: "SettingComponents.ReactionsSetter.expressionValueTypeIs" }), ' ', '`', currentProperty?.type, '`'] })] }), _jsx("div", { className: prefix + '-coder', children: _jsx(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]) }), _jsx("div", { className: prefix + '-coder-end', children: `)` })] })] }));
-};
+  const [selectKeys, setSelectKeys] = useState(['visible'])
+  const prefix = 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 reduce(
+      value,
+      (buf, value, key) => {
+        if (!value || value === '{{}}') return buf
+        buf[key] = value
+        return buf
+      },
+      {}
+    )
+  }
+  const currentProperty = FieldProperties.find(
+    (item) => item.key === selectKeys[0]
+  )
+  return _jsxs('div', {
+    className: prefix,
+    children: [
+      _jsx(Menu, {
+        mode: 'vertical',
+        style: {
+          width: 200,
+          height: 300,
+          paddingRight: 4,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        },
+        defaultSelectedKeys: selectKeys,
+        selectedKeys: selectKeys,
+        onSelect: ({ selectedKeys }) => {
+          setSelectKeys(selectedKeys)
+        },
+        children: FieldProperties.map((key) => {
+          if (isPlainObj(key)) {
+            return _jsx(
+              Menu.Item,
+              {
+                children: _jsx(TextWidget, {
+                  token: `SettingComponents.ReactionsSetter.${
+                    key.token || key.key
+                  }`,
+                }),
+              },
+              key.key
+            )
+          }
+          return _jsx(
+            Menu.Item,
+            {
+              children: _jsx(TextWidget, {
+                token: `SettingComponents.ReactionsSetter.${key}`,
+              }),
+            },
+            key
+          )
+        }),
+      }),
+      _jsxs('div', {
+        className: prefix + '-coder-wrapper',
+        children: [
+          _jsxs('div', {
+            className: prefix + '-coder-start',
+            children: [
+              `$self.${selectKeys[0]} = (`,
+              _jsxs('span', {
+                style: {
+                  fontSize: 14,
+                  marginLeft: 10,
+                  color: '#888',
+                  fontWeight: 'normal',
+                },
+                children: [
+                  '//',
+                  ' ',
+                  _jsx(TextWidget, {
+                    token:
+                      'SettingComponents.ReactionsSetter.expressionValueTypeIs',
+                  }),
+                  ' ',
+                  '`',
+                  currentProperty?.type,
+                  '`',
+                ],
+              }),
+            ],
+          }),
+          _jsx('div', {
+            className: prefix + '-coder',
+            children: _jsx(
+              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]
+            ),
+          }),
+          _jsx('div', { className: prefix + '-coder-end', children: `)` }),
+        ],
+      }),
+    ],
+  })
+}

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

@@ -1,10 +1,11 @@
-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;
+import { TreeNode } from '@thienvu18/designable-core'
+import { TreeSelectProps } from 'antd'
+import React from 'react'
+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>;
+export declare const PathSelector: React.FC<IPathSelectorProps>