drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
88 lines (87 loc) • 7.51 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = FieldBySchema;
const react_1 = __importDefault(require("react"));
const DesktopDatePickerBySchema_1 = __importDefault(require("./inputs/DesktopDatePickerBySchema"));
const DesktopDateTimePickerBySchema_1 = __importDefault(require("./inputs/DesktopDateTimePickerBySchema"));
const EditableAutocompleteFieldBySchema_1 = __importDefault(require("./inputs/EditableAutocompleteFieldBySchema"));
const AutocompleteFieldBySchema_1 = __importDefault(require("./inputs/AutocompleteFieldBySchema"));
const BooleanFieldBySchema_1 = __importDefault(require("./inputs/BooleanFieldBySchema"));
const FloatFieldBySchema_1 = __importDefault(require("./inputs/FloatFieldBySchema"));
const TextFieldBySchema_1 = __importDefault(require("./inputs/TextFieldBySchema"));
const FileFieldBySchema_1 = __importDefault(require("./inputs/FileFieldBySchema"));
const PatternFieldBySchema_1 = __importDefault(require("./inputs/PatternFieldBySchema"));
function FieldBySchema(_a) {
var _b, _c, _d;
var { name, schema, control, errors, multiline = false, setValue, getValues, fieldKey, labelKey = 'nome', index, optionsAC, optionsModel, getOptionLabel, renderOption, onEditModel, fieldsLayout, sx, options, isSemaphoric = false, label, onValueChange, decimalScale = 2, autoFocus } = _a, other = __rest(_a, ["name", "schema", "control", "errors", "multiline", "setValue", "getValues", "fieldKey", "labelKey", "index", "optionsAC", "optionsModel", "getOptionLabel", "renderOption", "onEditModel", "fieldsLayout", "sx", "options", "isSemaphoric", "label", "onValueChange", "decimalScale", "autoFocus"]);
const fieldSchema = schema[name];
// prevent switching from uncontrolled inputs (undefined) to controlled:
if (control._formValues[name] === undefined) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
// if (fieldSchema.conditional_visible) {
// if (typeof fieldSchema.conditional_visible[0] === 'string') {
// const sourceField = fieldSchema.conditional_visible[0];
// const sourceFieldValue =
// fieldSchema.conditional_visible.length === 2
// ? fieldSchema.conditional_visible[1]
// : emptyByType(fieldSchema);
// if (
// sourceField in control._formValues &&
// control._formValues[sourceField] === JSON.stringify(sourceFieldValue)
// ) {
// return <></>;
// }
// }
// }
switch (fieldSchema.type) {
case 'date':
return (react_1.default.createElement(DesktopDatePickerBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: multiline, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus }, other)));
case 'datetime':
return (react_1.default.createElement(DesktopDateTimePickerBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: multiline, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange }, other)));
case 'nested object':
case 'field':
const relatedEditable = fieldSchema.related_editable;
const multiple = fieldSchema.many || false;
return (react_1.default.createElement(EditableAutocompleteFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, setValue: setValue, getValues: getValues, fieldKey: fieldKey, labelKey: labelKey, index: index, optionsAC: optionsAC, optionsModel: optionsModel, getOptionLabel: getOptionLabel, renderOption: renderOption, onEditModel: relatedEditable ? onEditModel : undefined, fieldsLayout: fieldsLayout, multiple: multiple, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus }, other)));
case 'choice':
return (react_1.default.createElement(AutocompleteFieldBySchema_1.default, { index: index, name: name, schema: schema, control: control, errors: errors, fieldKey: fieldKey, optionIdKey: "value", optionLabelKey: "display_name", options: options, isSemaphoric: isSemaphoric, label: label, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus }));
case 'list':
const multipleOptions = options || ((_b = fieldSchema.child) === null || _b === void 0 ? void 0 : _b.choices);
return (react_1.default.createElement(AutocompleteFieldBySchema_1.default, { index: index, name: name, schema: schema, multiple: true, control: control, errors: errors, fieldKey: fieldKey, optionIdKey: "value", optionLabelKey: "display_name", options: multipleOptions, isSemaphoric: isSemaphoric, label: label, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus }));
case 'boolean':
return (react_1.default.createElement(BooleanFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus }, other)));
case 'decimal':
case 'float':
return (react_1.default.createElement(FloatFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: multiline, fieldKey: fieldKey, index: index, onValueChange: onValueChange, decimalScale: decimalScale, label: label, sx: sx, autoFocus: autoFocus }, other)));
case 'file':
case 'file upload':
case 'image':
case 'image upload':
return (react_1.default.createElement(FileFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus }, other)));
case 'number':
case 'integer':
case 'password':
default:
if (fieldSchema.pattern_format) {
return (react_1.default.createElement(PatternFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus, type: (_c = fieldSchema.style) === null || _c === void 0 ? void 0 : _c.input_type }, other)));
}
const localMultiline = fieldSchema.model_multiline === true || multiline;
const minRows = localMultiline ? 3 : 0;
return (react_1.default.createElement(TextFieldBySchema_1.default, Object.assign({ name: name, schema: schema, control: control, errors: errors, multiline: localMultiline, minRows: minRows, fieldKey: fieldKey, index: index, sx: sx, onValueChange: onValueChange, autoFocus: autoFocus, type: (_d = fieldSchema.style) === null || _d === void 0 ? void 0 : _d.input_type }, other)));
}
}