umami/components/pages/dashboard/DashboardSettingsButton.js

47 lines
1.1 KiB
JavaScript
Raw Normal View History

2023-02-10 12:26:57 +01:00
import { Menu, Icon, Text, PopupTrigger, Popup, Item, Button } from 'react-basics';
import Icons from 'components/icons';
2022-08-04 12:56:30 +02:00
import { saveDashboard } from 'store/dashboard';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
2023-04-21 17:00:42 +02:00
export function DashboardSettingsButton() {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
const menuOptions = [
{
2023-03-22 22:05:55 +01:00
label: formatMessage(labels.toggleCharts),
value: 'charts',
},
{
2023-03-22 22:05:55 +01:00
label: formatMessage(labels.editDashboard),
value: 'order',
},
];
function handleSelect(value) {
if (value === 'charts') {
2022-08-05 06:37:18 +02:00
saveDashboard(state => ({ showCharts: !state.showCharts }));
}
if (value === 'order') {
2022-08-04 12:56:30 +02:00
saveDashboard({ editing: true });
}
}
return (
2023-02-10 12:26:57 +01:00
<PopupTrigger>
<Button>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
<Popup alignment="end">
<Menu variant="popup" items={menuOptions} onSelect={handleSelect}>
{({ label, value }) => <Item key={value}>{label}</Item>}
</Menu>
</Popup>
</PopupTrigger>
);
}
2023-04-21 17:00:42 +02:00
export default DashboardSettingsButton;