@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
136 lines (127 loc) • 7 kB
JavaScript
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 { Alert, Box, IconButton, TextField } from '@mui/material';
import Icon from '@mui/material/Icon';
import classNames from 'classnames';
import MessageMediaUploader from './MessageMediaUploader';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useThemeProps } from '@mui/system';
import EmojiPicker from '../../shared/EmojiPicker';
import { iOS } from '@selfcommunity/utils';
import { PREFIX } from './constants';
const messages = defineMessages({
placeholder: {
id: 'ui.privateMessage.editor.placeholder',
defaultMessage: 'ui.privateMessage.editor.placeholder'
}
});
const classes = {
root: `${PREFIX}-root`,
ios: `${PREFIX}-ios`,
messageInput: `${PREFIX}-message-input`,
mediaUploader: `${PREFIX}-media-uploader`,
emojiSection: `${PREFIX}-emoji-section`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS Private Message Editor component. Learn about the available props and the CSS API.
#### Import
```jsx
import {PrivateMessageEditor} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCPrivateMessageEditor` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCPrivateMessageEditor-root|Styles applied to the root element.|
|messageInput|.SCPrivateMessageEditor-card|Styles applied to the message input element.|
|mediaUploader|.SCPrivateMessageEditor-media-uploader|Styles applied to the message media uploader section.|
|emojiSection|.SCPrivateMessageEditor-emoji-section|Styles applied to the emoji section.|
* @param inProps
*/
export default function PrivateMessageEditor(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { autoHide = null, className = null, send = null, onThreadChangeId, error = false, onErrorRemove = null, autoHideDeletion } = props, rest = __rest(props, ["autoHide", "className", "send", "onThreadChangeId", "error", "onErrorRemove", "autoHideDeletion"]);
// STATE
const [message, setMessage] = useState('');
const [messageFiles, setMessageFiles] = useState([]);
const [openMediaSection, setOpenMediaSection] = useState(false);
const [openEmojiSection, setOpenEmojiSection] = useState(false);
const [threadId, setThreadId] = useState(null);
const [uploading, setUploading] = useState(false);
// INTL
const intl = useIntl();
// REF
const ref = useRef(null);
// HANDLERS
const handleMediaSectionClose = () => {
setOpenMediaSection(false);
setMessageFiles([]);
};
const handleMessageFiles = (f) => {
setMessageFiles(f);
};
const handleMessageSend = () => {
if (messageFiles.length) {
messageFiles.map((file) => {
send(message, file.file_uuid);
});
}
else {
send(message, '');
}
setMessage('');
setMessageFiles([]);
setOpenMediaSection(false);
setOpenEmojiSection(false);
};
const handleMessageInput = (event) => {
setMessage(event.target.value);
};
const handleEmojiClick = (emojiData, event) => {
const cursorPosition = ref.current.selectionEnd;
const start = ref.current.value.substring(0, ref.current.selectionStart);
const end = ref.current.value.substring(ref.current.selectionStart);
setMessage(start + emojiData.emoji + end);
setTimeout(() => {
ref.current.selectionStart = ref.current.selectionEnd = cursorPosition + emojiData.emoji.length;
}, 50);
};
// EFFECTS
useEffect(() => {
setThreadId(onThreadChangeId);
if (threadId !== onThreadChangeId) {
setMessage('');
setMessageFiles([]);
setOpenMediaSection(false);
}
}, [onThreadChangeId]);
// MEMO
const isIOS = useMemo(() => iOS(), []);
/**
* Rendering
*/
if (autoHide || autoHideDeletion) {
return (_jsx(Alert, Object.assign({ severity: autoHideDeletion ? 'warning' : 'info' }, { children: autoHideDeletion ? (_jsx(FormattedMessage, { id: "ui.privateMessage.editor.disabled.deleted.msg", defaultMessage: "ui.privateMessage.editor.disabled.deleted.msg" })) : (_jsx(FormattedMessage, { id: "ui.privateMessage.editor.disabled.msg", defaultMessage: "ui.privateMessage.editor.disabled.msg" })) })));
}
else if (error) {
return (_jsx(Alert, Object.assign({ severity: "error", action: _jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: _jsx(Icon, { children: "close" }) })) }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
}
function renderContent() {
return (_jsx(_Fragment, { children: openMediaSection ? (_jsx(MessageMediaUploader, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: _jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })) })) : (_jsxs(_Fragment, { children: [openEmojiSection && _jsx(EmojiPicker, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), _jsx(TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
startAdornment: (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: _jsx(Icon, { children: "attach_file" }) }))] })),
endAdornment: (_jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })))
} })] })) }));
}
return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className, { [classes.ios]: isIOS }) }, { children: renderContent() })));
}