@ezform/mui/lib/components/FieldFile.js

Material UI form components for use with EZForm React validation and form library

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { memo } from "react";
import { FormControl, Grid, Button, FormLabel, FormHelperText, Tooltip } from "@material-ui/core";
import { useField, propsEqual } from "@ezform/core";
import { EzformMuiConfig } from "../config";
export var FieldFile = memo(function (props) {
    var _a = __assign(__assign({}, EzformMuiConfig()), props), id = _a.id, name = _a.name, form = _a.form, _b = _a.validator, validator = _b === void 0 ? function () { return null; } : _b, disabled = _a.disabled, _c = _a.readonly, readonly = _c === void 0 ? form.isReadonly : _c, label = _a.label, buttonLabel = _a.buttonLabel, defaultHelperText = _a.defaultHelperText, noFileSelectedText = _a.noFileSelectedText, fileSelectedText = _a.fileSelectedText, variant = _a.variant, color = _a.color, _d = _a.multiple, multiple = _d === void 0 ? false : _d, accept = _a.accept, defaultValue = _a.defaultValue;
    useField(name, validator, form, defaultValue);
    var handleChange = function (e) {
        var files = e.target.files;
        // canceled file input
        if (files.length === 0) {
            form.setField(name, null);
        }
        else if (multiple) {
            form.setField(name, files);
        }
        else {
            form.setField(name, files[0]);
        }
    };
    var getFileText = function () {
        var formVal = form.getField(name);
        if (!formVal) {
            return "";
        }
        if (formVal.length && formVal.length > 0) {
            return " – " + fileSelectedText.replace("$n", formVal.length);
        }
        return " – " + fileSelectedText.replace("$n", "1");
    };
    var formatBytes = function (bytes, decimals) {
        if (decimals === void 0) { decimals = 2; }
        if (bytes === 0)
            return "0 Bytes";
        var k = 1024;
        var dm = decimals < 0 ? 0 : decimals;
        var sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
        var i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
    };
    var getTooltipText = function () {
        var formVal = form.getField(name);
        if (!formVal) {
            return noFileSelectedText;
        }
        if (formVal.length && formVal.length > 0) {
            console.log(formVal);
            return (React.createElement(Grid, { container: true, justify: "space-between" }, Array.from(formVal).map(function (f, i) { return (React.createElement(React.Fragment, { key: f.name + "_" + i },
                React.createElement(Grid, { item: true, xs: 8 }, f.name),
                React.createElement(Grid, { item: true, xs: 4, style: { textAlign: "right" } },
                    "(",
                    formatBytes(f.size),
                    ")"))); })));
        }
        return formVal.name + " (" + formatBytes(formVal.size) + ")";
    };
    return (React.createElement(FormControl, { fullWidth: true },
        React.createElement(FormLabel, { error: form.hasError(name) }, label),
        React.createElement(Tooltip, { title: getTooltipText() },
            React.createElement(Button, { variant: variant, color: color, disabled: disabled, style: { marginTop: 5 }, onClick: readonly ? function (e) { return e.preventDefault(); } : undefined },
                React.createElement("input", { multiple: multiple, type: "file", id: id, name: name, onChange: handleChange, style: {
                        position: "absolute",
                        left: 0,
                        top: 0,
                        width: "100%",
                        height: "100%",
                        opacity: 0,
                        cursor: "pointer",
                    }, title: " ", accept: accept }),
                buttonLabel,
                " ",
                getFileText())),
        form.hasError(name) ? (React.createElement(FormHelperText, { error: form.hasError(name) }, form.getHelperText(name))) : (React.createElement(FormHelperText, null, defaultHelperText))));
}, propsEqual);