@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
89 lines (88 loc) • 5.62 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 styles_1 = require("@mui/material/styles");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
const react_intl_1 = require("react-intl");
const Composer_1 = require("../../../../constants/Composer");
const constants_1 = require("../../constants");
const constants_2 = require("../../../Editor/constants");
const utils_1 = require("@selfcommunity/utils");
const classes = {
root: `${constants_1.PREFIX}-content-discussion-root`,
generalError: `${constants_1.PREFIX}-general-error`,
title: `${constants_1.PREFIX}-content-discussion-title`,
medias: `${constants_1.PREFIX}-content-discussion-medias`,
editor: `${constants_1.PREFIX}-content-discussion-editor`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'ContentDiscussionRoot'
})(({ theme }) => ({}));
/**
* Default post
*/
const DEFAULT_DISCUSSION = {
title: '',
categories: [],
group: null,
event: null,
medias: [],
html: '',
addressing: []
};
exports.default = (props) => {
// PROPS
const { className = null, value = Object.assign({}, DEFAULT_DISCUSSION), defaultInitialMaxHeightContentEditor = constants_1.DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR, defaultExtraSpaceContentEditor = constants_1.DEFAULT_EXTRA_SPACE_CONTENT_EDITOR, isContentSwitchButtonVisible = true, error = {}, disabled = false, onChange, EditorProps = {} } = props;
const { titleError = null, error: generalError = null } = Object.assign({}, error);
const titleRef = (0, react_1.useRef)(null);
const [editorMaxHeight, setEditorMaxHeight] = (0, react_1.useState)(defaultInitialMaxHeightContentEditor + (isContentSwitchButtonVisible ? 0 : constants_1.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE));
// HOOKS
const intl = (0, react_intl_1.useIntl)();
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
// HANDLERS
const handleChangeTitle = (0, react_1.useCallback)((event) => {
onChange(Object.assign(Object.assign({}, value), { title: event.target.value }));
}, [value]);
const handleKeyDownTitle = (0, react_1.useCallback)((event) => {
if (event.key === 'Enter') {
event.preventDefault();
}
else if (value.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH &&
['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Shift', 'Home', 'End'].indexOf(event.key) < 0) {
event.preventDefault();
}
}, [value]);
const handleChangeHtml = (0, react_1.useCallback)((html) => {
onChange(Object.assign(Object.assign({}, value), { html }));
}, [value]);
const computeEditorContentHeight = (0, react_1.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 : constants_1.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE);
setEditorMaxHeight(`calc(100vh - ${_delta}px)`);
}
else {
setEditorMaxHeight(constants_1.DEFAULT_INITIAL_MAX_HEIGHT_CONTENT_EDITOR + (isContentSwitchButtonVisible ? 0 : constants_1.DEFAULT_HEIGHT_SWITCH_CONTENT_TYPE) + 'px');
}
}
}, [isMobile, titleRef.current, setEditorMaxHeight, isIOS, isContentSwitchButtonVisible]);
(0, react_1.useEffect)(() => {
computeEditorContentHeight();
}, [value, isContentSwitchButtonVisible, computeEditorContentHeight, isMobile]);
// 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)(material_1.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: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Composer_1.COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
}, error: Boolean(titleError), helperText: titleError, disabled: disabled }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { [`& .${constants_2.PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: (0, jsx_runtime_1.jsx)(Editor_1.default, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
};