@sb1/ffe-file-upload-react/lib/FileItem.js

Upload file button with validation and list of uploaded files.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileItem = FileItem;
var react_1 = __importDefault(require("react"));
var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
function FileItem(_a) {
    var file = _a.file, onFileDeleted = _a.onFileDeleted, cancelText = _a.cancelText, deleteText = _a.deleteText;
    var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
    var exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
    return (react_1.default.createElement("li", null,
        // File is loading
        !file.document && !file.error && (react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil" },
            react_1.default.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
                react_1.default.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, cancelText),
                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil-info" },
                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil-info-background" }),
                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil-info-filename" }, file.name)))),
        // File finished loading without error
        file.document && !file.error && (react_1.default.createElement("div", { className: "ffe-file-upload__file-item-loaded" },
            react_1.default.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
                react_1.default.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, deleteText),
                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-filename" }, file.name))),
        // File has error
        file.error && (react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error", role: "alert" },
            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-icon" },
                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: exclamationIcon, size: "sm" })),
            react_1.default.createElement("button", { type: "button", id: file.name, className: "ffe-file-upload__file-item-delete-button", onClick: onFileDeleted },
                react_1.default.createElement("span", { className: "ffe-file-upload__file-item-delete-button-text" }, deleteText),
                react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: closeIcon, size: "md", className: "ffe-file-upload__file-item-delete-icon" })),
            react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-info" },
                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-filename" }, file.name),
                react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-message" }, file.error))))));
}