Changeset View
Changeset View
Standalone View
Standalone View
web/utils/tooltip-utils.js
Show All 37 Lines | export const tooltipPositions = Object.freeze({ | ||||
LEFT_BOTTOM: 'left-bottom', | LEFT_BOTTOM: 'left-bottom', | ||||
RIGHT_BOTTOM: 'right-bottom', | RIGHT_BOTTOM: 'right-bottom', | ||||
LEFT_TOP: 'left-top', | LEFT_TOP: 'left-top', | ||||
RIGHT_TOP: 'right-top', | RIGHT_TOP: 'right-top', | ||||
TOP: 'top', | TOP: 'top', | ||||
BOTTOM: 'bottom', | BOTTOM: 'bottom', | ||||
}); | }); | ||||
type TooltipSize = { | const appTopBarHeight = 65; | ||||
export const appContainerPositionInfo: PositionInfo = Object.freeze({ | |||||
height: window.innerHeight - appTopBarHeight, | |||||
width: window.innerWidth, | |||||
top: appTopBarHeight, | |||||
bottom: window.innerHeight, | |||||
left: 0, | |||||
right: window.innerWidth, | |||||
}); | |||||
tomek: We should export it as a part of the block at the end of this file.
But overall, extracting… | |||||
ginsuAuthorUnsubmitted Done Inline ActionsGood catch, I created D6786 to help address this ginsu: Good catch, I created D6786 to help address this | |||||
export type TooltipSize = { | |||||
+height: number, | +height: number, | ||||
+width: number, | +width: number, | ||||
}; | }; | ||||
export type TooltipPositionStyle = { | export type TooltipPositionStyle = { | ||||
+anchorPoint: { | +anchorPoint: { | ||||
+x: number, | +x: number, | ||||
+y: number, | +y: number, | ||||
}, | }, | ||||
+verticalPosition: 'top' | 'bottom', | +verticalPosition: 'top' | 'bottom', | ||||
+horizontalPosition: 'left' | 'right', | +horizontalPosition: 'left' | 'right', | ||||
+alignment: 'left' | 'center' | 'right', | +alignment: 'left' | 'center' | 'right', | ||||
}; | }; | ||||
export type TooltipPosition = $Values<typeof tooltipPositions>; | export type TooltipPosition = $Values<typeof tooltipPositions>; | ||||
export type MessageTooltipAction = { | export type MessageTooltipAction = { | ||||
+label: string, | +label: string, | ||||
+onClick: (SyntheticEvent<HTMLDivElement>) => mixed, | +onClick: (SyntheticEvent<HTMLDivElement>) => mixed, | ||||
+actionButtonContent: React.Node, | +actionButtonContent: React.Node, | ||||
}; | }; | ||||
const appTopBarHeight = 65; | |||||
const font = | const font = | ||||
'14px "Inter", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", ' + | '14px "Inter", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", ' + | ||||
'"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", ui-sans-serif'; | '"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", ui-sans-serif'; | ||||
type FindTooltipPositionArgs = { | type FindTooltipPositionArgs = { | ||||
+sourcePositionInfo: PositionInfo, | +sourcePositionInfo: PositionInfo, | ||||
+tooltipSize: TooltipSize, | +tooltipSize: TooltipSize, | ||||
+availablePositions: $ReadOnlyArray<TooltipPosition>, | +availablePositions: $ReadOnlyArray<TooltipPosition>, | ||||
+defaultPosition: TooltipPosition, | +defaultPosition: TooltipPosition, | ||||
+preventDisplayingBelowSource?: boolean, | +preventDisplayingBelowSource?: boolean, | ||||
}; | }; | ||||
function findTooltipPosition({ | function findTooltipPosition({ | ||||
sourcePositionInfo, | sourcePositionInfo, | ||||
tooltipSize, | tooltipSize, | ||||
availablePositions, | availablePositions, | ||||
defaultPosition, | defaultPosition, | ||||
preventDisplayingBelowSource, | preventDisplayingBelowSource, | ||||
}: FindTooltipPositionArgs): TooltipPosition { | }: FindTooltipPositionArgs): TooltipPosition { | ||||
if (!window) { | if (!window) { | ||||
return defaultPosition; | return defaultPosition; | ||||
} | } | ||||
const appContainerPositionInfo: PositionInfo = { | |||||
height: window.innerHeight - appTopBarHeight, | |||||
width: window.innerWidth, | |||||
top: appTopBarHeight, | |||||
bottom: window.innerHeight, | |||||
left: 0, | |||||
right: window.innerWidth, | |||||
}; | |||||
const pointingTo = sourcePositionInfo; | const pointingTo = sourcePositionInfo; | ||||
const { | const { | ||||
top: containerTop, | top: containerTop, | ||||
left: containerLeft, | left: containerLeft, | ||||
right: containerRight, | right: containerRight, | ||||
bottom: containerBottom, | bottom: containerBottom, | ||||
} = appContainerPositionInfo; | } = appContainerPositionInfo; | ||||
▲ Show 20 Lines • Show All 589 Lines • Show Last 20 Lines |
We should export it as a part of the block at the end of this file.
But overall, extracting this const out of the function is incorrect. When the values were computed in the function, current window dimensions were taken. When the value is extracted, we freeze the values initially and never update, so resizing the window would break the solution.
Please find a solution where we don't freeze the window sizes and include testing resizing of the window as a part of test plan.