@formily-design/formily-setters 1.0.0

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

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

package/esm/components/ReactionsSetter/PathSelector.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useSelectedNode } from '@formily-design/react';
+import { TreeSelect } from '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) => {
+        var _a;
+        return (_a = node.children) === null || _a === void 0 ? void 0 : _a.some((node) => {
+            if (node.props.type !== 'void' && node !== currentNode)
+                return true;
+            return hasNoVoidChildren(node);
+        });
+    };
+    const findRoot = (node) => {
+        var _a;
+        if (!(node === null || node === void 0 ? void 0 : node.parent))
+            return node;
+        if (((_a = node === null || node === void 0 ? void 0 : node.parent) === null || _a === void 0 ? void 0 : _a.componentName) !== node.componentName)
+            return node.parent;
+        return findRoot(node.parent);
+    };
+    const findArrayParent = (node) => {
+        if (!(node === null || node === void 0 ? void 0 : 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) => {
+            var _a;
+            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 ||
+                ((_a = node.props['x-component-props']) === null || _a === void 0 ? void 0 : _a.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 [];
+};
+export const PathSelector = (props) => {
+    const baseNode = useSelectedNode();
+    const dataSource = transformDataSource(baseNode);
+    const findNode = (dataSource, value) => {
+        var _a;
+        for (let i = 0; i < dataSource.length; i++) {
+            const item = dataSource[i];
+            if (item.value === value)
+                return item.node;
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                const fondedChild = findNode(item.children, value);
+                if (fondedChild)
+                    return fondedChild;
+            }
+        }
+    };
+    return (React.createElement(TreeSelect, { ...props, onChange: (value) => {
+            props.onChange(value, findNode(dataSource, value));
+        }, treeDefaultExpandAll: true, treeData: dataSource }));
+};

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

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

package/esm/components/ReactionsSetter/declarations.js

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

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

@@ -0,0 +1,10 @@
+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/esm/components/ReactionsSetter/helpers.js

@@ -0,0 +1,384 @@
+export const GlobalHelper = `
+/** 
+ * You can use the built-in context variables
+ * 
+ * 1. \`$self\` is the current Field Model 
+ * 
+ * 2. \`$form\` is the current Form Model 
+ * 
+ * 3. \`$deps\` is the dependencies value
+ * 
+ * 4. \`$observable\` function is used to create an persistent observable state object
+ *
+ * 5. \`$memo\` function is is used to create a persistent data
+ * 
+ * 6. \`$effect\` function is used to handle side-effect logic
+ * 
+ * 7. \`$props\` function is used to set component props to current field
+ * 
+ * Document Links
+ * 
+ * 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
+ **/
+`;
+export const BooleanHelper = `
+/** 
+ * Example 1
+ * Static Boolean
+ **/
+
+false
+
+/** 
+ * Example 2
+ * Equal Calculation
+ **/
+
+$deps.VariableName === 'TARGET_VALUE'
+
+/** 
+ * Example 3
+ * Not Equal Calculation
+ **/
+
+$deps.VariableName !== 'TARGET_VALUE'
+
+/** 
+ * Example 4
+ * And Logic Calculation
+ **/
+
+$deps.VariableName1 && $deps.VariableName2
+
+/** 
+ * Example 5
+ * Grater Logic Calculation
+ **/
+
+$deps.VariableName > 100
+
+/** 
+ * Example 6
+ * Not Logic Calculation
+ **/
+
+!$deps.VariableName
+
+${GlobalHelper}
+`;
+export const DisplayHelper = `
+/** 
+ * Example 1
+ * Static Mode
+ **/
+
+'none'
+
+/** 
+ * Example 2
+ * Equal Condition Associated
+ **/
+
+$deps.VariableName === 'TARGET_VALUE' ? 'visible' : 'none'
+
+/** 
+ * Example 3
+ * Not Equal Condition Associated
+ **/
+
+$deps.VariableName !== 'TARGET_VALUE' ? 'visible' : 'hidden'
+
+/** 
+ * Example 4
+ * And Logic Condition Associated
+ **/
+
+$deps.VariableName1 && $deps.VariableName2 ? 'visible' : 'none'
+
+/** 
+ * Example 5
+ * Grater Logic Condition Associated
+ **/
+
+$deps.VariableName > 100 ? 'visible' : 'hidden'
+
+/** 
+ * Example 6
+ * Not Logic Condition Associated
+ **/
+
+!$deps.VariableName ? 'visible' : 'none'
+
+${GlobalHelper}
+`;
+export const PatternHelper = `
+/** 
+ * Example 1
+ * Static Mode
+ **/
+
+'readPretty'
+
+/** 
+ * Example 2
+ * Equal Condition Associated
+ **/
+
+$deps.VariableName === 'TARGET_VALUE' ? 'editable' : 'disabled'
+
+/** 
+ * Example 3
+ * Not Equal Condition Associated
+ **/
+
+$deps.VariableName !== 'TARGET_VALUE' ? 'editable' : 'readOnly'
+
+/** 
+ * Example 4
+ * And Logic Condition Associated
+ **/
+
+$deps.VariableName1 && $deps.VariableName2 ? 'editable' : 'readPretty'
+
+/** 
+ * Example 5
+ * Grater Logic Condition Associated
+ **/
+
+$deps.VariableName > 100 ? 'editable' : 'readOnly'
+
+/** 
+ * Example 6
+ * Not Logic Condition Associated
+ **/
+
+!$deps.VariableName ? 'editable' : 'disabled'
+
+${GlobalHelper}
+`;
+export const StringHelper = `
+/** 
+ * Example 1
+ * Static String
+ **/
+
+'Normal String Text'
+
+/** 
+ * Example 2
+ * Associated String
+ **/
+
+$deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''
+
+${GlobalHelper}
+`;
+export const AnyHelper = `
+/** 
+ * Example 1
+ * String Type
+ **/
+
+'String'
+
+/** 
+ * Example 2
+ * String Array
+ **/
+
+['StringArray']
+
+/** 
+ * Example 3
+ * Object Array
+ **/
+
+[{ key: 'ObjectArray' }]
+
+/** 
+ * Example 4
+ * Boolean
+ **/
+
+true
+
+/** 
+ * Example 5
+ * RegExp
+ **/
+
+/\d+/
+
+/** 
+ * Example 1
+ * Associated String Value
+ **/
+
+$deps.VariableName + 'Compose String'
+
+/** 
+ * Example 2
+ * Associated Array Value
+ **/
+
+[ $deps.VariableName ]
+
+/** 
+ * Example 3
+ * Associated Object Value
+ **/
+
+{
+  key : $deps.VariableName
+}
+
+/** 
+ * Example 4
+ * Associated Boolean Value
+ **/
+
+!$deps.VariableName
+
+${GlobalHelper}
+`;
+export const DataSourceHelper = `
+/** 
+ * Example 1
+ * Static DataSource
+ **/
+
+[
+  { label : "item1", value: "1" },
+  { label : "item2", value: "2" }
+]
+
+/** 
+ * Example 2
+ * Associated DataSource
+ **/
+
+[
+  { label : "item1", value: "1" },
+  { label : "item2", value: "2" },
+  ...$deps.VariableName
+]
+
+${GlobalHelper}
+`;
+export const ComponentPropsHelper = `
+/** 
+ * Example 1
+ * Static Props
+ **/
+
+{
+  placeholder: "This is placeholder"
+}
+
+/** 
+ * Example 2
+ * Associated Props
+ **/
+
+{
+  placeholder: $deps.VariableName
+}
+
+${GlobalHelper}
+`;
+export const DecoratorPropsHelper = `
+/** 
+ * Example 1
+ * Static Props
+ **/
+
+{
+  labelCol:6
+}
+
+/** 
+ * Example 2
+ * Associated Props
+ **/
+
+{
+  labelCol: $deps.VariableName
+}
+
+${GlobalHelper}
+`;
+export const FulfillRunHelper = `
+/** 
+ * Example 1
+ * Async Select
+ **/
+
+$effect(()=>{
+  $self.loading = true
+  fetch('//some.domain/getSomething')
+    .then(response=>response.json())
+    .then(({ data })=>{
+      $self.loading = false
+      $self.dataSource = data
+    },()=>{
+      $self.loading = false
+    })
+},[])
+  
+
+/** 
+ * Example 2
+ * Async Search Select
+ **/
+
+const state = $observable({
+  keyword:''
+})
+
+$props({
+  onSearch(keyword){
+    state.keyword = keyword
+  }
+})
+
+$effect(()=>{
+  $self.loading = true
+  fetch(\`//some.domain/getSomething?q=\${state.keyword}\`)
+    .then(response=>response.json())
+    .then(({ data })=>{
+      $self.loading = false
+      $self.dataSource = data
+    },()=>{
+      $self.loading = false
+    })
+},[ state.keyword ])
+
+/** 
+ * Example 3
+ * Async Associated Select
+ **/
+
+const state = $observable({
+  keyword:''
+})
+
+$props({
+  onSearch(keyword){
+    state.keyword = keyword
+  }
+})
+
+$effect(()=>{
+  $self.loading = true
+  fetch(\`//some.domain/getSomething?q=\${state.keyword}&other=\${$deps.VariableName}\`)
+    .then(response=>response.json())
+    .then(({ data })=>{
+      $self.loading = false
+      $self.dataSource = data
+    },()=>{
+      $self.loading = false
+    })
+},[ state.keyword, $deps.VariableName ])
+
+${GlobalHelper}
+`;

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

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