Page MenuHomePhorge
Files F33124227

D6905.1768493747.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D6905.1768493747.diff
View Options

diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js
--- a/web/chat/message-tooltip.react.js
+++ b/web/chat/message-tooltip.react.js
@@ -50,17 +50,36 @@
const [activeTooltipLabel, setActiveTooltipLabel] = React.useState<?string>();
- const { renderEmojiKeyboard } = useTooltipContext();
-
- const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null);
-
- const emojiKeyboardRef = React.useRef();
-
- React.useEffect(() => {
- if (emojiKeyboardRef.current) {
- setEmojiKeyboardNode(emojiKeyboardRef.current);
- }
- }, [renderEmojiKeyboard]);
+ const { shouldRenderEmojiKeyboard } = useTooltipContext();
+
+ // const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null);
+ const [positionState, setPositionState] = React.useState(null);
+
+ // const emojiKeyboardRef = React.useRef();
+
+ // React.useEffect(() => {
+ // if (emojiKeyboardRef.current) {
+ // setEmojiKeyboardNode(emojiKeyboardRef.current);
+ // }
+ // }, [shouldRenderEmojiKeyboard]);
+
+ const emojiKeyboardRef = React.useCallback(
+ node => {
+ if (node) {
+ const { width, height } = node.getBoundingClientRect();
+ console.log(node.getBoundingClientRect());
+ if (width > 0 && height > 0) {
+ const emojiKeyboardPosition = getEmojiKeyboardPosition(
+ node,
+ tooltipPositionStyle,
+ tooltipSize,
+ );
+ setPositionState(emojiKeyboardPosition);
+ }
+ }
+ },
+ [tooltipPositionStyle, tooltipSize],
+ );
const messageActionButtonsContainerClassName = classNames(
css.messageActionContainer,
@@ -134,26 +153,26 @@
);
}, [messageTimestamp, messageTooltipLabelStyle]);
- const emojiKeyboardPosition = React.useMemo(
- () =>
- getEmojiKeyboardPosition(
- emojiKeyboardNode,
- tooltipPositionStyle,
- tooltipSize,
- ),
- [emojiKeyboardNode, tooltipPositionStyle, tooltipSize],
- );
+ // const emojiKeyboardPosition = React.useMemo(
+ // () =>
+ // getEmojiKeyboardPosition(
+ // emojiKeyboardNode,
+ // tooltipPositionStyle,
+ // tooltipSize,
+ // ),
+ // [emojiKeyboardNode, tooltipPositionStyle, tooltipSize],
+ // );
const emojiKeyboardPositionStyle = React.useMemo(() => {
- if (!emojiKeyboardPosition) {
+ if (!positionState) {
return null;
}
return {
- bottom: emojiKeyboardPosition.bottom,
- left: emojiKeyboardPosition.left,
+ bottom: positionState.bottom,
+ left: positionState.left,
};
- }, [emojiKeyboardPosition]);
+ }, [positionState]);
const nextLocalID = useSelector(state => state.nextLocalID);
const localID = `${localIDPrefix}${nextLocalID}`;
@@ -175,20 +194,32 @@
);
const emojiKeyboard = React.useMemo(() => {
- if (!renderEmojiKeyboard) {
- return null;
- }
+ // if (!shouldRenderEmojiKeyboard) {
+ // return null;
+ // }
return (
<div
- ref={emojiKeyboardRef}
+ // ref={emojiKeyboardRef}
style={emojiKeyboardPositionStyle}
className={css.emojiKeyboard}
>
- <Picker data={data} onEmojiSelect={onEmojiSelect} />
+ {shouldRenderEmojiKeyboard && (
+ <Picker
+ ref={emojiKeyboardRef}
+ data={data}
+ onEmojiSelect={onEmojiSelect}
+ // onClickOu
+ />
+ )}
</div>
);
- }, [emojiKeyboardPositionStyle, onEmojiSelect, renderEmojiKeyboard]);
+ }, [
+ emojiKeyboardPositionStyle,
+ emojiKeyboardRef,
+ onEmojiSelect,
+ shouldRenderEmojiKeyboard,
+ ]);
const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js
--- a/web/chat/reaction-message-utils.js
+++ b/web/chat/reaction-message-utils.js
@@ -134,6 +134,7 @@
if (emojiKeyboard) {
const { width, height } = emojiKeyboard.getBoundingClientRect();
+ console.log(emojiKeyboard.getBoundingClientRect());
emojiKeyboardWidth = width;
emojiKeyboardHeight = height;
}
diff --git a/web/chat/tooltip-provider.js b/web/chat/tooltip-provider.js
--- a/web/chat/tooltip-provider.js
+++ b/web/chat/tooltip-provider.js
@@ -26,8 +26,8 @@
type TooltipContextType = {
+renderTooltip: (params: RenderTooltipParams) => RenderTooltipResult,
+clearTooltip: () => mixed,
- +renderEmojiKeyboard: boolean,
- +setRenderEmojiKeyboard: SetState<boolean>,
+ +shouldRenderEmojiKeyboard: boolean,
+ +setShouldRenderEmojiKeyboard: SetState<boolean>,
};
const TooltipContext: React.Context<TooltipContextType> =
@@ -38,8 +38,8 @@
updateTooltip: () => {},
}),
clearTooltip: () => {},
- renderEmojiKeyboard: false,
- setRenderEmojiKeyboard: () => {},
+ shouldRenderEmojiKeyboard: false,
+ setShouldRenderEmojiKeyboard: () => {},
});
type Props = {
@@ -53,7 +53,7 @@
const [tooltipNode, setTooltipNode] = React.useState<React.Node>(null);
const [tooltipPosition, setTooltipPosition] =
React.useState<?TooltipPositionStyle>(null);
- const [renderEmojiKeyboard, setRenderEmojiKeyboard] =
+ const [shouldRenderEmojiKeyboard, setShouldRenderEmojiKeyboard] =
React.useState<boolean>(false);
const clearTooltip = React.useCallback((tooltipToClose: symbol) => {
@@ -63,7 +63,7 @@
tooltipCancelTimer.current = null;
setTooltipNode(null);
setTooltipPosition(null);
- setRenderEmojiKeyboard(false);
+ setShouldRenderEmojiKeyboard(false);
tooltipSymbol.current = null;
}, []);
@@ -156,10 +156,10 @@
() => ({
renderTooltip,
clearTooltip: clearCurrentTooltip,
- renderEmojiKeyboard,
- setRenderEmojiKeyboard,
+ shouldRenderEmojiKeyboard,
+ setShouldRenderEmojiKeyboard,
}),
- [renderTooltip, clearCurrentTooltip, renderEmojiKeyboard],
+ [renderTooltip, clearCurrentTooltip, shouldRenderEmojiKeyboard],
);
return (
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -452,7 +452,7 @@
): ?MessageTooltipAction {
const { messageInfo } = item;
- const { setRenderEmojiKeyboard } = useTooltipContext();
+ const { setShouldRenderEmojiKeyboard } = useTooltipContext();
const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
threadInfo,
@@ -467,10 +467,10 @@
const buttonContent = <CommIcon icon="emote-smile-filled" size={18} />;
const onClickReact = () => {
- if (!setRenderEmojiKeyboard) {
+ if (!setShouldRenderEmojiKeyboard) {
return;
}
- setRenderEmojiKeyboard(true);
+ setShouldRenderEmojiKeyboard(true);
};
return {
@@ -478,7 +478,7 @@
onClick: onClickReact,
label: 'React',
};
- }, [canCreateReactionFromMessage, setRenderEmojiKeyboard]);
+ }, [canCreateReactionFromMessage, setShouldRenderEmojiKeyboard]);
}
function useMessageTooltipActions(

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 4:15 PM (52 m, 54 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5938759
Default Alt Text
D6905.1768493747.diff (6 KB)

Event Timeline