@selfcommunity/react-ui/lib/esm/shared/Media/Link/PreviewComponent.js

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

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useMemo } from 'react';
import { Box, IconButton } from '@mui/material';
import { styled } from '@mui/material/styles';
import Icon from '@mui/material/Icon';
import classNames from 'classnames';
import { ReactSortable } from 'react-sortablejs';
import DisplayComponent from './DisplayComponent';
import { PREFIX } from './constants';
import filter from './filter';
import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
const classes = {
    previewRoot: `${PREFIX}-preview-root`,
    media: `${PREFIX}-media`,
    video: `${PREFIX}-media-video`,
    delete: `${PREFIX}-delete`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'PreviewRoot'
})(() => ({}));
const PreviewComponent = React.forwardRef((props, ref) => {
    // PROPS
    const { className, onChange, value = [] } = props, rest = __rest(props, ["className", "onChange", "value"]);
    // MEMO
    const medias = useMemo(() => value.filter(filter), [value]);
    // HANDLERS
    const handleSort = useCallback((medias) => {
        onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
    }, [onChange, value]);
    const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => (_jsxs(Box, Object.assign({ className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) }, { children: [_jsx(DisplayComponent, { medias: [media] }), _jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))] }), media.id))) }))) })));
});
export default PreviewComponent;