@trellixio/roaster-coffee/lib/components/FileField/FileField.js

Beans' product component library

import * as React from 'react';
import { classNames, useUid } from '@/utils';
function EmptyMarkupPlaceholder({ type, defaultValue }) {
    if (type === 'file')
        return (React.createElement(React.Fragment, null,
            React.createElement("i", { className: "fa-regular fa-file-csv" }),
            React.createElement("span", { className: "filename" }, "No file added")));
    if (defaultValue) {
        return React.createElement("img", { src: defaultValue, alt: "" });
    }
    return (React.createElement("div", { className: "image-placeholder" },
        React.createElement("i", { className: "fa-regular fa-image" })));
}
function Preview({ type, file }) {
    if (type === 'image' && file) {
        const imageUrl = URL.createObjectURL(file);
        return React.createElement("img", { src: imageUrl, alt: file.name });
    }
    return React.createElement("span", { className: "filename" }, file === null || file === void 0 ? void 0 : file.name);
}
export const FileField = React.forwardRef((props, ref) => {
    const { id, label, name, disabled, helpText, inputClassName, onChange, type = 'image', accept = type === 'image' ? 'image/*' : '.csv, .xls', size = 'small', defaultValue, } = props;
    const uid = useUid(id);
    const [value, setValue] = React.useState(null);
    const handleChange = (event) => {
        var _a, _b;
        setValue(((_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0]) || null);
        onChange === null || onChange === void 0 ? void 0 : onChange(((_b = event.currentTarget.files) === null || _b === void 0 ? void 0 : _b[0]) || null);
    };
    return (React.createElement("label", { htmlFor: uid },
        React.createElement("p", null, label),
        React.createElement("div", { className: classNames('file-uploader', size, { uploaded: value }) },
            React.createElement("div", { className: classNames({ 'file-preview': type === 'file', 'image-preview': type === 'image' }) },
                !value && React.createElement(EmptyMarkupPlaceholder, { type: type, defaultValue: defaultValue }),
                value && React.createElement(Preview, { type: type, file: value })),
            React.createElement("div", { className: "file-input" },
                React.createElement("span", null,
                    React.createElement("i", { className: "fa-regular fa-arrow-up-from-bracket" }),
                    " Upload a file"),
                React.createElement("input", { id: uid, name: name, ref: ref, type: "file", disabled: disabled, accept: accept, onChange: handleChange, className: inputClassName }))),
        React.createElement("small", null, helpText)));
});
FileField.displayName = 'FileField';