dynamic-modal
Version:
The dynamic-modal is a solution of creation different modals into project using a json configuration file
44 lines (43 loc) • 2.42 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const InputUpload = ({ onChange, readAsArrayBuffer, read, helpText, label, ...props }) => {
const onChangeHandler = (event) => {
if (read && event.target.files) {
readFileBlob(event.target.files[0], false)
.then((result) => onChange(result))
.catch((err) => {
console.error('file read error', err);
onChange({ name: '', size: 0, data: '' });
});
}
else {
onChange(event.target.files);
}
};
const readFileBlob = (blob, image) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
if (image)
fileReader.readAsDataURL(blob);
else if (readAsArrayBuffer)
fileReader.readAsArrayBuffer(blob);
else
fileReader.readAsText(blob);
fileReader.onload = () => {
const fileResult = {
name: blob.name,
size: blob.size,
data: fileReader.result,
};
resolve(fileResult);
};
fileReader.onerror = (error) => {
reject(error);
};
});
};
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full gap-1 text-center", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}`, children: label })), (0, jsx_runtime_1.jsx)("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\n file:mr-4 file:py-2 file:px-4 file:rounded-md\n file:border-0 file:text-sm file:font-semibold\n file:bg-gray-100 file:text-blue-600\n hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler, ...props }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help`, children: helpText?.toUpperCase() })] }));
};
exports.default = InputUpload;