diff --git a/web/chat/chat-input-text-area.react.js b/web/chat/chat-input-text-area.react.js --- a/web/chat/chat-input-text-area.react.js +++ b/web/chat/chat-input-text-area.react.js @@ -11,6 +11,7 @@ +focus: boolean, +currentText: string, +setCurrentText: (text: string) => void, + +onChangePosition: any => void, }; type Props = { ...BaseProps, @@ -39,6 +40,7 @@ const newHeight = Math.min(textarea.scrollHeight, 150); textarea.style.height = `${newHeight}px`; } + this.props.onChangePosition(); } render() { diff --git a/web/chat/edit-message-provider.js b/web/chat/edit-message-provider.js --- a/web/chat/edit-message-provider.js +++ b/web/chat/edit-message-provider.js @@ -7,11 +7,19 @@ import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; import type { ThreadInfo } from 'lib/types/thread-types'; +export type ModalPosition = { + +left: number, + +top: number, + +width: number, + +height: number, +}; + export type EditState = { +messageInfo: ChatMessageInfoItem, +threadInfo: ThreadInfo, +editedMessageDraft: ?string, +isError: boolean, + +position?: ModalPosition, }; type EditModalContextType = { @@ -20,6 +28,7 @@ +editState: ?EditState, +setDraft: string => void, +setError: boolean => void, + +updatePosition: ModalPosition => void, }; const EditModalContext: React.Context = @@ -29,6 +38,7 @@ editState: null, setDraft: () => {}, setError: () => {}, + updatePosition: () => {}, }); type Props = { @@ -77,6 +87,20 @@ }, [editState, setEditState], ); + + const updatePosition = React.useCallback( + (position: ModalPosition) => { + if (!editState) { + return; + } + setEditState({ + ...editState, + position, + }); + }, + [editState, setEditState], + ); + const value = React.useMemo( () => ({ renderEditModal, @@ -84,8 +108,16 @@ editState, setDraft, setError, + updatePosition, }), - [renderEditModal, clearEditModal, editState, setDraft, setError], + [ + renderEditModal, + clearEditModal, + editState, + setDraft, + setError, + updatePosition, + ], ); let modalOverlay; diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js --- a/web/chat/edit-text-message.react.js +++ b/web/chat/edit-text-message.react.js @@ -15,7 +15,7 @@ import ChatInputTextArea from './chat-input-text-area.react.js'; import ComposedMessage from './composed-message.react.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'; type BaseProps = { @@ -35,6 +35,7 @@ ) => Promise, +setError: boolean => void, +setDraft: string => void, + +updatePosition: ModalPosition => void, }; class EditTextMessage extends React.PureComponent { myRef: { current: null | HTMLDivElement }; @@ -42,8 +43,35 @@ constructor(props: any) { super(props); 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() { invariant( this.props.item.messageInfo.type === messageTypes.TEXT, @@ -82,6 +110,7 @@ focus={!this.props.background} currentText={editedMessageDraft} setCurrentText={this.props.setDraft} + onChangePosition={this.updateDimensions} />
@@ -141,7 +170,7 @@ const ConnectedEditTextMessage: React.ComponentType = React.memo(function ConnectedEditTextMessage(props) { - const { editState, clearEditModal, setError, setDraft } = + const { editState, clearEditModal, setError, setDraft, updatePosition } = useEditModalContext(); const editMessage = useEditMessage(); return ( @@ -152,6 +181,7 @@ editMessage={editMessage} setError={setError} setDraft={setDraft} + updatePosition={updatePosition} /> ); });