drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
144 lines (143 loc) • 8.79 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 = FileFieldBySchema;
const react_1 = __importDefault(require("react"));
const react_hook_form_1 = require("react-hook-form");
const styles_1 = require("@mui/material/styles");
const Button_1 = __importDefault(require("@mui/material/Button"));
const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
const Typography_1 = __importDefault(require("@mui/material/Typography"));
const Box_1 = __importDefault(require("@mui/material/Box"));
const CloudUpload_1 = __importDefault(require("@mui/icons-material/CloudUpload"));
const utils_1 = require("../../../utils");
const DRFReactBySchemaContext_1 = require("../../../context/DRFReactBySchemaContext");
const VisuallyHiddenInput = (0, styles_1.styled)('input')({
clip: 'rect(0 0 0 0)',
clipPath: 'inset(50%)',
height: 1,
overflow: 'hidden',
position: 'absolute',
bottom: 0,
left: 0,
whiteSpace: 'nowrap',
width: 1,
});
function FileFieldBySchema(_a) {
var { name, schema, control, errors, fieldKey, index, sx = { mr: 2 }, onValueChange, autoFocus, disabled } = _a, other = __rest(_a, ["name", "schema", "control", "errors", "fieldKey", "index", "sx", "onValueChange", "autoFocus", "disabled"]);
const { serverEndPoint } = (0, DRFReactBySchemaContext_1.useDRFReactBySchema)();
if (!(name in schema)) {
console.error(`FileFieldBySchema: could not find schema for ${name}! Not rendering`);
return;
}
const fieldSchema = schema[name];
if (fieldKey && index && index >= 0) {
name = `${fieldKey}.${index}.${name}`;
}
const { error, helperText } = fieldKey && index && index >= 0
? (0, utils_1.errorProps)({
fieldKey,
index,
fieldKeyProp: name,
errors,
})
: {
error: errors && Boolean(errors[name]),
helperText: errors && errors[name] ? errors[name].message : fieldSchema.help_text || '',
};
const fileTypeStr = fieldSchema.type === 'image upload' ? 'imagem' : 'documento';
const accept = fieldSchema.allowed_mime_types
? fieldSchema.allowed_mime_types.join(', ')
: fieldSchema.type === 'image upload'
? '/image*'
: '*';
return (react_1.default.createElement(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => {
var _a, _b, _c, _d;
return (react_1.default.createElement(Box_1.default, { sx: Object.assign({ width: '100%' }, sx) },
react_1.default.createElement(FormControl_1.default, { component: "fieldset", sx: { width: '100%' } },
react_1.default.createElement(FormLabel_1.default, { component: "legend" }, fieldSchema.label),
react_1.default.createElement(FormControlLabel_1.default, { control: react_1.default.createElement(Box_1.default, { sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
} },
(((_a = field.value) === null || _a === void 0 ? void 0 : _a.url) || ((_b = field.value) === null || _b === void 0 ? void 0 : _b.src)) &&
fieldSchema.type === 'image upload' && (react_1.default.createElement("img", { src: field.value.url
? `${serverEndPoint === null || serverEndPoint === void 0 ? void 0 : serverEndPoint.url}${field.value.url}`
: field.value.src, alt: field.value.name, title: field.value.name, style: {
width: '100%',
maxHeight: '200px',
objectFit: 'cover',
maxWidth: '450px',
} })),
((_c = field.value) === null || _c === void 0 ? void 0 : _c.name) && (react_1.default.createElement(Typography_1.default, { variant: "body2", sx: { mb: 1 } },
field.value.name.split('/').pop(),
" (",
(0, utils_1.formatFileSize)(field.value.size),
")")),
react_1.default.createElement(Button_1.default, { component: "label", variant: "outlined", startIcon: react_1.default.createElement(CloudUpload_1.default, null), disabled: fieldSchema.disabled === true || disabled === true, color: error ? 'error' : 'primary' },
field.value ? `Trocar ${fileTypeStr}` : `Enviar ${fileTypeStr}`,
react_1.default.createElement(VisuallyHiddenInput, Object.assign({ type: "file", onChange: (e) => {
var _a;
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
if (file) {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (event) => {
const src = event.target ? event.target.result : undefined;
const newValue = {
name: file.name,
size: file.size,
type: file.type,
src,
file,
};
field.onChange(newValue);
if (onValueChange) {
onValueChange(newValue);
}
};
reader.readAsDataURL(file);
return;
}
const newValue = {
name: file.name,
size: file.size,
type: file.type,
file,
};
field.onChange(newValue);
if (onValueChange) {
onValueChange(newValue);
}
}
}, accept: accept, autoFocus: autoFocus }, other)))), label: '',
// labelPlacement="top"
required: (0, utils_1.isFieldRequired)(fieldSchema), sx: {
width: '100%',
alignItems: 'flex-start',
marginLeft: 0,
} }),
react_1.default.createElement(FormHelperText_1.default, { error: error, sx: {
ml: 'calc(14px + 1em)',
mt: ((_d = field.value) === null || _d === void 0 ? void 0 : _d.name) ? 0 : 1, // Adjust spacing if no file is selected
} }, helperText))));
} }));
}