@kadconsulting/dry
Version:
KAD Reusable Component Library
41 lines • 3.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import classnames from 'classnames';
import Button from '../Button/Button';
// SVG UploadIcon Component
// TODO: this needs to be replaced by a DRY Icon
const UploadIcon = () => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: _jsx("path", { d: 'M6.66797 13.3333L10.0013 10M10.0013 10L13.3346 13.3333M10.0013 10V17.5M16.668 13.9524C17.6859 13.1117 18.3346 11.8399 18.3346 10.4167C18.3346 7.88536 16.2826 5.83333 13.7513 5.83333C13.5692 5.83333 13.3989 5.73833 13.3064 5.58145C12.2197 3.73736 10.2133 2.5 7.91797 2.5C4.46619 2.5 1.66797 5.29822 1.66797 8.75C1.66797 10.4718 2.36417 12.0309 3.49043 13.1613', stroke: '#475467', strokeWidth: '1.66667', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
// import * as Utils from "./Attachments.utils.js";
import './Attachments.scss';
const Attachments = forwardRef(({ id, className, onFilesSelected, fileTypes, selectedFiles = [] }, ref) => {
const fileInputRef = useRef(null);
const removeFile = (index) => {
const newSelectedFiles = [...selectedFiles];
newSelectedFiles.splice(index, 1);
onFilesSelected(newSelectedFiles);
};
const handleFileChange = (e) => {
if (e.target.files) {
const newSelectedFiles = Array.from(e.target.files);
onFilesSelected([...selectedFiles, ...newSelectedFiles]);
}
};
const handleDragOver = (e) => {
e.preventDefault();
};
const handleDrop = (e) => {
e.preventDefault();
if (e.dataTransfer.files) {
const newSelectedFiles = Array.from(e.dataTransfer.files);
onFilesSelected([...selectedFiles, ...newSelectedFiles]);
}
};
const openFilePicker = () => {
if (fileInputRef.current) {
fileInputRef.current.click();
}
};
return (_jsxs("div", { id: id, ref: ref, className: classnames(className, 'dry-attachments'), children: [_jsxs("div", { className: 'dry-attachments__upload-area', onDragOver: handleDragOver, onDrop: handleDrop, children: [_jsx(Button, { onClick: openFilePicker, icon: _jsx(UploadIcon, {}) }), _jsxs("div", { className: 'dry-attachments__upload-area-text-container', children: [_jsx(Button, { onClick: openFilePicker, text: 'Click to upload', buttonType: 'ghost-text' }), _jsx("span", { children: "or drag and drop" })] }), _jsx("p", { children: "SVG, PNG, JPG, or GIF (max. 800x400px)" })] }), _jsx("input", { type: 'file', ref: fileInputRef, style: { display: 'none' }, multiple: true, accept: fileTypes.join(','), onChange: handleFileChange }), _jsx("div", { className: 'dry-attachments__file-list', children: selectedFiles.map((file, index) => (_jsxs("div", { className: 'dry-attachments__file-item', children: [_jsx("span", { children: file.name }), _jsx("button", { className: 'dry-attachments__remove-button', onClick: () => removeFile(index), children: "x" })] }, index))) })] }));
});
export default Attachments;
//# sourceMappingURL=Attachments.js.map