@selfcommunity/react-ui/lib/cjs/shared/Media/File/PreviewComponent.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_sortablejs_1 = require("react-sortablejs");
const constants_1 = require("./constants");
const filter_1 = tslib_1.__importDefault(require("./filter"));
const Media_1 = require("../../../constants/Media");
const classes = {
    previewRoot: `${constants_1.PREFIX}-preview-root`,
    media: `${constants_1.PREFIX}-media`,
    delete: `${constants_1.PREFIX}-delete`,
    title: `${constants_1.PREFIX}-title`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'PreviewRoot'
})(() => ({}));
const SORTABLE_ID = 'file_sort';
const PreviewComponent = react_1.default.forwardRef((props, ref) => {
    // PROPS
    const { className, onChange, value = [] } = props, rest = tslib_1.__rest(props, ["className", "onChange", "value"]);
    // HOOKS
    const theme = (0, material_1.useTheme)();
    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
    // MEMO
    const medias = (0, react_1.useMemo)(() => value.filter(filter_1.default), [value]);
    // EFFECTS
    (0, react_1.useEffect)(() => {
        if (typeof document === undefined) {
            return null;
        }
        const sortable = document.getElementById(SORTABLE_ID);
        if (sortable) {
            sortable.scrollLeft = sortable.scrollWidth;
        }
    }, [medias]);
    // HANDLERS
    const handleSort = (0, react_1.useCallback)((medias) => {
        onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
    }, [onChange, value]);
    const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
    // RENDER
    const mediaElements = (0, react_1.useMemo)(() => medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })), media.title && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [media.type === Media_1.MEDIA_TYPE_DOCUMENT && (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "picture_as_pdf" }), media.title] })))] }), media.id))), [medias]);
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 &&
            (isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: SORTABLE_ID }, { children: mediaElements }))) : ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: mediaElements })))) })));
});
exports.default = PreviewComponent;