@selfcommunity/react-ui/lib/cjs/shared/Media/Link/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 DisplayComponent_1 = tslib_1.__importDefault(require("./DisplayComponent"));
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`,
    video: `${constants_1.PREFIX}-media-video`,
    delete: `${constants_1.PREFIX}-delete`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'PreviewRoot'
})(() => ({}));
const PreviewComponent = react_1.default.forwardRef((props, ref) => {
    // PROPS
    const { className, onChange, value = [] } = props, rest = tslib_1.__rest(props, ["className", "onChange", "value"]);
    // MEMO
    const medias = (0, react_1.useMemo)(() => value.filter(filter_1.default), [value]);
    // 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]);
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 && ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO }) }, { children: [(0, jsx_runtime_1.jsx)(DisplayComponent_1.default, { medias: [media] }), (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.id))) }))) })));
});
exports.default = PreviewComponent;