@selfcommunity/react-ui 0.7.0-alpha.334 → 0.7.0-alpha.336

package/lib/esm/shared/Media/Link/EditComponent.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Box, IconButton } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
-import { ReactSortable } from 'react-sortablejs';
-import Icon from '@mui/material/Icon';
-import { styled } from '@mui/material/styles';
-import Link from './PreviewComponent';
-import UrlTextField from './UrlTextField';
-const PREFIX = 'SCMediaActionLink';
-const classes = {
-    link: `${PREFIX}-link`,
-    close: `${PREFIX}-close`
-};
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    padding: theme.spacing(),
-    [`& .${classes.link}`]: {
-        position: 'relative'
-    },
-    [`& .${classes.close}`]: {
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        margin: theme.spacing()
-    }
-}));
-export default (props) => {
-    // PROPS
-    const { medias = [], onSuccess, onSort, onDelete } = props;
-    /**
-     * Renders root object
-     */
-    return (React.createElement(Root, null,
-        React.createElement(UrlTextField, { id: "page", name: "page", label: React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: onSuccess }),
-        medias.length > 0 && (React.createElement(ReactSortable, { list: medias, setList: onSort }, medias.map((media) => (React.createElement(Box, { key: media.id, m: 1, className: classes.link },
-            React.createElement(Link, { medias: [media] }),
-            React.createElement(Box, { className: classes.close },
-                React.createElement(IconButton, { onClick: onDelete(media.id), size: "small" },
-                    React.createElement(Icon, null, "delete"))))))))));
-};

package/lib/esm/shared/Media/Share/PreviewComponent.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-declare const _default: ({ medias, adornment }: {
-    medias: any[];
-    GridImageProps?: any;
-    adornment?: React.ReactNode;
-}) => JSX.Element;
-export default _default;

package/lib/esm/shared/Media/Share/PreviewComponent.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import FeedObject from '../../../components/FeedObject';
-import { SCFeedObjectTemplateType } from '../../../types/feedObject';
-import { CacheStrategies } from '@selfcommunity/utils';
-const PREFIX = 'SCPreviewMediaShare';
-const classes = {
-    sharePreview: `${PREFIX}-share-preview`,
-    sharePlaceholder: `${PREFIX}-share-placeholder`
-};
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.sharePreview}`]: {
-        padding: 16
-    },
-    [`& .${classes.sharePlaceholder}`]: {
-        margin: 16
-    }
-}));
-export default ({ medias = [], adornment = null }) => {
-    return (React.createElement(React.Fragment, null, medias.length > 0 && (React.createElement(Root, null,
-        adornment,
-        medias.map((media, i) => (React.createElement(Box, { className: classes.sharePreview, key: i },
-            React.createElement(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST }))))))));
-};

package/lib/esm/shared/Media/Video/EditButton.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (props: any) => JSX.Element;
-export default _default;

package/lib/esm/shared/Media/Video/EditButton.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { IconButton as MUIIconButton } from '@mui/material';
-import Icon from '@mui/material/Icon';
-export default (props) => {
-    return (React.createElement(MUIIconButton, Object.assign({}, props, { "aria-label": "upload video" }),
-        React.createElement(Icon, null, "play_circle_outline")));
-};

package/lib/esm/shared/Media/Video/EditComponent.d.ts

@@ -1,3 +0,0 @@
-import { EditMediaProps } from '../types';
-declare const _default: (props: EditMediaProps) => JSX.Element;
-export default _default;

package/lib/esm/shared/Media/Video/EditComponent.js

@@ -1,87 +0,0 @@
-import { __rest } from "tslib";
-import { asUploadButton } from '@rpldy/upload-button';
-import React, { forwardRef, useContext, useState } from 'react';
-import { Alert, AlertTitle, Box, Button as MuiButton, Fade, IconButton, ImageList, ImageListItem, ImageListItemBar, Typography } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
-import { ReactSortable } from 'react-sortablejs';
-import Icon from '@mui/material/Icon';
-import ChunkedUploady from '@rpldy/chunked-uploady';
-import { Endpoints } from '@selfcommunity/api-services';
-import { SCContext } from '@selfcommunity/react-core';
-import { styled } from '@mui/material/styles';
-import MediaChunkUploader from '../../MediaChunkUploader';
-const PREFIX = 'SCMediaActionVideo';
-const classes = {
-    preview: `${PREFIX}-preview`
-};
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    padding: theme.spacing(),
-    [`& .${classes.preview}`]: {
-        backgroundColor: theme.palette.background.default,
-        height: 200,
-        position: 'relative'
-    }
-}));
-const UploadButton = asUploadButton(forwardRef((props, ref) => (React.createElement(MuiButton, Object.assign({}, props, { "aria-label": "upload document", ref: ref, variant: "outlined", color: "inherit" }),
-    React.createElement(Icon, null, "picture_as_pdf"),
-    " ",
-    React.createElement(FormattedMessage, { id: "ui.composer.media.document.add", defaultMessage: "ui.composer.media.document.add" })))));
-const SortableComponent = forwardRef((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(ImageList, Object.assign({ ref: ref, cols: 3 }, props), children));
-});
-export default (props) => {
-    //PROPS
-    const { medias = [], onSuccess, onSort, onDelete } = props;
-    // STATE
-    const [uploading, setUploading] = useState({});
-    const [errors, setErrors] = useState({});
-    // CONTEXT
-    const scContext = useContext(SCContext);
-    // HANDLERS
-    const handleSuccess = (media) => {
-        onSuccess(media);
-    };
-    const handleProgress = (chunks) => {
-        setUploading(Object.assign({}, chunks));
-    };
-    const handleError = (chunk, error) => {
-        setErrors(Object.assign(Object.assign({}, errors), { [chunk.id]: Object.assign(Object.assign({}, chunk), { error }) }));
-    };
-    const handleRemoveErrors = (id) => {
-        return () => {
-            delete errors[id];
-            setErrors(Object.assign({}, errors));
-        };
-    };
-    /**
-     * Renders root object
-     */
-    return (React.createElement(Root, null,
-        React.createElement(Typography, { gutterBottom: true, component: "div" },
-            React.createElement(ReactSortable, { list: [...medias, ...Object.values(uploading)], setList: (newSort) => onSort(newSort.filter((s) => s.upload_id === undefined)), tag: SortableComponent },
-                medias.map((media) => (React.createElement(ImageListItem, { key: media.id },
-                    React.createElement(Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } }),
-                    React.createElement(ImageListItemBar, { position: "top", actionIcon: React.createElement(IconButton, { onClick: onDelete(media.id), size: "small", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
-                            React.createElement(Icon, null, "delete")) })))),
-                Object.values(uploading).map((media) => (React.createElement(ImageListItem, { key: media.id, className: 'ignore-elements' },
-                    React.createElement(Box, { className: classes.preview, sx: { backgroundImage: `url(${media.image})` } },
-                        React.createElement(Icon, { sx: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' } }, "picture_as_pdf")),
-                    React.createElement(ImageListItemBar, { title: React.createElement(Typography, { align: "center" }, `${Math.round(media.completed)}%`), position: "top" })))))),
-        React.createElement(Box, null, Object.keys(errors).map((id) => (React.createElement(Fade, { in: true, key: id },
-            React.createElement(Alert, { severity: "error", onClose: handleRemoveErrors(id) },
-                React.createElement(AlertTitle, null, errors[id].name),
-                errors[id].error))))),
-        React.createElement(Typography, { align: "center", gutterBottom: true },
-            React.createElement(ChunkedUploady, { destination: {
-                    url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
-                    headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
-                    method: Endpoints.ComposerChunkUploadMedia.method
-                }, chunkSize: 204800, multiple: true, accept: "application/pdf" },
-                React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-                React.createElement(UploadButton, { inputFieldName: "document" })))));
-};

package/lib/esm/shared/Media/Video/PreviewComponent.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-export interface PreviewVideoProps {
-    /**
-     * Medias
-     * @default []
-     */
-    medias: any[];
-    /**
-     * Component adornments
-     * @default null
-     */
-    adornment?: React.ReactNode;
-    /**
-     * Handles on media click
-     */
-    onMediaClick?: (any: any) => void;
-}
-declare const _default: (props: PreviewVideoProps) => JSX.Element;
-export default _default;

package/lib/esm/shared/Media/Video/PreviewComponent.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import LazyLoad from 'react-lazyload';
-import Box from '@mui/material/Box';
-import AutoPlayer from '../../AutoPlayer';
-import { DEFAULT_PRELOAD_OFFSET_VIEWPORT } from '../../../constants/LazyLoad';
-import Skeleton from '@mui/material/Skeleton';
-const PREFIX = 'SCPreviewMediaVideo';
-const classes = {
-    previewVideo: `${PREFIX}-preview-video`
-};
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.previewVideo}`]: {
-        minHeight: 360
-    }
-}));
-export default (props) => {
-    // PROPS
-    const { medias = [], adornment = null, onMediaClick } = props;
-    const handleVideoClick = (link) => {
-        onMediaClick(link);
-    };
-    /**
-     * Renders Video preview
-     */
-    return (React.createElement(React.Fragment, null, medias.length > 0 && (React.createElement(Root, null,
-        adornment,
-        medias.map((v, i) => (React.createElement(LazyLoad, { height: 360, placeholder: React.createElement(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), key: i, once: true, className: classes.previewVideo, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT },
-            React.createElement(AutoPlayer, { url: v.url, width: '100%', onVideoWatch: () => handleVideoClick(v) }))))))));
-};

package/lib/esm/shared/Media/Video/index.d.ts

@@ -1,3 +0,0 @@
-import { SCMediaObjectType } from '../../../types/media';
-declare const Video: SCMediaObjectType;
-export default Video;

package/lib/esm/shared/Media/Video/index.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import PreviewComponent from './PreviewComponent';
-import EditButton from './EditButton';
-import EditComponent from './EditComponent';
-import { MEDIA_TYPE_URL, MEDIA_EMBED_SC_VIMEO_TYPE } from '../../../constants/Media';
-const Video = {
-    name: 'video',
-    previewComponent: (props) => React.createElement(PreviewComponent, Object.assign({}, props)),
-    editButton: (props) => React.createElement(EditButton, Object.assign({}, props)),
-    editComponent: (props) => React.createElement(EditComponent, Object.assign({}, props)),
-    filter: (media) => media.type === MEDIA_TYPE_URL && media.embed && media.embed.embed_type === MEDIA_EMBED_SC_VIMEO_TYPE
-};
-export default Video;

package/lib/esm/shared/MediasPreview/index.d.ts

@@ -1,18 +0,0 @@
-import { SCMediaObjectType } from '../../types/media';
-export interface MediaPreviewProps {
-    /**
-     * Medias preview array
-     */
-    medias: Array<any>;
-    /**
-     * Media types
-     * @default 'image', 'document', 'link', 'share'
-     */
-    mediaObjectTypes?: Array<SCMediaObjectType>;
-    /**
-     * Any other properties
-     */
-    [p: string]: any;
-}
-declare const _default: (props: MediaPreviewProps) => JSX.Element;
-export default _default;

package/lib/esm/shared/MediasPreview/index.js

@@ -1,42 +0,0 @@
-import { __rest } from "tslib";
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Document from '../Media/Document';
-import Image from '../Media/Image';
-import Link from '../Media/Link';
-import Share from '../Media/Share';
-import { useSCMediaClick } from '@selfcommunity/react-core';
-const PREFIX = 'SCMedias';
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    position: 'relative',
-    marginTop: 0,
-    marginLeft: -2,
-    marginRight: -2
-}));
-export default (props) => {
-    //PROPS
-    const { medias, mediaObjectTypes = [Image, Document, Link, Share] } = props, rest = __rest(props, ["medias", "mediaObjectTypes"]);
-    const { handleMediaClick } = useSCMediaClick();
-    if (!medias.length) {
-        /**
-         * Feed without any medias:
-         * don't render anything
-         */
-        return null;
-    }
-    /**
-     * Renders list of media preview
-     * The adornment prop is used to insert the controls
-     * for re-editing the media at the top of the group of elements
-     */
-    return (React.createElement(Root, Object.assign({}, rest), mediaObjectTypes.map((mediaObject) => {
-        const { previewProps = {} } = mediaObject;
-        return (React.createElement("div", { key: mediaObject.name },
-            React.createElement(mediaObject.previewComponent, Object.assign({ medias: medias.filter(mediaObject.filter) }, previewProps, { onMediaClick: handleMediaClick }))));
-    })));
-};