Changeset View
Changeset View
Standalone View
Standalone View
web/chat/edit-message-provider.js
// @flow | // @flow | ||||
import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import ModalOverlay from 'lib/components/modal-overlay.react.js'; | import ModalOverlay from 'lib/components/modal-overlay.react.js'; | ||||
import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | ||||
import type { ThreadInfo } from 'lib/types/thread-types'; | import type { ThreadInfo } from 'lib/types/thread-types'; | ||||
export type ModalPosition = { | |||||
+left: number, | |||||
+top: number, | |||||
+width: number, | |||||
+height: number, | |||||
}; | |||||
export type EditState = { | export type EditState = { | ||||
+messageInfo: ChatMessageInfoItem, | +messageInfo: ChatMessageInfoItem, | ||||
+threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
+editedMessageDraft: ?string, | +editedMessageDraft: ?string, | ||||
+isError: boolean, | +isError: boolean, | ||||
+position?: ModalPosition, | |||||
}; | }; | ||||
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, | |||||
}; | }; | ||||
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: () => {}, | |||||
}); | }); | ||||
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; | ||||
Show All 32 Lines | (isError: boolean) => { | ||||
} | } | ||||
setEditState({ | setEditState({ | ||||
...editState, | ...editState, | ||||
isError, | isError, | ||||
}); | }); | ||||
}, | }, | ||||
[editState, setEditState], | [editState, setEditState], | ||||
); | ); | ||||
const updatePosition = React.useCallback( | |||||
(position: ModalPosition) => { | |||||
if (!editState) { | |||||
return; | |||||
} | |||||
setEditState({ | |||||
...editState, | |||||
position, | |||||
}); | |||||
}, | |||||
[editState, setEditState], | |||||
); | |||||
const value = React.useMemo( | const value = React.useMemo( | ||||
() => ({ | () => ({ | ||||
renderEditModal, | renderEditModal, | ||||
clearEditModal: clearEditModal, | clearEditModal: clearEditModal, | ||||
editState, | editState, | ||||
setDraft, | setDraft, | ||||
setError, | setError, | ||||
updatePosition, | |||||
}), | }), | ||||
[renderEditModal, clearEditModal, editState, setDraft, setError], | [ | ||||
renderEditModal, | |||||
clearEditModal, | |||||
editState, | |||||
setDraft, | |||||
setError, | |||||
updatePosition, | |||||
], | |||||
); | ); | ||||
let modalOverlay; | let modalOverlay; | ||||
if (modal) { | if (modal) { | ||||
modalOverlay = ( | modalOverlay = ( | ||||
<ModalOverlay onClose={clearEditModal}>{modal}</ModalOverlay> | <ModalOverlay onClose={clearEditModal}>{modal}</ModalOverlay> | ||||
); | ); | ||||
} | } | ||||
Show All 16 Lines |