110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
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;
|