@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
67 lines (66 loc) • 4.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
const react_intl_1 = require("react-intl");
const constants_1 = require("../../constants");
const Media_1 = require("../../../../shared/Media");
const UrlTextField_1 = tslib_1.__importDefault(require("../../../../shared/Media/Link/UrlTextField"));
const classes = {
root: `${constants_1.PREFIX}-content-lesson-root`,
generalError: `${constants_1.PREFIX}-general-error`,
title: `${constants_1.PREFIX}-content-lesson-title`,
medias: `${constants_1.PREFIX}-content-lesson-medias`,
editor: `${constants_1.PREFIX}-content-lesson-editor`,
link: `${constants_1.PREFIX}-content-lesson-link`
};
const Root = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'ContentLessonRoot'
})(({ theme }) => ({}));
exports.default = (props) => {
// PROPS
const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
const { error: generalError = null } = Object.assign({}, error);
const mediaObjectTypes = [Media_1.File, Media_1.Link];
const [medias, setMedias] = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.medias) || []);
const [openLink, setOpenLink] = (0, react_1.useState)();
const linkInputRef = (0, react_1.useRef)(null);
// HANDLERS
const handleChangeHtml = (0, react_1.useCallback)((html) => {
onChange(html);
}, [value]);
const handleChangeMedias = (0, react_1.useCallback)((value) => {
setMedias([...value]);
onMediaChange([...value]);
}, []);
const handleChangeMedia = (value) => {
setMedias((prev) => [...prev, value]);
onMediaChange([...medias, value]);
};
const handleLinkAdd = (0, react_1.useCallback)((media) => {
setMedias([...medias, media]);
setOpenLink(false);
}, [medias]);
(0, react_1.useEffect)(() => {
if (openLink && linkInputRef.current) {
linkInputRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, [openLink]);
// RENDER
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, onMediaChange: handleChangeMedia, defaultValue: value.html, ToolBarProps: {
customLink: (0, jsx_runtime_1.jsx)(Media_1.Link.triggerButton, { color: "default", onClick: () => setOpenLink(true) }, Media_1.Link.name),
uploadImage: false,
uploadFile: true
} })), openLink && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { inputRef: linkInputRef, className: classes.link, id: "page", name: "page", label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setOpenLink(false) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })))
} })), medias && medias.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
if (mediaObjectType.previewComponent) {
return (0, jsx_runtime_1.jsx)(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
}
}) })))] })));
};