@selfcommunity/react-ui/lib/esm/components/CommentObjectReply/CommentObjectReply.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from 'react';
import { styled } from '@mui/material/styles';
import Widget from '../Widget';
import { FormattedMessage } from 'react-intl';
import { Avatar, Stack, useMediaQuery, useTheme } from '@mui/material';
import { useSCUser } from '@selfcommunity/react-core';
import Editor from '../Editor';
import classNames from 'classnames';
import { LoadingButton } from '@mui/lab';
import BaseItem from '../../shared/BaseItem';
import UserAvatar from '../../shared/UserAvatar';
import { useThemeProps } from '@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 = styled(BaseItem, {
    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
 */
export default function CommentObjectReply(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = __rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
    // CONTEXT
    const scUserContext = useSCUser();
    // RETRIEVE OBJECTS
    const [html, setHtml] = useState(text);
    // HOOKS
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    // REFS
    let editor = useRef();
    /**
     * When CommentObjectReply is mount
     * if autoFocus === true focus on editor
     */
    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 = useMemo(() => {
        const _html = html.trim();
        return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
    }, [html]);
    // RENDER
    return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: !scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [_jsx(Editor, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
}