dynamic-mui 1.0.71 → 1.0.72

package/dist-modules/components/controls/Stepper/stepper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Stepper;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
@@ -13,43 +13,43 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // eslint-disable-next-line import/no-cycle
+// Initial State
 const initialState = {
   activeStep: 0,
   stepperResponse: {},
   MuiSteps: []
 };
-const response = {}; // Reintegrated response object
 
+// Reducer Logic
 const reducer = (state, action) => {
-  switch (action.type) {
+  const {
+    type,
+    payload
+  } = action;
+  switch (type) {
     case 'SET_STEPS':
       return {
         ...state,
-        MuiSteps: action.MuiSteps
+        MuiSteps: payload.MuiSteps
       };
     case 'SET_STEP':
       return {
         ...state,
-        activeStep: action.currentStep
-      };
-    case 'NEXT_STEP':
-      return {
-        ...state,
-        activeStep: state.activeStep + 1
-      };
-    case 'PREVIOUS_STEP':
-      return {
-        ...state,
-        activeStep: state.activeStep - 1
+        activeStep: payload.currentStep
       };
     case 'UPDATE_RESPONSE':
       return {
         ...state,
         stepperResponse: {
           ...state.stepperResponse,
-          [action.id]: action.value
+          [payload.id]: payload.value
         }
       };
+    case 'CHANGE_STEP':
+      return {
+        ...state,
+        activeStep: state.activeStep + payload.stepChange
+      };
     default:
       return state;
   }
@@ -62,37 +62,33 @@ function Stepper(_ref) {
     currentStep,
     patch
   } = _ref;
-  const [state, dispatch] = (0, _react.useReducer)(reducer, initialState, init => ({
-    ...init,
+  const [state, dispatch] = (0, _react.useReducer)(reducer, initialState, () => ({
     activeStep: currentStep,
     stepperResponse: patch,
-    MuiSteps: [...attributes.MuiSteps]
+    MuiSteps: attributes.MuiSteps || []
   }));
   const {
     activeStep,
     stepperResponse,
     MuiSteps
   } = state;
-  (0, _react.useEffect)(() => {
-    response[attributes.id] = patch; // Update response on patch change
-    return () => {
-      response[attributes.id] = {}; // Cleanup response on component unmount
-      // eslint-disable-next-line no-console
-      // console.log('Component unmounted');
-    };
-  }, [patch, attributes.id]);
   (0, _react.useEffect)(() => {
     dispatch({
       type: 'SET_STEP',
-      currentStep
+      payload: {
+        currentStep
+      }
     });
   }, [currentStep]);
   const handleStepChange = (0, _react.useCallback)((stepChange, isScreenChange, isLastStep) => {
     dispatch({
-      type: stepChange
+      type: 'CHANGE_STEP',
+      payload: {
+        stepChange
+      }
     });
-    const newStep = activeStep + (stepChange === 'NEXT_STEP' ? 1 : -1);
-    onStepUpdate?.(newStep, isScreenChange && stepChange === 'NEXT_STEP', isLastStep);
+    const newStep = activeStep + stepChange;
+    onStepUpdate?.(newStep, isScreenChange && stepChange > 0, isLastStep);
     if (isLastStep) {
       onChange?.({
         id: attributes.id,
@@ -105,82 +101,45 @@ function Stepper(_ref) {
       id,
       value
     } = _ref2;
-    response[attributes.id][id] = value;
     dispatch({
       type: 'UPDATE_RESPONSE',
-      id,
-      value
+      payload: {
+        id,
+        value
+      }
     });
     onChange?.({
       id,
       value
     });
-    // let updateUI = false;
-    // const newMuiSteps = MuiSteps.map((step) => {
-    //   let newComponents = step.components || [];
-    //   const fElement = newComponents?.find(
-    //     (component) => component?.id === id || component?.props?.id === id,
-    //   );
-    //   if (fElement && fElement.onChangeUpdate) {
-    //     fElement.onChangeUpdate.forEach(({ enableDisableConfig, patchId, replaceUiConfig }) => {
-    //       if (enableDisableConfig) {
-    //         let disableElement = newComponents.find(
-    //           (k) => k.id === patchId || k?.props?.id === patchId,
-    //         );
-    //         if (disableElement && disableElement?.props?.MuiAttributes) {
-    //           disableElement = {
-    //             ...disableElement,
-    //             props: {
-    //               ...disableElement?.props,
-    //               MuiAttributes: {
-    //                 ...disableElement?.props?.MuiAttributes,
-    //                 disabled: enableDisableConfig[value],
-    //               },
-    //             },
-    //           };
-    //           newComponents = newComponents.filter((k) => k?.props?.id !== patchId);
-    //           newComponents.push(disableElement);
-    //           updateUI = true;
-    //         }
-    //       }
-    //       if (replaceUiConfig) {
-    //         newComponents = newComponents.filter((k) => k?.props?.id !== patchId);
-    //         newComponents.push(replaceUiConfig);
-    //         updateUI = true;
-    //       }
-    //     });
-    //   }
-    //   return { ...step, components: newComponents };
-    // });
-    // if (updateUI) {
-    //   dispatch({ type: 'SET_STEPS', MuiSteps: newMuiSteps });
-    // }
   }, [onChange]);
-  const renderStepButtons = function (index, isScreenChange) {
-    let mandatoryIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    return /*#__PURE__*/_react.default.createElement(_material.Box, {
-      sx: {
-        mb: 2
-      }
-    }, /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
-      variant: "contained",
-      onClick: () => handleStepChange('NEXT_STEP', isScreenChange, index === MuiSteps.length - 1),
-      disabled: mandatoryIds.some(id => !response[attributes.id][id]),
-      sx: {
-        mt: 1,
-        mr: 1
-      }
-    }, attributes.MuiButtonAttributes.next, index === MuiSteps.length - 1 && {
-      ...attributes.MuiButtonAttributes.final
-    }), index === MuiSteps.length - 1 ? 'Finish' : 'Continue'), /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
-      disabled: index === 0,
-      onClick: () => handleStepChange('PREVIOUS_STEP', isScreenChange, false),
-      sx: {
-        mt: 1,
-        mr: 1
-      }
-    }, attributes.MuiButtonAttributes.back), "Back"));
+  const isDisabled = function () {
+    let mandatoryIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let optionalMandatoryIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    return mandatoryIds.some(id => !stepperResponse[id]) || optionalMandatoryIds.some(item => stepperResponse[item.key] === item.value && item.mandatoryIds.some(id => !stepperResponse[id]));
   };
+  const renderButtons = (index, isScreenChange, mandatoryIds, optionalMandatoryIds) => /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      mb: 2
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
+    variant: "contained",
+    onClick: () => handleStepChange(1, isScreenChange, index === MuiSteps.length - 1),
+    disabled: isDisabled(mandatoryIds, optionalMandatoryIds),
+    sx: {
+      mt: 1,
+      mr: 1
+    }
+  }, attributes.MuiButtonAttributes.next, index === MuiSteps.length - 1 && {
+    ...attributes.MuiButtonAttributes.final
+  }), index === MuiSteps.length - 1 ? 'Finish' : 'Continue'), /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
+    disabled: index === 0,
+    onClick: () => handleStepChange(-1, isScreenChange, false),
+    sx: {
+      mt: 1,
+      mr: 1
+    }
+  }, attributes.MuiButtonAttributes.back), "Back"));
   return /*#__PURE__*/_react.default.createElement(_material.Box, _extends({
     sx: {
       maxWidth: 400
@@ -196,9 +155,11 @@ function Stepper(_ref) {
     }, "Last step")
   }, attributes.MuiStepLabelAttributes), step.label), /*#__PURE__*/_react.default.createElement(_material.StepContent, attributes.MuiStepContentAttributes, step.components ? /*#__PURE__*/_react.default.createElement(_stepperComponents.default, {
     onUpdate: handleUpdate,
-    components: (0, _helper.updatePatchData)(step.components, stepperResponse, attributes.id, response)
-  }) : /*#__PURE__*/_react.default.createElement(_material.Typography, null, step.description), renderStepButtons(index, step.isScreenChange, step.mandatoryIds))))));
+    components: (0, _helper.updatePatchData)(step.components, stepperResponse)
+  }) : /*#__PURE__*/_react.default.createElement(_material.Typography, null, step.description), renderButtons(index, step.isScreenChange, step.mandatoryIds, step.optionalMandatoryIds))))));
 }
+
+// PropTypes Definition
 Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
   attributes: _propTypes.default.shape({
     id: _propTypes.default.string.isRequired,
@@ -206,7 +167,9 @@ Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
       label: _propTypes.default.string.isRequired,
       description: _propTypes.default.string,
       isScreenChange: _propTypes.default.bool,
-      components: _propTypes.default.array
+      components: _propTypes.default.array,
+      mandatoryIds: _propTypes.default.array,
+      optionalMandatoryIds: _propTypes.default.array
     })).isRequired,
     MuiButtonAttributes: _propTypes.default.object,
     MuiBoxAttributes: _propTypes.default.object,
@@ -220,10 +183,13 @@ Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
   currentStep: _propTypes.default.number,
   patch: _propTypes.default.object
 } : {};
+
+// Default Props
 Stepper.defaultProps = {
   attributes: {},
-  currentStep: 0,
-  patch: {},
   onChange: () => {},
-  onStepUpdate: () => {}
-};
+  onStepUpdate: () => {},
+  currentStep: 0,
+  patch: {}
+};
+var _default = exports.default = Stepper;

package/dist-modules/data/stepper.js

@@ -16,6 +16,21 @@ const mui = exports.mui = [{
       label: 'Select Service Request',
       mandatoryIds: ['servicetype'],
       components: [{
+        id: 'servicetypeselect',
+        type: 'radio',
+        props: {
+          id: 'servicetypeselect',
+          value: 'Existing',
+          MuiAttributes: {},
+          MuiFLabelIcon: {},
+          MuiFLabel: '',
+          MuiFCLAttributes: {},
+          MuiFCLabels: ['Existing', 'New'],
+          MuiRGAttributes: {
+            row: true
+          }
+        }
+      }, {
         type: 'select',
         props: {
           id: 'servicetype',
@@ -23,17 +38,8 @@ const mui = exports.mui = [{
             required: true
           },
           options: [{
-            value: 'After Meter Leaking',
-            label: 'After Meter Leaking'
-          }, {
-            value: 'Align Meter',
-            label: 'Align Meter'
-          }, {
-            value: 'Before Meter Leaking',
-            label: 'Before Meter Leaking'
-          }, {
-            value: 'Billing Concerns',
-            label: 'Billing Concerns'
+            value: 'New Installation',
+            label: 'New Installation'
           }, {
             value: 'Change Classification',
             label: 'Change Classification'
@@ -44,62 +50,14 @@ const mui = exports.mui = [{
             value: 'Change Name',
             label: 'Change Name'
           }, {
-            value: 'Meter Servicing',
-            label: 'Meter Servicing'
-          }, {
-            value: 'Disconnection - Involuntary',
-            label: 'Disconnection - Involuntary'
-          }, {
-            value: 'Disconnection - Voluntary',
-            label: 'Disconnection - Voluntary'
-          }, {
-            value: 'Distribution Line Leaking',
-            label: 'Distribution Line Leaking'
-          }, {
-            value: 'Estimate Inner Plumbing',
-            label: 'Estimate Inner Plumbing'
-          }, {
-            value: 'Illegal Activity',
-            label: 'Illegal Activity'
-          }, {
-            value: 'Install Lockwing',
-            label: 'Install Lockwing'
-          }, {
-            value: 'Low Pressure/No Water',
-            label: 'Low Pressure/No Water'
-          }, {
-            value: 'Mainline Leaking',
-            label: 'Mainline Leaking'
-          }, {
-            value: 'Other Complaints',
-            label: 'Other Complaints'
-          }, {
-            value: 'Paid Before Disconnect',
-            label: 'Paid Before Disconnect'
-          }, {
-            value: 'Pull Out Meter',
-            label: 'Pull Out Meter'
+            value: 'Transfer Location',
+            label: 'Transfer Location'
           }, {
             value: 'Recheck Read',
             label: 'Recheck Read'
           }, {
-            value: 'Reconnection',
-            label: 'Reconnection'
-          }, {
-            value: 'Relocation - Change Zone',
-            label: 'Relocation - Change Zone'
-          }, {
-            value: 'Secondaryline Leaking',
-            label: 'Secondaryline Leaking'
-          }, {
-            value: 'Survey',
-            label: 'Survey'
-          }, {
-            value: 'Relocation',
-            label: 'Relocation'
-          }, {
-            value: 'Water Quality Concern',
-            label: 'Water Quality Concern'
+            value: 'Disconnection - Voluntary',
+            label: 'Disconnection - Voluntary'
           }],
           MuiBoxAttributes: {}
         }
@@ -112,6 +70,9 @@ const mui = exports.mui = [{
         type: 'select',
         props: {
           id: 'priority',
+          MuiAttributes: {
+            required: true
+          },
           options: [{
             value: 'Emergency',
             label: 'Emergency'
@@ -163,33 +124,29 @@ const mui = exports.mui = [{
       }]
     }, {
       label: 'Assign User',
-      mandatoryIds: ['assignedTo'],
+      mandatoryIds: ['assigntouser'],
       components: [{
         type: 'select',
         props: {
-          id: 'assignedTo',
+          id: 'assigntouser',
           MuiAttributes: {},
           options: [{
-            value: 'gwdteller1',
-            label: 'gwdteller1'
-          }, {
-            value: 'gwdreader1',
-            label: 'gwdreader1'
-          }, {
-            value: 'gwdreader2',
-            label: 'gwdreader2'
+            value: 'Dinakaran',
+            label: 'Dinakaran'
           }, {
-            value: 'gmrolandobill',
-            label: 'gmrolandobill'
-          }, {
-            value: 'mungGuiuan',
-            label: 'mungGuiuan'
+            value: 'Thiyagarajan',
+            label: 'Thiyagarajan'
           }],
           MuiBoxAttributes: {}
         }
       }]
     }, {
       label: 'Determine Cost',
+      optionalMandatoryIds: [{
+        key: 'determinecost',
+        value: 'Assign',
+        mandatoryIds: ['cost']
+      }],
       components: [{
         id: 'determinecost',
         type: 'radio',
@@ -206,23 +163,20 @@ const mui = exports.mui = [{
           }
         }
       }, {
-        id: 'serviceCost',
+        id: 'cost',
         type: 'textfield',
         props: {
-          id: 'serviceCost',
-          MuiAttributes: {
-            type: 'number'
-          },
-          value: 0
+          id: 'cost',
+          MuiAttributes: {}
         }
       }]
     }, {
       label: 'Description',
       components: [{
-        id: 'descriptionDetails',
+        id: 'description',
         type: 'textfield',
         props: {
-          id: 'descriptionDetails',
+          id: 'description',
           MuiAttributes: {
             multiline: true,
             rows: 3
@@ -232,47 +186,19 @@ const mui = exports.mui = [{
     }, {
       label: 'Review'
     }],
-    MuiStepAttributes: {
-      sx: {
-        '& .MuiStepLabel-root .Mui-completed': {
-          color: 'primary.dark'
-        },
-        '& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel': {
-          color: 'grey.500'
-        },
-        '& .MuiStepLabel-root .Mui-active': {
-          color: 'primary.dark'
-        },
-        '& .MuiStepLabel-label.Mui-active.MuiStepLabel-alternativeLabel': {
-          color: 'common.white'
-        },
-        '& .MuiStepLabel-root .Mui-active .MuiStepIcon-text': {
-          fill: 'common.white'
-        }
-      }
-    },
+    MuiStepAttributes: {},
     MuiStepLabelAttributes: {},
     MuiStepContentAttributes: {},
     MuiButtonAttributes: {
-      back: {
-        sx: {
-          color: 'primary.dark',
-          mt: 1
-        }
-      },
+      back: {},
       next: {
         sx: {
-          bgcolor: 'primary.dark',
-          mt: 1
+          bgcolor: 'primary.dark'
         }
       },
       final: {
         sx: {
-          bgcolor: 'success.light',
-          mt: 1,
-          '&:hover': {
-            bgcolor: 'success.dark'
-          }
+          bgcolor: 'success.light'
         }
       },
       backLabel: '',

package/docs/asset-manifest.json

@@ -1,9 +1,9 @@
 {
   "files": {
-    "main.js": "/DinakaranS/-dynamic-mui/build/bundle.8cf75d73.js",
+    "main.js": "/DinakaranS/-dynamic-mui/build/bundle.e8059e90.js",
     "index.html": "/DinakaranS/-dynamic-mui/index.html"
   },
   "entrypoints": [
-    "build/bundle.8cf75d73.js"
+    "build/bundle.e8059e90.js"
   ]
 }