@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
64 lines (63 loc) • 3.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from 'react';
import { Box, Icon, IconButton, InputAdornment, Typography, styled } from '@mui/material';
import classNames from 'classnames';
import Editor from '../../../Editor';
import { FormattedMessage } from 'react-intl';
import { PREFIX } from '../../constants';
import { File, Link } from '../../../../shared/Media';
import UrlTextField from '../../../../shared/Media/Link/UrlTextField';
const classes = {
root: `${PREFIX}-content-lesson-root`,
generalError: `${PREFIX}-general-error`,
title: `${PREFIX}-content-lesson-title`,
medias: `${PREFIX}-content-lesson-medias`,
editor: `${PREFIX}-content-lesson-editor`,
link: `${PREFIX}-content-lesson-link`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'ContentLessonRoot'
})(({ theme }) => ({}));
export default (props) => {
// PROPS
const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
const { error: generalError = null } = Object.assign({}, error);
const mediaObjectTypes = [File, Link];
const [medias, setMedias] = useState((value === null || value === void 0 ? void 0 : value.medias) || []);
const [openLink, setOpenLink] = useState();
const linkInputRef = useRef(null);
// HANDLERS
const handleChangeHtml = useCallback((html) => {
onChange(html);
}, [value]);
const handleChangeMedias = useCallback((value) => {
setMedias([...value]);
onMediaChange([...value]);
}, []);
const handleChangeMedia = (value) => {
setMedias((prev) => [...prev, value]);
onMediaChange([...medias, value]);
};
const handleLinkAdd = useCallback((media) => {
setMedias([...medias, media]);
setOpenLink(false);
}, [medias]);
useEffect(() => {
if (openLink && linkInputRef.current) {
linkInputRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, [openLink]);
// RENDER
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html, ToolBarProps: {
customLink: _jsx(Link.triggerButton, { color: "default", onClick: () => setOpenLink(true) }, Link.name),
uploadImage: false,
uploadFile: true
} })), openLink && (_jsx(UrlTextField, { inputRef: linkInputRef, className: classes.link, id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleLinkAdd, InputProps: {
endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: () => setOpenLink(false) }, { children: _jsx(Icon, { children: "close" }) })) })))
} })), medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
if (mediaObjectType.previewComponent) {
return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
}
}) })))] })));
};