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

update: show which format is active in FormatMenu (#450)

Browse Source 
* update: show which format is active in formatmenu

* update: requested fixes
This commit is contained in:
Daniel González-Albo
2025-10-19 12:44:58 +02:00
committed by GitHub
parent f2da24326b
commit d9812876e2
2 changed files with 65 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
webapp/IronCalc/src/components/FormatMenu/FormatMenu.tsx
View File

@@ -1,8 +1,9 @@
import { Menu, MenuItem, styled } from "@mui/material";
import { Check } from "lucide-react";
import { type ComponentProps, useCallback, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import FormatPicker from "./FormatPicker";
import { NumberFormats } from "./formatUtil";
import { KNOWN_FORMATS, NumberFormats } from "./formatUtil";
type FormatMenuProps = {
children: React.ReactNode;
@@ -26,6 +27,8 @@ const FormatMenu = (properties: FormatMenuProps) => {
[properties.onChange],
);
const isCustomFormat = !KNOWN_FORMATS.has(properties.numFmt);
return (
<>
<ChildrenWrapper
@@ -48,11 +51,17 @@ const FormatMenu = (properties: FormatMenuProps) => {
}}
>
<MenuItemWrapper onClick={(): void => onSelect(NumberFormats.AUTO)}>
<MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText>
<MenuItemText>
<CheckIcon $active={properties.numFmt === NumberFormats.AUTO} />
{t("toolbar.format_menu.auto")}
</MenuItemText>
</MenuItemWrapper>
<MenuDivider />
<MenuItemWrapper onClick={(): void => onSelect(NumberFormats.NUMBER)}>
<MenuItemText>{t("toolbar.format_menu.number")}</MenuItemText>
<MenuItemText>
<CheckIcon $active={properties.numFmt === NumberFormats.NUMBER} />
{t("toolbar.format_menu.number")}
</MenuItemText>
<MenuItemExample>
{t("toolbar.format_menu.number_example")}
</MenuItemExample>
@@ -60,7 +69,12 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuItemWrapper
onClick={(): void => onSelect(NumberFormats.PERCENTAGE)}
>
<MenuItemText>{t("toolbar.format_menu.percentage")}</MenuItemText>
<MenuItemText>
<CheckIcon
$active={properties.numFmt === NumberFormats.PERCENTAGE}
/>
{t("toolbar.format_menu.percentage")}
</MenuItemText>
<MenuItemExample>
{t("toolbar.format_menu.percentage_example")}
</MenuItemExample>
@@ -70,7 +84,12 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuItemWrapper
onClick={(): void => onSelect(NumberFormats.CURRENCY_EUR)}
>
<MenuItemText>{t("toolbar.format_menu.currency_eur")}</MenuItemText>
<MenuItemText>
<CheckIcon
$active={properties.numFmt === NumberFormats.CURRENCY_EUR}
/>
{t("toolbar.format_menu.currency_eur")}
</MenuItemText>
<MenuItemExample>
{t("toolbar.format_menu.currency_eur_example")}
</MenuItemExample>
@@ -78,7 +97,12 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuItemWrapper
onClick={(): void => onSelect(NumberFormats.CURRENCY_USD)}
>
<MenuItemText>{t("toolbar.format_menu.currency_usd")}</MenuItemText>
<MenuItemText>
<CheckIcon
$active={properties.numFmt === NumberFormats.CURRENCY_USD}
/>
{t("toolbar.format_menu.currency_usd")}
</MenuItemText>
<MenuItemExample>
{t("toolbar.format_menu.currency_usd_example")}
</MenuItemExample>
@@ -86,7 +110,12 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuItemWrapper
onClick={(): void => onSelect(NumberFormats.CURRENCY_GBP)}
>
<MenuItemText>{t("toolbar.format_menu.currency_gbp")}</MenuItemText>
<MenuItemText>
<CheckIcon
$active={properties.numFmt === NumberFormats.CURRENCY_GBP}
/>
{t("toolbar.format_menu.currency_gbp")}
</MenuItemText>
<MenuItemExample>
{t("toolbar.format_menu.currency_gbp_example")}
</MenuItemExample>
@@ -96,7 +125,12 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuItemWrapper
onClick={(): void => onSelect(NumberFormats.DATE_SHORT)}
>
<MenuItemText>{t("toolbar.format_menu.date_short")}</MenuItemText>
<MenuItemText>
<CheckIcon
$active={properties.numFmt === NumberFormats.DATE_SHORT}
/>
{t("toolbar.format_menu.date_short")}
</MenuItemText>
<MenuItemExample>
{t("toolbar.format_menu.date_short_example")}
</MenuItemExample>
@@ -104,7 +138,12 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuItemWrapper
onClick={(): void => onSelect(NumberFormats.DATE_LONG)}
>
<MenuItemText>{t("toolbar.format_menu.date_long")}</MenuItemText>
<MenuItemText>
<CheckIcon
$active={properties.numFmt === NumberFormats.DATE_LONG}
/>
{t("toolbar.format_menu.date_long")}
</MenuItemText>
<MenuItemExample>
{t("toolbar.format_menu.date_long_example")}
</MenuItemExample>
@@ -112,7 +151,10 @@ const FormatMenu = (properties: FormatMenuProps) => {
<MenuDivider />
<MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
<MenuItemText>{t("toolbar.format_menu.custom")}</MenuItemText>
<MenuItemText>
<CheckIcon $active={isCustomFormat} />
{t("toolbar.format_menu.custom")}
</MenuItemText>
</MenuItemWrapper>
</StyledMenu>
<FormatPicker
@@ -139,6 +181,7 @@ const StyledMenu = styled(Menu)`
const MenuItemWrapper = styled(MenuItem)`
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
width: calc(100% - 8px);
@@ -161,8 +204,18 @@ const MenuDivider = styled("div")`
border-top: 1px solid #eeeeee;
`;
const CheckIcon = styled(Check)<{ $active: boolean }>`
width: 16px;
height: 16px;
color: ${(props) => (props.$active ? "currentColor" : "transparent")};
margin-right: 8px;
flex-shrink: 0;
`;
const MenuItemText = styled("div")`
color: #000;
display: flex;
align-items: center;
`;
const MenuItemExample = styled("div")`

2
webapp/IronCalc/src/components/FormatMenu/formatUtil.ts
View File

@@ -42,3 +42,5 @@ export enum NumberFormats {
PERCENTAGE = "0.00%",
NUMBER = "#,##0.00",
}
export const KNOWN_FORMATS = new Set<string>(Object.values(NumberFormats));