Differential D7833 Diff 26519 web/chat/edit-text-message.react.js

Changeset View

Standalone View

web/chat/edit-text-message.react.js

Show All 9 Lines
import { messageTypes } from 'lib/types/message-types-enum.js';		import { messageTypes } from 'lib/types/message-types-enum.js';
import type { SendEditMessageResult } from 'lib/types/message-types.js';		import type { SendEditMessageResult } from 'lib/types/message-types.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';		import { type ThreadInfo } from 'lib/types/thread-types.js';

import cssInputBar from './chat-input-bar.css';		import cssInputBar from './chat-input-bar.css';
import ChatInputTextArea from './chat-input-text-area.react.js';		import ChatInputTextArea from './chat-input-text-area.react.js';
import ComposedMessage from './composed-message.react.js';		import ComposedMessage from './composed-message.react.js';
import { useEditModalContext } from './edit-message-provider.js';		import { useEditModalContext } from './edit-message-provider.js';
import type { EditState } from './edit-message-provider.js';		import type { EditState, ModalPosition } from './edit-message-provider.js';
import css from './edit-text-message.css';		import css from './edit-text-message.css';

type BaseProps = {		type BaseProps = {
+item: ChatMessageInfoItem,		+item: ChatMessageInfoItem,
+threadInfo: ThreadInfo,		+threadInfo: ThreadInfo,
+background: boolean,		+background: boolean,
+width: ?number,		+width: ?number,
};		};

type Props = {		type Props = {
...BaseProps,		...BaseProps,
+editState: ?EditState,		+editState: ?EditState,
+clearEditModal: () => void,		+clearEditModal: () => void,
+editMessage: (		+editMessage: (
messageID: string,		messageID: string,
text: string,		text: string,
) => Promise<SendEditMessageResult>,		) => Promise<SendEditMessageResult>,
+setError: boolean => void,		+setError: boolean => void,
+setDraft: string => void,		+setDraft: string => void,
		+updatePosition: ModalPosition => void,
};		};
class EditTextMessage extends React.PureComponent<Props> {		class EditTextMessage extends React.PureComponent<Props> {
myRef: { current: null \| HTMLDivElement };		myRef: { current: null \| HTMLDivElement };

constructor(props: any) {		constructor(props: any) {
super(props);		super(props);
this.myRef = React.createRef();		this.myRef = React.createRef();

		this.updateDimensions = this.updateDimensions.bind(this);
		}

		componentDidMount() {
		this.updateDimensions();
		window.addEventListener('resize', this.updateDimensions, false);
}		}

		componentWillUnmount() {
		window.removeEventListener('resize', this.updateDimensions, false);
		}

		updateDimensions = () => {
		if (!this.props.background) {
		return;
		}
		if (this.myRef.current) {
		const { left, top, width, height } =
		this.myRef.current.getBoundingClientRect();
		this.props.updatePosition({
		left,
		top,
		width,
		height,
		});
		}
		};

render() {		render() {
invariant(		invariant(
this.props.item.messageInfo.type === messageTypes.TEXT,		this.props.item.messageInfo.type === messageTypes.TEXT,
'EditTextMessage should only be used for messageTypes.TEXT',		'EditTextMessage should only be used for messageTypes.TEXT',
);		);
invariant(this.props.editState, 'editState should be set');		invariant(this.props.editState, 'editState should be set');

const editedMessageDraft = this.props.editState?.editedMessageDraft ?? '';		const editedMessageDraft = this.props.editState?.editedMessageDraft ?? '';
Show All 22 Lines	return (
style={{ width: this.props.width }}		style={{ width: this.props.width }}
>		>
<div className={cssInputBar.inputBarTextInput}>		<div className={cssInputBar.inputBarTextInput}>
<ChatInputTextArea		<ChatInputTextArea
send={this.editMessage}		send={this.editMessage}
focus={!this.props.background}		focus={!this.props.background}
currentText={editedMessageDraft}		currentText={editedMessageDraft}
setCurrentText={this.props.setDraft}		setCurrentText={this.props.setDraft}
		onChangePosition={this.updateDimensions}
/>		/>
</div>		</div>
<div className={css.bottomRow}>		<div className={css.bottomRow}>
{editFailed}		{editFailed}
<div className={css.buttons}>		<div className={css.buttons}>
<button onClick={this.exitEditMode}>Cancel (esc)</button>		<button onClick={this.exitEditMode}>Cancel (esc)</button>
<button		<button
className={css.saveButton}		className={css.saveButton}
▲ Show 20 Lines • Show All 43 Lines • ▼ Show 20 Lines	class EditTextMessage extends React.PureComponent<Props> {

exitEditMode = () => {		exitEditMode = () => {
this.props.clearEditModal();		this.props.clearEditModal();
};		};
}		}

const ConnectedEditTextMessage: React.ComponentType<BaseProps> =		const ConnectedEditTextMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedEditTextMessage(props) {		React.memo<BaseProps>(function ConnectedEditTextMessage(props) {
const { editState, clearEditModal, setError, setDraft } =		const { editState, clearEditModal, setError, setDraft, updatePosition } =
useEditModalContext();		useEditModalContext();
const editMessage = useEditMessage();		const editMessage = useEditMessage();
return (		return (
<EditTextMessage		<EditTextMessage
{...props}		{...props}
editState={editState}		editState={editState}
clearEditModal={clearEditModal}		clearEditModal={clearEditModal}
editMessage={editMessage}		editMessage={editMessage}
setError={setError}		setError={setError}
setDraft={setDraft}		setDraft={setDraft}
		updatePosition={updatePosition}
/>		/>
);		);
});		});

const ComposedEditTextMessage: React.ComponentType<BaseProps> =		const ComposedEditTextMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ComposedEditTextMessage(props) {		React.memo<BaseProps>(function ComposedEditTextMessage(props) {
const { background, width, ...restProps } = props;		const { background, width, ...restProps } = props;
return (		return (
Show All 12 Lines