@smitch/fluid
Version:
A Next/React ui-component libray.
52 lines (51 loc) • 3.3 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import Files from './Files';
import { acceptTypes } from './types';
import { Label, Input, Select, Checkbox } from '..';
import { FaUpload } from 'react-icons/fa';
var sizes = {
md: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
};
var FileUpload = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, _d = _a.accept, accept = _d === void 0 ? '*' : _d, _e = _a.label, label = _e === void 0 ? 'File Upload' : _e, icon = _a.icon, onChange = _a.onChange, setFiles = _a.setFiles, _f = _a.showMultiple, showMultiple = _f === void 0 ? false : _f, _g = _a.multipleLabel, multipleLabel = _g === void 0 ? 'Select Multiple' : _g;
var _h = useState(null), files = _h[0], setLocalFiles = _h[1];
var _j = useState(false), multiple = _j[0], setMultiple = _j[1];
var _k = useState(accept), selectedAcceptType = _k[0], setSelectedAcceptType = _k[1];
var handleAcceptTypeChange = function (event) {
setSelectedAcceptType(event.target.value);
setLocalFiles(null);
if (setFiles) {
setFiles([]);
}
};
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
var handleChange = function (event) {
setMultiple(event.target.checked);
};
var handleFileChange = function (event) {
var files = event.target.files;
if (files) {
setLocalFiles(files);
if (onChange)
onChange(event);
}
};
var deleteFile = function (fileToDelete) {
if (files) {
var updatedFiles = Array.from(files).filter(function (file) { return file !== fileToDelete; });
var dataTransfer_1 = new DataTransfer();
updatedFiles.forEach(function (file) { return dataTransfer_1.items.add(file); });
setLocalFiles(dataTransfer_1.files);
if (setFiles) {
setFiles(updatedFiles);
}
}
};
return (_jsxs("div", { className: twMerge("fileupload group overflow-hidden ".concat(sizeClasses), className), "data-testid": 'fileupload', children: [_jsxs("div", { className: 'flex flex-row gap-2', children: [_jsx(Label, { label: icon ? _jsx(FaUpload, { title: label }) : label, layout: 'col', size: size, type: 'file', className: 'items-center !flex !flex-row !w-auto', children: _jsx(Input, { accept: selectedAcceptType, name: 'file', type: 'file', onChange: handleFileChange, multiple: multiple, size: size }) }), _jsxs("div", { className: 'grid grid-cols-2 gap-4 items-center', children: [_jsx(Select, { options: acceptTypes, id: 'acceptType', value: selectedAcceptType, defaultValue: accept, onChange: handleAcceptTypeChange, dropdownSize: size, className: 'border-neutral', rounded: 'md' }), showMultiple && (_jsx("div", { className: '', children: _jsx(Checkbox, { label: multipleLabel, name: 'multiple', size: size, onChange: handleChange, className: '!gap-2 border-neutral', rounded: 'full' }) }))] })] }), files && files.length > 0 && (_jsx(Files, { files: Array.from(files), deleteFile: deleteFile }))] }));
};
export default FileUpload;