Page MenuHomePhabricator
Differential D7067 Diff 23772 native/chat/chat-item-height-measurer.react.js

Changeset View

Standalone View

View Options

native/chat/chat-item-height-measurer.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import type { ChatMessageItem } from 'lib/selectors/chat-selectors.js'; import type { ChatMessageItem } from 'lib/selectors/chat-selectors.js';
import { messageID } from 'lib/shared/message-utils.js'; import { messageID } from 'lib/shared/message-utils.js';
import { messageTypes, type MessageType } from 'lib/types/message-types.js'; import { messageTypes, type MessageType } from 'lib/types/message-types.js';
import { entityTextToRawString } from 'lib/utils/entity-text.js'; import { entityTextToRawString } from 'lib/utils/entity-text.js';
import { avatarOffset } from './chat-constants.js';
import type { MeasurementTask } from './chat-context-provider.react.js'; import type { MeasurementTask } from './chat-context-provider.react.js';
import { useComposedMessageMaxWidth } from './composed-message-width.js'; import { useComposedMessageMaxWidth } from './composed-message-width.js';
import { dummyNodeForRobotextMessageHeightMeasurement } from './inner-robotext-message.react.js'; import { dummyNodeForRobotextMessageHeightMeasurement } from './inner-robotext-message.react.js';
import { dummyNodeForTextMessageHeightMeasurement } from './inner-text-message.react.js'; import { dummyNodeForTextMessageHeightMeasurement } from './inner-text-message.react.js';
import { MessageListContextProvider } from './message-list-types.js'; import { MessageListContextProvider } from './message-list-types.js';
import { multimediaMessageContentSizes } from './multimedia-message-utils.js'; import { multimediaMessageContentSizes } from './multimedia-message-utils.js';
import { chatMessageItemKey } from './utils.js'; import { chatMessageItemKey } from './utils.js';
import NodeHeightMeasurer from '../components/node-height-measurer.react.js'; import NodeHeightMeasurer from '../components/node-height-measurer.react.js';
Show All 30 Lines return dummyNodeForRobotextMessageHeightMeasurement(
item.robotext, item.robotext,
item.messageInfo.threadID, item.messageInfo.threadID,
); );
} }
invariant(false, 'NodeHeightMeasurer asked for dummy for non-text message'); invariant(false, 'NodeHeightMeasurer asked for dummy for non-text message');
}; };
function ChatItemHeightMeasurer(props: Props) { function ChatItemHeightMeasurer(props: Props) {
const composedMessageMaxWidth = useComposedMessageMaxWidth(); const composedMessageMaxWidth = useComposedMessageMaxWidth() - avatarOffset;
ginsuAuthorUnsubmitted
Done
Inline Actions

We still want the original value of useComposedMessageMaxWidth in composed-message.react.js so we need to do this extra step in the composedMessageMaxWidth calculation outside the hook

ginsu: We still want the original value of useComposedMessageMaxWidth in `composed-message.react.js`…
ashoatUnsubmitted
Not Done
Inline Actions

Is it intentional that you're reducing the width of viewer-composed messages too, even though they don't have an avatar?

ashoat: Is it intentional that you're reducing the width of viewer-composed messages too, even though…
ginsuAuthorUnsubmitted
Done
Inline Actions

No it isn't and I will fix that. However, this does bring up a question, I would love some input on. For viewer-composed multimedia messages, if we go back to the original width, the multimedia message is going to be a different size than non-viewer composed multimedia messages

Screenshot 2023-03-15 at 7.38.28 PM.png (1×1 px, 1 MB)

I feel like we should still reduce the width for viewer-composed multimedia messages so all the multimedia messages have a consistently smaller size, but I will bring back the original width for viewer-composed text messages. Let me know what we think

ginsu: No it isn't and I will fix that. However, this does bring up a question, I would love some…
ashoatUnsubmitted
Not Done
Inline Actions

Yeah that's fair, it should probably be consistent. We should probably reduce the width on both sides to accomodate for the avatars on the left. Can you ask Ted about this tomorrow?

ashoat: Yeah that's fair, it should probably be consistent. We should probably reduce the width on both…
ginsuAuthorUnsubmitted
Done
Inline Actions

Yea for sure

ginsu: Yea for sure
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const inputStatePendingUploads = inputState?.pendingUploads; const inputStatePendingUploads = inputState?.pendingUploads;
const { measurement } = props; const { measurement } = props;
const { threadInfo } = measurement; const { threadInfo } = measurement;
const heightMeasurerMergeItem = React.useCallback( const heightMeasurerMergeItem = React.useCallback(
(item: ChatMessageItem, height: ?number) => { (item: ChatMessageItem, height: ?number) => {
if (item.itemType !== 'message') { if (item.itemType !== 'message') {
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines