watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-08 05:12:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge branch 'dev' into bh/unregister

Browse source
This commit is contained in:
Bartosz Hernas 2020-09-18 11:33:30 +02:00
commit 17b4f51ebe
78 changed files with 799 additions and 548 deletions
Download patch file Download diff file Expand all files Collapse all files

52
components/forms/DatePickerForm.js
View file

@ -1,11 +1,15 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { isAfter } from 'date-fns';
import { isAfter, isBefore, isSameDay } from 'date-fns';
import Calendar from 'components/common/Calendar';
import Button from 'components/common/Button';
import { FormButtons } from 'components/layout/FormLayout';
import { getDateRangeValues } from 'lib/date';
import styles from './DatePickerForm.module.css';
import ButtonGroup from '../common/ButtonGroup';
const FILTER_DAY = 0;
const FILTER_RANGE = 1;
export default function DatePickerForm({
startDate: defaultStartDate,
@ -15,21 +19,59 @@ export default function DatePickerForm({
onChange,
onClose,
}) {
const [selected, setSelected] = useState(
isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
);
const [date, setDate] = useState(defaultStartDate);
const [startDate, setStartDate] = useState(defaultStartDate);
const [endDate, setEndDate] = useState(defaultEndDate);
const disabled =
selected === FILTER_DAY
? isAfter(minDate, date) && isBefore(maxDate, date)
: isAfter(startDate, endDate);
const buttons = [
{
label: <FormattedMessage id="button.single-day" defaultMessage="Single day" />,
value: FILTER_DAY,
},
{
label: <FormattedMessage id="button.date-range" defaultMessage="Date range" />,
value: FILTER_RANGE,
},
];
function handleSave() {
onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
if (selected === FILTER_DAY) {
onChange({ ...getDateRangeValues(date, date), value: 'custom' });
} else {
onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
}
}
return (
<div className={styles.container}>
<div className={styles.filter}>
<ButtonGroup size="small" items={buttons} selectedItem={selected} onClick={setSelected} />
</div>
<div className={styles.calendars}>
<Calendar date={startDate} minDate={minDate} maxDate={endDate} onChange={setStartDate} />
<Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
{selected === FILTER_DAY ? (
<Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
) : (
<>
<Calendar
date={startDate}
minDate={minDate}
maxDate={endDate}
onChange={setStartDate}
/>
<Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
</>
)}
</div>
<FormButtons>
<Button variant="action" onClick={handleSave} disabled={isAfter(startDate, endDate)}>
<Button variant="action" onClick={handleSave} disabled={disabled}>
<FormattedMessage id="button.save" defaultMessage="Save" />
</Button>
<Button onClick={onClose}>

25
components/forms/DatePickerForm.module.css
View file

@ -1,25 +1,40 @@
.container {
display: flex;
flex-direction: column;
width: 800px;
max-width: 100vw;
}
.calendars {
display: flex;
justify-content: center;
}
.calendars > div:first-child {
padding-right: 20px;
border-right: 1px solid var(--gray300);
.calendars > div {
width: 380px;
}
.calendars > div:last-child {
.calendars > div + div {
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid var(--gray300);
}
.filter {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
.calendars {
flex-direction: column;
}
.calendars > div + div {
padding: 0;
margin-left: 0;
margin-top: 20px;
border: 0;
}
}