Page MenuHomePhorge
Files F33088926

D3263.1768460443.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D3263.1768460443.diff
View Options

diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -9,7 +9,6 @@
import { type InputState, InputStateContext } from '../input/input-state';
import Multimedia from '../media/multimedia.react';
-import { ModalContext } from '../modals/modal-provider.react';
import css from './chat-message-list.css';
import ComposedMessage from './composed-message.react';
import sendFailed from './multimedia-message-send-failed';
@@ -30,11 +29,10 @@
...BaseProps,
// withInputState
+inputState: ?InputState,
- +setModal: (modal: ?React.Node) => void,
};
class MultimediaMessage extends React.PureComponent<Props> {
render() {
- const { item, setModal, inputState } = this.props;
+ const { item, inputState } = this.props;
invariant(
item.messageInfo.type === messageTypes.IMAGES ||
item.messageInfo.type === messageTypes.MULTIMEDIA,
@@ -53,7 +51,6 @@
<Multimedia
uri={singleMedia.uri}
pendingUpload={pendingUpload}
- setModal={setModal}
multimediaCSSClass={css.multimedia}
multimediaImageCSSClass={css.multimediaImage}
key={singleMedia.id}
@@ -89,16 +86,8 @@
const ConnectedMultimediaMessage: React.ComponentType<BaseProps> = React.memo<BaseProps>(
function ConnectedMultimediaMessage(props) {
const inputState = React.useContext(InputStateContext);
- const modalContext = React.useContext(ModalContext);
- invariant(modalContext, 'ModalContext should be set in MultimediaMessage');
- return (
- <MultimediaMessage
- {...props}
- inputState={inputState}
- setModal={modalContext.setModal}
- />
- );
+ return <MultimediaMessage {...props} inputState={inputState} />;
},
);
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -13,7 +13,7 @@
type Props = {
...BaseProps,
- +setModal: (modal: ?React.Node) => void,
+ +clearModal: (modal: ?React.Node) => void,
};
class MultimediaModal extends React.PureComponent<Props> {
@@ -35,7 +35,7 @@
>
<img src={this.props.uri} />
<XCircleIcon
- onClick={this.close}
+ onClick={this.props.clearModal}
className={css.closeMultimediaModal}
/>
</div>
@@ -50,7 +50,7 @@
event: SyntheticEvent<HTMLDivElement>,
) => void = event => {
if (event.target === this.overlay) {
- this.close();
+ this.props.clearModal();
}
};
@@ -58,21 +58,17 @@
event: SyntheticKeyboardEvent<HTMLDivElement>,
) => void = event => {
if (event.keyCode === 27) {
- this.close();
+ this.props.clearModal();
}
};
-
- close: () => void = () => {
- this.props.setModal(null);
- };
}
-function ConnectedMultiMediaModal(props: Props): React.Node {
+function ConnectedMultiMediaModal(props: BaseProps): React.Node {
const { uri } = props;
const modalContext = React.useContext(ModalContext);
invariant(modalContext, 'modalContext should be set in MultimediaModal');
- return <MultimediaModal uri={uri} setModal={modalContext.setModal} />;
+ return <MultimediaModal uri={uri} clearModal={modalContext.clearModal} />;
}
export default ConnectedMultiMediaModal;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -11,17 +11,21 @@
} from 'react-feather';
import { type PendingMultimediaUpload } from '../input/input-state';
+import { ModalContext } from '../modals/modal-provider.react';
import css from './media.css';
import MultimediaModal from './multimedia-modal.react';
-type Props = {
- uri: string,
+type BaseProps = {
+ +uri: string,
pendingUpload?: ?PendingMultimediaUpload,
remove?: (uploadID: string) => void,
- setModal?: (modal: ?React.Node) => void,
multimediaCSSClass: string,
multimediaImageCSSClass: string,
};
+type Props = {
+ ...BaseProps,
+ setModal?: (modal: ?React.Node) => void,
+};
class Multimedia extends React.PureComponent<Props> {
componentDidUpdate(prevProps: Props) {
const { uri, pendingUpload } = this.props;
@@ -108,8 +112,33 @@
const { setModal, uri } = this.props;
invariant(setModal, 'should be set');
- setModal(<MultimediaModal uri={uri} setModal={setModal} />);
+ setModal(<MultimediaModal uri={uri} />);
};
}
-export default Multimedia;
+const ConnectedMultimediaContainer: React.ComponentType<BaseProps> = React.memo<BaseProps>(
+ function ConnectedMultimediaContainer(props) {
+ const {
+ uri,
+ pendingUpload,
+ remove,
+ multimediaCSSClass,
+ multimediaImageCSSClass,
+ } = props;
+ const modalContext = React.useContext(ModalContext);
+ invariant(modalContext, 'modalContext should be defined');
+
+ return (
+ <Multimedia
+ uri={uri}
+ pendingUpload={pendingUpload}
+ remove={remove}
+ multimediaCSSClass={multimediaCSSClass}
+ multimediaImageCSSClass={multimediaImageCSSClass}
+ setModal={modalContext.setModal}
+ />
+ );
+ },
+);
+
+export default ConnectedMultimediaContainer;

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 7:00 AM (3 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5936600
Default Alt Text
D3263.1768460443.diff (5 KB)

Event Timeline