fix : slider popover click event
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import {
|
import {
|
||||||
|
ClickAwayListener,
|
||||||
Grid2 as Grid,
|
Grid2 as Grid,
|
||||||
IconButton,
|
IconButton,
|
||||||
Slider as MuiSlider,
|
Slider as MuiSlider,
|
||||||
@@ -9,7 +10,7 @@ import {
|
|||||||
Typography,
|
Typography,
|
||||||
TypographyProps,
|
TypographyProps,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { useState } from "react";
|
import { MouseEvent, useState } from "react";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
value: number;
|
value: number;
|
||||||
@@ -36,7 +37,7 @@ export default function Slider({
|
|||||||
}: Props) {
|
}: Props) {
|
||||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||||
|
|
||||||
const handleOpenPopover = (event: React.MouseEvent<HTMLElement>) => {
|
const handleOpenPopover = (event: MouseEvent<HTMLElement>) => {
|
||||||
setAnchorEl(event.currentTarget);
|
setAnchorEl(event.currentTarget);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -58,6 +59,7 @@ export default function Slider({
|
|||||||
|
|
||||||
{!!infoContent && (
|
{!!infoContent && (
|
||||||
<>
|
<>
|
||||||
|
<ClickAwayListener onClickAway={handleClosePopover}>
|
||||||
<IconButton
|
<IconButton
|
||||||
size="medium"
|
size="medium"
|
||||||
aria-owns={anchorEl ? "mouse-over-popover" : undefined}
|
aria-owns={anchorEl ? "mouse-over-popover" : undefined}
|
||||||
@@ -70,6 +72,7 @@ export default function Slider({
|
|||||||
>
|
>
|
||||||
<Icon icon="mdi:info-outline" width="1.1rem" />
|
<Icon icon="mdi:info-outline" width="1.1rem" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
</ClickAwayListener>
|
||||||
|
|
||||||
<Popover
|
<Popover
|
||||||
id="mouse-over-popover"
|
id="mouse-over-popover"
|
||||||
|
|||||||
@@ -222,10 +222,10 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
|
|||||||
More threads means faster analysis, but only if your device
|
More threads means faster analysis, but only if your device
|
||||||
can handle them, otherwise it may have the opposite effect.
|
can handle them, otherwise it may have the opposite effect.
|
||||||
The estimated optimal value for your device is{" "}
|
The estimated optimal value for your device is{" "}
|
||||||
{getRecommendedWorkersNb()}.<br />
|
{getRecommendedWorkersNb()}. Due to privacy restrictions in
|
||||||
Due to privacy restrictions in some browsers, this estimated
|
some browsers, this value might be underestimated. Don't
|
||||||
value might be underestimated. Don't hesitate to try different
|
hesitate to try different values to find the best one for your
|
||||||
values to find the best one for your device.
|
device.
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user