@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
47 lines (46 loc) • 1.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef } from 'react';
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import classNames from 'classnames';
import Editor from '../../../Editor';
import { PREFIX } from '../../constants';
import { FormattedMessage } from 'react-intl';
const classes = {
root: `${PREFIX}-content-post-root`,
generalError: `${PREFIX}-general-error`,
medias: `${PREFIX}-content-post-medias`,
editor: `${PREFIX}-content-post-editor`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'ContentPostRoot'
})(({ theme }) => ({}));
/**
* Default post
*/
const DEFAULT_POST = {
categories: [],
medias: [],
html: '',
addressing: [],
event: null,
group: null
};
export default (props) => {
// PROPS
const { className = null, value = Object.assign({}, DEFAULT_POST), error = {}, disabled = false, onChange, EditorProps = {} } = props;
const { error: generalError = null } = Object.assign({}, error);
// REF
const editorRef = useRef();
// EFFECTS
useEffect(() => {
editorRef && editorRef.current && editorRef.current.focus();
}, [editorRef]);
// HANDLERS
const handleChangeHtml = useCallback((html) => {
onChange(Object.assign(Object.assign({}, value), { html }));
}, [value]);
// 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({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
};