hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Show tooltip with hotbar name manually

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-01-12 13:58:46 +03:00
parent d40071a9d5
commit 8638de7263
2 changed files with 58 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/renderer/components/hotbar/hotbar-selector.tsx
View File

@ -20,12 +20,12 @@
*/
import "./hotbar-selector.scss";
import React from "react";
import React, { useRef, useState } from "react";
import { Icon } from "../icon";
import { Badge } from "../badge";
import hotbarManagerInjectable from "../../../common/hotbar-store.injectable";
import { HotbarSwitchCommand } from "./hotbar-switch-command";
import { TooltipPosition } from "../tooltip";
import { Tooltip, TooltipPosition } from "../tooltip";
import { observer } from "mobx-react";
import type { Hotbar } from "../../../common/hotbar-types";
import { withInjectables } from "@ogre-tools/injectable-react";
@ -45,25 +45,55 @@ interface Dependencies {
openCommandOverlay: (component: React.ReactElement) => void;
}
const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => (
<div className="HotbarSelector flex align-center">
<Icon material="play_arrow" className="previous box" onClick={() => hotbarManager.switchToPrevious()} />
<div className="box grow flex align-center">
<Badge
id="hotbarIndex"
small
label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
tooltip={{
preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT],
children: hotbar.name,
}}
className="SelectorIndex"
/>
const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommandOverlay }: HotbarSelectorProps & Dependencies) => {
const [tooltipVisible, setTooltipVisible] = useState(false);
const tooltipTimeout = useRef<NodeJS.Timeout>();
const clearTimer = () => {
clearTimeout(tooltipTimeout.current);
}
const onTooltipShow = () => {
setTooltipVisible(true);
clearTimer();
tooltipTimeout.current = setTimeout(() => setTooltipVisible(false), 1500);
};
const onArrowClick = (switchTo: () => void) => {
onTooltipShow();
switchTo();
};
const onMouseEvent = (event: React.MouseEvent) => {
clearTimer();
setTooltipVisible(event.type == "mouseenter");
};
return (
<div className="HotbarSelector flex align-center">
<Icon material="play_arrow" className="previous box" onClick={() => onArrowClick(hotbarManager.switchToPrevious)} />
<div className="box grow flex align-center">
<Badge
id="hotbarIndex"
small
label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
className="SelectorIndex"
onMouseEnter={onMouseEvent}
onMouseLeave={onMouseEvent}
/>
<Tooltip
visible={tooltipVisible}
targetId="hotbarIndex"
preferredPositions={[TooltipPosition.TOP, TooltipPosition.TOP_LEFT]}
>
{hotbar.name}
</Tooltip>
</div>
<Icon material="play_arrow" className="next box" onClick={() => onArrowClick(hotbarManager.switchToNext)} />
</div>
<Icon material="play_arrow" className="next box" onClick={() => hotbarManager.switchToNext()} />
</div>
));
);
});
export const HotbarSelector = withInjectables<Dependencies, HotbarSelectorProps>(NonInjectedHotbarSelector, {
getProps: (di, props) => ({

11
src/renderer/components/tooltip/tooltip.tsx
View File

@ -70,7 +70,7 @@ export class Tooltip extends React.Component<TooltipProps> {
@observable.ref elem: HTMLElement;
@observable activePosition: TooltipPosition;
@observable isVisible = !!this.props.visible;
@observable isVisible = false;
constructor(props: TooltipProps) {
super(props);
@ -92,6 +92,11 @@ export class Tooltip extends React.Component<TooltipProps> {
componentDidMount() {
this.hoverTarget.addEventListener("mouseenter", this.onEnterTarget);
this.hoverTarget.addEventListener("mouseleave", this.onLeaveTarget);
this.refreshPosition();
}
componentDidUpdate() {
this.refreshPosition();
}
componentWillUnmount() {
@ -226,9 +231,9 @@ export class Tooltip extends React.Component<TooltipProps> {
}
render() {
const { style, formatters, usePortal, children } = this.props;
const { style, formatters, usePortal, children, visible } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
invisible: !this.isVisible,
invisible: visible === undefined ? !this.isVisible : !visible,
formatter: !!formatters,
});
const tooltip = (