dynamic-modal
Version:
The dynamic-modal is a solution of creation different modals into project using a json configuration file
50 lines (49 loc) • 2.59 kB
JavaScript
;
'use client';
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const InputUpload = ({ onChange, readAsArrayBuffer, ...props }) => {
const onChangeHandler = (event) => {
if (props.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 (react_1.default.createElement("div", { className: "flex flex-col w-full gap-1 text-center" },
props.label && (react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}` }, props.label)),
react_1.default.createElement("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n file:border-0 file:text-sm file:font-semibold\r\n file:bg-gray-100 file:text-blue-600\r\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 }),
react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help` }, props.helpText?.toUpperCase())));
};
exports.default = InputUpload;