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

package/lib/esm/components/Composer/Audience/Audience.js

@@ -1,66 +0,0 @@
-import { __rest } from "tslib";
-import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import Checkbox from '@mui/material/Checkbox';
-import parse from 'autosuggest-highlight/parse';
-import match from 'autosuggest-highlight/match';
-import { styled } from '@mui/material/styles';
-import TagChip from '../../../shared/TagChip';
-import { useThemeProps } from '@mui/system';
-const PREFIX = 'SCComposerAudience';
-const classes = {
-    root: `${PREFIX}-root`
-};
-const Root = styled(Autocomplete, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(() => ({
-    minWidth: 120
-}));
-export default function (inProps) {
-    // Props
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
-    const { onChange, defaultValue = [], limitCountTags = 0, checkboxSelect = false, disabled = false, TextFieldProps = {
-        variant: 'outlined',
-        label: React.createElement(FormattedMessage, { id: "ui.composer.audience.tags.label", defaultMessage: "ui.composer.audience.tags.label" })
-    }, tags = [] } = props, rest = __rest(props, ["onChange", "defaultValue", "limitCountTags", "checkboxSelect", "disabled", "TextFieldProps", "tags"]);
-    // State
-    const [open, setOpen] = useState(false);
-    const [value, setValue] = useState(defaultValue);
-    // Handlers
-    const handleOpen = () => {
-        setOpen(true);
-    };
-    const handleClose = () => {
-        setOpen(false);
-    };
-    const handleChange = (event, value) => {
-        let newValue = null;
-        if (limitCountTags > 0) {
-            const [...rest] = value;
-            newValue = rest.slice(-1 * limitCountTags);
-        }
-        else {
-            newValue = value;
-        }
-        setValue(newValue);
-        onChange && onChange(newValue);
-    };
-    return (React.createElement(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, disabled: disabled, multiple: true, options: tags || [], getOptionLabel: (option) => option.name || '', value: value, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: React.createElement(FormattedMessage, { id: "ui.composer.audience.tags.empty", defaultMessage: "ui.composer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
-            return value.map((option, index) => React.createElement(TagChip, Object.assign({ key: option.id, tag: option }, getTagProps({ index }))));
-        }, renderOption: (props, option, { selected, inputValue }) => {
-            const matches = match(option.name, inputValue);
-            const parts = parse(option.name, matches);
-            return (React.createElement("li", Object.assign({}, props),
-                checkboxSelect && React.createElement(Checkbox, { style: { marginRight: 8 }, checked: selected }),
-                React.createElement(TagChip, { key: option.id, tag: option, label: React.createElement(React.Fragment, null, parts.map((part, index) => (React.createElement("span", { key: index, style: { fontWeight: part.highlight ? 700 : 400 } }, part.text)))) })));
-        }, renderInput: (params) => {
-            return (React.createElement(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: React.createElement(React.Fragment, null, params.InputProps.endAdornment) }) })));
-        } }, rest)));
-}

package/lib/esm/components/Composer/Audience/index.d.ts

@@ -1,3 +0,0 @@
-import Audience, { AudienceProps } from './Audience';
-export default Audience;
-export { AudienceProps };

package/lib/esm/components/Composer/Audience/index.js

@@ -1,2 +0,0 @@
-import Audience from './Audience';
-export default Audience;

package/lib/esm/components/Composer/Poll/Poll.d.ts

@@ -1,31 +0,0 @@
-import { SCFeedWidgetType } from '../../../types/feed';
-import { SCPollType } from '@selfcommunity/types';
-export interface PollProps {
-    /**
-     * Id of the feed object
-     * @default 'poll'
-     */
-    id?: string;
-    /**
-     * Overrides or extends the styles applied to the component.
-     * @default null
-     */
-    className?: string;
-    /**
-     * Value of the component
-     */
-    value?: SCPollType | null;
-    /**
-     * Widgets to insert into the feed
-     * @default empty array
-     */
-    error?: SCFeedWidgetType[];
-    /**
-     * Callback for change event on poll object
-     * @param value
-     * @default empty object
-     */
-    onChange: (value: SCPollType) => void;
-}
-declare const _default: (inProps: PollProps) => JSX.Element;
-export default _default;

package/lib/esm/components/Composer/Poll/Poll.js

@@ -1,149 +0,0 @@
-import { __rest } from "tslib";
-import React, { forwardRef, useEffect, useState } from 'react';
-import { Box, Button, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, TextField, Tooltip, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import Icon from '@mui/material/Icon';
-import { ReactSortable } from 'react-sortablejs';
-import InputAdornment from '@mui/material/InputAdornment';
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_POLL_MIN_CLOSE_DATE_DELTA, COMPOSER_POLL_TITLE_MAX_LENGTH } from '../../../constants/Composer';
-import itLocale from 'date-fns/locale/it';
-import enLocale from 'date-fns/locale/en-US';
-import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
-import { parseISO } from 'date-fns';
-const localeMap = {
-    en: enLocale,
-    it: itLocale
-};
-const PREFIX = 'SCComposerPoll';
-const classes = {
-    root: `${PREFIX}-root`,
-    generalError: `${PREFIX}-generalError`,
-    title: `${PREFIX}-title`,
-    choices: `${PREFIX}-choices`,
-    choiceNew: `${PREFIX}-choice-new`,
-    metadata: `${PREFIX}-metadata`
-};
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    padding: theme.spacing(2),
-    [`& .${classes.generalError}`]: {
-        marginBottom: theme.spacing(2),
-        color: theme.palette.error.main
-    },
-    [`& .${classes.title}, & .${classes.choices}, & .${classes.choiceNew}, & .${classes.metadata}`]: {
-        marginBottom: theme.spacing(3)
-    },
-    [`& .${classes.choices} .MuiTextField-root`]: {
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.metadata}`]: {
-        marginTop: theme.spacing(3)
-    }
-}));
-const messages = defineMessages({
-    choicePlaceholder: {
-        id: 'ui.composer.poll.choice.placeholder',
-        defaultMessage: 'ui.composer.poll.choice.placeholder'
-    }
-});
-const SortableComponent = forwardRef((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(FormGroup, Object.assign({ direction: "column", ref: ref }, props), children));
-});
-/**
- * Default poll
- */
-const DEFAULT_CHOICE = { choice: '' };
-const DEFAULT_POLL = {
-    title: '',
-    multiple_choices: false,
-    expiration_at: null,
-    choices: [Object.assign({}, DEFAULT_CHOICE), Object.assign({}, DEFAULT_CHOICE)]
-};
-export default (inProps) => {
-    // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
-    const { id = 'poll', className = null, value = Object.assign({}, DEFAULT_POLL), error = {}, onChange } = props;
-    const { titleError = null, error: generalError = null } = Object.assign({}, error);
-    // STATE
-    const [title, setTitle] = useState(value !== null ? value.title : DEFAULT_POLL.title);
-    const [multiple, setMultiple] = useState(value !== null ? value.multiple_choices : DEFAULT_POLL.multiple_choices);
-    const [expiration, setExpiration] = React.useState(value !== null ? value.expiration_at : DEFAULT_POLL.expiration_at);
-    const _choicesInitialState = [...(value !== null ? value.choices : DEFAULT_POLL.choices)];
-    while (_choicesInitialState.length < COMPOSER_POLL_MIN_CHOICES) {
-        _choicesInitialState.push(Object.assign({}, DEFAULT_CHOICE));
-    }
-    const [choices, setChoices] = useState(_choicesInitialState);
-    // INTL
-    const intl = useIntl();
-    // Component update
-    useEffect(() => {
-        if (onChange && (title || titleError || expiration !== null || choices.filter((c) => c.choice.length > 0).length > 0)) {
-            onChange({ title, expiration_at: expiration, multiple_choices: multiple, choices: choices.filter((c) => c.choice.length > 0) });
-        }
-    }, [title, multiple, expiration, choices]);
-    // HANDLERS
-    const handleChangeTitle = (event) => {
-        setTitle(event.target.value);
-    };
-    const handleChangeMultiple = (event) => {
-        setMultiple(event.target.checked);
-    };
-    const handleChangeExpiration = (value) => {
-        setExpiration(value);
-    };
-    const handleAddChoice = () => {
-        setChoices([...choices, Object.assign({}, DEFAULT_CHOICE)]);
-    };
-    const handleChangeChoice = (index) => {
-        return (event) => {
-            const _choices = [...choices];
-            _choices[index].choice = event.target.value;
-            setChoices(_choices);
-        };
-    };
-    const handleDeleteChoice = (index) => {
-        return () => {
-            const _choices = [...choices];
-            _choices.splice(index, 1);
-            setChoices(_choices);
-        };
-    };
-    const minDate = new Date();
-    minDate.setDate(minDate.getDate() + COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
-    return (React.createElement(Root, { id: id, className: classNames(classes.root, className) },
-        generalError && React.createElement(Typography, { className: classes.generalError }, generalError),
-        React.createElement(Box, { className: classes.title },
-            React.createElement(TextField, { label: React.createElement(FormattedMessage, { id: "ui.composer.poll.title", defaultMessage: "ui.composer.poll.title" }), variant: "outlined", value: title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
-                    endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_POLL_TITLE_MAX_LENGTH - title.length)
-                } })),
-        React.createElement(Box, { className: classes.choices },
-            React.createElement(ReactSortable, { list: [...choices], setList: (newSort) => setChoices(newSort), tag: SortableComponent }, choices.map((choice, index) => (React.createElement(TextField, { key: index, placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", InputProps: {
-                    startAdornment: (React.createElement(InputAdornment, { position: "start" },
-                        React.createElement(Icon, null, "drag"))),
-                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        React.createElement(Tooltip, { title: choices.length <= COMPOSER_POLL_MIN_CHOICES ? (React.createElement(FormattedMessage, { id: "ui.composer.poll.choice.delete.disabled", defaultMessage: "ui.composer.poll.choice.delete.disabled" })) : (React.createElement(FormattedMessage, { id: "ui.composer.poll.choice.delete", defaultMessage: "ui.composer.poll.choice.delete" })) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleDeleteChoice(index), disabled: choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" },
-                                    React.createElement(Icon, null, "delete"))))))
-                } }))))),
-        React.createElement(Box, { className: classes.choiceNew },
-            React.createElement(Button, { color: "inherit", variant: "text", onClick: handleAddChoice },
-                React.createElement(Icon, null, "add"),
-                React.createElement(FormattedMessage, { id: "ui.composer.poll.choice.add", defaultMessage: "ui.composer.choice.add" }))),
-        React.createElement(Divider, null),
-        React.createElement(FormGroup, { className: classes.metadata },
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: multiple, onChange: handleChangeMultiple }), label: React.createElement(FormattedMessage, { id: "ui.composer.poll.multiple", defaultMessage: "ui.composer.poll.multiple" }) }),
-            React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: localeMap[intl.locale] },
-                React.createElement(DatePicker, { label: React.createElement(FormattedMessage, { id: "ui.composer.poll.expiration", defaultMessage: "ui.composer.poll.expiration" }), value: typeof expiration === 'string' ? parseISO(expiration) : expiration, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate })))));
-};

package/lib/esm/components/Composer/Poll/index.d.ts

@@ -1,3 +0,0 @@
-import Poll, { PollProps } from './Poll';
-export default Poll;
-export { PollProps };

package/lib/esm/components/Composer/Poll/index.js

@@ -1,2 +0,0 @@
-import Poll from './Poll';
-export default Poll;

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

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

package/lib/esm/shared/Media/Document/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 document" }),
-        React.createElement(Icon, null, "picture_as_pdf")));
-};

package/lib/esm/shared/Media/Document/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/Document/EditComponent.js

@@ -1,101 +0,0 @@
-import { __rest } from "tslib";
-import { asUploadButton } from '@rpldy/upload-button';
-import React, { forwardRef, useCallback, 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 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';
-import Icon from '@mui/material/Icon';
-import UploadDropZone from '@rpldy/upload-drop-zone';
-const PREFIX = 'SCMediaActionDocument';
-const classes = {
-    root: `${PREFIX}-root`,
-    preview: `${PREFIX}-preview`,
-    upload: `${PREFIX}-upload`,
-    dragOver: `${PREFIX}-dragOver`,
-    uploadBtn: `${PREFIX}-uploadBtn`
-};
-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'
-    },
-    [`& .${classes.upload}`]: {
-        textAlign: 'center'
-    }
-}));
-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 = [], onProgress, onSuccess, onSort, onDelete } = props;
-    // STATE
-    const [uploading, setUploading] = useState({});
-    const [errors, setErrors] = useState({});
-    // CONTEXT
-    const scContext = useContext(SCContext);
-    // FILTER
-    const filterByMime = useCallback((file) => {
-        //filter out files larger than 5MB
-        return file.type === 'application/pdf';
-    }, []);
-    // HANDLERS
-    const handleSuccess = (media) => {
-        onSuccess(media);
-    };
-    const handleProgress = (chunks) => {
-        setUploading(Object.assign({}, chunks));
-        onProgress && onProgress(Object.values(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, { className: classes.root },
-        (medias.length > 0 || Object.values(uploading).length > 0) && (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, { title: media.title, 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)}%`) }))))))),
-        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(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", fileFilter: filterByMime },
-            React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-            React.createElement(UploadDropZone, { onDragOverClassName: classes.dragOver, inputFieldName: "document", className: classes.upload },
-                React.createElement(UploadButton, { inputFieldName: "document", className: classes.uploadBtn })))));
-};

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

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

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

@@ -1,41 +0,0 @@
-import { __rest } from "tslib";
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import ImagePreview from '../Image/PreviewComponent';
-import { MAX_GRID_IMAGES } from '../../../constants/Media';
-const PREFIX = 'SCPreviewMediaDocument';
-const classes = {
-    root: `${PREFIX}-root`
-};
-const Root = styled(ImagePreview, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
-export default (props) => {
-    // PROPS
-    const { medias = [], onMediaClick } = props, rest = __rest(props, ["medias", "onMediaClick"]);
-    /**
-     * Handles click on pdf
-     * @param doc
-     */
-    const handleClickOnPdf = (doc) => {
-        if (doc && doc.index >= MAX_GRID_IMAGES - 1) {
-            // Open the post/discussion
-            // history.push(url(threadType, {id: thread.id, slug: thread.slug})());
-        }
-        else if (doc.src && doc.src.url) {
-            // Open file in target blank
-            let win = window.open(doc.src.url, '_blank');
-            win.focus();
-        }
-        onMediaClick(doc.src);
-    };
-    /**
-     * Renders document preview
-     */
-    if (medias.length > 0) {
-        return React.createElement(Root, Object.assign({ className: classes.root, medias: medias }, rest, { onClick: handleClickOnPdf }));
-    }
-    return null;
-};

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

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

package/lib/esm/shared/Media/Document/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_DOCUMENT } from '../../../constants/Media';
-const Document = {
-    name: 'document',
-    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_DOCUMENT
-};
-export default Document;

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

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

package/lib/esm/shared/Media/Image/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 image" }),
-        React.createElement(Icon, null, "image")));
-};

package/lib/esm/shared/Media/Image/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/Image/EditComponent.js

@@ -1,100 +0,0 @@
-import { __rest } from "tslib";
-import { asUploadButton } from '@rpldy/upload-button';
-import React, { forwardRef, useCallback, useContext, useState } from 'react';
-import { Alert, AlertTitle, Box, Button as MuiButton, Fade, IconButton, ImageList, ImageListItem, ImageListItemBar, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
-import { FormattedMessage } from 'react-intl';
-import { ReactSortable } from 'react-sortablejs';
-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';
-import UploadDropZone from '@rpldy/upload-drop-zone';
-const PREFIX = 'SCMediaActionImage';
-const classes = {
-    root: `${PREFIX}-root`,
-    preview: `${PREFIX}-preview`,
-    upload: `${PREFIX}-upload`,
-    dragOver: `${PREFIX}-dragOver`,
-    uploadBtn: `${PREFIX}-uploadBtn`
-};
-const Root = styled(Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    padding: theme.spacing(),
-    [`& .${classes.preview}`]: {
-        backgroundSize: 'cover !important',
-        backgroundPosition: 'center !important',
-        backgroundRepeat: 'no-repeat !important',
-        height: 200,
-        position: 'relative'
-    },
-    [`& .${classes.upload}`]: {
-        textAlign: 'center'
-    }
-}));
-const UploadButton = asUploadButton(forwardRef((props, ref) => (React.createElement(MuiButton, Object.assign({}, props, { "aria-label": "upload image", ref: ref, variant: "outlined", color: "inherit" }),
-    React.createElement(Icon, null, "image"),
-    " ",
-    React.createElement(FormattedMessage, { id: "ui.composer.media.image.add", defaultMessage: "ui.composer.media.image.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 = [], onProgress, onSuccess, onSort, onDelete } = props;
-    // STATE
-    const [uploading, setUploading] = useState({});
-    const [errors, setErrors] = useState({});
-    // CONTEXT
-    const scContext = useContext(SCContext);
-    // FILTER
-    const filterByMime = useCallback((file) => {
-        return file.type.startsWith('image/');
-    }, []);
-    // HANDLERS
-    const handleSuccess = (media) => {
-        onSuccess(media);
-    };
-    const handleProgress = (chunks) => {
-        setUploading(Object.assign({}, chunks));
-        onProgress && onProgress(Object.values(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, { className: classes.root },
-        (medias.length > 0 || Object.values(uploading).length > 0) && (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, { 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(ImageListItemBar, { title: React.createElement(Typography, { align: "center" }, `${Math.round(media.completed)}%`) }))))))),
-        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(ChunkedUploady, { destination: {
-                url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
-                method: Endpoints.ComposerChunkUploadMedia.method
-            }, fileFilter: filterByMime, chunkSize: 204800, multiple: true, accept: "image/*;capture=camera" },
-            React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-            React.createElement(UploadDropZone, { onDragOverClassName: classes.dragOver, inputFieldName: "image", className: classes.upload },
-                React.createElement(UploadButton, { inputFieldName: "image", className: classes.uploadBtn })))));
-};

package/lib/esm/shared/Media/Image/PreviewImage/index.js

@@ -1,38 +0,0 @@
-import { __rest } from "tslib";
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Lightbox from '../../../Lightbox';
-const PREFIX = 'SCPreviewImage';
-const classes = {
-    root: `${PREFIX}-root`
-};
-const Root = styled(Lightbox, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(() => ({}));
-export default function PreviewImage(props) {
-    // PROPS
-    const { images = [], index = 0, onClose, onIndexChange } = props, rest = __rest(props, ["images", "index", "onClose", "onIndexChange"]);
-    /**
-     * Gets image url
-     * @param image
-     */
-    function getImageUrl(image) {
-        if (typeof image === 'object') {
-            return image.image ? image.image : '/static/frontend_v2/images/image.svg';
-        }
-        return image;
-    }
-    /**
-     * Gets image key identifier
-     * @param image
-     */
-    function getImageId(image) {
-        return image.id;
-    }
-    /**
-     * Renders root object
-     */
-    return (React.createElement(Root, Object.assign({}, rest, { className: classes.root, images: images.map((item, index) => ({ src: getImageUrl(item), key: index })), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange })));
-}

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

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

package/lib/esm/shared/Media/Image/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_IMAGE } from '../../../constants/Media';
-const Image = {
-    name: 'image',
-    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_IMAGE
-};
-export default Image;

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

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

package/lib/esm/shared/Media/Link/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": "add link" }),
-        React.createElement(Icon, null, "link")));
-};

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

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