dynamic-mui 1.0.45 → 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.
|
@@ -114,7 +114,8 @@ function FormGenerator(_ref) {
|
|
|
114
114
|
rules: rules,
|
|
115
115
|
onChange: onUpdate,
|
|
116
116
|
onStepUpdate: onStepUpdate,
|
|
117
|
-
currentStep: activeStep
|
|
117
|
+
currentStep: activeStep,
|
|
118
|
+
patch: patch
|
|
118
119
|
}));
|
|
119
120
|
};
|
|
120
121
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, _extends({
|
|
@@ -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,66 +43,71 @@ 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
|
-
[action.id]: action.value
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
}
|
|
46
|
+
return {
|
|
47
|
+
...state,
|
|
48
|
+
stepperResponse: {
|
|
49
|
+
...state.stepperResponse,
|
|
50
|
+
[action.id]: action.value
|
|
51
|
+
}
|
|
52
|
+
};
|
|
56
53
|
default:
|
|
57
54
|
return state;
|
|
58
55
|
}
|
|
59
|
-
}
|
|
56
|
+
};
|
|
60
57
|
function Stepper(_ref) {
|
|
61
58
|
let {
|
|
62
59
|
attributes,
|
|
63
60
|
onChange,
|
|
64
61
|
onStepUpdate,
|
|
65
|
-
currentStep
|
|
62
|
+
currentStep,
|
|
63
|
+
patch
|
|
66
64
|
} = _ref;
|
|
67
|
-
const [state, dispatch] = (0, _react.useReducer)(reducer, {
|
|
68
|
-
...
|
|
65
|
+
const [state, dispatch] = (0, _react.useReducer)(reducer, initialState, init => ({
|
|
66
|
+
...init,
|
|
69
67
|
activeStep: currentStep,
|
|
70
|
-
stepperResponse:
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
68
|
+
stepperResponse: patch,
|
|
69
|
+
MuiSteps: [...attributes.MuiSteps]
|
|
70
|
+
}));
|
|
74
71
|
const {
|
|
75
72
|
activeStep,
|
|
76
|
-
stepperResponse
|
|
73
|
+
stepperResponse,
|
|
74
|
+
MuiSteps
|
|
77
75
|
} = state;
|
|
76
|
+
(0, _react.useEffect)(() => {
|
|
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');
|
|
82
|
+
};
|
|
83
|
+
}, [patch, attributes.id]);
|
|
78
84
|
(0, _react.useEffect)(() => {
|
|
79
85
|
dispatch({
|
|
80
|
-
type: '
|
|
86
|
+
type: 'SET_STEP',
|
|
81
87
|
currentStep
|
|
82
88
|
});
|
|
83
89
|
}, [currentStep]);
|
|
84
|
-
const handleStepChange = (stepChange, isScreenChange, isLastStep) => {
|
|
90
|
+
const handleStepChange = (0, _react.useCallback)((stepChange, isScreenChange, isLastStep) => {
|
|
85
91
|
dispatch({
|
|
86
92
|
type: stepChange
|
|
87
93
|
});
|
|
88
|
-
|
|
94
|
+
const newStep = activeStep + (stepChange === 'NEXT_STEP' ? 1 : -1);
|
|
95
|
+
onStepUpdate === null || onStepUpdate === void 0 || onStepUpdate(newStep, isScreenChange, isLastStep);
|
|
89
96
|
if (isLastStep) {
|
|
90
97
|
onChange === null || onChange === void 0 || onChange({
|
|
91
98
|
id: attributes.id,
|
|
92
|
-
value: stepperResponse
|
|
99
|
+
value: stepperResponse
|
|
93
100
|
});
|
|
94
101
|
}
|
|
95
|
-
};
|
|
102
|
+
}, [activeStep, attributes.id, onChange, onStepUpdate, stepperResponse]);
|
|
96
103
|
const handleUpdate = (0, _react.useCallback)(_ref2 => {
|
|
97
104
|
let {
|
|
98
105
|
id,
|
|
99
106
|
value
|
|
100
107
|
} = _ref2;
|
|
108
|
+
response[attributes.id][id] = value;
|
|
101
109
|
dispatch({
|
|
102
110
|
type: 'UPDATE_RESPONSE',
|
|
103
|
-
guid: attributes.id,
|
|
104
111
|
id,
|
|
105
112
|
value
|
|
106
113
|
});
|
|
@@ -108,59 +115,111 @@ function Stepper(_ref) {
|
|
|
108
115
|
id,
|
|
109
116
|
value
|
|
110
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
|
+
// }
|
|
111
158
|
}, [onChange]);
|
|
112
|
-
const renderStepButtons = (index, isScreenChange) => /*#__PURE__*/_react.default.createElement(
|
|
159
|
+
const renderStepButtons = (index, isScreenChange) => /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
113
160
|
sx: {
|
|
114
161
|
mb: 2
|
|
115
162
|
}
|
|
116
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
163
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
|
|
117
164
|
variant: "contained",
|
|
118
|
-
onClick: () => handleStepChange('NEXT_STEP', isScreenChange, index ===
|
|
165
|
+
onClick: () => handleStepChange('NEXT_STEP', isScreenChange, index === MuiSteps.length - 1),
|
|
119
166
|
sx: {
|
|
120
167
|
mt: 1,
|
|
121
168
|
mr: 1
|
|
122
169
|
}
|
|
123
|
-
}, attributes.MuiButtonAttributes.next, index ===
|
|
170
|
+
}, attributes.MuiButtonAttributes.next, index === MuiSteps.length - 1 && {
|
|
124
171
|
...attributes.MuiButtonAttributes.final
|
|
125
|
-
}), index ===
|
|
172
|
+
}), index === MuiSteps.length - 1 ? 'Finish' : 'Continue'), /*#__PURE__*/_react.default.createElement(_material.Button, _extends({
|
|
126
173
|
disabled: index === 0,
|
|
127
174
|
onClick: () => handleStepChange('PREVIOUS_STEP', isScreenChange, false),
|
|
128
175
|
sx: {
|
|
129
176
|
mt: 1,
|
|
130
177
|
mr: 1
|
|
131
178
|
}
|
|
132
|
-
}, attributes.MuiButtonAttributes.back),
|
|
133
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
179
|
+
}, attributes.MuiButtonAttributes.back), "Back"));
|
|
180
|
+
return /*#__PURE__*/_react.default.createElement(_material.Box, _extends({
|
|
134
181
|
sx: {
|
|
135
182
|
maxWidth: 400
|
|
136
183
|
}
|
|
137
|
-
}, attributes.MuiBoxAttributes), /*#__PURE__*/_react.default.createElement(
|
|
184
|
+
}, attributes.MuiBoxAttributes), /*#__PURE__*/_react.default.createElement(_material.Stepper, _extends({
|
|
138
185
|
activeStep: activeStep,
|
|
139
186
|
orientation: "vertical"
|
|
140
|
-
}, attributes.MuiStepperAttributes),
|
|
187
|
+
}, attributes.MuiStepperAttributes), MuiSteps.map((step, index) => /*#__PURE__*/_react.default.createElement(_material.Step, _extends({
|
|
141
188
|
key: step.label
|
|
142
|
-
}, attributes.MuiStepAttributes), /*#__PURE__*/_react.default.createElement(
|
|
143
|
-
optional: index ===
|
|
189
|
+
}, attributes.MuiStepAttributes), /*#__PURE__*/_react.default.createElement(_material.StepLabel, _extends({
|
|
190
|
+
optional: index === MuiSteps.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
144
191
|
variant: "caption"
|
|
145
|
-
},
|
|
146
|
-
}, 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, {
|
|
147
194
|
onUpdate: handleUpdate,
|
|
148
|
-
components: (0, _helper.updatePatchData)(step.components, stepperResponse
|
|
149
|
-
}) : /*#__PURE__*/_react.default.createElement(
|
|
195
|
+
components: (0, _helper.updatePatchData)(step.components, stepperResponse, attributes.id, response)
|
|
196
|
+
}) : /*#__PURE__*/_react.default.createElement(_material.Typography, null, step.description), renderStepButtons(index, step.isScreenChange))))));
|
|
150
197
|
}
|
|
151
198
|
Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
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
|
+
}),
|
|
155
214
|
onChange: _propTypes.default.func,
|
|
156
|
-
/** Function */
|
|
157
215
|
onStepUpdate: _propTypes.default.func,
|
|
158
|
-
|
|
159
|
-
|
|
216
|
+
currentStep: _propTypes.default.number,
|
|
217
|
+
patch: _propTypes.default.object
|
|
160
218
|
} : {};
|
|
161
219
|
Stepper.defaultProps = {
|
|
162
220
|
attributes: {},
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
221
|
+
currentStep: 0,
|
|
222
|
+
patch: {},
|
|
223
|
+
onChange: () => {},
|
|
224
|
+
onStepUpdate: () => {}
|
|
166
225
|
};
|
|
@@ -14,7 +14,23 @@ const mui = exports.mui = [{
|
|
|
14
14
|
orientation: 'horizontal',
|
|
15
15
|
MuiSteps: [{
|
|
16
16
|
label: 'Select Service Request',
|
|
17
|
+
mandatoryIds: ['servicetype'],
|
|
17
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
|
+
}, {
|
|
18
34
|
type: 'select',
|
|
19
35
|
props: {
|
|
20
36
|
id: 'servicetype',
|
|
@@ -49,6 +65,7 @@ const mui = exports.mui = [{
|
|
|
49
65
|
}, {
|
|
50
66
|
label: 'Assign Priority',
|
|
51
67
|
isScreenChange: true,
|
|
68
|
+
mandatoryIds: ['priority'],
|
|
52
69
|
components: [{
|
|
53
70
|
type: 'select',
|
|
54
71
|
props: {
|
|
@@ -74,6 +91,7 @@ const mui = exports.mui = [{
|
|
|
74
91
|
}]
|
|
75
92
|
}, {
|
|
76
93
|
label: 'Choose Schedule In Calendar',
|
|
94
|
+
mandatoryIds: ['start', 'end'],
|
|
77
95
|
components: [{
|
|
78
96
|
id: 'start',
|
|
79
97
|
type: 'datetime',
|
|
@@ -106,6 +124,7 @@ const mui = exports.mui = [{
|
|
|
106
124
|
}]
|
|
107
125
|
}, {
|
|
108
126
|
label: 'Assign User',
|
|
127
|
+
mandatoryIds: ['assigntouser'],
|
|
109
128
|
components: [{
|
|
110
129
|
type: 'select',
|
|
111
130
|
props: {
|
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",
|