sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: number format menu closes when selected

Browse Source
This commit is contained in:
Nicolás Hatcher
2024-10-11 20:14:03 +02:00
committed by Nicolás Hatcher Andrés
parent e412f5fc22
commit 39174add1f
1 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
webapp/src/components/formatMenu.tsx
View File

@@ -1,5 +1,5 @@
import { Menu, MenuItem, styled } from "@mui/material"; import { Menu, MenuItem, styled } from "@mui/material";
import { type ComponentProps, useRef, useState } from "react"; import { type ComponentProps, useCallback, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import FormatPicker from "./formatPicker"; import FormatPicker from "./formatPicker";
import { NumberFormats } from "./formatUtil"; import { NumberFormats } from "./formatUtil";
@@ -14,11 +14,15 @@ type FormatMenuProps = {
const FormatMenu = (properties: FormatMenuProps) => { const FormatMenu = (properties: FormatMenuProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { onChange } = properties;
const [isMenuOpen, setMenuOpen] = useState(false); const [isMenuOpen, setMenuOpen] = useState(false);
const [isPickerOpen, setPickerOpen] = useState(false); const [isPickerOpen, setPickerOpen] = useState(false);
const anchorElement = useRef<HTMLDivElement>(null); const anchorElement = useRef<HTMLDivElement>(null);
const onSelect = useCallback((s: string) => {
properties.onChange(s);
setMenuOpen(false);
}, [properties.onChange]);
return ( return (
<> <>
<ChildrenWrapper <ChildrenWrapper
@@ -33,18 +37,18 @@ const FormatMenu = (properties: FormatMenuProps) => {
anchorEl={anchorElement.current} anchorEl={anchorElement.current}
anchorOrigin={properties.anchorOrigin} anchorOrigin={properties.anchorOrigin}
> >
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.AUTO)}> <MenuItemWrapper onClick={(): void => onSelect(NumberFormats.AUTO)}>
<MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText>
</MenuItemWrapper> </MenuItemWrapper>
<MenuDivider /> <MenuDivider />
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.NUMBER)}> <MenuItemWrapper onClick={(): void => onSelect(NumberFormats.NUMBER)}>
<MenuItemText>{t("toolbar.format_menu.number")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.number")}</MenuItemText>
<MenuItemExample> <MenuItemExample>
{t("toolbar.format_menu.number_example")} {t("toolbar.format_menu.number_example")}
</MenuItemExample> </MenuItemExample>
</MenuItemWrapper> </MenuItemWrapper>
<MenuItemWrapper <MenuItemWrapper
onClick={(): void => onChange(NumberFormats.PERCENTAGE)} onClick={(): void => onSelect(NumberFormats.PERCENTAGE)}
> >
<MenuItemText>{t("toolbar.format_menu.percentage")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.percentage")}</MenuItemText>
<MenuItemExample> <MenuItemExample>
@@ -54,7 +58,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuDivider /> <MenuDivider />
<MenuItemWrapper <MenuItemWrapper
onClick={(): void => onChange(NumberFormats.CURRENCY_EUR)} onClick={(): void => onSelect(NumberFormats.CURRENCY_EUR)}
> >
<MenuItemText>{t("toolbar.format_menu.currency_eur")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.currency_eur")}</MenuItemText>
<MenuItemExample> <MenuItemExample>
@@ -62,7 +66,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
</MenuItemExample> </MenuItemExample>
</MenuItemWrapper> </MenuItemWrapper>
<MenuItemWrapper <MenuItemWrapper
onClick={(): void => onChange(NumberFormats.CURRENCY_USD)} onClick={(): void => onSelect(NumberFormats.CURRENCY_USD)}
> >
<MenuItemText>{t("toolbar.format_menu.currency_usd")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.currency_usd")}</MenuItemText>
<MenuItemExample> <MenuItemExample>
@@ -70,7 +74,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
</MenuItemExample> </MenuItemExample>
</MenuItemWrapper> </MenuItemWrapper>
<MenuItemWrapper <MenuItemWrapper
onClick={(): void => onChange(NumberFormats.CURRENCY_GBP)} onClick={(): void => onSelect(NumberFormats.CURRENCY_GBP)}
> >
<MenuItemText>{t("toolbar.format_menu.currency_gbp")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.currency_gbp")}</MenuItemText>
<MenuItemExample> <MenuItemExample>
@@ -80,7 +84,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuDivider /> <MenuDivider />
<MenuItemWrapper <MenuItemWrapper
onClick={(): void => onChange(NumberFormats.DATE_SHORT)} onClick={(): void => onSelect(NumberFormats.DATE_SHORT)}
> >
<MenuItemText>{t("toolbar.format_menu.date_short")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.date_short")}</MenuItemText>
<MenuItemExample> <MenuItemExample>
@@ -88,7 +92,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
</MenuItemExample> </MenuItemExample>
</MenuItemWrapper> </MenuItemWrapper>
<MenuItemWrapper <MenuItemWrapper
onClick={(): void => onChange(NumberFormats.DATE_LONG)} onClick={(): void => onSelect(NumberFormats.DATE_LONG)}
> >
<MenuItemText>{t("toolbar.format_menu.date_long")}</MenuItemText> <MenuItemText>{t("toolbar.format_menu.date_long")}</MenuItemText>
<MenuItemExample> <MenuItemExample>
@@ -103,7 +107,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
</Menu> </Menu>
<FormatPicker <FormatPicker
numFmt={properties.numFmt} numFmt={properties.numFmt}
onChange={properties.onChange} onChange={onSelect}
open={isPickerOpen} open={isPickerOpen}
onClose={(): void => setPickerOpen(false)} onClose={(): void => setPickerOpen(false)}
onExited={properties.onExited} onExited={properties.onExited}