@parkassist/pa-ui-library
Version:
INX Platform elements
200 lines (198 loc) • 7.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Helmet from "react-helmet";
import { startOfWeek, endOfWeek, isSameDay, differenceInCalendarDays } from "date-fns";
import { DateRangePicker, createStaticRanges, defaultInputRanges } from "react-date-range";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
import Palette from "../../constants/Palette";
import dayjs from 'dayjs';
const getFormattedDate = (isStart, time, tz, daysToAdd = 0, monthsToAdd = 0) => {
let date = dayjs().tz(tz);
if (daysToAdd !== 0) {
date = date.add(daysToAdd, 'day');
}
if (monthsToAdd !== 0) {
date = date.add(monthsToAdd, 'month');
}
date = isStart ? date.startOf(time) : date.endOf(time);
const tzOffset = dayjs(date).tz(tz).utcOffset() - dayjs(date.toDate()).utcOffset();
return date.add(tzOffset, 'minute').toDate();
};
const defineds = (sow = 0, tz) => ({
startOfWeek: startOfWeek(getFormattedDate(true, 'day', tz), {
weekStartsOn: sow
}),
endOfWeek: endOfWeek(getFormattedDate(false, 'day', tz), {
weekStartsOn: sow
}),
startOfLastWeek: startOfWeek(getFormattedDate(true, 'day', tz, -7), {
weekStartsOn: sow
}),
endOfLastWeek: endOfWeek(getFormattedDate(false, 'day', tz, -7), {
weekStartsOn: sow
}),
startOfToday: getFormattedDate(true, 'day', tz),
endOfToday: getFormattedDate(false, 'day', tz),
startOfYesterday: getFormattedDate(true, 'day', tz, -1),
endOfYesterday: getFormattedDate(false, 'day', tz, -1),
startOfMonth: getFormattedDate(true, 'month', tz),
endOfMonth: getFormattedDate(false, 'month', tz),
startOfLastMonth: getFormattedDate(true, 'month', tz, 0, -1),
endOfLastMonth: getFormattedDate(false, 'month', tz, 0, -1)
});
export const newDefaultStaticRanges = (sow, tz, timeStaticRanges) => createStaticRanges([{
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.today) || 'Today',
range: () => ({
startDate: defineds(sow, tz).startOfToday,
endDate: defineds(sow, tz).endOfToday
})
}, {
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.yesterday) || 'Yesterday',
range: () => ({
startDate: defineds(sow, tz).startOfYesterday,
endDate: defineds(sow, tz).endOfYesterday
})
}, {
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.thisWeek) || 'This Week',
range: () => ({
startDate: defineds(sow, tz).startOfWeek,
endDate: defineds(sow, tz).endOfWeek
})
}, {
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.lastWeek) || 'Last Week',
range: () => ({
startDate: defineds(sow, tz).startOfLastWeek,
endDate: defineds(sow, tz).endOfLastWeek
})
}, {
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.thisMonth) || 'This Month',
range: () => ({
startDate: defineds(sow, tz).startOfMonth,
endDate: defineds(sow, tz).endOfMonth
})
}, {
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.lastMonth) || 'Last Month',
range: () => ({
startDate: defineds(sow, tz).startOfLastMonth,
endDate: defineds(sow, tz).endOfLastMonth
})
}]);
export const newDefaultInputRanges = (sow, tz, timeStaticRanges) => [Object.assign(Object.assign({}, defaultInputRanges[0]), {
range: value => ({
startDate: getFormattedDate(true, 'day', tz, -value + 1 < 0 ? -value + 1 : 0),
endDate: defineds(sow, tz).endOfToday
}),
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.daysUpToToday) || "days up to today",
getCurrentValue: range => {
const today = defineds(sow, tz).endOfToday;
if (!isSameDay(range.endDate, today)) {
return '-';
}
if (!range.startDate) {
return '∞';
}
return differenceInCalendarDays(today, range.startDate) + 1;
}
}), Object.assign(Object.assign({}, defaultInputRanges[1]), {
range: value => ({
startDate: defineds(sow, tz).startOfToday,
endDate: getFormattedDate(false, 'day', tz, value - 1 > 0 ? value - 1 : 0)
}),
label: (timeStaticRanges === null || timeStaticRanges === void 0 ? void 0 : timeStaticRanges.daysStartingToday) || "days starting today",
getCurrentValue: range => {
const today = defineds(sow, tz).startOfToday;
if (!isSameDay(range.startDate, today)) {
return '-';
}
if (!range.endDate) {
return '∞';
}
return differenceInCalendarDays(range.endDate, today) + 1;
}
})];
export default class DateRangeCalendar extends React.Component {
render() {
const {
maxDate,
from,
to,
update,
timezoneId,
rangeLimit = null,
weekStartsOn = 1,
mobile = false,
onlyPastDates = false,
language,
timeStaticRanges = {}
} = this.props;
const customInputRanges = newDefaultInputRanges(weekStartsOn, timezoneId, timeStaticRanges);
return _jsxs("div", {
className: "RangeSelector",
children: [_jsx(DateRangePicker, {
maxDate: maxDate || undefined,
weekStartsOn: weekStartsOn,
onlyPastDates: onlyPastDates,
locale: language,
staticRanges: [...newDefaultStaticRanges(weekStartsOn, timezoneId, timeStaticRanges)],
inputRanges: onlyPastDates ? [customInputRanges[0]] : [...customInputRanges],
onChange: item => {
if (rangeLimit) {
var diff = item.selection.endDate.getTime() - item.selection.startDate.getTime();
var diffInDays = diff / (1000 * 3600 * 24);
if (diffInDays <= rangeLimit) {
update(item);
}
} else {
update(item);
}
},
showSelectionPreview: true,
rangeColors: [Palette.PRIMARY],
moveRangeOnFirstSelection: false,
months: mobile ? 1 : 2,
ranges: [{
startDate: new Date(from),
endDate: to ? new Date(to) : new Date(),
key: "selection"
}],
direction: "horizontal"
}), _jsx(Helmet, {
children: _jsx("style", {
children: `
.rdrDateDisplayWrapper {
background-color: transparent;
}
.RangeSelector {
height: 400px;
transition: all 0.2s;
}
.rdrDefinedRangesWrapper{
height: 382px;
overflow: hidden;
${mobile && `width: 0px;`}
}
.rdrStaticRange{
transition: all 0.2s;
}
.rdrStaticRange:hover .rdrStaticRangeLabel,
.rdrStaticRange:focus .rdrStaticRangeLabel {
background: ${Palette.VERY_LIGHT_GREY_NEW} !important;
}
.rdrStaticRangeSelected{
background: ${Palette.DIM_GREY} !important;
}
span.rdrStaticRangeLabel{
color: black !important;
transition: all 0.2s;
line-height: 34px;
}
.rdrDayNumber > span {
color: black !important;
}
`
})
})]
});
}
}