@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
127 lines (118 loc) • 6.67 kB
JavaScript
"use strict";
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 styles_1 = require("@mui/material/styles");
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const react_core_1 = require("@selfcommunity/react-core");
const Editor_1 = tslib_1.__importDefault(require("../Editor"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lab_1 = require("@mui/lab");
const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
const system_1 = require("@mui/system");
const PREFIX = 'SCCommentObjectReply';
const classes = {
root: `${PREFIX}-root`,
comment: `${PREFIX}-comment`,
hasValue: `${PREFIX}-has-value`,
avatar: `${PREFIX}-avatar`,
actions: `${PREFIX}-actions`,
buttonReply: `${PREFIX}-button-reply`,
buttonSave: `${PREFIX}-button-save`,
buttonCancel: `${PREFIX}-button-cancel`
};
const Root = (0, styles_1.styled)(BaseItem_1.default, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
/**
*> API documentation for the Community-JS Comment Object Reply component. Learn about the available props and the CSS API.
#### Import
```jsx
import {CommentObjectReply} from '@selfcommunity/react-ui';
```
#### Component Name
The name `CommentObjectReply` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.CommentObjectReply-root|Styles applied to the root element.|
|comment|.SCCommentObjectReply-comment|Styles applied to comment element.|
|hasValue|.SCCommentObjectReply-has-value|Styles applied to the comment element when editor is not empty.|
|avatar|.SCCommentObjectReply-avatar|Styles applied to the avatar element.|
|actions|.SCCommentObjectReply-actions|Styles applied to the actions section.|
|buttonReply|.SCCommentObjectReply-button-reply|Styles applied to reply button element.|
|buttonSave|.SCCommentObjectReply-button-save|Styles applied to save button element.|
|buttonCancel|.SCCommentObjectReply-button-cancel|Styles applied to the cancel button element.|
* @param inProps
*/
function CommentObjectReply(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: PREFIX
});
const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
// RETRIEVE OBJECTS
const [html, setHtml] = (0, react_1.useState)(text);
// HOOKS
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
// REFS
let editor = (0, react_1.useRef)();
/**
* When CommentObjectReply is mount
* if autoFocus === true focus on editor
*/
(0, react_1.useEffect)(() => {
autoFocus && handleEditorFocus();
}, [autoFocus]);
/**
* Focus on editor
*/
const handleEditorFocus = () => {
if (!isMobile && editor.current) {
editor.current.focus();
}
};
/**
* Handle Replay
*/
const handleReply = () => {
onReply && onReply(html);
};
/**
* Handle Save
*/
const handleSave = () => {
onSave && onSave(html);
};
/**
* Handle cancel save
*/
const handleCancel = () => {
onCancel && onCancel();
};
/**
* Handle Editor change
*/
const handleChangeText = (value) => {
setHtml(value);
};
/**
* Check if editor is empty
*/
const isEditorEmpty = (0, react_1.useMemo)(() => {
const _html = html.trim();
return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
}, [html]);
// RENDER
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [(0, jsx_runtime_1.jsx)(Editor_1.default, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
}
exports.default = CommentObjectReply;