aefis-core-ui 2.3.0-rc39 → 2.3.0-rc40

package/dist/index.modern.js

@@ -67,11 +67,11 @@ import Nouislider from 'nouislider-react';
 import 'lodash/camelCase';
 import debounce from 'lodash/debounce';
 import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
-import { v4 } from 'uuid';
-import produce from 'immer';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { v4 } from 'uuid';
+import produce from 'immer';
 import { MuiForm5 } from '@rjsf/material-ui';
 import isEmpty from 'lodash/isEmpty';
 import compose from 'lodash/fp/compose';
@@ -15821,6 +15821,9 @@ const RuleGroupIndex = /*#__PURE__*/memo(({
   isLast
 }) => /*#__PURE__*/jsx(Box$1, {
   sx: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
     width: "40px",
     height: "88px"
   },
@@ -15907,6 +15910,122 @@ var store = {
   useSetState: useSetState
 };
 
+const mutateFunctions = {
+  addGroup: (state, {
+    defaultRule
+  }) => {
+    state.push({
+      groupId: v4(),
+      rules: [_extends({
+        id: v4()
+      }, defaultRule)]
+    });
+  },
+  deleteGroup: (state, {
+    groupIndex
+  }) => {
+    state.splice(groupIndex, 1);
+  },
+  deleteRule: (state, {
+    index,
+    ruleId
+  }) => {
+    state[index].rules = state[index].rules.filter(rule => rule.id !== ruleId);
+  },
+  moveRule: (state, {
+    isUp,
+    index,
+    ruleIndex
+  }) => {
+    // INFO: abort if moving up for item already on top
+    if (isUp && ruleIndex === 0) return;
+
+    // INFO: abort if moving down for item already on bottom
+    if (!isUp && state[index].rules.length - 1 === ruleIndex) return;
+    const nextRow = isUp ? ruleIndex - 1 : ruleIndex + 1;
+    [state[index].rules[ruleIndex], state[index].rules[nextRow]] = [state[index].rules[nextRow], state[index].rules[ruleIndex]];
+  },
+  createRuleBelow: (state, {
+    index,
+    ruleIndex,
+    defaultRule
+  }) => {
+    const newRule = _extends({
+      id: v4()
+    }, defaultRule);
+    state[index].rules = [...state[index].rules.slice(0, ruleIndex + 1), newRule, ...state[index].rules.slice(ruleIndex + 1)];
+  },
+  selectRootInput: (state, {
+    index,
+    ruleIndex,
+    templateCode
+  }) => {
+    state[index].rules[ruleIndex].name = templateCode || null;
+    state[index].rules[ruleIndex].value = null;
+    state[index].rules[ruleIndex].template = null;
+  },
+  changeRuleValue: (state, {
+    value,
+    template,
+    groupId,
+    ruleId
+  }) => {
+    const rule = state.find(group => group.groupId === groupId).rules.find(rule => rule.id === ruleId);
+    rule.value = value;
+    rule.template = template;
+  },
+  moveGroup: (state, {
+    isUp,
+    index
+  }) => {
+    const nextRow = isUp ? index - 1 : index + 1;
+    [state[index], state[nextRow]] = [state[nextRow], state[index]];
+  },
+  addRule: (state, {
+    groupIndex,
+    defaultRule
+  }) => {
+    state[groupIndex].rules.push(_extends({
+      id: v4()
+    }, defaultRule));
+  }
+};
+
+/**
+ * This hook is similar to useState, but allows update functions to be defined
+ * outside of component, and also allow these functions to mutate the state via
+ * immer.js library.
+ *
+ * Example: 
+ *
+ * const mutateFunctions = { pushArray: (state, { param }) => state.push(param)
+ * )}
+ *
+ * Component() { const { state, mutate } = useMutateState() const handle =>
+ *     (param) => { mutate.pushArray({ param }) }
+ *
+ *     return ...
+ * }
+ *
+ *
+ * @param {object} mutateFunctions maps the functions to mutate state
+ * @param {*} initialState
+ * @returns { state, setState, mutate }
+ */
+const useMutateState = (mutateFunctions, initialState) => {
+  const [state, setState] = useState(initialState);
+  const mutateState = useCallback(setterFn => setState(state => produce(state, setterFn)), []);
+  const mutate = useMemo(() => Object.entries(mutateFunctions).reduce((acc, [fnName, fn]) => {
+    acc[fnName] = actionData => mutateState(state => fn(state, actionData));
+    return acc;
+  }, {}), [mutateFunctions]);
+  return {
+    state,
+    setState,
+    mutate
+  };
+};
+
 const _excluded$4 = ["code"];
 const TextBuilder = /*#__PURE__*/memo(({
   renderHeader,
@@ -15924,110 +16043,65 @@ const TextBuilder = /*#__PURE__*/memo(({
       [code]: rest
     });
   }, {}), [templateOptions]);
-  const [rows, setRows] = useState(_defaultValue);
+  const {
+    state: rows,
+    mutate
+  } = useMutateState(mutateFunctions, _defaultValue);
 
   // TODO: think on better implementation
   useSkipOnMount(() => {
     _onChange(rows);
   }, [rows]);
-  const setMutatableRows = useCallback(setterFn => setRows(rows => produce(rows, setterFn)), []);
   const handleAddGroup = useCallback(() => {
-    setMutatableRows(groups => {
-      groups.push({
-        groupId: v4(),
-        rules: [_extends({
-          id: v4()
-        }, defaultRule)]
-      });
+    mutate.addGroup({
+      defaultRule
     });
   }, [defaultRule]);
-  const handleGroupDelete = useCallback(({
-    groupIndex
-  }) => {
-    setMutatableRows(groups => {
-      groups.splice(groupIndex, 1);
-    });
-  }, []);
-  const handleRuleDelete = useCallback(({
-    index,
-    ruleId
-  }) => {
-    setMutatableRows(groups => {
-      groups[index].rules = groups[index].rules.filter(rule => rule.id !== ruleId);
-    });
-  }, []);
   const handleRuleMoveUp = useCallback(({
     index,
     ruleIndex
   }) => {
-    setMutatableRows(groups => {
-      if (ruleIndex === 0) return;
-      const nextRow = ruleIndex - 1 ;
-      [groups[index].rules[ruleIndex], groups[index].rules[nextRow]] = [groups[index].rules[nextRow], groups[index].rules[ruleIndex]];
+    mutate.moveRule({
+      isUp: true,
+      index,
+      ruleIndex
     });
   }, []);
   const handleRuleMoveDown = useCallback(({
     index,
     ruleIndex
   }) => {
-    setMutatableRows(groups => {
-      if (groups[index].rules.length - 1 === ruleIndex) return;
-      const nextRow = ruleIndex + 1;
-      [groups[index].rules[ruleIndex], groups[index].rules[nextRow]] = [groups[index].rules[nextRow], groups[index].rules[ruleIndex]];
+    mutate.moveRule({
+      isUp: false,
+      index,
+      ruleIndex
     });
   }, []);
   const handleCreateRuleBelow = useCallback(({
     index,
     ruleIndex
   }) => {
-    setMutatableRows(groups => {
-      const newRule = _extends({
-        id: v4()
-      }, defaultRule);
-      groups[index].rules = [...groups[index].rules.slice(0, ruleIndex + 1), newRule, ...groups[index].rules.slice(ruleIndex + 1)];
-    });
-  }, []);
-  const handleRuleTemplateSelect = useCallback(({
-    index,
-    ruleIndex,
-    templateCode
-  }) => {
-    setMutatableRows(groups => {
-      groups[index].rules[ruleIndex].name = templateCode || null;
-      groups[index].rules[ruleIndex].value = null;
-      groups[index].rules[ruleIndex].template = null;
-    });
-  }, []);
-  const handleRuleTemplateValueChange = useCallback(({
-    value,
-    template,
-    groupId,
-    ruleId
-  }) => {
-    setMutatableRows(groups => {
-      const rule = groups.find(group => group.groupId === groupId).rules.find(rule => rule.id === ruleId);
-      rule.value = value;
-      rule.template = template;
+    mutate.createRuleBelow({
+      index,
+      ruleIndex,
+      defaultRule
     });
-  }, []);
+  }, [defaultRule]);
   const moveGroupPosition = useCallback(({
     index
   }, isUp) => {
-    setMutatableRows(groups => {
-      const nextRow = isUp ? index - 1 : index + 1;
-      [groups[index], groups[nextRow]] = [groups[nextRow], groups[index]];
+    mutate.moveGroup({
+      isUp,
+      index
     });
   }, []);
   const handleAddRule = useCallback(({
     groupIndex
-  }) => {
-    setMutatableRows(groups => {
-      groups[groupIndex].rules.push(_extends({
-        id: v4()
-      }, defaultRule));
-    });
-  }, []);
-  return /*#__PURE__*/jsxs(ContentBox, {
+  }) => mutate.addRule({
+    groupIndex,
+    defaultRule
+  }), [defaultRule]);
+  return /*#__PURE__*/jsxs(Box$1, {
     sx: {
       ".MuiFormControl-root": {
         background: "white"
@@ -16047,8 +16121,7 @@ const TextBuilder = /*#__PURE__*/memo(({
       children: /*#__PURE__*/jsxs(Box$1, {
         sx: {
           display: "flex",
-          flexWrap: "no-wrap",
-          border: "1px solid transparent"
+          flexWrap: "no-wrap"
         },
         children: [/*#__PURE__*/jsx(RuleGroupIndex, {
           onMovePosition: moveGroupPosition,
@@ -16066,16 +16139,18 @@ const TextBuilder = /*#__PURE__*/memo(({
             groupId: groupId,
             templateOptions: templateOptions,
             templateInputMap: templateInputMap,
-            onRuleDelete: handleRuleDelete,
+            onRuleDelete: mutate.deleteRule,
             onRuleMoveUp: handleRuleMoveUp,
             onRuleMoveDown: handleRuleMoveDown,
-            onCreateRuleBelow: handleCreateRuleBelow,
-            onTemplateSelect: handleRuleTemplateSelect,
-            onTemplateValueChange: handleRuleTemplateValueChange
+            onCreateRuleBelow: handleCreateRuleBelow
+            // TODO: change handleRuleTemplateSelect to handleSelectRootInput
+            ,
+            onTemplateSelect: mutate.selectRootInput,
+            onTemplateValueChange: mutate.changeRuleValue
           }), /*#__PURE__*/jsx(RuleGroupFooter, {
             groupIndex: index,
             groupId: groupId,
-            onGroupDelete: handleGroupDelete,
+            onGroupDelete: mutate.deleteGroup,
             onRuleAdd: handleAddRule
           })]
         })]