@ozen-ui/kit
Version:
React component library
46 lines (45 loc) • 2.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileUploaderInput = exports.cnFileUploaderInput = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var useMultiRef_1 = require("../../../../hooks/useMultiRef");
var useThemeProps_1 = require("../../../../hooks/useThemeProps");
var classname_1 = require("../../../../utils/classname");
var context_1 = require("../../context");
var utils_1 = require("../../utils");
exports.cnFileUploaderInput = (0, classname_1.cn)('FileUploaderInput');
exports.FileUploaderInput = (0, react_1.forwardRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'FileUploaderInput',
});
var className = props.className, other = tslib_1.__rest(props, ["className"]);
var internalInputRef = (0, react_1.useRef)(null);
var _a = (0, context_1.useFileUploaderContext)(), files = _a.files, inputRef = _a.inputRef, setFiles = _a.setFiles, accept = _a.accept, multiple = _a.multiple, calculateAllow = _a.calculateAllow, onAllowUploadChange = _a.onAllowUploadChange;
(0, react_1.useEffect)(function () {
if (!internalInputRef.current) {
return;
}
if (typeof DataTransfer === 'undefined') {
return;
}
var dataTransfer = new DataTransfer();
files.forEach(function (file) { return dataTransfer.items.add(file); });
internalInputRef.current.files = dataTransfer.files;
}, [files]);
return (react_1.default.createElement("input", tslib_1.__assign({}, other, { className: (0, exports.cnFileUploaderInput)('', [className]), type: "file", accept: accept, multiple: multiple, ref: (0, useMultiRef_1.useMultiRef)([internalInputRef, inputRef, ref]), onChange: function (event) {
var rawFiles = event.target.files;
if (!rawFiles) {
return;
}
var arrayRawFiles = Array.from(rawFiles);
var calculatedAllow = calculateAllow(arrayRawFiles);
onAllowUploadChange(calculatedAllow.isAllow, calculatedAllow.failed);
if (!calculatedAllow.isAllow) {
return;
}
setFiles((0, utils_1.mergeFiles)(files, arrayRawFiles));
} })));
});
exports.FileUploaderInput.displayName = 'FileUploaderInput';