dynamic-mui 1.0.46 → 1.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,14 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = Stepper;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _propTypes =
|
|
9
|
-
var
|
|
10
|
-
var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
|
|
11
|
-
var _Step = _interopRequireDefault(require("@mui/material/Step"));
|
|
12
|
-
var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
|
|
13
|
-
var _StepContent = _interopRequireDefault(require("@mui/material/StepContent"));
|
|
14
|
-
var _Button = _interopRequireDefault(require("@mui/material/Button"));
|
|
15
|
-
var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _material = require("@mui/material");
|
|
16
10
|
var _stepperComponents = _interopRequireDefault(require("../../../util/stepperComponents"));
|
|
17
11
|
var _helper = require("../../../util/helper");
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -21,11 +15,19 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
21
15
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // eslint-disable-next-line import/no-cycle
|
|
22
16
|
const initialState = {
|
|
23
17
|
activeStep: 0,
|
|
24
|
-
stepperResponse: {}
|
|
18
|
+
stepperResponse: {},
|
|
19
|
+
MuiSteps: []
|
|
25
20
|
};
|
|
26
|
-
|
|
21
|
+
const response = {}; // Reintegrated response object
|
|
22
|
+
|
|
23
|
+
const reducer = (state, action) => {
|
|
27
24
|
switch (action.type) {
|
|
28
|
-
case '
|
|
25
|
+
case 'SET_STEPS':
|
|
26
|
+
return {
|
|
27
|
+
...state,
|
|
28
|
+
MuiSteps: action.MuiSteps
|
|
29
|
+
};
|
|
30
|
+
case 'SET_STEP':
|
|
29
31
|
return {
|
|
30
32
|
...state,
|
|
31
33
|
activeStep: action.currentStep
|
|
@@ -41,20 +43,17 @@ function reducer(state, action) {
|
|
|
41
43
|
activeStep: state.activeStep - 1
|
|
42
44
|
};
|
|
43
45
|
case 'UPDATE_RESPONSE':
|
|
44
|
-
{
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
stepperResponse
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
};
|
|
52
|
-
}
|
|
46
|
+
return {
|
|
47
|
+
...state,
|
|
48
|
+
stepperResponse: {
|
|
49
|
+
...state.stepperResponse,
|
|
50
|
+
[action.id]: action.value
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
53
|
default:
|
|
54
54
|
return state;
|
|
55
55
|
}
|
|
56
|
-
}
|
|
57
|
-
const response = {};
|
|
56
|
+
};
|
|
58
57
|
function Stepper(_ref) {
|
|
59
58
|
let {
|
|
60
59
|
attributes,
|
|
@@ -63,42 +62,44 @@ function Stepper(_ref) {
|
|
|
63
62
|
currentStep,
|
|
64
63
|
patch
|
|
65
64
|
} = _ref;
|
|
66
|
-
const [state, dispatch] = (0, _react.useReducer)(reducer, {
|
|
67
|
-
...
|
|
65
|
+
const [state, dispatch] = (0, _react.useReducer)(reducer, initialState, init => ({
|
|
66
|
+
...init,
|
|
68
67
|
activeStep: currentStep,
|
|
69
|
-
stepperResponse:
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
});
|
|
68
|
+
stepperResponse: patch,
|
|
69
|
+
MuiSteps: [...attributes.MuiSteps]
|
|
70
|
+
}));
|
|
73
71
|
const {
|
|
74
72
|
activeStep,
|
|
75
|
-
stepperResponse
|
|
73
|
+
stepperResponse,
|
|
74
|
+
MuiSteps
|
|
76
75
|
} = state;
|
|
77
76
|
(0, _react.useEffect)(() => {
|
|
78
|
-
response[attributes.id] =
|
|
79
|
-
|
|
77
|
+
response[attributes.id] = patch; // Update response on patch change
|
|
78
|
+
return () => {
|
|
79
|
+
response[attributes.id] = {}; // Cleanup response on component unmount
|
|
80
|
+
// eslint-disable-next-line no-console
|
|
81
|
+
console.log('Component unmounted');
|
|
80
82
|
};
|
|
81
|
-
|
|
82
|
-
return () => response[attributes.id] = {};
|
|
83
|
-
}, [patch]);
|
|
83
|
+
}, [patch, attributes.id]);
|
|
84
84
|
(0, _react.useEffect)(() => {
|
|
85
85
|
dispatch({
|
|
86
|
-
type: '
|
|
86
|
+
type: 'SET_STEP',
|
|
87
87
|
currentStep
|
|
88
88
|
});
|
|
89
89
|
}, [currentStep]);
|
|
90
|
-
const handleStepChange = (stepChange, isScreenChange, isLastStep) => {
|
|
90
|
+
const handleStepChange = (0, _react.useCallback)((stepChange, isScreenChange, isLastStep) => {
|
|
91
91
|
dispatch({
|
|
92
92
|
type: stepChange
|
|
93
93
|
});
|
|
94
|
-
|
|
94
|
+
const newStep = activeStep + (stepChange === 'NEXT_STEP' ? 1 : -1);
|
|
95
|
+
onStepUpdate === null || onStepUpdate === void 0 || onStepUpdate(newStep, isScreenChange, isLastStep);
|
|
95
96
|
if (isLastStep) {
|
|
96
97
|
onChange === null || onChange === void 0 || onChange({
|
|
97
98
|
id: attributes.id,
|
|
98
|
-
value:
|
|
99
|
+
value: stepperResponse
|
|
99
100
|
});
|
|
100
101
|
}
|
|
101
|
-
};
|
|
102
|
+
}, [activeStep, attributes.id, onChange, onStepUpdate, stepperResponse]);
|
|
102
103
|
const handleUpdate = (0, _react.useCallback)(_ref2 => {
|
|
103
104
|
let {
|
|
104
105
|
id,
|
|
@@ -114,62 +115,111 @@ function Stepper(_ref) {
|
|
|
114
115
|
id,
|
|
115
116
|
value
|
|
116
117
|
});
|
|
118
|
+
// let updateUI = false;
|
|
119
|
+
// const newMuiSteps = MuiSteps.map((step) => {
|
|
120
|
+
// let newComponents = step.components || [];
|
|
121
|
+
// const fElement = newComponents?.find(
|
|
122
|
+
// (component) => component?.id === id || component?.props?.id === id,
|
|
123
|
+
// );
|
|
124
|
+
// if (fElement && fElement.onChangeUpdate) {
|
|
125
|
+
// fElement.onChangeUpdate.forEach(({ enableDisableConfig, patchId, replaceUiConfig }) => {
|
|
126
|
+
// if (enableDisableConfig) {
|
|
127
|
+
// let disableElement = newComponents.find(
|
|
128
|
+
// (k) => k.id === patchId || k?.props?.id === patchId,
|
|
129
|
+
// );
|
|
130
|
+
// if (disableElement && disableElement?.props?.MuiAttributes) {
|
|
131
|
+
// disableElement = {
|
|
132
|
+
// ...disableElement,
|
|
133
|
+
// props: {
|
|
134
|
+
// ...disableElement?.props,
|
|
135
|
+
// MuiAttributes: {
|
|
136
|
+
// ...disableElement?.props?.MuiAttributes,
|
|
137
|
+
// disabled: enableDisableConfig[value],
|
|
138
|
+
// },
|
|
139
|
+
// },
|
|
140
|
+
// };
|
|
141
|
+
// newComponents = newComponents.filter((k) => k?.props?.id !== patchId);
|
|
142
|
+
// newComponents.push(disableElement);
|
|
143
|
+
// updateUI = true;
|
|
144
|
+
// }
|
|
145
|
+
// }
|
|
146
|
+
// if (replaceUiConfig) {
|
|
147
|
+
// newComponents = newComponents.filter((k) => k?.props?.id !== patchId);
|
|
148
|
+
// newComponents.push(replaceUiConfig);
|
|
149
|
+
// updateUI = true;
|
|
150
|
+
// }
|
|
151
|
+
// });
|
|
152
|
+
// }
|
|
153
|
+
// return { ...step, components: newComponents };
|
|
154
|
+
// });
|
|
155
|
+
// if (updateUI) {
|
|
156
|
+
// dispatch({ type: 'SET_STEPS', MuiSteps: newMuiSteps });
|
|
157
|
+
// }
|
|
117
158
|
}, [onChange]);
|
|
118
|
-
const renderStepButtons = (index, isScreenChange) => /*#__PURE__*/_react.default.createElement(
|
|
159
|
+
const renderStepButtons = (index, isScreenChange) => /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
119
160
|
sx: {
|
|
120
161
|
mb: 2
|
|
121
162
|
}
|
|
122
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
163
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
|
|
123
164
|
variant: "contained",
|
|
124
|
-
onClick: () => handleStepChange('NEXT_STEP', isScreenChange, index ===
|
|
165
|
+
onClick: () => handleStepChange('NEXT_STEP', isScreenChange, index === MuiSteps.length - 1),
|
|
125
166
|
sx: {
|
|
126
167
|
mt: 1,
|
|
127
168
|
mr: 1
|
|
128
169
|
}
|
|
129
|
-
}, attributes.MuiButtonAttributes.next, index ===
|
|
170
|
+
}, attributes.MuiButtonAttributes.next, index === MuiSteps.length - 1 && {
|
|
130
171
|
...attributes.MuiButtonAttributes.final
|
|
131
|
-
}), index ===
|
|
172
|
+
}), index === MuiSteps.length - 1 ? 'Finish' : 'Continue'), /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
|
|
132
173
|
disabled: index === 0,
|
|
133
174
|
onClick: () => handleStepChange('PREVIOUS_STEP', isScreenChange, false),
|
|
134
175
|
sx: {
|
|
135
176
|
mt: 1,
|
|
136
177
|
mr: 1
|
|
137
178
|
}
|
|
138
|
-
}, attributes.MuiButtonAttributes.back),
|
|
139
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
179
|
+
}, attributes.MuiButtonAttributes.back), "Back"));
|
|
180
|
+
return /*#__PURE__*/_react.default.createElement(_material.Box, _extends({
|
|
140
181
|
sx: {
|
|
141
182
|
maxWidth: 400
|
|
142
183
|
}
|
|
143
|
-
}, attributes.MuiBoxAttributes), /*#__PURE__*/_react.default.createElement(
|
|
184
|
+
}, attributes.MuiBoxAttributes), /*#__PURE__*/_react.default.createElement(_material.Stepper, _extends({
|
|
144
185
|
activeStep: activeStep,
|
|
145
186
|
orientation: "vertical"
|
|
146
|
-
}, attributes.MuiStepperAttributes),
|
|
187
|
+
}, attributes.MuiStepperAttributes), MuiSteps.map((step, index) => /*#__PURE__*/_react.default.createElement(_material.Step, _extends({
|
|
147
188
|
key: step.label
|
|
148
|
-
}, attributes.MuiStepAttributes), /*#__PURE__*/_react.default.createElement(
|
|
149
|
-
optional: index ===
|
|
189
|
+
}, attributes.MuiStepAttributes), /*#__PURE__*/_react.default.createElement(_material.StepLabel, _extends({
|
|
190
|
+
optional: index === MuiSteps.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
150
191
|
variant: "caption"
|
|
151
|
-
},
|
|
152
|
-
}, attributes.MuiStepLabelAttributes), step.label), /*#__PURE__*/_react.default.createElement(
|
|
192
|
+
}, "Last step")
|
|
193
|
+
}, attributes.MuiStepLabelAttributes), step.label), /*#__PURE__*/_react.default.createElement(_material.StepContent, attributes.MuiStepContentAttributes, step.components ? /*#__PURE__*/_react.default.createElement(_stepperComponents.default, {
|
|
153
194
|
onUpdate: handleUpdate,
|
|
154
195
|
components: (0, _helper.updatePatchData)(step.components, stepperResponse, attributes.id, response)
|
|
155
|
-
}) : /*#__PURE__*/_react.default.createElement(
|
|
196
|
+
}) : /*#__PURE__*/_react.default.createElement(_material.Typography, null, step.description), renderStepButtons(index, step.isScreenChange))))));
|
|
156
197
|
}
|
|
157
198
|
Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
199
|
+
attributes: _propTypes.default.shape({
|
|
200
|
+
id: _propTypes.default.string.isRequired,
|
|
201
|
+
MuiSteps: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
202
|
+
label: _propTypes.default.string.isRequired,
|
|
203
|
+
description: _propTypes.default.string,
|
|
204
|
+
isScreenChange: _propTypes.default.bool,
|
|
205
|
+
components: _propTypes.default.array
|
|
206
|
+
})).isRequired,
|
|
207
|
+
MuiButtonAttributes: _propTypes.default.object,
|
|
208
|
+
MuiBoxAttributes: _propTypes.default.object,
|
|
209
|
+
MuiStepperAttributes: _propTypes.default.object,
|
|
210
|
+
MuiStepAttributes: _propTypes.default.object,
|
|
211
|
+
MuiStepLabelAttributes: _propTypes.default.object,
|
|
212
|
+
MuiStepContentAttributes: _propTypes.default.object
|
|
213
|
+
}),
|
|
161
214
|
onChange: _propTypes.default.func,
|
|
162
|
-
/** Function */
|
|
163
215
|
onStepUpdate: _propTypes.default.func,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
/** Default Patch */
|
|
167
|
-
patch: _propTypes.default.objectOf(_propTypes.default.object)
|
|
216
|
+
currentStep: _propTypes.default.number,
|
|
217
|
+
patch: _propTypes.default.object
|
|
168
218
|
} : {};
|
|
169
219
|
Stepper.defaultProps = {
|
|
170
220
|
attributes: {},
|
|
171
|
-
onChange: null,
|
|
172
|
-
onStepUpdate: null,
|
|
173
221
|
currentStep: 0,
|
|
174
|
-
patch: {}
|
|
222
|
+
patch: {},
|
|
223
|
+
onChange: () => {},
|
|
224
|
+
onStepUpdate: () => {}
|
|
175
225
|
};
|
|
@@ -16,6 +16,21 @@ const mui = exports.mui = [{
|
|
|
16
16
|
label: 'Select Service Request',
|
|
17
17
|
mandatoryIds: ['servicetype'],
|
|
18
18
|
components: [{
|
|
19
|
+
id: 'servicetypeselect',
|
|
20
|
+
type: 'radio',
|
|
21
|
+
props: {
|
|
22
|
+
id: 'servicetypeselect',
|
|
23
|
+
value: 'Existing',
|
|
24
|
+
MuiAttributes: {},
|
|
25
|
+
MuiFLabelIcon: {},
|
|
26
|
+
MuiFLabel: '',
|
|
27
|
+
MuiFCLAttributes: {},
|
|
28
|
+
MuiFCLabels: ['Existing', 'New'],
|
|
29
|
+
MuiRGAttributes: {
|
|
30
|
+
row: true
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}, {
|
|
19
34
|
type: 'select',
|
|
20
35
|
props: {
|
|
21
36
|
id: 'servicetype',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dynamic-mui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.47",
|
|
4
4
|
"author": "Dinakaran S",
|
|
5
5
|
"user": "dinakarans",
|
|
6
6
|
"repository": {
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"eslint-config-prettier": "^9.1.0",
|
|
83
83
|
"eslint-plugin-import": "^2.29.1",
|
|
84
84
|
"eslint-plugin-jsx-a11y": "^6.8.0",
|
|
85
|
-
"eslint-plugin-prettier": "^5.1.
|
|
85
|
+
"eslint-plugin-prettier": "^5.1.1",
|
|
86
86
|
"eslint-plugin-react": "^7.33.2",
|
|
87
87
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
88
88
|
"prettier": "^3.1.1",
|