@thienvu18/designable-formily-setters 2.0.0

package/lib/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/lib/components/ReactionsSetter/helpers.js

@@ -0,0 +1,387 @@
+"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
+ * 
+ * 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
+ **/
+`;
+exports.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
+
+${exports.GlobalHelper}
+`;
+exports.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'
+
+${exports.GlobalHelper}
+`;
+exports.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'
+
+${exports.GlobalHelper}
+`;
+exports.StringHelper = `
+/** 
+ * Example 1
+ * Static String
+ **/
+
+'Normal String Text'
+
+/** 
+ * Example 2
+ * Associated String
+ **/
+
+$deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''
+
+${exports.GlobalHelper}
+`;
+exports.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
+
+${exports.GlobalHelper}
+`;
+exports.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
+]
+
+${exports.GlobalHelper}
+`;
+exports.ComponentPropsHelper = `
+/** 
+ * Example 1
+ * Static Props
+ **/
+
+{
+  placeholder: "This is placeholder"
+}
+
+/** 
+ * Example 2
+ * Associated Props
+ **/
+
+{
+  placeholder: $deps.VariableName
+}
+
+${exports.GlobalHelper}
+`;
+exports.DecoratorPropsHelper = `
+/** 
+ * Example 1
+ * Static Props
+ **/
+
+{
+  labelCol:6
+}
+
+/** 
+ * Example 2
+ * Associated Props
+ **/
+
+{
+  labelCol: $deps.VariableName
+}
+
+${exports.GlobalHelper}
+`;
+exports.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 ])
+
+${exports.GlobalHelper}
+`;

package/lib/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>;

package/lib/components/ReactionsSetter/index.js

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactionsSetter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const shared_1 = require("@formily/shared");
+const core_1 = require("@formily/core");
+const react_2 = require("@formily/react");
+const designable_core_1 = require("@thienvu18/designable-core");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const designable_react_1 = require("@thienvu18/designable-react");
+const designable_react_settings_form_1 = require("@thienvu18/designable-react-settings-form");
+const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
+const antd_1 = require("antd");
+const PathSelector_1 = require("./PathSelector");
+const FieldPropertySetter_1 = require("./FieldPropertySetter");
+const helpers_1 = require("./helpers");
+const declarations_1 = require("./declarations");
+require("./styles.less");
+const TypeView = ({ value }) => {
+    const text = String(value);
+    if (text.length <= 26)
+        return (0, jsx_runtime_1.jsx)(antd_1.Tag, { children: text });
+    return ((0, jsx_runtime_1.jsx)(antd_1.Tag, { children: (0, jsx_runtime_1.jsxs)(antd_1.Tooltip, { title: (0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12 }, children: (0, jsx_runtime_1.jsx)("code", { children: (0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', padding: 0, margin: 0 }, children: text }) }) }), children: [text.substring(0, 24), "..."] }) }));
+};
+const SchemaField = (0, react_2.createSchemaField)({
+    components: {
+        Card: antd_1.Card,
+        FormCollapse: formily_antd_v6_1.FormCollapse,
+        Input: formily_antd_v6_1.Input,
+        TypeView,
+        Select: formily_antd_v6_1.Select,
+        FormItem: formily_antd_v6_1.FormItem,
+        PathSelector: PathSelector_1.PathSelector,
+        FieldPropertySetter: FieldPropertySetter_1.FieldPropertySetter,
+        ArrayTable: formily_antd_v6_1.ArrayTable,
+        MonacoInput: designable_react_settings_form_1.MonacoInput,
+    },
+});
+const FieldStateProperties = [
+    'value',
+    'initialValue',
+    'inputValue',
+    'inputValues',
+    'modified',
+    'initialized',
+    'title',
+    'description',
+    'mounted',
+    'unmounted',
+    'active',
+    'visited',
+    'loading',
+    'errors',
+    'warnings',
+    'successes',
+    'feedbacks',
+    'valid',
+    'invalid',
+    'pattern',
+    'display',
+    'disabled',
+    'readOnly',
+    'readPretty',
+    'visible',
+    'hidden',
+    'editable',
+    'validateStatus',
+    'validating',
+];
+const FieldStateValueTypes = {
+    modified: 'boolean',
+    initialized: 'boolean',
+    title: 'string',
+    description: 'string',
+    mounted: 'boolean',
+    unmounted: 'boolean',
+    active: 'boolean',
+    visited: 'boolean',
+    loading: 'boolean',
+    errors: 'string[]',
+    warnings: 'string[]',
+    successes: 'string[]',
+    feedbacks: `Array<
+  triggerType?: 'onInput' | 'onFocus' | 'onBlur'
+  type?: 'error' | 'success' | 'warning'
+  code?:
+    | 'ValidateError'
+    | 'ValidateSuccess'
+    | 'ValidateWarning'
+    | 'EffectError'
+    | 'EffectSuccess'
+    | 'EffectWarning'
+  messages?: string[]
+>
+`,
+    valid: 'boolean',
+    invalid: 'boolean',
+    pattern: "'editable' | 'disabled' | 'readOnly' | 'readPretty'",
+    display: "'visible' | 'hidden' | 'none'",
+    disabled: 'boolean',
+    readOnly: 'boolean',
+    readPretty: 'boolean',
+    visible: 'boolean',
+    hidden: 'boolean',
+    editable: 'boolean',
+    validateStatus: "'error' | 'warning' | 'success' | 'validating'",
+    validating: 'boolean',
+};
+const ReactionsSetter = (props) => {
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const [innerVisible, setInnerVisible] = (0, react_1.useState)(false);
+    const prefix = (0, designable_react_1.usePrefix)('reactions-setter');
+    const form = (0, react_1.useMemo)(() => {
+        return (0, core_1.createForm)({
+            values: (0, shared_1.clone)(props.value),
+        });
+    }, [modalVisible, props.value]);
+    const formCollapse = (0, react_1.useMemo)(() => formily_antd_v6_1.FormCollapse.createFormCollapse(['deps', 'state']), [modalVisible]);
+    const openModal = () => setModalVisible(true);
+    const closeModal = () => setModalVisible(false);
+    (0, react_1.useEffect)(() => {
+        if (modalVisible) {
+            (0, designable_shared_1.requestIdle)(() => {
+                (0, declarations_1.initDeclaration)().then(() => {
+                    setInnerVisible(true);
+                });
+            }, {
+                timeout: 400,
+            });
+        }
+        else {
+            setInnerVisible(false);
+        }
+    }, [modalVisible]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { block: true, onClick: openModal, children: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.ReactionsSetter.configureReactions" }) }), (0, jsx_runtime_1.jsx)(antd_1.Modal, { title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.configureReactions'), width: "70%", centered: true, styles: { body: { padding: 10 } }, transitionName: "", maskTransitionName: "", open: modalVisible, onCancel: closeModal, destroyOnHidden: true, onOk: () => {
+                    form.submit((values) => {
+                        props.onChange?.(values);
+                    });
+                    closeModal();
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: prefix, children: innerVisible && ((0, jsx_runtime_1.jsx)(formily_antd_v6_1.Form, { form: form, children: (0, jsx_runtime_1.jsx)(SchemaField, { children: (0, jsx_runtime_1.jsxs)(SchemaField.Void, { "x-component": "FormCollapse", "x-component-props": {
+                                    formCollapse,
+                                    defaultActiveKey: ['deps', 'state'],
+                                    style: { marginBottom: 10 },
+                                }, children: [(0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                            key: 'deps',
+                                            header: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.relationsFields'),
+                                        }, children: (0, jsx_runtime_1.jsxs)(SchemaField.Array, { name: "dependencies", default: [{}], "x-component": "ArrayTable", children: [(0, jsx_runtime_1.jsxs)(SchemaField.Object, { children: [(0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceField'),
+                                                                width: 240,
+                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "source", "x-decorator": "FormItem", "x-component": "PathSelector", "x-component-props": {
+                                                                    placeholder: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseSelect'),
+                                                                } }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.sourceProperty'),
+                                                                width: 200,
+                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "property", default: "value", "x-decorator": "FormItem", "x-component": "Select", "x-component-props": { showSearch: true }, enum: FieldStateProperties }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableName'),
+                                                                width: 200,
+                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "name", "x-decorator": "FormItem", "x-validator": {
+                                                                    pattern: /^[$_a-zA-Z]+[$_a-zA-Z0-9]*$/,
+                                                                    message: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableNameValidateMessage'),
+                                                                }, "x-component": "Input", "x-component-props": {
+                                                                    addonBefore: '$deps.',
+                                                                    placeholder: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.pleaseInput'),
+                                                                }, "x-reactions": (field) => {
+                                                                    if ((0, core_1.isVoidField)(field))
+                                                                        return;
+                                                                    field.query('.source').take((source) => {
+                                                                        if ((0, core_1.isVoidField)(source))
+                                                                            return;
+                                                                        if (source.value &&
+                                                                            !field.value &&
+                                                                            !field.modified) {
+                                                                            field.value =
+                                                                                source.inputValues[1]?.props?.name ||
+                                                                                    `v_${(0, shared_1.uid)()}`;
+                                                                        }
+                                                                    });
+                                                                } }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.variableType'),
+                                                                ellipsis: {
+                                                                    showTitle: false,
+                                                                },
+                                                                width: 200,
+                                                                align: 'center',
+                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "type", default: "any", "x-decorator": "FormItem", "x-component": "TypeView", "x-reactions": (field) => {
+                                                                    if ((0, core_1.isVoidField)(field))
+                                                                        return;
+                                                                    const property = field
+                                                                        .query('.property')
+                                                                        .get('inputValues');
+                                                                    if (!property)
+                                                                        return;
+                                                                    property[0] = property[0] || 'value';
+                                                                    field.query('.source').take((source) => {
+                                                                        if ((0, core_1.isVoidField)(source))
+                                                                            return;
+                                                                        if (source.value) {
+                                                                            if (property[0] === 'value' ||
+                                                                                property[0] === 'initialValue' ||
+                                                                                property[0] === 'inputValue') {
+                                                                                field.value =
+                                                                                    source.inputValues[1]?.props?.type ||
+                                                                                        'any';
+                                                                            }
+                                                                            else if (property[0] === 'inputValues') {
+                                                                                field.value = `any[]`;
+                                                                            }
+                                                                            else if (property[0]) {
+                                                                                field.value =
+                                                                                    FieldStateValueTypes[property[0]];
+                                                                            }
+                                                                            else {
+                                                                                field.value = 'any';
+                                                                            }
+                                                                        }
+                                                                    });
+                                                                } }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "ArrayTable.Column", "x-component-props": {
+                                                                title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.operations'),
+                                                                align: 'center',
+                                                                width: 80,
+                                                            }, children: (0, jsx_runtime_1.jsx)(SchemaField.Markup, { type: "void", "x-component": "ArrayTable.Remove" }) })] }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { title: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.addRelationField'), "x-component": "ArrayTable.Addition", "x-component-props": { style: { marginTop: 8 } } })] }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                            header: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.propertyReactions'),
+                                            key: 'state',
+                                            className: 'reaction-state',
+                                        }, children: (0, jsx_runtime_1.jsx)(SchemaField.Markup, { name: "fulfill.state", "x-component": "FieldPropertySetter" }) }), (0, jsx_runtime_1.jsx)(SchemaField.Void, { "x-component": "FormCollapse.CollapsePanel", "x-component-props": {
+                                            key: 'run',
+                                            header: designable_core_1.GlobalRegistry.getDesignerMessage('SettingComponents.ReactionsSetter.actionReactions'),
+                                            className: 'reaction-runner',
+                                        }, children: (0, jsx_runtime_1.jsx)(SchemaField.String, { name: "fulfill.run", "x-component": "MonacoInput", "x-component-props": {
+                                                width: '100%',
+                                                height: 400,
+                                                language: 'typescript',
+                                                helpCode: helpers_1.FulfillRunHelper,
+                                                options: {
+                                                    minimap: {
+                                                        enabled: false,
+                                                    },
+                                                },
+                                            }, "x-reactions": (field) => {
+                                                const deps = field.query('dependencies').value();
+                                                if (Array.isArray(deps)) {
+                                                    field.componentProps.extraLib = `
+                          declare var $deps : {
+                            ${deps.map(({ name, type }) => {
+                                                        if (!name)
+                                                            return '';
+                                                        return `${name}?:${type || 'any'},`;
+                                                    })}
+                          }
+                          `;
+                                                }
+                                            } }) })] }) }) })) }) })] }));
+};
+exports.ReactionsSetter = ReactionsSetter;