@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
86 lines (85 loc) • 5.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Box, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import classNames from 'classnames';
import Editor from '../../../Editor';
import { FormattedMessage, useIntl } from 'react-intl';
import { COMPOSER_TITLE_MAX_LENGTH } from '../../../../constants/Composer';
import { DEFAULT_EXTRA_SPACE_CONTENT_EDITOR, DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE, DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR, PREFIX } from '../../constants';
import { PREFIX as SCEDITOR_PREFIX } from '../../../Editor/constants';
import { iOS } from '@selfcommunity/utils';
const classes = {
root: `${PREFIX}-content-discussion-root`,
generalError: `${PREFIX}-general-error`,
title: `${PREFIX}-content-discussion-title`,
medias: `${PREFIX}-content-discussion-medias`,
editor: `${PREFIX}-content-discussion-editor`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'ContentDiscussionRoot'
})(({ theme }) => ({}));
/**
* Default post
*/
const DEFAULT_DISCUSSION = {
title: '',
categories: [],
group: null,
event: null,
medias: [],
html: '',
addressing: []
};
export default (props) => {
// PROPS
const { className = null, value = Object.assign({}, DEFAULT_DISCUSSION), defaultInitialMaxHeightContentEditor = DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR, defaultExtraSpaceContentEditor = DEFAULT_EXTRA_SPACE_CONTENT_EDITOR, isContentSwitchButtonVisible = true, error = {}, disabled = false, onChange, EditorProps = {} } = props;
const { titleError = null, error: generalError = null } = Object.assign({}, error);
const titleRef = useRef(null);
const [editorMaxHeight, setEditorMaxHeight] = useState(defaultInitialMaxHeightContentEditor + (isContentSwitchButtonVisible ? 0 : DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE));
// HOOKS
const intl = useIntl();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const isIOS = useMemo(() => iOS(), []);
// HANDLERS
const handleChangeTitle = useCallback((event) => {
onChange(Object.assign(Object.assign({}, value), { title: event.target.value }));
}, [value]);
const handleKeyDownTitle = useCallback((event) => {
if (event.key === 'Enter') {
event.preventDefault();
}
else if (value.title.length > COMPOSER_TITLE_MAX_LENGTH &&
['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Shift', 'Home', 'End'].indexOf(event.key) < 0) {
event.preventDefault();
}
}, [value]);
const handleChangeHtml = useCallback((html) => {
onChange(Object.assign(Object.assign({}, value), { html }));
}, [value]);
const computeEditorContentHeight = useCallback(() => {
if (titleRef.current) {
if (isMobile) {
// Measure title input height
const rect = titleRef.current.getBoundingClientRect();
const _delta = defaultExtraSpaceContentEditor + rect.height + (isIOS ? 30 : 0) - (isContentSwitchButtonVisible ? 0 : DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE);
setEditorMaxHeight(`calc(100vh - ${_delta}px)`);
}
else {
setEditorMaxHeight(DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR + (isContentSwitchButtonVisible ? 0 : DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE) + 'px');
}
}
}, [isMobile, titleRef.current, setEditorMaxHeight, isIOS, isContentSwitchButtonVisible]);
useEffect(() => {
computeEditorContentHeight();
}, [value, isContentSwitchButtonVisible, computeEditorContentHeight, isMobile]);
// 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(TextField, { className: classes.title, ref: titleRef, placeholder: intl.formatMessage({
id: 'ui.composer.content.discussion.title.label',
defaultMessage: 'ui.composer.content.discussion.title.label'
}), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, InputProps: {
endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
}, error: Boolean(titleError), helperText: titleError, disabled: disabled }), _jsx(Box, Object.assign({ sx: { [`& .${SCEDITOR_PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
};