@ozen-ui/kit
Version:
React component library
43 lines (42 loc) • 2.11 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { forwardRef, useEffect, useRef } from 'react';
import { useMultiRef } from '../../../../hooks/useMultiRef';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn } from '../../../../utils/classname';
import { useFileUploaderContext } from '../../context';
import { mergeFiles } from '../../utils';
export var cnFileUploaderInput = cn('FileUploaderInput');
export var FileUploaderInput = forwardRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'FileUploaderInput',
});
var className = props.className, other = __rest(props, ["className"]);
var internalInputRef = useRef(null);
var _a = useFileUploaderContext(), files = _a.files, inputRef = _a.inputRef, setFiles = _a.setFiles, accept = _a.accept, multiple = _a.multiple, calculateAllow = _a.calculateAllow, onAllowUploadChange = _a.onAllowUploadChange;
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.createElement("input", __assign({}, other, { className: cnFileUploaderInput('', [className]), type: "file", accept: accept, multiple: multiple, ref: 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(mergeFiles(files, arrayRawFiles));
} })));
});
FileUploaderInput.displayName = 'FileUploaderInput';