umami/components/settings/SettingsButton.js

46 lines
1.2 KiB
JavaScript
Raw Normal View History

2022-11-10 13:47:02 +01:00
import React, { useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import TimezoneSetting from './TimezoneSetting';
import DateRangeSetting from './DateRangeSetting';
import Button from 'components/common/Button';
import styles from './SettingsButton.module.css';
import Gear from 'assets/gear.svg';
import useDocumentClick from '../../hooks/useDocumentClick';
export default function SettingsButton() {
const [show, setShow] = useState(false);
const ref = useRef();
function handleClick() {
setShow(state => !state);
}
useDocumentClick(e => {
if (!ref.current?.contains(e.target)) {
setShow(false);
}
});
return (
<div className={styles.button} ref={ref}>
<Button icon={<Gear />} variant="light" onClick={handleClick} />
{show && (
<div className={styles.panel}>
<dt>
<FormattedMessage id="label.timezone" defaultMessage="Timezone" />
</dt>
<dd>
<TimezoneSetting />
</dd>
<dt>
<FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
</dt>
<dd>
<DateRangeSetting />
</dd>
</div>
)}
</div>
);
}