@thienvu18/designable-formily-setters 2.0.1 → 2.0.2

package/lib/components/ReactionsSetter/PathSelector.js

@@ -1,107 +1,104 @@
-"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");
+'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);
+  const currentNode = node
+  const dots = (count) => {
+    let dots = ''
+    for (let i = 0; i < count; i++) {
+      dots += '.'
     }
-    return [];
-};
+    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;
+  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

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

package/lib/components/ReactionsSetter/declarations.js

@@ -1,23 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initDeclaration = void 0;
-const designable_react_settings_form_1 = require("@thienvu18/designable-react-settings-form");
+'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()),
-    })));
-};
+  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(`
+  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 {
       /*
@@ -49,7 +60,9 @@ const initDeclaration = async () => {
        **/
       declare var $props: (props: any) => void
     }
-    `, `file:///node_modules/formily_global.d.ts`);
-    });
-};
-exports.initDeclaration = initDeclaration;
+    `,
+        `file:///node_modules/formily_global.d.ts`
+      )
+    })
+}
+exports.initDeclaration = initDeclaration

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

@@ -1,10 +1,20 @@
-export declare const GlobalHelper = "\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n";
-export declare const BooleanHelper = "\n/** \n * Example 1\n * Static Boolean\n **/\n\nfalse\n\n/** \n * Example 2\n * Equal Calculation\n **/\n\n$deps.VariableName === 'TARGET_VALUE'\n\n/** \n * Example 3\n * Not Equal Calculation\n **/\n\n$deps.VariableName !== 'TARGET_VALUE'\n\n/** \n * Example 4\n * And Logic Calculation\n **/\n\n$deps.VariableName1 && $deps.VariableName2\n\n/** \n * Example 5\n * Grater Logic Calculation\n **/\n\n$deps.VariableName > 100\n\n/** \n * Example 6\n * Not Logic Calculation\n **/\n\n!$deps.VariableName\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const DisplayHelper = "\n/** \n * Example 1\n * Static Mode\n **/\n\n'none'\n\n/** \n * Example 2\n * Equal Condition Associated\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'visible' : 'none'\n\n/** \n * Example 3\n * Not Equal Condition Associated\n **/\n\n$deps.VariableName !== 'TARGET_VALUE' ? 'visible' : 'hidden'\n\n/** \n * Example 4\n * And Logic Condition Associated\n **/\n\n$deps.VariableName1 && $deps.VariableName2 ? 'visible' : 'none'\n\n/** \n * Example 5\n * Grater Logic Condition Associated\n **/\n\n$deps.VariableName > 100 ? 'visible' : 'hidden'\n\n/** \n * Example 6\n * Not Logic Condition Associated\n **/\n\n!$deps.VariableName ? 'visible' : 'none'\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const PatternHelper = "\n/** \n * Example 1\n * Static Mode\n **/\n\n'readPretty'\n\n/** \n * Example 2\n * Equal Condition Associated\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'editable' : 'disabled'\n\n/** \n * Example 3\n * Not Equal Condition Associated\n **/\n\n$deps.VariableName !== 'TARGET_VALUE' ? 'editable' : 'readOnly'\n\n/** \n * Example 4\n * And Logic Condition Associated\n **/\n\n$deps.VariableName1 && $deps.VariableName2 ? 'editable' : 'readPretty'\n\n/** \n * Example 5\n * Grater Logic Condition Associated\n **/\n\n$deps.VariableName > 100 ? 'editable' : 'readOnly'\n\n/** \n * Example 6\n * Not Logic Condition Associated\n **/\n\n!$deps.VariableName ? 'editable' : 'disabled'\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const StringHelper = "\n/** \n * Example 1\n * Static String\n **/\n\n'Normal String Text'\n\n/** \n * Example 2\n * Associated String\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const AnyHelper = "\n/** \n * Example 1\n * String Type\n **/\n\n'String'\n\n/** \n * Example 2\n * String Array\n **/\n\n['StringArray']\n\n/** \n * Example 3\n * Object Array\n **/\n\n[{ key: 'ObjectArray' }]\n\n/** \n * Example 4\n * Boolean\n **/\n\ntrue\n\n/** \n * Example 5\n * RegExp\n **/\n\n/d+/\n\n/** \n * Example 1\n * Associated String Value\n **/\n\n$deps.VariableName + 'Compose String'\n\n/** \n * Example 2\n * Associated Array Value\n **/\n\n[ $deps.VariableName ]\n\n/** \n * Example 3\n * Associated Object Value\n **/\n\n{\n  key : $deps.VariableName\n}\n\n/** \n * Example 4\n * Associated Boolean Value\n **/\n\n!$deps.VariableName\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const DataSourceHelper = "\n/** \n * Example 1\n * Static DataSource\n **/\n\n[\n  { label : \"item1\", value: \"1\" },\n  { label : \"item2\", value: \"2\" }\n]\n\n/** \n * Example 2\n * Associated DataSource\n **/\n\n[\n  { label : \"item1\", value: \"1\" },\n  { label : \"item2\", value: \"2\" },\n  ...$deps.VariableName\n]\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const ComponentPropsHelper = "\n/** \n * Example 1\n * Static Props\n **/\n\n{\n  placeholder: \"This is placeholder\"\n}\n\n/** \n * Example 2\n * Associated Props\n **/\n\n{\n  placeholder: $deps.VariableName\n}\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const DecoratorPropsHelper = "\n/** \n * Example 1\n * Static Props\n **/\n\n{\n  labelCol:6\n}\n\n/** \n * Example 2\n * Associated Props\n **/\n\n{\n  labelCol: $deps.VariableName\n}\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
-export declare const FulfillRunHelper = "\n/** \n * Example 1\n * Async Select\n **/\n\n$effect(()=>{\n  $self.loading = true\n  fetch('//some.domain/getSomething')\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[])\n  \n\n/** \n * Example 2\n * Async Search Select\n **/\n\nconst state = $observable({\n  keyword:''\n})\n\n$props({\n  onSearch(keyword){\n    state.keyword = keyword\n  }\n})\n\n$effect(()=>{\n  $self.loading = true\n  fetch(`//some.domain/getSomething?q=${state.keyword}`)\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[ state.keyword ])\n\n/** \n * Example 3\n * Async Associated Select\n **/\n\nconst state = $observable({\n  keyword:''\n})\n\n$props({\n  onSearch(keyword){\n    state.keyword = keyword\n  }\n})\n\n$effect(()=>{\n  $self.loading = true\n  fetch(`//some.domain/getSomething?q=${state.keyword}&other=${$deps.VariableName}`)\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[ state.keyword, $deps.VariableName ])\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n";
+export declare const GlobalHelper =
+  '\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n'
+export declare const BooleanHelper =
+  "\n/** \n * Example 1\n * Static Boolean\n **/\n\nfalse\n\n/** \n * Example 2\n * Equal Calculation\n **/\n\n$deps.VariableName === 'TARGET_VALUE'\n\n/** \n * Example 3\n * Not Equal Calculation\n **/\n\n$deps.VariableName !== 'TARGET_VALUE'\n\n/** \n * Example 4\n * And Logic Calculation\n **/\n\n$deps.VariableName1 && $deps.VariableName2\n\n/** \n * Example 5\n * Grater Logic Calculation\n **/\n\n$deps.VariableName > 100\n\n/** \n * Example 6\n * Not Logic Calculation\n **/\n\n!$deps.VariableName\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n"
+export declare const DisplayHelper =
+  "\n/** \n * Example 1\n * Static Mode\n **/\n\n'none'\n\n/** \n * Example 2\n * Equal Condition Associated\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'visible' : 'none'\n\n/** \n * Example 3\n * Not Equal Condition Associated\n **/\n\n$deps.VariableName !== 'TARGET_VALUE' ? 'visible' : 'hidden'\n\n/** \n * Example 4\n * And Logic Condition Associated\n **/\n\n$deps.VariableName1 && $deps.VariableName2 ? 'visible' : 'none'\n\n/** \n * Example 5\n * Grater Logic Condition Associated\n **/\n\n$deps.VariableName > 100 ? 'visible' : 'hidden'\n\n/** \n * Example 6\n * Not Logic Condition Associated\n **/\n\n!$deps.VariableName ? 'visible' : 'none'\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n"
+export declare const PatternHelper =
+  "\n/** \n * Example 1\n * Static Mode\n **/\n\n'readPretty'\n\n/** \n * Example 2\n * Equal Condition Associated\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'editable' : 'disabled'\n\n/** \n * Example 3\n * Not Equal Condition Associated\n **/\n\n$deps.VariableName !== 'TARGET_VALUE' ? 'editable' : 'readOnly'\n\n/** \n * Example 4\n * And Logic Condition Associated\n **/\n\n$deps.VariableName1 && $deps.VariableName2 ? 'editable' : 'readPretty'\n\n/** \n * Example 5\n * Grater Logic Condition Associated\n **/\n\n$deps.VariableName > 100 ? 'editable' : 'readOnly'\n\n/** \n * Example 6\n * Not Logic Condition Associated\n **/\n\n!$deps.VariableName ? 'editable' : 'disabled'\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n"
+export declare const StringHelper =
+  "\n/** \n * Example 1\n * Static String\n **/\n\n'Normal String Text'\n\n/** \n * Example 2\n * Associated String\n **/\n\n$deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n"
+export declare const AnyHelper =
+  "\n/** \n * Example 1\n * String Type\n **/\n\n'String'\n\n/** \n * Example 2\n * String Array\n **/\n\n['StringArray']\n\n/** \n * Example 3\n * Object Array\n **/\n\n[{ key: 'ObjectArray' }]\n\n/** \n * Example 4\n * Boolean\n **/\n\ntrue\n\n/** \n * Example 5\n * RegExp\n **/\n\n/d+/\n\n/** \n * Example 1\n * Associated String Value\n **/\n\n$deps.VariableName + 'Compose String'\n\n/** \n * Example 2\n * Associated Array Value\n **/\n\n[ $deps.VariableName ]\n\n/** \n * Example 3\n * Associated Object Value\n **/\n\n{\n  key : $deps.VariableName\n}\n\n/** \n * Example 4\n * Associated Boolean Value\n **/\n\n!$deps.VariableName\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n"
+export declare const DataSourceHelper =
+  '\n/** \n * Example 1\n * Static DataSource\n **/\n\n[\n  { label : "item1", value: "1" },\n  { label : "item2", value: "2" }\n]\n\n/** \n * Example 2\n * Associated DataSource\n **/\n\n[\n  { label : "item1", value: "1" },\n  { label : "item2", value: "2" },\n  ...$deps.VariableName\n]\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n'
+export declare const ComponentPropsHelper =
+  '\n/** \n * Example 1\n * Static Props\n **/\n\n{\n  placeholder: "This is placeholder"\n}\n\n/** \n * Example 2\n * Associated Props\n **/\n\n{\n  placeholder: $deps.VariableName\n}\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n'
+export declare const DecoratorPropsHelper =
+  '\n/** \n * Example 1\n * Static Props\n **/\n\n{\n  labelCol:6\n}\n\n/** \n * Example 2\n * Associated Props\n **/\n\n{\n  labelCol: $deps.VariableName\n}\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n'
+export declare const FulfillRunHelper =
+  "\n/** \n * Example 1\n * Async Select\n **/\n\n$effect(()=>{\n  $self.loading = true\n  fetch('//some.domain/getSomething')\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[])\n  \n\n/** \n * Example 2\n * Async Search Select\n **/\n\nconst state = $observable({\n  keyword:''\n})\n\n$props({\n  onSearch(keyword){\n    state.keyword = keyword\n  }\n})\n\n$effect(()=>{\n  $self.loading = true\n  fetch(`//some.domain/getSomething?q=${state.keyword}`)\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[ state.keyword ])\n\n/** \n * Example 3\n * Async Associated Select\n **/\n\nconst state = $observable({\n  keyword:''\n})\n\n$props({\n  onSearch(keyword){\n    state.keyword = keyword\n  }\n})\n\n$effect(()=>{\n  $self.loading = true\n  fetch(`//some.domain/getSomething?q=${state.keyword}&other=${$deps.VariableName}`)\n    .then(response=>response.json())\n    .then(({ data })=>{\n      $self.loading = false\n      $self.dataSource = data\n    },()=>{\n      $self.loading = false\n    })\n},[ state.keyword, $deps.VariableName ])\n\n\n/** \n * You can use the built-in context variables\n * \n * 1. `$self` is the current Field Model \n * \n * 2. `$form` is the current Form Model \n * \n * 3. `$deps` is the dependencies value\n * \n * 4. `$observable` function is used to create an persistent observable state object\n *\n * 5. `$memo` function is is used to create a persistent data\n * \n * 6. `$effect` function is used to handle side-effect logic\n * \n * 7. `$props` function is used to set component props to current field\n * \n * Document Links\n * \n * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F\n **/\n\n"

package/lib/components/ReactionsSetter/helpers.js

@@ -1,6 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FulfillRunHelper = exports.DecoratorPropsHelper = exports.ComponentPropsHelper = exports.DataSourceHelper = exports.AnyHelper = exports.StringHelper = exports.PatternHelper = exports.DisplayHelper = exports.BooleanHelper = exports.GlobalHelper = void 0;
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.FulfillRunHelper =
+  exports.DecoratorPropsHelper =
+  exports.ComponentPropsHelper =
+  exports.DataSourceHelper =
+  exports.AnyHelper =
+  exports.StringHelper =
+  exports.PatternHelper =
+  exports.DisplayHelper =
+  exports.BooleanHelper =
+  exports.GlobalHelper =
+    void 0
 exports.GlobalHelper = `
 /** 
  * You can use the built-in context variables
@@ -23,7 +33,7 @@ exports.GlobalHelper = `
  * 
  * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F
  **/
-`;
+`
 exports.BooleanHelper = `
 /** 
  * Example 1
@@ -68,7 +78,7 @@ $deps.VariableName > 100
 !$deps.VariableName
 
 ${exports.GlobalHelper}
-`;
+`
 exports.DisplayHelper = `
 /** 
  * Example 1
@@ -113,7 +123,7 @@ $deps.VariableName > 100 ? 'visible' : 'hidden'
 !$deps.VariableName ? 'visible' : 'none'
 
 ${exports.GlobalHelper}
-`;
+`
 exports.PatternHelper = `
 /** 
  * Example 1
@@ -158,7 +168,7 @@ $deps.VariableName > 100 ? 'editable' : 'readOnly'
 !$deps.VariableName ? 'editable' : 'disabled'
 
 ${exports.GlobalHelper}
-`;
+`
 exports.StringHelper = `
 /** 
  * Example 1
@@ -175,7 +185,7 @@ exports.StringHelper = `
 $deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''
 
 ${exports.GlobalHelper}
-`;
+`
 exports.AnyHelper = `
 /** 
  * Example 1
@@ -243,7 +253,7 @@ $deps.VariableName + 'Compose String'
 !$deps.VariableName
 
 ${exports.GlobalHelper}
-`;
+`
 exports.DataSourceHelper = `
 /** 
  * Example 1
@@ -267,7 +277,7 @@ exports.DataSourceHelper = `
 ]
 
 ${exports.GlobalHelper}
-`;
+`
 exports.ComponentPropsHelper = `
 /** 
  * Example 1
@@ -288,7 +298,7 @@ exports.ComponentPropsHelper = `
 }
 
 ${exports.GlobalHelper}
-`;
+`
 exports.DecoratorPropsHelper = `
 /** 
  * Example 1
@@ -309,7 +319,7 @@ exports.DecoratorPropsHelper = `
 }
 
 ${exports.GlobalHelper}
-`;
+`
 exports.FulfillRunHelper = `
 /** 
  * Example 1
@@ -384,4 +394,4 @@ $effect(()=>{
 },[ state.keyword, $deps.VariableName ])
 
 ${exports.GlobalHelper}
-`;
+`

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { IReaction } from './types';
-import './styles.less';
+import React from 'react'
+import './styles.less'
+import { IReaction } from './types'
 export interface IReactionsSetterProps {
-    value?: IReaction;
-    onChange?: (value: IReaction) => void;
+  value?: IReaction
+  onChange?: (value: IReaction) => void
 }
-export declare const ReactionsSetter: React.FC<IReactionsSetterProps>;
+export declare const ReactionsSetter: React.FC<IReactionsSetterProps>