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

UPDATE: Adds web app

Browse Source
This commit is contained in:
Nicolás Hatcher
2024-04-07 14:19:06 +02:00
parent 0ba80035d2
commit 9d83cc87c9
85 changed files with 25210 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
webapp/src/components/formatMenu.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { useState, useRef, ComponentProps } from 'react';
import { useTranslation } from 'react-i18next';
import { NumberFormats } from './formatUtil';
import { Menu, MenuItem, styled } from '@mui/material';
import FormatPicker from './formatPicker';
type FormatMenuProps = {
children: any; //ReactI18NextChild | Iterable<ReactI18NextChild>;
numFmt: string;
onChange: (numberFmt: string) => void;
onExited?: () => void;
anchorOrigin?: ComponentProps<typeof Menu>['anchorOrigin'];
};
const FormatMenu = (properties: FormatMenuProps) => {
const { t } = useTranslation();
const { onChange } = properties;
const [isMenuOpen, setMenuOpen] = useState(false);
const [isPickerOpen, setPickerOpen] = useState(false);
const anchorElement = useRef<HTMLDivElement>(null);
return (
<>
<ChildrenWrapper onClick={(): void => setMenuOpen(true)} ref={anchorElement}>
{properties.children}
</ChildrenWrapper>
<Menu
open={isMenuOpen}
onClose={(): void => setMenuOpen(false)}
// onExited={properties.onExited}
anchorEl={anchorElement.current}
anchorOrigin={properties.anchorOrigin}
>
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.AUTO)}>
<MenuItemText>{t('toolbar.format_menu.auto')}</MenuItemText>
</MenuItemWrapper>
{/** TODO: Text option that transforms into plain text */}
<MenuDivider />
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.NUMBER)}>
<MenuItemText>{t('toolbar.format_menu.number')}</MenuItemText>
<MenuItemExample>{t('toolbar.format_menu.number_example')}</MenuItemExample>
</MenuItemWrapper>
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.PERCENTAGE)}>
<MenuItemText>{t('toolbar.format_menu.percentage')}</MenuItemText>
<MenuItemExample>{t('toolbar.format_menu.percentage_example')}</MenuItemExample>
</MenuItemWrapper>
<MenuDivider />
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.CURRENCY_EUR)}>
<MenuItemText>{t('toolbar.format_menu.currency_eur')}</MenuItemText>
<MenuItemExample>{t('toolbar.format_menu.currency_eur_example')}</MenuItemExample>
</MenuItemWrapper>
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.CURRENCY_USD)}>
<MenuItemText>{t('toolbar.format_menu.currency_usd')}</MenuItemText>
<MenuItemExample>{t('toolbar.format_menu.currency_usd_example')}</MenuItemExample>
</MenuItemWrapper>
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.CURRENCY_GBP)}>
<MenuItemText>{t('toolbar.format_menu.currency_gbp')}</MenuItemText>
<MenuItemExample>{t('toolbar.format_menu.currency_gbp_example')}</MenuItemExample>
</MenuItemWrapper>
<MenuDivider />
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.DATE_SHORT)}>
<MenuItemText>{t('toolbar.format_menu.date_short')}</MenuItemText>
<MenuItemExample>{t('toolbar.format_menu.date_short_example')}</MenuItemExample>
</MenuItemWrapper>
<MenuItemWrapper onClick={(): void => onChange(NumberFormats.DATE_LONG)}>
<MenuItemText>{t('toolbar.format_menu.date_long')}</MenuItemText>
<MenuItemExample>{t('toolbar.format_menu.date_long_example')}</MenuItemExample>
</MenuItemWrapper>
<MenuDivider />
<MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
<MenuItemText>{t('toolbar.format_menu.custom')}</MenuItemText>
</MenuItemWrapper>
</Menu>
<FormatPicker
numFmt={properties.numFmt}
onChange={properties.onChange}
open={isPickerOpen}
onClose={(): void => setPickerOpen(false)}
onExited={properties.onExited}
/>
</>
);
};
const MenuItemWrapper = styled(MenuItem)`
display: flex;
justify-content: space-between;
font-size: 14px;
width: 100%;
`;
const ChildrenWrapper = styled('div')`
display: flex;
`;
const MenuDivider = styled('div')``;
const MenuItemText = styled('div')`
color: #000;
`;
const MenuItemExample = styled('div')`
margin-left: 20px;
`;
export default FormatMenu;