@parkassist/pa-ui-library
Version:
INX Platform elements
199 lines (198 loc) • 7.73 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Palette from "../../constants/Palette";
import { DateRangePicker } from "react-date-range";
import Helmet from "react-helmet";
import dayjs from "dayjs";
import { Column, Row } from "../Layout/Flex";
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import { StyledEngineProvider } from '@mui/material/styles';
import { CalendarIcon } from "../Icons";
import { newDefaultInputRanges, newDefaultStaticRanges } from '../DateRangePicker/DateRangeCalendar';
const DateRangeCalendar2 = props => {
const {
from,
to,
update,
rangeLimit = null,
weekStartsOn = 1,
mobile = false,
minDate,
maxDate,
timezoneId,
timeStaticRanges = {},
locale
} = props;
const compactDateFormat = "YYYY-MM-DD";
return _jsxs(StyledEngineProvider, {
injectFirst: true,
children: [_jsx(Column, {
className: "rangePickerWrapper",
children: _jsxs(Row, {
style: {
margin: 10
},
children: [_jsx(Column, {
style: {
width: 226
},
children: _jsxs(Typography, {
style: {
display: "flex",
flexDirection: "row"
},
children: [_jsx(CalendarIcon, {
style: {
marginRight: 16
}
}), "Selected date"]
})
}), _jsx(Column, {
style: {
marginRight: 10
},
children: _jsx(TextField, {
id: "start-date",
label: "Start",
variant: "outlined",
InputLabelProps: {
shrink: true
},
size: "small",
value: dayjs(props.from).format(compactDateFormat)
})
}), _jsx(Column, {
children: _jsx(TextField, {
id: "end-date",
label: "End",
variant: "outlined",
InputLabelProps: {
shrink: true
},
size: "small",
value: dayjs(props.to).format(compactDateFormat)
})
})]
})
}), _jsxs(Column, {
children: [_jsx(Row, {
children: _jsx(DateRangePicker, {
weekStartsOn: weekStartsOn,
staticRanges: [...newDefaultStaticRanges(weekStartsOn, timezoneId, timeStaticRanges)],
inputRanges: [...newDefaultInputRanges(weekStartsOn, timezoneId, timeStaticRanges)],
onChange: item => {
if (rangeLimit) {
const diff = item.selection.endDate.getTime() - item.selection.startDate.getTime();
const diffInDays = diff / (1000 * 3600 * 24);
if (diffInDays <= rangeLimit) {
update(item);
}
} else {
update(item);
}
},
locale: locale,
minDate: minDate,
maxDate: maxDate,
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: `
.rdrMonths .rdrMonth {
position: relative;
}
.rdrMonths .rdrMonth:first-child {
border-right: solid 1px #eff2f7;
}
.rdrMonths .rdrMonth .rdrMonthName {
position: absolute;
top: -50px;
left: auto;
right: 32px;
font-family: 'Poppins';
font-size: 16px;
font-weight: 500;
color: ${Palette.BLACK};
}
.rdrMonths .rdrMonth:first-child .rdrMonthName {
left: 32px;
right: auto;
}
.rdrInRange {
background: ${Palette.WHITE_SMOKE} !important;
}
.rdrStaticRangeSelected{
background: ${Palette.BLACK} !important;
color: ${Palette.WHITE} !important;
}
.rdrStaticRangeSelected span.rdrStaticRangeLabel {
color: ${Palette.WHITE} !important;
}
.rdrStaticRangeSelected:hover span.rdrStaticRangeLabel,
.rdrStaticRangeSelected span.rdrStaticRangeLabel:hover {
color: ${Palette.BLACK} !important;
}
.rdrDayToday .rdrDayNumber span:after {
background: ${Palette.PRIMARY}
}
.rdrDayEndPreview,
.rdrEndEdge {
border-top-right-radius: 3em;
border-bottom-right-radius: 3em;
right: 19%;
}
.rdrDayStartPreview,
.rdrStartEdge {
border-top-left-radius: 3em;
border-bottom-left-radius: 3em;
left: 19%;
}
.rdrDayToday .rdrDayNumber {
border: 1px solid ${Palette.DARK_GREY};
border-radius: 50px;
left: 21%;
right: 21%;
}
.rdrCalendarWrapper {
width: 640px;
}
.rdrDefinedRangesWrapper {
height: 100%;
width: 210px;
}
.rdrDefinedRangesWrapper button {
border-radius: 4px;
border: 1px transparent;
}
span.rdrStaticRangeLabel {
line-height: 16px;
}
.rdrNextPrevButton {
background: transparent;
}
.rdrDay:not(.rdrDayDisabled):not(.rdrDayPassive) > .rdrDayNumber > span {
color: ${Palette.BLACK} !important;
}
.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after
.rdrDayToday .rdrDayNumber span:after {
background:none;
}
`
})
})]
})]
});
};
export default DateRangeCalendar2;