@ozen-ui/kit
Version:
React component library
162 lines (161 loc) • 7.42 kB
JavaScript
import { __read, __spreadArray } from "tslib";
import '../components/FileUploaderHint/FileUploaderHint.css';
import '../modules/FileUploaderInput/FileUploaderInput.css';
import '../modules/FileUploaderDrop/FileUploaderDrop.css';
import '../modules/FileUploaderLoader/FileUploaderLoader.css';
import '../modules/FileUploaderList/FileUploaderList.css';
import '../FileUploader.css';
import React, { useRef, useState } from 'react';
import { useControlled } from '../../../hooks/useControlled';
import { isArray } from '../../../utils/array';
import { FILE_UPLOADER_DEFAULT_ALLOW_DROP, FILE_UPLOADER_DEFAULT_MULTIPLE, FILE_UPLOADER_DEFAULT_ON_ALLOW_DROP_CHANGE, FILE_UPLOADER_DEFAULT_ON_ALLOW_UPLOAD_CHANGE, FILE_UPLOADER_DEFAULT_ON_DROP, FILE_UPLOADER_DEFAULT_SIZE, FILE_UPLOADER_DEFAULT_STATUS, FILE_UPLOADER_DEFAULT_VALIDATE, FILE_UPLOADER_DEFAULT_VARIANT, } from '../constants';
import { getNewFiles, isObjectAllowInfo, isObjectValidateInfo } from '../utils';
import { FileUploaderContext } from './FileUploaderContext';
export var FileUploaderProvider = function (_a) {
var filesProp = _a.files, defaultFiles = _a.defaultFiles, prepareFiles = _a.prepareFiles, children = _a.children, _b = _a.size, size = _b === void 0 ? FILE_UPLOADER_DEFAULT_SIZE : _b, _c = _a.multiple, multiple = _c === void 0 ? FILE_UPLOADER_DEFAULT_MULTIPLE : _c, onChange = _a.onChange, onDelete = _a.onDelete, onDraggingStart = _a.onDraggingStart, onDraggingEnd = _a.onDraggingEnd, _d = _a.status, status = _d === void 0 ? FILE_UPLOADER_DEFAULT_STATUS : _d, _e = _a.variant, variant = _e === void 0 ? FILE_UPLOADER_DEFAULT_VARIANT : _e, accept = _a.accept, _f = _a.validate, validateProp = _f === void 0 ? FILE_UPLOADER_DEFAULT_VALIDATE : _f, _g = _a.allow, allowProp = _g === void 0 ? FILE_UPLOADER_DEFAULT_ALLOW_DROP : _g, _h = _a.onAllowDropChange, onAllowDropChange = _h === void 0 ? FILE_UPLOADER_DEFAULT_ON_ALLOW_DROP_CHANGE : _h, _j = _a.onAllowUploadChange, onAllowUploadChange = _j === void 0 ? FILE_UPLOADER_DEFAULT_ON_ALLOW_UPLOAD_CHANGE : _j, _k = _a.onDrop, onDrop = _k === void 0 ? FILE_UPLOADER_DEFAULT_ON_DROP : _k;
var _l = __read(useControlled({
value: filesProp,
defaultValue: defaultFiles,
name: 'FileUploaderProvider',
state: 'files',
}), 2), filesState = _l[0], setFilesState = _l[1];
var files = filesState !== null && filesState !== void 0 ? filesState : [];
var filesInfos = prepareFiles(files);
var _m = __read(useState(false), 2), dragging = _m[0], setDraggingState = _m[1];
var inputRef = useRef(null);
var calculateValidate = function (file, files) {
var validateArray = isArray(validateProp) ? validateProp : [validateProp];
var failedValidate = [];
validateArray.forEach(function (validate) {
var returnValue = validate(file, files);
if (isObjectValidateInfo(returnValue)) {
if (!returnValue.isValid) {
failedValidate.push({
validate: validate,
info: returnValue,
});
}
return;
}
if (!returnValue) {
failedValidate.push({
validate: validate,
info: false,
});
}
});
return {
isValid: failedValidate.length === 0,
failed: failedValidate,
};
};
var validate = function (file, files) {
return calculateValidate(file, files).isValid;
};
var setFiles = function (newFiles) {
var changesFiles = getNewFiles(files, newFiles);
var acceptedFiles = [];
var rejectedFiles = [];
changesFiles.forEach(function (file) {
var validationResult = calculateValidate(file, files);
if (validationResult.isValid) {
acceptedFiles.push(file);
}
else {
rejectedFiles.push({
file: file,
validation: validationResult.failed,
});
}
});
if (acceptedFiles.length === 0 &&
rejectedFiles.length === 0 &&
files.length === newFiles.length) {
return;
}
var newStateFiles = __spreadArray(__spreadArray([], __read(files), false), __read(acceptedFiles), false);
setFilesState(newStateFiles);
onChange === null || onChange === void 0 ? void 0 : onChange({
files: newStateFiles,
acceptedFiles: acceptedFiles,
rejectedFiles: rejectedFiles,
});
};
var openUploader = function () {
var _a;
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
};
var deleteFile = function (fileInfo) {
onDelete === null || onDelete === void 0 ? void 0 : onDelete(fileInfo);
};
var setDragging = function (event, isDragging) {
if (isDragging === dragging) {
return;
}
setDraggingState(isDragging);
var draggingItems = (function () {
var _a;
var rawItems = (_a = event === null || event === void 0 ? void 0 : event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
var items = rawItems ? Array.from(rawItems) : [];
return items.filter(function (item) { return item.kind === 'file'; });
})();
var info = {
files: draggingItems,
count: draggingItems.length,
};
if (isDragging) {
onDraggingStart === null || onDraggingStart === void 0 ? void 0 : onDraggingStart(event, info);
}
else {
onDraggingEnd === null || onDraggingEnd === void 0 ? void 0 : onDraggingEnd(event, info);
}
};
var calculateAllow = function (files) {
var allowArray = isArray(allowProp) ? allowProp : [allowProp];
var failedAllow = [];
allowArray.forEach(function (allow) {
// eslint-disable-next-line no-use-before-define
var returnValue = allow(files, contextValue);
if (isObjectAllowInfo(returnValue)) {
if (!returnValue.isAllow) {
failedAllow.push({
allow: allow,
info: returnValue,
});
}
return;
}
if (!returnValue) {
failedAllow.push({
allow: allow,
info: false,
});
}
});
return {
isAllow: failedAllow.length === 0,
failed: failedAllow,
};
};
var contextValue = {
accept: accept,
files: files,
filesInfos: filesInfos,
size: size,
setFiles: setFiles,
dragging: dragging,
setDragging: setDragging,
inputRef: inputRef,
openUploader: openUploader,
multiple: multiple,
deleteFile: deleteFile,
status: status,
variant: variant,
validate: validate,
calculateAllow: calculateAllow,
onAllowDropChange: onAllowDropChange,
onAllowUploadChange: onAllowUploadChange,
onDrop: onDrop,
};
return (React.createElement(FileUploaderContext.Provider, { value: contextValue }, children));
};