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

React elements in Brizy style

import React, { useCallback, useMemo } from "react";
import { VirtuosoGrid } from "react-virtuoso";
import { classNames } from "../classNamesFn";
import { getFieldsStyleTheme } from "../utils/getFieldsTheme";
import { getPaddingStyles } from "./utils";
import { MultipleUploadItem } from "./components/MultipleUploadItem";
import { UploadButton } from "./components/UploadButton";
import { CustomGridItem } from "./components/CustomGridItem";
import { CustomGridList } from "./components/CustomGridList";
import { CustomGridScroller } from "./components/CustomGridScroller";
import { BRZ_PREFIX } from "../constants";
export const MultipleUpload = ({ onUpload, onClick, size = "middle", disabled, children, theme, uploadButtonPosition = "end", gridItemPadding, gridContainerStyle, header, acceptableTypes, }) => {
    const className = classNames()("multiupload", `multiupload--${size}`, {
        "multiupload--disabled": disabled,
    });
    const gridClassname = classNames()("multiupload__virtualized-wrapper", `multiupload__virtualized-wrapper--${size}`);
    const _handleChange = 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 = useMemo(() => [
        ...(uploadButtonPosition === "start"
            ? [
                React.createElement(UploadButton, { key: "upload button", disabled: disabled, handleChange: _handleChange, onClick: onClick, withText: size !== "small", acceptableTypes: acceptableTypes }),
            ]
            : []),
        ...React.Children.toArray(children),
        ...(uploadButtonPosition === "end"
            ? [
                React.createElement(UploadButton, { key: "upload button", disabled: disabled, onClick: onClick, handleChange: _handleChange, withText: size !== "small", acceptableTypes: acceptableTypes }),
            ]
            : []),
    ], [children, uploadButtonPosition, disabled, size, acceptableTypes, _handleChange, onClick]);
    const gridItem = useCallback((props) => React.createElement(CustomGridItem, Object.assign({}, props, { style: getPaddingStyles(gridItemPadding) })), [gridItemPadding]);
    const gridItemContent = useCallback((index) => reactChildrenArray[index], [reactChildrenArray]);
    const scrollerRef = useCallback((ref) => {
        if (ref) {
            ref.className = gridClassname;
            ref.style.setProperty(`--${BRZ_PREFIX}-grid-list-row-gap`, Array.isArray(gridItemPadding) ? `${gridItemPadding[0]}px` : "0px");
        }
    }, [gridClassname, gridItemPadding]);
    const gridComponents = useMemo(() => ({
        Item: gridItem,
        Scroller: CustomGridScroller,
        List: CustomGridList,
        Header: header,
    }), [gridItem, header]);
    return (React.createElement("div", { className: className, style: getFieldsStyleTheme(theme) },
        React.createElement(VirtuosoGrid, { style: gridContainerStyle, scrollerRef: scrollerRef, totalCount: reactChildrenArray.length, itemContent: gridItemContent, listClassName: `${BRZ_PREFIX}-multiupload__virtualized-list`, itemClassName: `${BRZ_PREFIX}-multiupload__virtualized-list-item`, components: gridComponents })));
};
export { MultipleUploadItem };