umami/components/pages/dashboard/DashboardSettingsButton.js

51 lines
1.4 KiB
JavaScript
Raw Normal View History

2022-08-04 12:56:30 +02:00
import { defineMessages, useIntl } from 'react-intl';
2023-02-10 12:26:57 +01:00
import { Menu, Icon, Text, PopupTrigger, Popup, Item, Button } from 'react-basics';
import Icons from 'components/icons';
import { labels } from 'components/messages';
2022-08-04 12:56:30 +02:00
import { saveDashboard } from 'store/dashboard';
2022-08-04 12:56:30 +02:00
const messages = defineMessages({
toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
editDashboard: { id: 'message.edit-dashboard', defaultMessage: 'Edit dashboard' },
});
export default function DashboardSettingsButton() {
2022-08-04 12:56:30 +02:00
const { formatMessage } = useIntl();
const menuOptions = [
{
2022-08-04 12:56:30 +02:00
label: formatMessage(messages.toggleCharts),
value: 'charts',
},
{
2022-08-04 12:56:30 +02:00
label: formatMessage(messages.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>
);
}