@parkassist/pa-ui-library
Version:
INX Platform elements
248 lines (247 loc) • 6.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import { Column, Row } from "../Layout/Flex";
import { Calendar } from "react-date-range";
import styled from "styled-components";
import Palette from "../../constants/Palette";
import MaterialModal from "../MaterialModal";
import FontStyles from "../../constants/FontStyles";
import ChipItem from "../Chip";
import Button from "../Button";
const StyledCalendar = styled(Calendar)`
width: 24.667em;
& .rdrMonths .rdrMonth:first-child {
border: none;
}
& .rdrMonthAndYearWrapper {
padding-top: 0;
height: auto;
padding-bottom: 8px;
}
& .rdrCalendarWrapper {
font-size: 12px;
}
& .rdrDayToday .rdrDayNumber span:after {
bottom: 0.2em;
}
& .rdrMonthAndYearPickers select {
font-size: 12px;
padding: 10px 25px 10px 10px;
}
& .rdrMonth {
width: 24.667em;
padding: 0 0 1.666em 0;
}
& .rdrMyHover {
position: relative;
top: 0;
width: 27px;
height: 27px;
border-radius: 50%;
left: 0;
background: transparent;
}
& .rdrMyActive {
background: rgb(197, 216, 0);
border-radius: 50%;
}
& span.rdrDayStartPreview,
& span.rdrDayEndPreview,
& span.rdrDayHovered,
& .rdrDayHovered .rdrDayNumber:after{
display: none;
}
& .rdrDayToday .rdrDayNumber {
border: none;
}
& .rdrDayHovered .rdrDayNumber:after {
display: none;
}
& .rdrDayHovered .rdrDayNumber:hover span {
width: 27px;
height: 27px;
border: 1px solid ${Palette.PRIMARY};
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
& .rdrDayPassive {
visibility: hidden;
}
& .rdrMonthAndYearPickers {
font-weight: 400;
font-size: 14px;
font-family: 'Poppins',sans-serif;
}
& .rdrMyDay.rdrDayNumber {
position: relative;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 27px;
width: 27px;
}
`;
const StyledSeparator = styled.div`
width: 1px;
height: 220px;
align-self: center;
background: ${Palette.WHITE_SMOKE};
margin: 0 32px 0 24px;
`;
const Chips = ({
dates,
onChange,
format
}) => _jsx("div", {
style: {
minWidth: 'fit-content',
maxHeight: '170px',
overflowY: "auto",
paddingTop: 8
},
children: dates.sort((d1, d2) => d1 - d2 > 0 ? 1 : -1).map((v, index) => _jsx("div", {
style: {
float: "left",
marginRight: 8,
marginBottom: 8
},
children: _jsx(ChipItem, {
onDelete: () => {
const newDates = dates.filter(date => format(date) !== format(v));
onChange(newDates);
},
label: format(v)
})
}, index))
});
const compareDates = (firstDate, secondDate) => new Date(firstDate).getTime() === new Date(secondDate).getTime();
const DatePickerMultiple = ({
open,
onClose = () => {},
onConfirm = () => {},
values,
label = "",
dateFormat = "MMMM Do, YYYY",
height,
minDate,
maxDate,
width,
locale,
saveText = "Save",
clearAllText = "Clear all",
summaryText = "Summary",
datesSelectedText = " Dates Selected"
}) => {
const [dates, setDates] = useState([]);
const format = dateToFormat => dayjs(dateToFormat).format(dateFormat);
useEffect(() => {
if (open) {
setDates(values);
}
}, [values, open]);
const today = new Date();
const TenYearsFromNow = new Date(today.getFullYear() + 10, today.getMonth(), today.getDay());
const TenYearsAgo = new Date(today.getFullYear() - 10, today.getMonth(), today.getDay());
return _jsx(MaterialModal, {
hideButtons: false,
visible: open,
modalTitle: label,
onClose: onClose,
onConfirm: () => onConfirm(dates),
okButton: saveText,
okButtonDataTestId: "save-dates-button",
height: height || 'auto',
width: width || 650,
noPadding: true,
children: _jsxs(Row, {
style: {
marginTop: 16,
fontSize: 12,
padding: '0 32px'
},
children: [_jsx(Column, {
style: {
marginTop: 4,
marginLeft: 0,
height: "300px"
},
children: _jsx(StyledCalendar, {
width: '100%',
color: Palette.PRIMARY,
dayContentRenderer: date => {
const active = dates.find(d => d.getTime() === date.getTime());
const classString = `rdrMyDay rdrDayNumber${active ? ' rdrMyActive' : ''}`;
return _jsx("span", {
className: 'rdrMyHover',
style: {},
children: _jsx("span", {
className: classString,
children: date.getDate()
})
});
},
locale: locale,
minDate: minDate || TenYearsAgo,
maxDate: maxDate || TenYearsFromNow,
weekdayDisplayFormat: 'EEEEE',
weekStartsOn: 1,
onChange: newDate => {
setDates(prevDates => {
const found = prevDates.find(prevDate => compareDates(prevDate, newDate));
return found ? prevDates.filter(prevDate => !compareDates(prevDate, newDate)) : [...prevDates, newDate];
});
},
showMonthAndYearPickers: false
})
}), _jsx(StyledSeparator, {}), _jsxs(Column, {
style: {
width: '100%'
},
children: [_jsxs(Row, {
style: {
justifyContent: "space-between",
marginBottom: 8,
paddingBottom: 16,
borderBottom: `1px solid ${Palette.WHITE_SMOKE}`
},
children: [_jsx(Column, {
style: {
justifyContent: "center",
font: FontStyles.SUBHEADER,
fontSize: '14px',
color: Palette.DIM_GREY
},
children: summaryText
}), _jsx(Column, {
children: _jsx(Button, {
small: true,
outline: true,
onClick: () => setDates([]),
children: clearAllText
})
})]
}), _jsx(Row, {
children: _jsx(Chips, {
maxWidth: 180,
dates: dates,
onChange: newDates => setDates(newDates),
format: format
})
}), _jsxs(Row, {
style: {
marginTop: 16,
marginBottom: 16,
color: Palette.LIGHT_BLACK,
font: FontStyles.BODY1_FONT
},
children: [dates.length, " ", datesSelectedText]
})]
})]
})
});
};
export default DatePickerMultiple;