Show All 26 Lines
} from 'lib/utils/action-utils';		} from 'lib/utils/action-utils';

import { type InputState, InputStateContext } from '../input/input-state';		import { type InputState, InputStateContext } from '../input/input-state';
import LoadingIndicator from '../loading-indicator.react';		import LoadingIndicator from '../loading-indicator.react';
import { useTextMessageRulesFunc } from '../markdown/rules.react';		import { useTextMessageRulesFunc } from '../markdown/rules.react';
import { useSelector } from '../redux/redux-utils';		import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css';		import css from './chat-message-list.css';
import { MessageListContext } from './message-list-types';		import { MessageListContext } from './message-list-types';
import MessageTimestampTooltip from './message-timestamp-tooltip.react';
import Message from './message.react';		import Message from './message.react';
import type {
OnMessagePositionWithContainerInfo,
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt';		import RelationshipPrompt from './relationship-prompt/relationship-prompt';
		import { useTooltipContext } from './tooltip-provider';

type BaseProps = {		type BaseProps = {
+threadInfo: ThreadInfo,		+threadInfo: ThreadInfo,
};		};

type Props = {		type Props = {
...BaseProps,		...BaseProps,
// Redux state		// Redux state
Show All 9 Lines	+fetchMessagesBeforeCursor: (
threadID: string,		threadID: string,
beforeMessageID: string,		beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>,		) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: (		+fetchMostRecentMessages: (
threadID: string,		threadID: string,
) => Promise<FetchMessageInfosPayload>,		) => Promise<FetchMessageInfosPayload>,
// withInputState		// withInputState
+inputState: ?InputState,		+inputState: ?InputState,
};		+clearTooltip: () => mixed,
type State = {
+mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
};		};
type Snapshot = {		type Snapshot = {
+scrollTop: number,		+scrollTop: number,
+scrollHeight: number,		+scrollHeight: number,
};		};
class ChatMessageList extends React.PureComponent<Props, State> {		class ChatMessageList extends React.PureComponent<Props> {
state: State = {
mouseOverMessagePosition: null,
};
container: ?HTMLDivElement;		container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement;		messageContainer: ?HTMLDivElement;
loadingFromScroll = false;		loadingFromScroll = false;

componentDidMount() {		componentDidMount() {
this.scrollToBottom();		this.scrollToBottom();
}		}

Show All 18 Lines	if (!prevMessageListData \|\| prevMessageListData.length === 0) {
return true;		return true;
}		}
return (		return (
ChatMessageList.keyExtractor(prevMessageListData[0]) !==		ChatMessageList.keyExtractor(prevMessageListData[0]) !==
ChatMessageList.keyExtractor(messageListData[0])		ChatMessageList.keyExtractor(messageListData[0])
);		);
}		}

componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) {		componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
const { messageListData } = this.props;		const { messageListData } = this.props;
const prevMessageListData = prevProps.messageListData;		const prevMessageListData = prevProps.messageListData;

if (		if (
this.loadingFromScroll &&		this.loadingFromScroll &&
messageListData &&		messageListData &&
(!prevMessageListData \|\|		(!prevMessageListData \|\|
messageListData.length > prevMessageListData.length \|\|		messageListData.length > prevMessageListData.length \|\|
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines	if (item.itemType === 'loader') {
);		);
}		}
const { threadInfo } = this.props;		const { threadInfo } = this.props;
invariant(threadInfo, 'ThreadInfo should be set if messageListData is');		invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
return (		return (
<Message		<Message
item={item}		item={item}
threadInfo={threadInfo}		threadInfo={threadInfo}
setMouseOverMessagePosition={this.setMouseOverMessagePosition}
mouseOverMessagePosition={this.state.mouseOverMessagePosition}
timeZone={this.props.timeZone}		timeZone={this.props.timeZone}
key={ChatMessageList.keyExtractor(item)}		key={ChatMessageList.keyExtractor(item)}
/>		/>
);		);
};		};

setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
if (!this.messageContainer) {
return;
}
if (messagePositionInfo.type === 'off') {
this.setState({ mouseOverMessagePosition: null });
return;
}
const {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
} = this.messageContainer.getBoundingClientRect();
const mouseOverMessagePosition = {
...messagePositionInfo,
messagePosition: {
...messagePositionInfo.messagePosition,
top: messagePositionInfo.messagePosition.top - containerTop,
bottom: messagePositionInfo.messagePosition.bottom - containerTop,
left: messagePositionInfo.messagePosition.left - containerLeft,
right: messagePositionInfo.messagePosition.right - containerLeft,
},
containerPosition: {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
},
};
this.setState({ mouseOverMessagePosition });
};

render() {		render() {
const { messageListData, threadInfo, inputState } = this.props;		const { messageListData, threadInfo, inputState } = this.props;
if (!messageListData) {		if (!messageListData) {
return <div className={css.container} />;		return <div className={css.container} />;
}		}
invariant(inputState, 'InputState should be set');		invariant(inputState, 'InputState should be set');
const messages = messageListData.map(this.renderItem);		const messages = messageListData.map(this.renderItem);

let tooltip;
if (this.state.mouseOverMessagePosition) {
const messagePositionInfo = this.state.mouseOverMessagePosition;
tooltip = (
<MessageTimestampTooltip
messagePositionInfo={messagePositionInfo}
timeZone={this.props.timeZone}
/>
);
}

let relationshipPrompt;		let relationshipPrompt;
if (threadInfo) {		if (threadInfo) {
relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;		relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
}		}

const messageContainerStyle = classNames({		const messageContainerStyle = classNames({
[css.messageContainer]: true,		[css.messageContainer]: true,
[css.mirroredMessageContainer]: !this.props.supportsReverseFlex,		[css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
});		});
return (		return (
<div className={css.outerMessageContainer}>		<div className={css.outerMessageContainer}>
{relationshipPrompt}		{relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}>		<div className={messageContainerStyle} ref={this.messageContainerRef}>
{messages}		{messages}
</div>		</div>
{tooltip}
</div>		</div>
);		);
}		}

messageContainerRef = (messageContainer: ?HTMLDivElement) => {		messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer;		this.messageContainer = messageContainer;
// In case we already have all the most recent messages,		// In case we already have all the most recent messages,
// but they're not enough		// but they're not enough
this.possiblyLoadMoreMessages();		this.possiblyLoadMoreMessages();
if (messageContainer) {		if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll);		messageContainer.addEventListener('scroll', this.onScroll);
}		}
};		};

onScroll = () => {		onScroll = () => {
if (!this.messageContainer) {		if (!this.messageContainer) {
return;		return;
}		}
if (this.state.mouseOverMessagePosition) {		this.props.clearTooltip();
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages();		this.possiblyLoadMoreMessages();
};		};

possiblyLoadMoreMessages() {		possiblyLoadMoreMessages() {
if (!this.messageContainer) {		if (!this.messageContainer) {
return;		return;
}		}

▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines	function ConnectedChatMessageList(props: BaseProps): React.Node {
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall(		const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor,		fetchMessagesBeforeCursor,
);		);
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);		const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);

const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);

		const { clearTooltip } = useTooltipContext();

const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);		const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => {		const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) {		if (!getTextMessageMarkdownRules) {
return undefined;		return undefined;
}		}
return { getTextMessageMarkdownRules };		return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]);		}, [getTextMessageMarkdownRules]);

return (		return (
<MessageListContext.Provider value={messageListContext}>		<MessageListContext.Provider value={messageListContext}>
<ChatMessageList		<ChatMessageList
activeChatThreadID={threadInfo.id}		activeChatThreadID={threadInfo.id}
threadInfo={threadInfo}		threadInfo={threadInfo}
messageListData={messageListData}		messageListData={messageListData}
startReached={startReached}		startReached={startReached}
timeZone={timeZone}		timeZone={timeZone}
supportsReverseFlex={supportsReverseFlex}		supportsReverseFlex={supportsReverseFlex}
inputState={inputState}		inputState={inputState}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}		fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages}		fetchMostRecentMessages={callFetchMostRecentMessages}
		clearTooltip={clearTooltip}
/>		/>
</MessageListContext.Provider>		</MessageListContext.Provider>
);		);
},		},
);		);

export default ConnectedChatMessageList;		export default ConnectedChatMessageList;

[web] Rename `LoginMethod` -> `WebLoginMethod`ClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 36421

web/types/nav-types.js

[web] Rename `LoginMethod` -> `WebLoginMethod`
ClosedPublic
Actions

Revision Contents
Changeset List