Differential D8027 Diff 28667 web/chat/edit-message-provider.js

Changeset View

Standalone View

web/chat/edit-message-provider.js

Show All 16 Lines
};		};

export type EditState = {		export type EditState = {
+messageInfo: ChatMessageInfoItem,		+messageInfo: ChatMessageInfoItem,
+threadInfo: ThreadInfo,		+threadInfo: ThreadInfo,
+editedMessageDraft: ?string,		+editedMessageDraft: ?string,
+isError: boolean,		+isError: boolean,
+position?: ModalPosition,		+position?: ModalPosition,
		+maxHeight: number,
};		};

		export type ScrollToMessageCallback = (
		composedMessageID: string,
		callback: (maxHeight: number) => void,
		) => void;

type EditModalContextType = {		type EditModalContextType = {
+renderEditModal: (params: EditState) => void,		+renderEditModal: (params: EditState) => void,
+clearEditModal: () => void,		+clearEditModal: () => void,
+editState: ?EditState,		+editState: ?EditState,
+setDraft: string => void,		+setDraft: string => void,
+setError: boolean => void,		+setError: boolean => void,
+updatePosition: ModalPosition => void,		+updatePosition: ModalPosition => void,
		+scrollToMessage: ScrollToMessageCallback,
		+addScrollToMessageListener: ScrollToMessageCallback => void,
		+removeScrollToMessageListener: ScrollToMessageCallback => void,
};		};

const EditModalContext: React.Context<EditModalContextType> =		const EditModalContext: React.Context<EditModalContextType> =
React.createContext<EditModalContextType>({		React.createContext<EditModalContextType>({
renderEditModal: () => {},		renderEditModal: () => {},
clearEditModal: () => {},		clearEditModal: () => {},
editState: null,		editState: null,
setDraft: () => {},		setDraft: () => {},
setError: () => {},		setError: () => {},
updatePosition: () => {},		updatePosition: () => {},
		scrollToMessage: () => {},
		addScrollToMessageListener: () => {},
		removeScrollToMessageListener: () => {},
});		});

type Props = {		type Props = {
+children: React.Node,		+children: React.Node,
};		};
function EditModalProvider(props: Props): React.Node {		function EditModalProvider(props: Props): React.Node {
const { children } = props;		const { children } = props;

const [editState, setEditState] = React.useState<?EditState>(null);		const [editState, setEditState] = React.useState<?EditState>(null);

		const [scrollToMessageCallbacks, setScrollToMessageCallbacks] =
		React.useState<Array<ScrollToMessageCallback>>([]);

const clearEditModal = React.useCallback(() => {		const clearEditModal = React.useCallback(() => {
setEditState(null);		setEditState(null);
}, []);		}, []);

const renderEditModal = React.useCallback((newEditState: EditState): void => {		const renderEditModal = React.useCallback((newEditState: EditState): void => {
setEditState(newEditState);		setEditState(newEditState);
}, []);		}, []);

▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines	(position: ModalPosition) => {
setEditState({		setEditState({
...editState,		...editState,
position,		position,
});		});
},		},
[editState, setEditState],		[editState, setEditState],
);		);

		const scrollToMessage: ScrollToMessageCallback = React.useCallback(
		(messageKey: string, callback: (maxHeight: number) => void) => {
		scrollToMessageCallbacks.forEach((callback2: ScrollToMessageCallback) =>
		callback2(messageKey, callback),
		);
		},
		[scrollToMessageCallbacks],
		);

		const addScrollToMessageListener = React.useCallback(
		(callback: ScrollToMessageCallback): void => {
		setScrollToMessageCallbacks(prevScrollToMessageCallbacks => [
		...prevScrollToMessageCallbacks,
		callback,
		]);
		},
		[],
		);

		const removeScrollToMessageListener = React.useCallback(
		(callback: ScrollToMessageCallback) => {
		setScrollToMessageCallbacks(prevScrollToMessageCallbacks =>
		prevScrollToMessageCallbacks.filter(
		candidate => candidate !== callback,
		),
		);
		},
		[],
		);

const value = React.useMemo(		const value = React.useMemo(
() => ({		() => ({
renderEditModal,		renderEditModal,
clearEditModal: clearEditModal,		clearEditModal: clearEditModal,
editState,		editState,
setDraft,		setDraft,
setError,		setError,
updatePosition,		updatePosition,
		scrollToMessage,
		addScrollToMessageListener,
		removeScrollToMessageListener,
}),		}),
[		[
renderEditModal,		renderEditModal,
clearEditModal,		clearEditModal,
editState,		editState,
setDraft,		setDraft,
setError,		setError,
updatePosition,		updatePosition,
		scrollToMessage,
		addScrollToMessageListener,
		removeScrollToMessageListener,
],		],
);		);

const modalOverlay = React.useMemo(() => {		const modalOverlay = React.useMemo(() => {
if (!modal) {		if (!modal) {
return null;		return null;
}		}
return (		return (
Show All 24 Lines