drf-react-by-schema 0.28.19 → 0.28.21
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogFormBySchema.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DialogFormBySchema.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"DialogFormBySchema.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DialogFormBySchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAMtC,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,IAAI,EACJ,SAAS,EACT,UAAU,EACV,MAAM,EACP,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAQ7D,UAAU,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI;IACvD,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,gBAAgB,EAAE,eAAe,CAAC;IAClC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACvB,eAAe,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC;IAC/D,SAAS,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CACf,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EAAE,KACnB,OAAO,CAAC,gBAAgB,EAAE,GAAG,UAAU,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACzB,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,EAAE,EAClE,MAAM,EACN,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,SAAS,EACT,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GACV,EAAE,uBAAuB,CAAC,CAAC,CAAC,qBAiG5B"}
|
|
@@ -59,10 +59,12 @@ const utils_1 = require("../../utils");
|
|
|
59
59
|
const texts_1 = require("../../styles/texts");
|
|
60
60
|
function DialogFormBySchema({ schema, validationSchema, initialValues, onEditModelSave, setDialog, getAutoComplete, fieldsLayout, hiddenFields, isCancelDisabled, forceSaveEnabled, optionsAC, }) {
|
|
61
61
|
const formTexts = (0, texts_1.getThemeTexts)((0, styles_1.useTheme)()).forms;
|
|
62
|
-
const { control, handleSubmit, reset, getValues, setValue, setError, formState: { errors, isDirty }, } = (0, react_hook_form_1.useForm)({
|
|
62
|
+
const { control, handleSubmit, reset, getValues, setValue, setError, watch, formState: { errors, isDirty }, } = (0, react_hook_form_1.useForm)({
|
|
63
63
|
mode: 'onBlur',
|
|
64
64
|
resolver: validationSchema ? (0, yup_1.yupResolver)(validationSchema) : undefined,
|
|
65
65
|
});
|
|
66
|
+
const conditionalVisible = (0, react_1.useMemo)(() => (0, utils_1.buildConditionalVisibleBySchema)(schema), [schema]);
|
|
67
|
+
const watchedValues = watch((0, utils_1.getConditionalVisibleSources)(conditionalVisible).map((source) => source));
|
|
66
68
|
(0, react_1.useEffect)(() => {
|
|
67
69
|
reset(initialValues);
|
|
68
70
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -86,7 +88,7 @@ function DialogFormBySchema({ schema, validationSchema, initialValues, onEditMod
|
|
|
86
88
|
}
|
|
87
89
|
return (react_1.default.createElement(react_1.default.Fragment, null, initialValues && control && (react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitWrapper) },
|
|
88
90
|
react_1.default.createElement(Box_1.default, null,
|
|
89
|
-
react_1.default.createElement(FormBySchema_1.default, { control: control, errors: errors, schema: schema, getValues: getValues, setValue: setValue, optionsAC: optionsAC, isolatedGetAutoComplete: getAutoComplete, fieldsLayout: fieldsLayout, hiddenFields: hiddenFields, relatedEditable: false })),
|
|
91
|
+
react_1.default.createElement(FormBySchema_1.default, { control: control, errors: errors, schema: schema, getValues: getValues, setValue: setValue, optionsAC: optionsAC, isolatedGetAutoComplete: getAutoComplete, fieldsLayout: fieldsLayout, hiddenFields: hiddenFields, relatedEditable: false, conditionalVisible: conditionalVisible, watchedValues: watchedValues })),
|
|
90
92
|
react_1.default.createElement(Box_1.default, { sx: styles_2.Layout.flexRow },
|
|
91
93
|
!isCancelDisabled && (react_1.default.createElement(Button_1.default, { variant: "contained", color: "primary", size: "small", sx: { ml: 1 }, onClick: () => {
|
|
92
94
|
setDialog({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormBySchema.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBySchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAiB,eAAe,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"FormBySchema.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBySchema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAiB,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAWjE,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,QAAQ,EAER,SAAS,EACT,MAAM,EACP,MAAM,cAAc,CAAC;AAYtB,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IAEtF,YAAY,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACzC,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,gBAAgB,EAAE,GAAG,UAAU,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,IAAI,EAAE,EAC5D,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAgC,EAChC,KAAK,EACL,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EACP,YAAY,EACZ,KAAK,EACL,YAAgB,EAEhB,YAAY,EAAE,mBAAmB,EACjC,sBAAsB,EACtB,kBAAkB,EAClB,aAAa,EAEb,WAAW,EACX,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,cAAc,EACd,SAAS,EAKT,KAAK,EACL,aAAa,EACb,SAAS,EACT,cAAc,GAKf,EAAE,iBAAiB,CAAC,CAAC,CAAC,GACrB,IAAI,CACF,uBAAuB,EACrB,IAAI,GACJ,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,GACb,iBAAiB,GACjB,qBAAqB,CACxB,qBAybF"}
|
|
@@ -50,6 +50,7 @@ const react_1 = __importStar(require("react"));
|
|
|
50
50
|
const axios_1 = __importDefault(require("axios"));
|
|
51
51
|
const Box_1 = __importDefault(require("@mui/material/Box"));
|
|
52
52
|
const Card_1 = __importDefault(require("@mui/material/Card"));
|
|
53
|
+
const Collapse_1 = __importDefault(require("@mui/material/Collapse"));
|
|
53
54
|
const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
|
|
54
55
|
const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
|
|
55
56
|
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
|
|
@@ -74,6 +75,7 @@ sxRow, sxRowMultiple, sxSection, sxSectionTitle,
|
|
|
74
75
|
const onEditModel = (0, react_1.useMemo)(() => (relatedEditable === false ? undefined : customOnEditModel || defaultOnEditModel), [customOnEditModel, defaultOnEditModel, relatedEditable]);
|
|
75
76
|
const [localOptionsAC, setLocalOptionsAC] = (0, react_1.useState)();
|
|
76
77
|
const defaultSx = { mr: 0 };
|
|
78
|
+
const isConditionalField = (field) => !!(conditionalVisible === null || conditionalVisible === void 0 ? void 0 : conditionalVisible.some((item) => item.target === field));
|
|
77
79
|
const { fieldsLayout, optionsACModels } = (0, react_1.useMemo)(() => {
|
|
78
80
|
if (!schema) {
|
|
79
81
|
return { fieldsLayout: undefined, optionsACModels: [] };
|
|
@@ -253,21 +255,25 @@ sxRow, sxRowMultiple, sxSection, sxSectionTitle,
|
|
|
253
255
|
if (fieldProps) {
|
|
254
256
|
fieldProps.sx = 'sx' in fieldProps ? fieldProps.sx : defaultSx;
|
|
255
257
|
}
|
|
258
|
+
const isConditional = isConditionalField(field);
|
|
256
259
|
const isVisible = (0, utils_1.showConditionalVisibleField)(field, conditionalVisible, watchedValues);
|
|
257
|
-
if (!isVisible) {
|
|
260
|
+
if (!isConditional && !isVisible) {
|
|
258
261
|
return react_1.default.createElement(Box_1.default, { key: field, sx: sxRow });
|
|
259
262
|
}
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
263
|
+
const fieldElement = (react_1.default.createElement(FieldBySchema_1.default, Object.assign({ name: field, schema: schema, control: control, errors: errors, multiline: multiline, setValue: setValue, getValues: getValues, fieldKey: fieldKey, labelKey: labelKey, index: index,
|
|
264
|
+
// optionsAC={setOptionsAC ? optionsAC : localOptionsAC}
|
|
265
|
+
optionsAC: optionsAC && field in optionsAC
|
|
266
|
+
? optionsAC
|
|
267
|
+
: localOptionsAC,
|
|
268
|
+
// optionsAC: BaseOptionsAC | Partial<Record<FieldKey<T>, FieldOptionsAC>>
|
|
269
|
+
// optionsAC: BaseOptionsAC | Partial<Record<FieldKey<T>, FieldOptionsAC>> | undefined
|
|
270
|
+
optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, fieldsLayout: customFieldFormLayouts && field in customFieldFormLayouts
|
|
271
|
+
? customFieldFormLayouts[field]
|
|
272
|
+
: undefined, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale, autoFocus: autoFocusField === field || (sectionIndex === 0 && rowIndex === 0) }, fieldProps)));
|
|
273
|
+
if (isConditional) {
|
|
274
|
+
return (react_1.default.createElement(Collapse_1.default, { key: field, in: isVisible, unmountOnExit: true, sx: sxRow }, fieldElement));
|
|
275
|
+
}
|
|
276
|
+
return (react_1.default.createElement(Box_1.default, { key: field, sx: sxRow }, fieldElement));
|
|
271
277
|
}
|
|
272
278
|
if (Array.isArray(row)) {
|
|
273
279
|
return (react_1.default.createElement(Box_1.default, { sx: sxRowMultiple
|
|
@@ -289,14 +295,23 @@ sxRow, sxRowMultiple, sxSection, sxSectionTitle,
|
|
|
289
295
|
mr,
|
|
290
296
|
};
|
|
291
297
|
}
|
|
298
|
+
const isConditional = isConditionalField(key);
|
|
292
299
|
const isVisible = (0, utils_1.showConditionalVisibleField)(key, conditionalVisible, watchedValues);
|
|
293
|
-
if (!isVisible) {
|
|
300
|
+
if (!isConditional && !isVisible) {
|
|
294
301
|
return (react_1.default.createElement(react_1.default.Fragment, { key: `field_${rowIndex}_${i}` }));
|
|
295
302
|
}
|
|
296
|
-
|
|
303
|
+
// A collapsed flex item needs an explicit width; the
|
|
304
|
+
// horizontal margin moves to the collapse wrapper.
|
|
305
|
+
const inlineFieldProps = isConditional
|
|
306
|
+
? Object.assign(Object.assign({}, fieldProps), { sx: undefined }) : fieldProps;
|
|
307
|
+
const fieldElement = typeof field === 'string' ? (react_1.default.createElement(FieldBySchema_1.default, Object.assign({ name: field, schema: schema, control: control, errors: errors, multiline: multiline, setValue: setValue, getValues: getValues, fieldKey: fieldKey, labelKey: labelKey, index: index, optionsAC: optionsAC && field in optionsAC
|
|
297
308
|
? optionsAC
|
|
298
309
|
: localOptionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: onEditModel, options: options, isSemaphoric: isSemaphoric, label: label, decimalScale: decimalScale, autoFocus: autoFocusField === field ||
|
|
299
|
-
(sectionIndex === 0 && rowIndex === 0 && i === 0) },
|
|
310
|
+
(sectionIndex === 0 && rowIndex === 0 && i === 0) }, inlineFieldProps))) : (react_1.default.createElement(field.CustomElement, Object.assign({}, inlineFieldProps)));
|
|
311
|
+
if (isConditional) {
|
|
312
|
+
return (react_1.default.createElement(Collapse_1.default, { key: `field_${rowIndex}_${i}`, in: isVisible, unmountOnExit: true, sx: Object.assign(Object.assign({}, fieldProps.sx), { width: '100%', minWidth: 0 }) }, fieldElement));
|
|
313
|
+
}
|
|
314
|
+
return (react_1.default.createElement(react_1.default.Fragment, { key: `field_${rowIndex}_${i}` }, fieldElement));
|
|
300
315
|
}))));
|
|
301
316
|
}
|
|
302
317
|
const fieldProps = fieldsProps && row.key in fieldsProps
|
package/package.json
CHANGED