@brizy/ui/lib/MultipleUpload/index.js

React elements in Brizy style

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultipleUploadItem = exports.MultipleUpload = void 0;
const react_1 = __importStar(require("react"));
const react_virtuoso_1 = require("react-virtuoso");
const classNamesFn_1 = require("../classNamesFn");
const getFieldsTheme_1 = require("../utils/getFieldsTheme");
const utils_1 = require("./utils");
const MultipleUploadItem_1 = require("./components/MultipleUploadItem");
Object.defineProperty(exports, "MultipleUploadItem", { enumerable: true, get: function () { return MultipleUploadItem_1.MultipleUploadItem; } });
const UploadButton_1 = require("./components/UploadButton");
const CustomGridItem_1 = require("./components/CustomGridItem");
const CustomGridList_1 = require("./components/CustomGridList");
const CustomGridScroller_1 = require("./components/CustomGridScroller");
const constants_1 = require("../constants");
const MultipleUpload = ({ onUpload, onClick, size = "middle", disabled, children, theme, uploadButtonPosition = "end", gridItemPadding, gridContainerStyle, header, acceptableTypes, }) => {
    const className = (0, classNamesFn_1.classNames)()("multiupload", `multiupload--${size}`, {
        "multiupload--disabled": disabled,
    });
    const gridClassname = (0, classNamesFn_1.classNames)()("multiupload__virtualized-wrapper", `multiupload__virtualized-wrapper--${size}`);
    const _handleChange = (0, react_1.useCallback)(({ target }) => {
        var _a;
        if ((_a = target.files) === null || _a === void 0 ? void 0 : _a.length) {
            onUpload === null || onUpload === void 0 ? void 0 : onUpload(Array.from(target.files));
        }
    }, [onUpload]);
    const reactChildrenArray = (0, react_1.useMemo)(() => [
        ...(uploadButtonPosition === "start"
            ? [
                react_1.default.createElement(UploadButton_1.UploadButton, { key: "upload button", disabled: disabled, handleChange: _handleChange, onClick: onClick, withText: size !== "small", acceptableTypes: acceptableTypes }),
            ]
            : []),
        ...react_1.default.Children.toArray(children),
        ...(uploadButtonPosition === "end"
            ? [
                react_1.default.createElement(UploadButton_1.UploadButton, { key: "upload button", disabled: disabled, onClick: onClick, handleChange: _handleChange, withText: size !== "small", acceptableTypes: acceptableTypes }),
            ]
            : []),
    ], [children, uploadButtonPosition, disabled, size, acceptableTypes, _handleChange, onClick]);
    const gridItem = (0, react_1.useCallback)((props) => react_1.default.createElement(CustomGridItem_1.CustomGridItem, Object.assign({}, props, { style: (0, utils_1.getPaddingStyles)(gridItemPadding) })), [gridItemPadding]);
    const gridItemContent = (0, react_1.useCallback)((index) => reactChildrenArray[index], [reactChildrenArray]);
    const scrollerRef = (0, react_1.useCallback)((ref) => {
        if (ref) {
            ref.className = gridClassname;
            ref.style.setProperty(`--${constants_1.BRZ_PREFIX}-grid-list-row-gap`, Array.isArray(gridItemPadding) ? `${gridItemPadding[0]}px` : "0px");
        }
    }, [gridClassname, gridItemPadding]);
    const gridComponents = (0, react_1.useMemo)(() => ({
        Item: gridItem,
        Scroller: CustomGridScroller_1.CustomGridScroller,
        List: CustomGridList_1.CustomGridList,
        Header: header,
    }), [gridItem, header]);
    return (react_1.default.createElement("div", { className: className, style: (0, getFieldsTheme_1.getFieldsStyleTheme)(theme) },
        react_1.default.createElement(react_virtuoso_1.VirtuosoGrid, { style: gridContainerStyle, scrollerRef: scrollerRef, totalCount: reactChildrenArray.length, itemContent: gridItemContent, listClassName: `${constants_1.BRZ_PREFIX}-multiupload__virtualized-list`, itemClassName: `${constants_1.BRZ_PREFIX}-multiupload__virtualized-list-item`, components: gridComponents })));
};
exports.MultipleUpload = MultipleUpload;