parent
2b3e436156
commit
8f5a50f690
22 changed files with 2411 additions and 5 deletions
@ -0,0 +1,245 @@ |
|||||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||||
|
|
||||||
|
import { |
||||||
|
getDateAccordingToMonth, |
||||||
|
shallowClone, |
||||||
|
getValueType, |
||||||
|
} from "./shared/generalUtils"; |
||||||
|
import { |
||||||
|
TYPE_SINGLE_DATE, |
||||||
|
TYPE_RANGE, |
||||||
|
TYPE_MUTLI_DATE, |
||||||
|
} from "./shared/constants"; |
||||||
|
import { useLocaleUtils, useLocaleLanguage } from "./shared/hooks"; |
||||||
|
|
||||||
|
import { Header, MonthSelector, YearSelector, DaysList } from "./components"; |
||||||
|
|
||||||
|
const Calendar = ({ |
||||||
|
value, |
||||||
|
onChange, |
||||||
|
onDisabledDayError, |
||||||
|
calendarClassName, |
||||||
|
calendarTodayClassName, |
||||||
|
calendarSelectedDayClassName, |
||||||
|
calendarRangeStartClassName, |
||||||
|
calendarRangeBetweenClassName, |
||||||
|
calendarRangeEndClassName, |
||||||
|
disabledDays, |
||||||
|
colorPrimary, |
||||||
|
colorPrimaryLight, |
||||||
|
slideAnimationDuration, |
||||||
|
minimumDate, |
||||||
|
maximumDate, |
||||||
|
selectorStartingYear, |
||||||
|
selectorEndingYear, |
||||||
|
locale, |
||||||
|
shouldHighlightWeekends, |
||||||
|
renderFooter, |
||||||
|
customDaysClassName, |
||||||
|
events, |
||||||
|
renderEvents, |
||||||
|
type, |
||||||
|
}) => { |
||||||
|
const calendarElement = useRef(null); |
||||||
|
const [mainState, setMainState] = useState({ |
||||||
|
activeDate: null, |
||||||
|
monthChangeDirection: "", |
||||||
|
isMonthSelectorOpen: false, |
||||||
|
isYearSelectorOpen: false, |
||||||
|
}); |
||||||
|
const [eventInFooter, setEventInFooter] = useState(null); |
||||||
|
useEffect(() => { |
||||||
|
const handleKeyUp = ({ key }) => { |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (key === "Tab") |
||||||
|
calendarElement.current.classList.remove("-noFocusOutline"); |
||||||
|
}; |
||||||
|
calendarElement.current.addEventListener("keyup", handleKeyUp, false); |
||||||
|
return () => { |
||||||
|
// calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
|
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
const { getToday } = useLocaleUtils(locale); |
||||||
|
const { weekDays: weekDaysList, isRtl } = useLocaleLanguage(locale); |
||||||
|
const today = getToday(); |
||||||
|
|
||||||
|
const createStateToggler = (property) => () => { |
||||||
|
setMainState({ ...mainState, [property]: !mainState[property] }); |
||||||
|
}; |
||||||
|
|
||||||
|
const toggleMonthSelector = createStateToggler("isMonthSelectorOpen"); |
||||||
|
const toggleYearSelector = createStateToggler("isYearSelectorOpen"); |
||||||
|
|
||||||
|
const getComputedActiveDate = () => { |
||||||
|
const valueType = getValueType(value); |
||||||
|
if (valueType === TYPE_MUTLI_DATE && value.length) |
||||||
|
return shallowClone(value[0]); |
||||||
|
if (valueType === TYPE_SINGLE_DATE && value) return shallowClone(value); |
||||||
|
if (valueType === TYPE_RANGE && value.from) return shallowClone(value.from); |
||||||
|
return shallowClone(today); |
||||||
|
}; |
||||||
|
|
||||||
|
const activeDate = mainState.activeDate |
||||||
|
? shallowClone(mainState.activeDate) |
||||||
|
: getComputedActiveDate(); |
||||||
|
|
||||||
|
const weekdays = weekDaysList.map((weekDay) => ( |
||||||
|
<abbr |
||||||
|
key={weekDay.name} |
||||||
|
title={weekDay.name} |
||||||
|
className={`Calendar__weekDay ${type}`} |
||||||
|
> |
||||||
|
{type == "dashboard" ? weekDay.name : weekDay.short} |
||||||
|
</abbr> |
||||||
|
)); |
||||||
|
|
||||||
|
const handleMonthChange = (direction) => { |
||||||
|
setMainState({ |
||||||
|
...mainState, |
||||||
|
monthChangeDirection: direction, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const updateDate = () => { |
||||||
|
setMainState({ |
||||||
|
...mainState, |
||||||
|
activeDate: getDateAccordingToMonth( |
||||||
|
activeDate, |
||||||
|
mainState.monthChangeDirection |
||||||
|
), |
||||||
|
monthChangeDirection: "", |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const selectMonth = (newMonthNumber) => { |
||||||
|
setMainState({ |
||||||
|
...mainState, |
||||||
|
activeDate: { ...activeDate, month: newMonthNumber }, |
||||||
|
isMonthSelectorOpen: false, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const selectYear = (year) => { |
||||||
|
setMainState({ |
||||||
|
...mainState, |
||||||
|
activeDate: { ...activeDate, year }, |
||||||
|
isYearSelectorOpen: false, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${ |
||||||
|
isRtl ? "rtl" : "ltr" |
||||||
|
}`}
|
||||||
|
role="grid" |
||||||
|
style={{ |
||||||
|
"--cl-color-primary": colorPrimary, |
||||||
|
"--cl-color-primary-light": colorPrimaryLight, |
||||||
|
"--animation-duration": slideAnimationDuration, |
||||||
|
}} |
||||||
|
ref={calendarElement} |
||||||
|
> |
||||||
|
<Header |
||||||
|
maximumDate={maximumDate} |
||||||
|
minimumDate={minimumDate} |
||||||
|
activeDate={activeDate} |
||||||
|
onMonthChange={handleMonthChange} |
||||||
|
onMonthSelect={toggleMonthSelector} |
||||||
|
onYearSelect={toggleYearSelector} |
||||||
|
monthChangeDirection={mainState.monthChangeDirection} |
||||||
|
isMonthSelectorOpen={mainState.isMonthSelectorOpen} |
||||||
|
isYearSelectorOpen={mainState.isYearSelectorOpen} |
||||||
|
locale={locale} |
||||||
|
type={type} |
||||||
|
/> |
||||||
|
|
||||||
|
<MonthSelector |
||||||
|
isOpen={mainState.isMonthSelectorOpen} |
||||||
|
activeDate={activeDate} |
||||||
|
onMonthSelect={selectMonth} |
||||||
|
maximumDate={maximumDate} |
||||||
|
minimumDate={minimumDate} |
||||||
|
locale={locale} |
||||||
|
/> |
||||||
|
|
||||||
|
<YearSelector |
||||||
|
isOpen={mainState.isYearSelectorOpen} |
||||||
|
activeDate={activeDate} |
||||||
|
onYearSelect={selectYear} |
||||||
|
selectorStartingYear={selectorStartingYear} |
||||||
|
selectorEndingYear={selectorEndingYear} |
||||||
|
maximumDate={maximumDate} |
||||||
|
minimumDate={minimumDate} |
||||||
|
locale={locale} |
||||||
|
/> |
||||||
|
|
||||||
|
<div className={`Calendar__weekDays ${type}`}>{weekdays}</div> |
||||||
|
|
||||||
|
<DaysList |
||||||
|
activeDate={activeDate} |
||||||
|
value={value} |
||||||
|
monthChangeDirection={mainState.monthChangeDirection} |
||||||
|
onSlideChange={updateDate} |
||||||
|
disabledDays={disabledDays} |
||||||
|
onDisabledDayError={onDisabledDayError} |
||||||
|
minimumDate={minimumDate} |
||||||
|
maximumDate={maximumDate} |
||||||
|
onChange={onChange} |
||||||
|
calendarTodayClassName={calendarTodayClassName} |
||||||
|
calendarSelectedDayClassName={calendarSelectedDayClassName} |
||||||
|
calendarRangeStartClassName={calendarRangeStartClassName} |
||||||
|
calendarRangeEndClassName={calendarRangeEndClassName} |
||||||
|
calendarRangeBetweenClassName={calendarRangeBetweenClassName} |
||||||
|
locale={locale} |
||||||
|
shouldHighlightWeekends={shouldHighlightWeekends} |
||||||
|
customDaysClassName={customDaysClassName} |
||||||
|
events={events} |
||||||
|
renderFooter={renderFooter} |
||||||
|
renderEvents={renderEvents} |
||||||
|
isQuickSelectorOpen={ |
||||||
|
mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen |
||||||
|
} |
||||||
|
showEvent={(event) => setEventInFooter(event)} |
||||||
|
type={type} |
||||||
|
/> |
||||||
|
<div className="Calendar__footer"> |
||||||
|
<div className={`footer__Events ${type}`}> |
||||||
|
{type == "dashboard" ? ( |
||||||
|
<> |
||||||
|
<div className="text-xl font-black text-blue-400"> |
||||||
|
رویداد ها:{" "} |
||||||
|
</div> |
||||||
|
<p className="text-blue-300 font-sansbold"> |
||||||
|
{eventInFooter |
||||||
|
? eventInFooter |
||||||
|
: "رویدادی در این روز وجود ندارد!"} |
||||||
|
</p> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
eventInFooter |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{renderFooter()} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
Calendar.defaultProps = { |
||||||
|
minimumDate: null, |
||||||
|
maximumDate: null, |
||||||
|
colorPrimary: "#0eca2d", |
||||||
|
colorPrimaryLight: "#cff4d5", |
||||||
|
slideAnimationDuration: "0.4s", |
||||||
|
calendarClassName: "", |
||||||
|
locale: "en", |
||||||
|
value: null, |
||||||
|
renderFooter: () => null, |
||||||
|
renderEvents: () => null, |
||||||
|
customDaysClassName: [], |
||||||
|
events: [], |
||||||
|
}; |
||||||
|
|
||||||
|
export default Calendar; |
||||||
@ -0,0 +1,672 @@ |
|||||||
|
.DatePicker { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__input { |
||||||
|
background: #fff; |
||||||
|
border: 1px solid #ddd; |
||||||
|
padding: 0.4em 0.8em; |
||||||
|
font-family: inherit; |
||||||
|
text-align: center; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__input.-rtl { |
||||||
|
direction: rtl; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__input::placeholder { |
||||||
|
color: #979797; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { |
||||||
|
top: auto; |
||||||
|
bottom: calc(100% + 10px); |
||||||
|
transform: translateY(-2.5rem) rotate(180deg); |
||||||
|
animation: fadeArrowFlipped 0.3s forwards; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer { |
||||||
|
position: absolute; |
||||||
|
top: calc(100% + 20px); |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer.-top { |
||||||
|
top: auto; |
||||||
|
bottom: calc(100% + 20px); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar, |
||||||
|
.Calendar * { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
direction: ltr; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar, |
||||||
|
.Calendar.-rtl * { |
||||||
|
direction: rtl; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarArrow { |
||||||
|
position: absolute; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
top: calc(100% + 10px); |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
margin: 0 auto; |
||||||
|
border-style: solid; |
||||||
|
z-index: 10; |
||||||
|
border-width: 0 10px 10px 10px; |
||||||
|
border-color: transparent transparent #fff transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar { |
||||||
|
--cl-color-black: #444444; |
||||||
|
--cl-color-disabled: #d4d4d4; |
||||||
|
--cl-color-error: #ff2929; |
||||||
|
font-size: 10px; |
||||||
|
background: #fff; |
||||||
|
box-shadow: 0 1em 4em rgba(0, 0, 0, 0.07); |
||||||
|
border-radius: 1em; |
||||||
|
position: relative; |
||||||
|
user-select: none; |
||||||
|
padding-top: 1.2em; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 33em; |
||||||
|
z-index: 10; |
||||||
|
max-width: 90vw; |
||||||
|
min-height: 36.7em; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker .Calendar, |
||||||
|
.DatePicker__calendarArrow { |
||||||
|
transform: translateY(2.5em); |
||||||
|
opacity: 0; |
||||||
|
animation: fadeCalendar 0.3s forwards; |
||||||
|
} |
||||||
|
|
||||||
|
.DatePicker__calendarContainer.-top .Calendar { |
||||||
|
transform: translateY(-2.5em); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-noFocusOutline *:focus { |
||||||
|
outline: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar > :not(.Calendar__footer) button { |
||||||
|
font-family: inherit; |
||||||
|
background: transparent; |
||||||
|
cursor: pointer; |
||||||
|
-webkit-tap-highlight-color: transparent; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__header { |
||||||
|
display: flex; |
||||||
|
color: var(--cl-color-black); |
||||||
|
padding: 2em 2.9em; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper { |
||||||
|
line-height: 0; |
||||||
|
font-size: 1em; |
||||||
|
padding: 3px; |
||||||
|
position: relative; |
||||||
|
border: none; |
||||||
|
z-index: 1; |
||||||
|
opacity: 1; |
||||||
|
transition: 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper:focus { |
||||||
|
outline: 1px dashed rgba(0, 0, 0, 0.4); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper:disabled, |
||||||
|
.Calendar__monthArrowWrapper.-hidden { |
||||||
|
opacity: 0; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper.-left { |
||||||
|
transform: rotate(90deg); |
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__monthArrowWrapper.-left { |
||||||
|
transform: rotate(-90deg); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper.-right { |
||||||
|
transform: rotate(-90deg); |
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__monthArrowWrapper.-right { |
||||||
|
transform: rotate(90deg); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrowWrapper:active .Calendar__monthArrow { |
||||||
|
transform: scale(0.7); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthArrow { |
||||||
|
border-radius: 50%; |
||||||
|
transition: var(--animation-duration) transform; |
||||||
|
pointer-events: none; |
||||||
|
background-repeat: no-repeat; |
||||||
|
display: block; |
||||||
|
width: 1.7em; |
||||||
|
height: 1.7em; |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); |
||||||
|
background-size: 100% 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYearContainer { |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear { |
||||||
|
font-size: 1.6em; |
||||||
|
font-weight: 500; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 50%; |
||||||
|
will-change: transform, opacity; |
||||||
|
backface-visibility: hidden; |
||||||
|
transform: translateZ(0); |
||||||
|
transition: var(--animation-duration); |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-hiddenNext { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear.-hiddenNext { |
||||||
|
transform: translateX(-150%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-hiddenPrevious { |
||||||
|
opacity: 0; |
||||||
|
transform: translateX(-150%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear.-hiddenPrevious { |
||||||
|
transform: translateX(50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-shown { |
||||||
|
opacity: 1; |
||||||
|
margin-top: auto; |
||||||
|
margin-bottom: auto; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-shownAnimated { |
||||||
|
animation: var(--animation-duration) fadeTextToCenter forwards; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear > * { |
||||||
|
padding: 0.2em 0.5em; |
||||||
|
border: 1px solid transparent; |
||||||
|
transition: var(--animation-duration); |
||||||
|
font-size: 1.05em; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
transform: translateX(0) scale(0.95); |
||||||
|
will-change: transform; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear:not(.-shown) > *, |
||||||
|
.Calendar__monthYear > *.-hidden { |
||||||
|
cursor: default; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthText { |
||||||
|
margin-left: -0.3em; |
||||||
|
} |
||||||
|
.Calendar__yearText:last-child { |
||||||
|
margin-right: -0.3em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear.-shown > *:hover, |
||||||
|
.Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, |
||||||
|
.Calendar__monthYear > *.-activeBackground { |
||||||
|
background: #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthText:hover { |
||||||
|
transform: translateX(-0.2em) scale(0.95); |
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__monthText:hover { |
||||||
|
transform: translateX(0.2em) scale(0.95); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearText:hover { |
||||||
|
transform: translateX(0.2em) scale(0.95); |
||||||
|
} |
||||||
|
.Calendar.-rtl .Calendar__yearText:hover { |
||||||
|
transform: translateX(-0.2em) scale(0.95); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear .Calendar__yearText.-hidden { |
||||||
|
transform: translateX(50%); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear .Calendar__monthText.-hidden { |
||||||
|
transform: translateX(-50%); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { |
||||||
|
transform: translateX(50%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthYear:not(.-shown) > * { |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorAnimationWrapper, |
||||||
|
.Calendar__yearSelectorAnimationWrapper { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 80%; |
||||||
|
bottom: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorWrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelector { |
||||||
|
padding: 0 2.5em; |
||||||
|
align-content: center; |
||||||
|
padding-bottom: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelector, |
||||||
|
.Calendar__yearSelector { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
background-color: #fff; |
||||||
|
transform: translateY(-150%); |
||||||
|
will-change: transform; |
||||||
|
transition: 0.6s; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper::after, |
||||||
|
.Calendar__yearSelectorWrapper::before { |
||||||
|
content: ''; |
||||||
|
width: 100%; |
||||||
|
height: 5em; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
opacity: 0; |
||||||
|
transition: 0.4s; |
||||||
|
transition-delay: 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper::after { |
||||||
|
background-image: linear-gradient(to bottom, #fff, #fff 10%, rgba(245, 245, 245, 0)); |
||||||
|
top: -0.1em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper::before { |
||||||
|
background-image: linear-gradient(to top, #fff, #fff 10%, rgba(245, 245, 245, 0)); |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorWrapper.-faded::after, |
||||||
|
.Calendar__yearSelectorWrapper.-faded::before { |
||||||
|
opacity: 1; |
||||||
|
z-index: 3; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelector { |
||||||
|
align-content: flex-start; |
||||||
|
scrollbar-width: 0; |
||||||
|
overflow: scroll; |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
padding: 5em 2em; |
||||||
|
-ms-overflow-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelector::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorItem { |
||||||
|
width: 25%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorItem:not(:nth-child(-n + 4)) { |
||||||
|
margin-top: 1.5em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorText { |
||||||
|
border: none; |
||||||
|
font-size: 1.4em; |
||||||
|
min-width: 85%; |
||||||
|
padding: 0.2em 0.5em; |
||||||
|
border-radius: 8.5px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelector.-open, |
||||||
|
.Calendar__yearSelector.-open { |
||||||
|
transform: translateY(0); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__yearSelectorText:focus, |
||||||
|
.Calendar__monthSelectorItemText:focus { |
||||||
|
outline: 1px dashed rgba(0, 0, 0, 0.4); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem { |
||||||
|
width: calc(100% / 3); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem:not(:nth-child(-n + 3)) { |
||||||
|
margin-top: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItemText { |
||||||
|
border: none; |
||||||
|
padding: 0.4em 0.4em; |
||||||
|
border-radius: 8.5px; |
||||||
|
font-size: 1.3em; |
||||||
|
min-width: 70%; |
||||||
|
transition: 0.3s; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem:not(.-active) .Calendar__monthSelectorItemText:not(:disabled):hover, |
||||||
|
.Calendar__yearSelectorItem:not(.-active) .Calendar__yearSelectorText:not(:disabled):hover { |
||||||
|
background: #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItemText:disabled, |
||||||
|
.Calendar__yearSelectorText:disabled { |
||||||
|
opacity: 0.5; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, |
||||||
|
.Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { |
||||||
|
background-color: var(--cl-color-primary); |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__weekDays { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: var(--cl-color-disabled); |
||||||
|
font-size: 1.2em; |
||||||
|
margin-bottom: 0.7em; |
||||||
|
padding: 0 2.6em; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__weekDay { |
||||||
|
display: block; |
||||||
|
width: calc(100% / 7); |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__sectionWrapper { |
||||||
|
position: relative; |
||||||
|
min-height: 25.8em; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
padding: 0 3.2em; |
||||||
|
position: absolute; |
||||||
|
color: var(--cl-color-black); |
||||||
|
top: 0; |
||||||
|
padding-top: 0.5em; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
will-change: transform, opacity; |
||||||
|
transform: translateZ(0); |
||||||
|
backface-visibility: hidden; |
||||||
|
transition: var(--animation-duration); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-hiddenPrevious { |
||||||
|
opacity: 0.5; |
||||||
|
transform: translateX(-90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__section.-hiddenPrevious { |
||||||
|
transform: translateX(90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-hiddenNext { |
||||||
|
opacity: 0.5; |
||||||
|
transform: translateX(90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar.-rtl .Calendar__section.-hiddenNext { |
||||||
|
transform: translateX(-90%); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-shown { |
||||||
|
opacity: 1; |
||||||
|
transform: translateX(0); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__section.-shownAnimated { |
||||||
|
animation: var(--animation-duration) FadeContentToCenter forwards; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__weekRow { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day { |
||||||
|
display: block; |
||||||
|
width: calc(100% / 7); |
||||||
|
text-align: center; |
||||||
|
padding: calc(0.25em - 1px) 0; |
||||||
|
font-size: 1.6em; |
||||||
|
border-radius: 50%; |
||||||
|
transition: 0.2s; |
||||||
|
border: 1px solid transparent; |
||||||
|
margin-bottom: 0.3em; |
||||||
|
color: rgba(0, 0, 0, 0.8); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day:focus { |
||||||
|
outline: 1px dashed rgba(0, 0, 0, 0.4); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-ltr { |
||||||
|
min-height: 2.6em; |
||||||
|
font-size: 1.45em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-rtl { |
||||||
|
font-size: 1.55em; |
||||||
|
height: 2.45em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { |
||||||
|
background: #eaeaea; |
||||||
|
border-radius: 50%; |
||||||
|
color: var(--cl-color-black); |
||||||
|
border-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-selected, |
||||||
|
.Calendar__day.-selectedStart, |
||||||
|
.Calendar__day.-selectedEnd { |
||||||
|
background: var(--cl-color-primary); |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-ltr.-selectedStart { |
||||||
|
border-radius: 0; |
||||||
|
border-top-left-radius: 100em; |
||||||
|
border-bottom-left-radius: 100em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-rtl.-selectedStart { |
||||||
|
border-radius: 0; |
||||||
|
border-top-right-radius: 100em; |
||||||
|
border-bottom-right-radius: 100em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-selectedBetween { |
||||||
|
background: var(--cl-color-primary-light); |
||||||
|
color: var(--cl-color-primary); |
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-ltr.-selectedEnd { |
||||||
|
border-top-right-radius: 100em; |
||||||
|
border-bottom-right-radius: 100em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-rtl.-selectedEnd { |
||||||
|
border-top-left-radius: 100em; |
||||||
|
border-bottom-left-radius: 100em; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { |
||||||
|
color: var(--cl-color-error); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { |
||||||
|
background: var(--cl-color-error); |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-disabled { |
||||||
|
color: var(--cl-color-disabled) !important; |
||||||
|
background: transparent !important; |
||||||
|
cursor: default !important; |
||||||
|
} |
||||||
|
.Calendar__day.-selected { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { |
||||||
|
font-weight: 600; |
||||||
|
color: var(--cl-color-black); |
||||||
|
color: #000; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
bottom: 0.2em; |
||||||
|
display: block; |
||||||
|
width: 0.6em; |
||||||
|
height: 1px; |
||||||
|
background: #000; |
||||||
|
left: 50%; |
||||||
|
opacity: 0.5; |
||||||
|
transform: translateX(-50%); |
||||||
|
transition: 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__day.-blank { |
||||||
|
color: transparent; |
||||||
|
cursor: default; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.Calendar__footer { |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fadeCalendar { |
||||||
|
from { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateY(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fadeArrowFlipped { |
||||||
|
from { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateY(0) rotate(180deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes fadeTextToCenter { |
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateX(-50%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes FadeContentToCenter { |
||||||
|
to { |
||||||
|
opacity: 1; |
||||||
|
transform: translateX(0); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,203 @@ |
|||||||
|
import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'; |
||||||
|
|
||||||
|
import Calendar from './Calendar'; |
||||||
|
import DatePickerInput from './DatePickerInput'; |
||||||
|
import { getValueType } from './shared/generalUtils'; |
||||||
|
import { TYPE_SINGLE_DATE, TYPE_MUTLI_DATE, TYPE_RANGE } from './shared/constants'; |
||||||
|
|
||||||
|
const DatePicker = ({ |
||||||
|
value, |
||||||
|
onChange, |
||||||
|
formatInputText, |
||||||
|
inputPlaceholder, |
||||||
|
inputClassName, |
||||||
|
inputName, |
||||||
|
renderInput, |
||||||
|
wrapperClassName, |
||||||
|
calendarClassName, |
||||||
|
calendarTodayClassName, |
||||||
|
calendarSelectedDayClassName, |
||||||
|
calendarRangeStartClassName, |
||||||
|
calendarRangeBetweenClassName, |
||||||
|
calendarRangeEndClassName, |
||||||
|
calendarPopperPosition, |
||||||
|
disabledDays, |
||||||
|
onDisabledDayError, |
||||||
|
colorPrimary, |
||||||
|
colorPrimaryLight, |
||||||
|
slideAnimationDuration, |
||||||
|
minimumDate, |
||||||
|
maximumDate, |
||||||
|
selectorStartingYear, |
||||||
|
selectorEndingYear, |
||||||
|
locale, |
||||||
|
shouldHighlightWeekends, |
||||||
|
renderFooter, |
||||||
|
customDaysClassName, |
||||||
|
}) => { |
||||||
|
const calendarContainerElement = useRef(null); |
||||||
|
const inputElement = useRef(null); |
||||||
|
const shouldPreventToggle = useRef(false); |
||||||
|
const [isCalendarOpen, setCalendarVisiblity] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const handleBlur = () => { |
||||||
|
setCalendarVisiblity(false); |
||||||
|
}; |
||||||
|
window.addEventListener('blur', handleBlur, false); |
||||||
|
return () => { |
||||||
|
window.removeEventListener('blur', handleBlur, false); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
// handle input focus/blur
|
||||||
|
useEffect(() => { |
||||||
|
const valueType = getValueType(value); |
||||||
|
if (valueType === TYPE_MUTLI_DATE) return; // no need to close the calendar
|
||||||
|
const shouldCloseCalendar = |
||||||
|
valueType === TYPE_SINGLE_DATE ? !isCalendarOpen : !isCalendarOpen && value.from && value.to; |
||||||
|
if (shouldCloseCalendar) inputElement.current.blur(); |
||||||
|
}, [value, isCalendarOpen]); |
||||||
|
|
||||||
|
const handleBlur = e => { |
||||||
|
e.persist(); |
||||||
|
if (!isCalendarOpen) return; |
||||||
|
const isInnerElementFocused = calendarContainerElement.current.contains(e.relatedTarget); |
||||||
|
if (shouldPreventToggle.current) { |
||||||
|
shouldPreventToggle.current = false; |
||||||
|
inputElement.current.focus(); |
||||||
|
} else if (isInnerElementFocused && e.relatedTarget) { |
||||||
|
e.relatedTarget.focus(); |
||||||
|
} else { |
||||||
|
setCalendarVisiblity(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const openCalendar = () => { |
||||||
|
if (!shouldPreventToggle.current) setCalendarVisiblity(true); |
||||||
|
}; |
||||||
|
|
||||||
|
// Keep the calendar in the screen bounds if input is near the window edges
|
||||||
|
useLayoutEffect(() => { |
||||||
|
if (!isCalendarOpen) return; |
||||||
|
const { left, width, height, top } = calendarContainerElement.current.getBoundingClientRect(); |
||||||
|
const { clientWidth, clientHeight } = document.documentElement; |
||||||
|
const isOverflowingFromRight = left + width > clientWidth; |
||||||
|
const isOverflowingFromLeft = left < 0; |
||||||
|
const isOverflowingFromBottom = top + height > clientHeight; |
||||||
|
|
||||||
|
const getLeftStyle = () => { |
||||||
|
const overflowFromRightDistance = left + width - clientWidth; |
||||||
|
|
||||||
|
if (!isOverflowingFromRight && !isOverflowingFromLeft) return; |
||||||
|
const overflowFromLeftDistance = Math.abs(left); |
||||||
|
const rightPosition = isOverflowingFromLeft ? overflowFromLeftDistance : 0; |
||||||
|
|
||||||
|
const leftStyle = isOverflowingFromRight |
||||||
|
? `calc(50% - ${overflowFromRightDistance}px)` |
||||||
|
: `calc(50% + ${rightPosition}px)`; |
||||||
|
return leftStyle; |
||||||
|
}; |
||||||
|
|
||||||
|
calendarContainerElement.current.style.left = getLeftStyle(); |
||||||
|
if ( |
||||||
|
(calendarPopperPosition === 'auto' && isOverflowingFromBottom) || |
||||||
|
calendarPopperPosition === 'top' |
||||||
|
) { |
||||||
|
calendarContainerElement.current.classList.add('-top'); |
||||||
|
} |
||||||
|
}, [isCalendarOpen]); |
||||||
|
|
||||||
|
const handleCalendarChange = newValue => { |
||||||
|
const valueType = getValueType(value); |
||||||
|
onChange(newValue); |
||||||
|
if (valueType === TYPE_SINGLE_DATE) setCalendarVisiblity(false); |
||||||
|
else if (valueType === TYPE_RANGE && newValue.from && newValue.to) setCalendarVisiblity(false); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleKeyUp = ({ key }) => { |
||||||
|
switch (key) { |
||||||
|
case 'Enter': |
||||||
|
setCalendarVisiblity(true); |
||||||
|
break; |
||||||
|
case 'Escape': |
||||||
|
setCalendarVisiblity(false); |
||||||
|
shouldPreventToggle.current = true; |
||||||
|
break; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!isCalendarOpen && shouldPreventToggle.current) { |
||||||
|
inputElement.current.focus(); |
||||||
|
shouldPreventToggle.current = false; |
||||||
|
} |
||||||
|
}, [shouldPreventToggle, isCalendarOpen]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
onFocus={openCalendar} |
||||||
|
onBlur={handleBlur} |
||||||
|
onKeyUp={handleKeyUp} |
||||||
|
className={`DatePicker ${wrapperClassName}`} |
||||||
|
role="presentation" |
||||||
|
> |
||||||
|
<DatePickerInput |
||||||
|
ref={inputElement} |
||||||
|
formatInputText={formatInputText} |
||||||
|
value={value} |
||||||
|
inputPlaceholder={inputPlaceholder} |
||||||
|
inputClassName={inputClassName} |
||||||
|
renderInput={renderInput} |
||||||
|
inputName={inputName} |
||||||
|
locale={locale} |
||||||
|
/> |
||||||
|
{isCalendarOpen && ( |
||||||
|
<> |
||||||
|
<div |
||||||
|
ref={calendarContainerElement} |
||||||
|
className="DatePicker__calendarContainer" |
||||||
|
data-testid="calendar-container" |
||||||
|
role="presentation" |
||||||
|
onMouseDown={() => { |
||||||
|
shouldPreventToggle.current = true; |
||||||
|
}} |
||||||
|
> |
||||||
|
<Calendar |
||||||
|
value={value} |
||||||
|
onChange={handleCalendarChange} |
||||||
|
calendarClassName={calendarClassName} |
||||||
|
calendarTodayClassName={calendarTodayClassName} |
||||||
|
calendarSelectedDayClassName={calendarSelectedDayClassName} |
||||||
|
calendarRangeStartClassName={calendarRangeStartClassName} |
||||||
|
calendarRangeBetweenClassName={calendarRangeBetweenClassName} |
||||||
|
calendarRangeEndClassName={calendarRangeEndClassName} |
||||||
|
disabledDays={disabledDays} |
||||||
|
colorPrimary={colorPrimary} |
||||||
|
colorPrimaryLight={colorPrimaryLight} |
||||||
|
slideAnimationDuration={slideAnimationDuration} |
||||||
|
onDisabledDayError={onDisabledDayError} |
||||||
|
minimumDate={minimumDate} |
||||||
|
maximumDate={maximumDate} |
||||||
|
selectorStartingYear={selectorStartingYear} |
||||||
|
selectorEndingYear={selectorEndingYear} |
||||||
|
locale={locale} |
||||||
|
shouldHighlightWeekends={shouldHighlightWeekends} |
||||||
|
renderFooter={renderFooter} |
||||||
|
customDaysClassName={customDaysClassName} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="DatePicker__calendarArrow" /> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
DatePicker.defaultProps = { |
||||||
|
wrapperClassName: '', |
||||||
|
locale: 'en', |
||||||
|
calendarPopperPosition: 'auto', |
||||||
|
}; |
||||||
|
|
||||||
|
export default DatePicker; |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { useLocaleUtils, useLocaleLanguage } from './shared/hooks'; |
||||||
|
import { putZero, getValueType } from './shared/generalUtils'; |
||||||
|
import { TYPE_SINGLE_DATE, TYPE_RANGE, TYPE_MUTLI_DATE } from './shared/constants'; |
||||||
|
|
||||||
|
const DatePickerInput = React.forwardRef( |
||||||
|
( |
||||||
|
{ value, inputPlaceholder, inputClassName, inputName, formatInputText, renderInput, locale }, |
||||||
|
ref, |
||||||
|
) => { |
||||||
|
const { getLanguageDigits } = useLocaleUtils(locale); |
||||||
|
const { |
||||||
|
from: fromWord, |
||||||
|
to: toWord, |
||||||
|
yearLetterSkip, |
||||||
|
digitSeparator, |
||||||
|
defaultPlaceholder, |
||||||
|
isRtl, |
||||||
|
} = useLocaleLanguage(locale); |
||||||
|
|
||||||
|
const getSingleDayValue = () => { |
||||||
|
if (!value) return ''; |
||||||
|
const year = getLanguageDigits(value.year); |
||||||
|
const month = getLanguageDigits(putZero(value.month)); |
||||||
|
const day = getLanguageDigits(putZero(value.day)); |
||||||
|
return `${year}/${month}/${day}`; |
||||||
|
}; |
||||||
|
|
||||||
|
const getDayRangeValue = () => { |
||||||
|
if (!value.from || !value.to) return ''; |
||||||
|
const { from, to } = value; |
||||||
|
const fromText = `${getLanguageDigits(putZero(from.year)) |
||||||
|
.toString() |
||||||
|
.slice(yearLetterSkip)}/${getLanguageDigits(putZero(from.month))}/${getLanguageDigits( |
||||||
|
putZero(from.day), |
||||||
|
)}`;
|
||||||
|
const toText = `${getLanguageDigits(putZero(to.year)) |
||||||
|
.toString() |
||||||
|
.slice(yearLetterSkip)}/${getLanguageDigits(putZero(to.month))}/${getLanguageDigits( |
||||||
|
putZero(to.day), |
||||||
|
)}`;
|
||||||
|
return `${fromWord} ${fromText} ${toWord} ${toText}`; |
||||||
|
}; |
||||||
|
|
||||||
|
const getMultiDateValue = () => { |
||||||
|
return value.map(date => getLanguageDigits(date.day)).join(`${digitSeparator} `); |
||||||
|
}; |
||||||
|
|
||||||
|
const getValue = () => { |
||||||
|
if (formatInputText()) return formatInputText(); |
||||||
|
const valueType = getValueType(value); |
||||||
|
switch (valueType) { |
||||||
|
case TYPE_SINGLE_DATE: |
||||||
|
return getSingleDayValue(); |
||||||
|
case TYPE_RANGE: |
||||||
|
return getDayRangeValue(); |
||||||
|
case TYPE_MUTLI_DATE: |
||||||
|
return getMultiDateValue(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const placeholderValue = inputPlaceholder || defaultPlaceholder; |
||||||
|
const render = () => { |
||||||
|
return ( |
||||||
|
renderInput({ ref }) || ( |
||||||
|
<input |
||||||
|
data-testid="datepicker-input" |
||||||
|
readOnly |
||||||
|
ref={ref} |
||||||
|
value={getValue()} |
||||||
|
name={inputName} |
||||||
|
placeholder={placeholderValue} |
||||||
|
className={`DatePicker__input -${isRtl ? 'rtl' : 'ltr'} ${inputClassName}`} |
||||||
|
aria-label={placeholderValue} |
||||||
|
/> |
||||||
|
) |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
return render(); |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
DatePickerInput.defaultProps = { |
||||||
|
formatInputText: () => '', |
||||||
|
renderInput: () => null, |
||||||
|
inputPlaceholder: '', |
||||||
|
inputClassName: '', |
||||||
|
inputName: '', |
||||||
|
}; |
||||||
|
|
||||||
|
export default DatePickerInput; |
||||||
@ -0,0 +1,399 @@ |
|||||||
|
import React, { useRef, useEffect } from 'react'; |
||||||
|
|
||||||
|
import { |
||||||
|
getSlideDate, |
||||||
|
handleSlideAnimationEnd, |
||||||
|
animateContent, |
||||||
|
} from '../shared/sliderHelpers'; |
||||||
|
import { |
||||||
|
deepCloneObject, |
||||||
|
isSameDay, |
||||||
|
createUniqueRange, |
||||||
|
getValueType, |
||||||
|
} from '../shared/generalUtils'; |
||||||
|
import { |
||||||
|
TYPE_SINGLE_DATE, |
||||||
|
TYPE_RANGE, |
||||||
|
TYPE_MUTLI_DATE, |
||||||
|
} from '../shared/constants'; |
||||||
|
import handleKeyboardNavigation from '../shared/keyboardNavigation'; |
||||||
|
import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; |
||||||
|
|
||||||
|
const DaysList = ({ |
||||||
|
activeDate, |
||||||
|
value, |
||||||
|
monthChangeDirection, |
||||||
|
onSlideChange, |
||||||
|
disabledDays, |
||||||
|
onDisabledDayError, |
||||||
|
minimumDate, |
||||||
|
maximumDate, |
||||||
|
onChange, |
||||||
|
locale, |
||||||
|
calendarTodayClassName, |
||||||
|
calendarSelectedDayClassName, |
||||||
|
calendarRangeStartClassName, |
||||||
|
calendarRangeEndClassName, |
||||||
|
calendarRangeBetweenClassName, |
||||||
|
shouldHighlightWeekends, |
||||||
|
isQuickSelectorOpen, |
||||||
|
customDaysClassName, |
||||||
|
events, |
||||||
|
showEvent, |
||||||
|
type |
||||||
|
}) => { |
||||||
|
const calendarSectionWrapper = useRef(null); |
||||||
|
const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale); |
||||||
|
const { |
||||||
|
getToday, |
||||||
|
isBeforeDate, |
||||||
|
checkDayInDayRange, |
||||||
|
getMonthFirstWeekday, |
||||||
|
getMonthLength, |
||||||
|
getLanguageDigits, |
||||||
|
getMonthName, |
||||||
|
} = useLocaleUtils(locale); |
||||||
|
const today = getToday(); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!monthChangeDirection) return; |
||||||
|
animateContent({ |
||||||
|
direction: monthChangeDirection, |
||||||
|
parent: calendarSectionWrapper.current, |
||||||
|
}); |
||||||
|
}, [monthChangeDirection]); |
||||||
|
|
||||||
|
const getDayRangeValue = (day) => { |
||||||
|
const clonedDayRange = deepCloneObject(value); |
||||||
|
const dayRangeValue = |
||||||
|
clonedDayRange.from && clonedDayRange.to |
||||||
|
? { from: null, to: null } |
||||||
|
: clonedDayRange; |
||||||
|
const dayRangeProp = !dayRangeValue.from ? 'from' : 'to'; |
||||||
|
dayRangeValue[dayRangeProp] = day; |
||||||
|
const { from, to } = dayRangeValue; |
||||||
|
|
||||||
|
// swap from and to values if from is later than to
|
||||||
|
if (isBeforeDate(dayRangeValue.to, dayRangeValue.from)) { |
||||||
|
dayRangeValue.from = to; |
||||||
|
dayRangeValue.to = from; |
||||||
|
} |
||||||
|
|
||||||
|
const checkIncludingDisabledDay = (disabledDay) => { |
||||||
|
return checkDayInDayRange({ |
||||||
|
day: disabledDay, |
||||||
|
from: dayRangeValue.from, |
||||||
|
to: dayRangeValue.to, |
||||||
|
}); |
||||||
|
}; |
||||||
|
const includingDisabledDay = disabledDays.find(checkIncludingDisabledDay); |
||||||
|
if (includingDisabledDay) { |
||||||
|
onDisabledDayError(includingDisabledDay); |
||||||
|
return value; |
||||||
|
} |
||||||
|
|
||||||
|
return dayRangeValue; |
||||||
|
}; |
||||||
|
|
||||||
|
const getMultiDateValue = (day) => { |
||||||
|
const isAlreadyExisting = value.some((valueDay) => |
||||||
|
isSameDay(valueDay, day) |
||||||
|
); |
||||||
|
const addedToValue = [...value, day]; |
||||||
|
const removedFromValue = value.filter( |
||||||
|
(valueDay) => !isSameDay(valueDay, day) |
||||||
|
); |
||||||
|
return isAlreadyExisting ? removedFromValue : addedToValue; |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDayClick = (day) => { |
||||||
|
const getNewValue = () => { |
||||||
|
const valueType = getValueType(value); |
||||||
|
switch (valueType) { |
||||||
|
case TYPE_SINGLE_DATE: |
||||||
|
return day; |
||||||
|
case TYPE_RANGE: |
||||||
|
return getDayRangeValue(day); |
||||||
|
case TYPE_MUTLI_DATE: |
||||||
|
return getMultiDateValue(day); |
||||||
|
} |
||||||
|
}; |
||||||
|
const newValue = getNewValue(); |
||||||
|
onChange(newValue); |
||||||
|
}; |
||||||
|
|
||||||
|
const isSingleDateSelected = (day) => { |
||||||
|
const valueType = getValueType(value); |
||||||
|
if (valueType === TYPE_SINGLE_DATE) return isSameDay(day, value); |
||||||
|
if (valueType === TYPE_MUTLI_DATE) |
||||||
|
return value.some((valueDay) => isSameDay(valueDay, day)); |
||||||
|
}; |
||||||
|
|
||||||
|
const getDayStatus = (dayItem) => { |
||||||
|
const isToday = isSameDay(dayItem, today); |
||||||
|
const isSelected = isSingleDateSelected(dayItem); |
||||||
|
const { from: startingDay, to: endingDay } = value || {}; |
||||||
|
const isStartingDayRange = isSameDay(dayItem, startingDay); |
||||||
|
const isEndingDayRange = isSameDay(dayItem, endingDay); |
||||||
|
const isWithinRange = checkDayInDayRange({ |
||||||
|
day: dayItem, |
||||||
|
from: startingDay, |
||||||
|
to: endingDay, |
||||||
|
}); |
||||||
|
return { |
||||||
|
isToday, |
||||||
|
isSelected, |
||||||
|
isStartingDayRange, |
||||||
|
isEndingDayRange, |
||||||
|
isWithinRange, |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
const getDayClassNames = (dayItem) => { |
||||||
|
const { |
||||||
|
isToday, |
||||||
|
isSelected, |
||||||
|
isStartingDayRange, |
||||||
|
isEndingDayRange, |
||||||
|
isWithinRange, |
||||||
|
} = getDayStatus(dayItem); |
||||||
|
const customDayItemClassName = customDaysClassName.find((day) => |
||||||
|
isSameDay(dayItem, day) |
||||||
|
); |
||||||
|
|
||||||
|
const classNames = '' |
||||||
|
.concat(isToday && !isSelected ? ` -today ${calendarTodayClassName}` : '') |
||||||
|
.concat(!dayItem.isStandard ? ' -blank' : '') |
||||||
|
.concat(dayItem.isWeekend && shouldHighlightWeekends ? ' -weekend' : '') |
||||||
|
.concat( |
||||||
|
customDayItemClassName ? ` ${customDayItemClassName.className}` : '' |
||||||
|
) |
||||||
|
.concat(isSelected ? ` -selected ${calendarSelectedDayClassName}` : '') |
||||||
|
.concat( |
||||||
|
isStartingDayRange |
||||||
|
? ` -selectedStart ${calendarRangeStartClassName}` |
||||||
|
: '' |
||||||
|
) |
||||||
|
.concat( |
||||||
|
isEndingDayRange ? ` -selectedEnd ${calendarRangeEndClassName}` : '' |
||||||
|
) |
||||||
|
.concat( |
||||||
|
isWithinRange |
||||||
|
? ` -selectedBetween ${calendarRangeBetweenClassName}` |
||||||
|
: '' |
||||||
|
) |
||||||
|
.concat(dayItem.isDisabled ? ' -disabled' : ''); |
||||||
|
return classNames; |
||||||
|
}; |
||||||
|
|
||||||
|
const getViewMonthDays = (date) => { |
||||||
|
// to match month starting date with the correct weekday label
|
||||||
|
const prependingBlankDays = createUniqueRange( |
||||||
|
getMonthFirstWeekday(date), |
||||||
|
'starting-blank' |
||||||
|
); |
||||||
|
const standardDays = createUniqueRange(getMonthLength(date)).map((day) => ({ |
||||||
|
...day, |
||||||
|
isStandard: true, |
||||||
|
month: date.month, |
||||||
|
year: date.year, |
||||||
|
})); |
||||||
|
const allDays = [...prependingBlankDays, ...standardDays]; |
||||||
|
return allDays; |
||||||
|
}; |
||||||
|
|
||||||
|
const handleDayPress = ({ isDisabled, ...dayItem }) => { |
||||||
|
if (isDisabled) { |
||||||
|
onDisabledDayError(dayItem); // good for showing error messages
|
||||||
|
} else handleDayClick(dayItem); |
||||||
|
}; |
||||||
|
|
||||||
|
const isDayReachableByKeyboard = ({ |
||||||
|
isOnActiveSlide, |
||||||
|
isStandard, |
||||||
|
isSelected, |
||||||
|
isStartingDayRange, |
||||||
|
isToday, |
||||||
|
day, |
||||||
|
}) => { |
||||||
|
if (isQuickSelectorOpen || !isOnActiveSlide || !isStandard) return false; |
||||||
|
if (isSelected || isStartingDayRange || isToday || day === 1) return true; |
||||||
|
}; |
||||||
|
|
||||||
|
const renderEachWeekDays = ( |
||||||
|
{ id, value: day, month, year, isStandard }, |
||||||
|
index |
||||||
|
) => { |
||||||
|
const dayItem = { day, month, year }; |
||||||
|
const isInDisabledDaysRange = disabledDays.some((disabledDay) => |
||||||
|
isSameDay(dayItem, disabledDay) |
||||||
|
); |
||||||
|
const isBeforeMinimumDate = isBeforeDate(dayItem, minimumDate); |
||||||
|
const isAfterMaximumDate = isBeforeDate(maximumDate, dayItem); |
||||||
|
const isNotInValidRange = |
||||||
|
isStandard && (isBeforeMinimumDate || isAfterMaximumDate); |
||||||
|
const isDisabled = isInDisabledDaysRange || isNotInValidRange; |
||||||
|
const isWeekend = weekDaysList.some( |
||||||
|
(weekDayItem, weekDayItemIndex) => |
||||||
|
weekDayItem.isWeekend && weekDayItemIndex === index |
||||||
|
); |
||||||
|
const additionalClass = getDayClassNames({ |
||||||
|
...dayItem, |
||||||
|
isWeekend, |
||||||
|
isStandard, |
||||||
|
isDisabled, |
||||||
|
}); |
||||||
|
const dayLabel = `${weekDaysList[index].name}, ${day} ${getMonthName( |
||||||
|
month |
||||||
|
)} ${year}`;
|
||||||
|
const isOnActiveSlide = month === activeDate.month; |
||||||
|
const dayStatus = getDayStatus(dayItem); |
||||||
|
const { isSelected, isStartingDayRange, isEndingDayRange, isWithinRange } = |
||||||
|
dayStatus; |
||||||
|
const shouldEnableKeyboardNavigation = isDayReachableByKeyboard({ |
||||||
|
...dayItem, |
||||||
|
...dayStatus, |
||||||
|
isOnActiveSlide, |
||||||
|
isStandard, |
||||||
|
}); |
||||||
|
|
||||||
|
// showing Dots Of Events
|
||||||
|
const specialDate = (sDay, sMonth, sYear) => { |
||||||
|
return events.map((e) => { |
||||||
|
if (sDay == e.day && sMonth == e.month && sYear == e.year) { |
||||||
|
return <span key={'dot' + e.id} style={{ |
||||||
|
color: e.color |
||||||
|
}}>.</span>; |
||||||
|
|
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
const showEventDescription = (sDay, sMonth, sYear) => { |
||||||
|
|
||||||
|
return events.map((e) => { |
||||||
|
|
||||||
|
if (sDay == e.day && sMonth == e.month && sYear == e.year) { |
||||||
|
|
||||||
|
return (<div key={'description' + e.id}><p>{e.description}</p></div>) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
alignItems: 'center', |
||||||
|
}} |
||||||
|
tabIndex={shouldEnableKeyboardNavigation ? '0' : '-1'} |
||||||
|
key={id} |
||||||
|
className={`Calendar__day ${type} -${isRtl ? 'rtl' : 'ltr'} ${additionalClass}`} |
||||||
|
onClick={() => { |
||||||
|
handleDayPress({ ...dayItem, isDisabled }); |
||||||
|
// console.log(specialDate(day));
|
||||||
|
// console.log(showEventDescription(day))
|
||||||
|
showEvent(showEventDescription(day, month, year)) |
||||||
|
|
||||||
|
}} |
||||||
|
onKeyDown={({ key }) => { |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (key === 'Enter') handleDayPress({ ...dayItem, isDisabled }); |
||||||
|
}} |
||||||
|
aria-disabled={isDisabled} |
||||||
|
aria-label={dayLabel} |
||||||
|
aria-selected={ |
||||||
|
isSelected || isStartingDayRange || isEndingDayRange || isWithinRange |
||||||
|
} |
||||||
|
{...(!isStandard || !isOnActiveSlide || isQuickSelectorOpen |
||||||
|
? { 'aria-hidden': true } |
||||||
|
: {})} |
||||||
|
role="gridcell" |
||||||
|
data-is-default-selectable={shouldEnableKeyboardNavigation} |
||||||
|
> |
||||||
|
<p>{!isStandard ? '' : getLanguageDigits(day)}</p> |
||||||
|
{/* Dots Of Events */} |
||||||
|
<span>{specialDate(day, month, year)}</span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const renderMonthDays = (isInitialActiveChild) => { |
||||||
|
const date = getSlideDate({ |
||||||
|
activeDate, |
||||||
|
isInitialActiveChild, |
||||||
|
monthChangeDirection, |
||||||
|
parent: calendarSectionWrapper.current, |
||||||
|
}); |
||||||
|
const allDays = getViewMonthDays(date); |
||||||
|
const renderSingleWeekRow = (weekRowIndex) => { |
||||||
|
const eachWeekDays = allDays |
||||||
|
.slice(weekRowIndex * 7, weekRowIndex * 7 + 7) |
||||||
|
.map(renderEachWeekDays); |
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={String(weekRowIndex)} |
||||||
|
className="Calendar__weekRow" |
||||||
|
role="row" |
||||||
|
> |
||||||
|
{eachWeekDays} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
return Array.from(Array(6).keys()).map(renderSingleWeekRow); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleKeyDown = (e) => { |
||||||
|
handleKeyboardNavigation(e, { allowVerticalArrows: true }); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={calendarSectionWrapper} |
||||||
|
className="Calendar__sectionWrapper" |
||||||
|
role="presentation" |
||||||
|
data-testid="days-section-wrapper" |
||||||
|
onKeyDown={handleKeyDown} |
||||||
|
> |
||||||
|
<div |
||||||
|
onAnimationEnd={(e) => { |
||||||
|
handleSlideAnimationEnd(e); |
||||||
|
onSlideChange(); |
||||||
|
}} |
||||||
|
className="Calendar__section -shown" |
||||||
|
role="rowgroup" |
||||||
|
> |
||||||
|
{renderMonthDays(true)} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
onAnimationEnd={(e) => { |
||||||
|
handleSlideAnimationEnd(e); |
||||||
|
onSlideChange(); |
||||||
|
}} |
||||||
|
className="Calendar__section -hiddenNext" |
||||||
|
role="rowgroup" |
||||||
|
> |
||||||
|
{renderMonthDays(false)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
DaysList.defaultProps = { |
||||||
|
onChange: () => { }, |
||||||
|
onDisabledDayError: () => { }, |
||||||
|
disabledDays: [], |
||||||
|
calendarTodayClassName: '', |
||||||
|
calendarSelectedDayClassName: '', |
||||||
|
calendarRangeStartClassName: '', |
||||||
|
calendarRangeBetweenClassName: '', |
||||||
|
calendarRangeEndClassName: '', |
||||||
|
shouldHighlightWeekends: false, |
||||||
|
}; |
||||||
|
|
||||||
|
export default DaysList; |
||||||
@ -0,0 +1,205 @@ |
|||||||
|
import React, { useEffect, useRef } from 'react'; |
||||||
|
|
||||||
|
import { isSameDay } from '../shared/generalUtils'; |
||||||
|
import { getSlideDate, animateContent, handleSlideAnimationEnd } from '../shared/sliderHelpers'; |
||||||
|
import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; |
||||||
|
|
||||||
|
const Header = ({ |
||||||
|
maximumDate, |
||||||
|
minimumDate, |
||||||
|
onMonthChange, |
||||||
|
activeDate, |
||||||
|
monthChangeDirection, |
||||||
|
onMonthSelect, |
||||||
|
onYearSelect, |
||||||
|
isMonthSelectorOpen, |
||||||
|
isYearSelectorOpen, |
||||||
|
locale, |
||||||
|
type |
||||||
|
}) => { |
||||||
|
const headerElement = useRef(null); |
||||||
|
const monthYearWrapperElement = useRef(null); |
||||||
|
|
||||||
|
const { getMonthName, isBeforeDate, getLanguageDigits } = useLocaleUtils(locale); |
||||||
|
const { |
||||||
|
isRtl, |
||||||
|
nextMonth, |
||||||
|
previousMonth, |
||||||
|
openMonthSelector, |
||||||
|
closeMonthSelector, |
||||||
|
openYearSelector, |
||||||
|
closeYearSelector, |
||||||
|
} = useLocaleLanguage(locale); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!monthChangeDirection) return; |
||||||
|
animateContent({ |
||||||
|
direction: monthChangeDirection, |
||||||
|
parent: monthYearWrapperElement.current, |
||||||
|
}); |
||||||
|
}, [monthChangeDirection]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const isOpen = isMonthSelectorOpen || isYearSelectorOpen; |
||||||
|
const monthText = headerElement.current.querySelector( |
||||||
|
'.Calendar__monthYear.-shown .Calendar__monthText', |
||||||
|
); |
||||||
|
const yearText = monthText.nextSibling; |
||||||
|
const hasActiveBackground = element => element.classList.contains('-activeBackground'); |
||||||
|
const isInitialRender = |
||||||
|
!isOpen && !hasActiveBackground(monthText) && !hasActiveBackground(yearText); |
||||||
|
if (isInitialRender) return; |
||||||
|
|
||||||
|
const arrows = [...headerElement.current.querySelectorAll('.Calendar__monthArrowWrapper')]; |
||||||
|
const hasMonthSelectorToggled = isMonthSelectorOpen || hasActiveBackground(monthText); |
||||||
|
const primaryElement = hasMonthSelectorToggled ? monthText : yearText; |
||||||
|
const secondaryElement = hasMonthSelectorToggled ? yearText : monthText; |
||||||
|
|
||||||
|
let translateXDirection = hasMonthSelectorToggled ? 1 : -1; |
||||||
|
if (isRtl) translateXDirection *= -1; |
||||||
|
const scale = !isOpen ? 0.95 : 1; |
||||||
|
const translateX = !isOpen ? 0 : `${(translateXDirection * secondaryElement.offsetWidth) / 2}`; |
||||||
|
if (!isOpen) { |
||||||
|
secondaryElement.removeAttribute('aria-hidden'); |
||||||
|
} else { |
||||||
|
secondaryElement.setAttribute('aria-hidden', true); |
||||||
|
} |
||||||
|
secondaryElement.setAttribute('tabindex', isOpen ? '-1' : '0'); |
||||||
|
secondaryElement.style.transform = ''; |
||||||
|
primaryElement.style.transform = `scale(${scale}) ${ |
||||||
|
translateX ? `translateX(${translateX}px)` : '' |
||||||
|
}`;
|
||||||
|
primaryElement.classList.toggle('-activeBackground'); |
||||||
|
secondaryElement.classList.toggle('-hidden'); |
||||||
|
arrows.forEach(arrow => { |
||||||
|
const isHidden = arrow.classList.contains('-hidden'); |
||||||
|
arrow.classList.toggle('-hidden'); |
||||||
|
if (isHidden) { |
||||||
|
arrow.removeAttribute('aria-hidden'); |
||||||
|
arrow.setAttribute('tabindex', '0'); |
||||||
|
} else { |
||||||
|
arrow.setAttribute('aria-hidden', true); |
||||||
|
arrow.setAttribute('tabindex', '-1'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, [isMonthSelectorOpen, isYearSelectorOpen]); |
||||||
|
|
||||||
|
const getMonthYearText = isInitialActiveChild => { |
||||||
|
const date = getSlideDate({ |
||||||
|
isInitialActiveChild, |
||||||
|
monthChangeDirection, |
||||||
|
activeDate, |
||||||
|
parent: monthYearWrapperElement.current, |
||||||
|
}); |
||||||
|
const year = getLanguageDigits(date.year); |
||||||
|
const month = getMonthName(date.month); |
||||||
|
return { month, year }; |
||||||
|
}; |
||||||
|
|
||||||
|
const isNextMonthArrowDisabled = |
||||||
|
maximumDate && |
||||||
|
isBeforeDate(maximumDate, { ...activeDate, month: activeDate.month + 1, day: 1 }); |
||||||
|
const isPreviousMonthArrowDisabled = |
||||||
|
minimumDate && |
||||||
|
(isBeforeDate({ ...activeDate, day: 1 }, minimumDate) || |
||||||
|
isSameDay(minimumDate, { ...activeDate, day: 1 })); |
||||||
|
|
||||||
|
const onMonthChangeTrigger = direction => { |
||||||
|
const isMonthChanging = Array.from(monthYearWrapperElement.current.children).some(child => |
||||||
|
child.classList.contains('-shownAnimated'), |
||||||
|
); |
||||||
|
if (isMonthChanging) return; |
||||||
|
onMonthChange(direction); |
||||||
|
}; |
||||||
|
|
||||||
|
// first button text is the one who shows the current month and year(initial active child)
|
||||||
|
const monthYearButtons = [true, false].map(isInitialActiveChild => { |
||||||
|
const { month, year } = getMonthYearText(isInitialActiveChild); |
||||||
|
const isActiveMonth = month === getMonthName(activeDate.month); |
||||||
|
const hiddenStatus = { |
||||||
|
...(isActiveMonth ? {} : { 'aria-hidden': true }), |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div |
||||||
|
onAnimationEnd={handleSlideAnimationEnd} |
||||||
|
className={`Calendar__monthYear ${isInitialActiveChild ? '-shown' : '-hiddenNext'}`} |
||||||
|
role="presentation" |
||||||
|
key={String(isInitialActiveChild)} |
||||||
|
{...hiddenStatus} |
||||||
|
> |
||||||
|
<button |
||||||
|
onClick={onMonthSelect} |
||||||
|
type="button" |
||||||
|
className="Calendar__monthText" |
||||||
|
aria-label={isMonthSelectorOpen ? closeMonthSelector : openMonthSelector} |
||||||
|
tabIndex={isActiveMonth ? '0' : '-1'} |
||||||
|
{...hiddenStatus} |
||||||
|
> |
||||||
|
{month} |
||||||
|
</button> |
||||||
|
<button |
||||||
|
onClick={onYearSelect} |
||||||
|
type="button" |
||||||
|
className="Calendar__yearText" |
||||||
|
aria-label={isYearSelectorOpen ? closeYearSelector : openYearSelector} |
||||||
|
tabIndex={isActiveMonth ? '0' : '-1'} |
||||||
|
{...hiddenStatus} |
||||||
|
> |
||||||
|
{year} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div ref={headerElement} className={`Calendar__header ${type}`}> |
||||||
|
{type == 'dashboard' ?
|
||||||
|
|
||||||
|
<div |
||||||
|
className={`Calendar__monthYearContainer ${type}`} |
||||||
|
ref={monthYearWrapperElement} |
||||||
|
data-testid="month-year-container" |
||||||
|
> |
||||||
|
|
||||||
|
{monthYearButtons} |
||||||
|
</div> |
||||||
|
: |
||||||
|
<> |
||||||
|
<button |
||||||
|
className="Calendar__monthArrowWrapper -right" |
||||||
|
onClick={() => { |
||||||
|
onMonthChangeTrigger('PREVIOUS'); |
||||||
|
}} |
||||||
|
aria-label={previousMonth} |
||||||
|
type="button" |
||||||
|
disabled={isPreviousMonthArrowDisabled} |
||||||
|
> |
||||||
|
<span className="Calendar__monthArrow" /> |
||||||
|
</button> |
||||||
|
<div |
||||||
|
className="Calendar__monthYearContainer" |
||||||
|
ref={monthYearWrapperElement} |
||||||
|
data-testid="month-year-container" |
||||||
|
> |
||||||
|
|
||||||
|
{monthYearButtons} |
||||||
|
</div> |
||||||
|
<button |
||||||
|
className="Calendar__monthArrowWrapper -left" |
||||||
|
onClick={() => { |
||||||
|
onMonthChangeTrigger('NEXT'); |
||||||
|
}} |
||||||
|
aria-label={nextMonth} |
||||||
|
type="button" |
||||||
|
disabled={isNextMonthArrowDisabled} |
||||||
|
> |
||||||
|
<span className="Calendar__monthArrow" /> |
||||||
|
</button> |
||||||
|
</> |
||||||
|
|
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Header; |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
import React, { useRef, useEffect } from 'react'; |
||||||
|
|
||||||
|
import { isSameDay } from '../shared/generalUtils'; |
||||||
|
import handleKeyboardNavigation from '../shared/keyboardNavigation'; |
||||||
|
import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; |
||||||
|
|
||||||
|
const MonthSelector = ({ activeDate, maximumDate, minimumDate, onMonthSelect, isOpen, locale }) => { |
||||||
|
const monthSelector = useRef(null); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const classToggleMethod = isOpen ? 'add' : 'remove'; |
||||||
|
monthSelector.current.classList[classToggleMethod]('-open'); |
||||||
|
}, [isOpen]); |
||||||
|
|
||||||
|
const { getMonthNumber, isBeforeDate } = useLocaleUtils(locale); |
||||||
|
const { months: monthsList } = useLocaleLanguage(locale); |
||||||
|
|
||||||
|
const handleKeyDown = e => { |
||||||
|
handleKeyboardNavigation(e, { allowVerticalArrows: false }); |
||||||
|
}; |
||||||
|
|
||||||
|
const renderMonthSelectorItems = () => |
||||||
|
monthsList.map(persianMonth => { |
||||||
|
const monthNumber = getMonthNumber(persianMonth); |
||||||
|
const monthDate = { day: 1, month: monthNumber, year: activeDate.year }; |
||||||
|
const isAfterMaximumDate = |
||||||
|
maximumDate && isBeforeDate(maximumDate, { ...monthDate, month: monthNumber }); |
||||||
|
const isBeforeMinimumDate = |
||||||
|
minimumDate && |
||||||
|
(isBeforeDate({ ...monthDate, month: monthNumber + 1 }, minimumDate) || |
||||||
|
isSameDay({ ...monthDate, month: monthNumber + 1 }, minimumDate)); |
||||||
|
const isSelected = monthNumber === activeDate.month; |
||||||
|
return ( |
||||||
|
<li |
||||||
|
key={persianMonth} |
||||||
|
className={`Calendar__monthSelectorItem ${isSelected ? '-active' : ''}`} |
||||||
|
> |
||||||
|
<button |
||||||
|
tabIndex={isSelected && isOpen ? '0' : '-1'} |
||||||
|
onClick={() => { |
||||||
|
onMonthSelect(monthNumber); |
||||||
|
}} |
||||||
|
className="Calendar__monthSelectorItemText" |
||||||
|
type="button" |
||||||
|
disabled={isAfterMaximumDate || isBeforeMinimumDate} |
||||||
|
aria-pressed={isSelected} |
||||||
|
data-is-default-selectable={isSelected} |
||||||
|
> |
||||||
|
{persianMonth} |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
); |
||||||
|
}); |
||||||
|
return ( |
||||||
|
<div |
||||||
|
role="presentation" |
||||||
|
className="Calendar__monthSelectorAnimationWrapper" |
||||||
|
{...(isOpen ? {} : { 'aria-hidden': true })} |
||||||
|
> |
||||||
|
<div |
||||||
|
role="presentation" |
||||||
|
data-testid="month-selector-wrapper" |
||||||
|
className="Calendar__monthSelectorWrapper" |
||||||
|
onKeyDown={handleKeyDown} |
||||||
|
> |
||||||
|
<ul ref={monthSelector} className="Calendar__monthSelector" data-testid="month-selector"> |
||||||
|
{renderMonthSelectorItems()} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default MonthSelector; |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
import React, { useRef, useEffect } from 'react'; |
||||||
|
|
||||||
|
import { MINIMUM_SELECTABLE_YEAR_SUBTRACT, MAXIMUM_SELECTABLE_YEAR_SUM } from '../shared/constants'; |
||||||
|
import handleKeyboardNavigation from '../shared/keyboardNavigation'; |
||||||
|
import { useLocaleUtils } from '../shared/hooks'; |
||||||
|
|
||||||
|
const YearSelector = ({ |
||||||
|
isOpen, |
||||||
|
activeDate, |
||||||
|
onYearSelect, |
||||||
|
selectorStartingYear, |
||||||
|
selectorEndingYear, |
||||||
|
maximumDate, |
||||||
|
minimumDate, |
||||||
|
locale, |
||||||
|
}) => { |
||||||
|
const wrapperElement = useRef(null); |
||||||
|
const yearListElement = useRef(null); |
||||||
|
|
||||||
|
const { getLanguageDigits, getToday } = useLocaleUtils(locale); |
||||||
|
const startingYearValue = |
||||||
|
selectorStartingYear || getToday().year - MINIMUM_SELECTABLE_YEAR_SUBTRACT; |
||||||
|
const endingYearValue = selectorEndingYear || getToday().year + MAXIMUM_SELECTABLE_YEAR_SUM; |
||||||
|
const allYears = []; |
||||||
|
for (let i = startingYearValue; i <= endingYearValue; i += 1) { |
||||||
|
allYears.push(i); |
||||||
|
} |
||||||
|
useEffect(() => { |
||||||
|
const classToggleMethod = isOpen ? 'add' : 'remove'; |
||||||
|
const activeSelectorYear = wrapperElement.current.querySelector( |
||||||
|
'.Calendar__yearSelectorItem.-active', |
||||||
|
); |
||||||
|
if (!activeSelectorYear) { |
||||||
|
throw new RangeError( |
||||||
|
`Provided value for year is out of selectable year range. You're probably using a wrong locale prop value or your provided value's locale is different from the date picker locale. Try changing the 'locale' prop or the value you've provided.`, |
||||||
|
); |
||||||
|
} |
||||||
|
wrapperElement.current.classList[classToggleMethod]('-faded'); |
||||||
|
yearListElement.current.scrollTop = |
||||||
|
activeSelectorYear.offsetTop - activeSelectorYear.offsetHeight * 5; |
||||||
|
yearListElement.current.classList[classToggleMethod]('-open'); |
||||||
|
}, [isOpen]); |
||||||
|
|
||||||
|
const renderSelectorYears = () => { |
||||||
|
return allYears.map(item => { |
||||||
|
const isAfterMaximumDate = maximumDate && item > maximumDate.year; |
||||||
|
const isBeforeMinimumDate = minimumDate && item < minimumDate.year; |
||||||
|
const isSelected = activeDate.year === item; |
||||||
|
return ( |
||||||
|
<li key={item} className={`Calendar__yearSelectorItem ${isSelected ? '-active' : ''}`}> |
||||||
|
<button |
||||||
|
tabIndex={isSelected && isOpen ? '0' : '-1'} |
||||||
|
className="Calendar__yearSelectorText" |
||||||
|
type="button" |
||||||
|
onClick={() => { |
||||||
|
onYearSelect(item); |
||||||
|
}} |
||||||
|
disabled={isAfterMaximumDate || isBeforeMinimumDate} |
||||||
|
aria-pressed={isSelected} |
||||||
|
data-is-default-selectable={isSelected} |
||||||
|
> |
||||||
|
{getLanguageDigits(item)} |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleKeyDown = e => { |
||||||
|
handleKeyboardNavigation(e, { allowVerticalArrows: false }); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="Calendar__yearSelectorAnimationWrapper" |
||||||
|
role="presentation" |
||||||
|
{...(isOpen ? {} : { 'aria-hidden': true })} |
||||||
|
> |
||||||
|
<div |
||||||
|
ref={wrapperElement} |
||||||
|
className="Calendar__yearSelectorWrapper" |
||||||
|
role="presentation" |
||||||
|
data-testid="year-selector-wrapper" |
||||||
|
onKeyDown={handleKeyDown} |
||||||
|
> |
||||||
|
<ul ref={yearListElement} className="Calendar__yearSelector" data-testid="year-selector"> |
||||||
|
{renderSelectorYears()} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
YearSelector.defaultProps = { |
||||||
|
selectorStartingYear: 0, |
||||||
|
selectorEndingYear: 0, |
||||||
|
}; |
||||||
|
|
||||||
|
export default YearSelector; |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export { default as Header } from './Header'; |
||||||
|
export { default as MonthSelector } from './MonthSelector'; |
||||||
|
export { default as YearSelector } from './YearSelector'; |
||||||
|
export { default as DaysList } from './DaysList'; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export { default} from './DatePicker'; |
||||||
|
export * from './Calendar'; |
||||||
|
export { default as utils } from './shared/localeUtils'; |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
export const PERSIAN_NUMBERS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']; |
||||||
|
|
||||||
|
export const PERSIAN_MONTHS = [ |
||||||
|
'فروردین', |
||||||
|
'اردیبهشت', |
||||||
|
'خرداد', |
||||||
|
'تیر', |
||||||
|
'مرداد', |
||||||
|
'شهریور', |
||||||
|
'مهر', |
||||||
|
'آبان', |
||||||
|
'آذر', |
||||||
|
'دی', |
||||||
|
'بهمن', |
||||||
|
'اسفند', |
||||||
|
]; |
||||||
|
|
||||||
|
export const GREGORIAN_MONTHS = [ |
||||||
|
'January', |
||||||
|
'February', |
||||||
|
'March', |
||||||
|
'April', |
||||||
|
'May', |
||||||
|
'June', |
||||||
|
'July', |
||||||
|
'August', |
||||||
|
'September', |
||||||
|
'October', |
||||||
|
'November', |
||||||
|
'December', |
||||||
|
]; |
||||||
|
|
||||||
|
export const PERSIAN_WEEK_DAYS = [ |
||||||
|
{ |
||||||
|
name: 'شنبه', |
||||||
|
short: 'ش', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'یکشنبه', |
||||||
|
short: 'ی', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'دوشنبه', |
||||||
|
short: 'د', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'سه شنبه', |
||||||
|
short: 'س', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'چهارشنبه', |
||||||
|
short: 'چ', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'پنجشنبه', |
||||||
|
short: 'پ', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'جمعه', |
||||||
|
short: 'ج', |
||||||
|
isWeekend: true, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export const GREGORIAN_WEEK_DAYS = [ |
||||||
|
{ |
||||||
|
name: 'Sunday', |
||||||
|
short: 'S', |
||||||
|
isWeekend: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Monday', |
||||||
|
short: 'M', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Tuesday', |
||||||
|
short: 'T', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Wednesday', |
||||||
|
short: 'W', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Thursday', |
||||||
|
short: 'T', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Friday', |
||||||
|
short: 'F', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Saturday', |
||||||
|
short: 'S', |
||||||
|
isWeekend: true, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export const MINIMUM_SELECTABLE_YEAR_SUBTRACT = 100; |
||||||
|
|
||||||
|
export const MAXIMUM_SELECTABLE_YEAR_SUM = 50; |
||||||
|
|
||||||
|
export const TYPE_SINGLE_DATE = 'SINGLE_DATE'; |
||||||
|
export const TYPE_RANGE = 'RANGE'; |
||||||
|
export const TYPE_MUTLI_DATE = 'MUTLI_DATE'; |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
import { TYPE_SINGLE_DATE, TYPE_RANGE, TYPE_MUTLI_DATE } from './constants'; |
||||||
|
|
||||||
|
/* |
||||||
|
These utility functions don't depend on locale of the date picker(Persian or Gregorian) |
||||||
|
*/ |
||||||
|
|
||||||
|
const createUniqueRange = (number, startingId) => |
||||||
|
Array.from(Array(number).keys()).map(key => ({ |
||||||
|
value: key + 1, |
||||||
|
id: `${startingId}-${key}`, |
||||||
|
})); |
||||||
|
|
||||||
|
const isSameDay = (day1, day2) => { |
||||||
|
if (!day1 || !day2) return false; |
||||||
|
return day1.day === day2.day && day1.month === day2.month && day1.year === day2.year; |
||||||
|
}; |
||||||
|
|
||||||
|
const putZero = number => (number.toString().length === 1 ? `0${number}` : number); |
||||||
|
|
||||||
|
const toExtendedDay = date => [date.year, date.month, date.day]; |
||||||
|
|
||||||
|
const shallowClone = value => ({ ...value }); |
||||||
|
|
||||||
|
const deepCloneObject = obj => |
||||||
|
JSON.parse(JSON.stringify(obj, (key, value) => (typeof value === 'undefined' ? null : value))); |
||||||
|
|
||||||
|
const getDateAccordingToMonth = (date, direction) => { |
||||||
|
const toSum = direction === 'NEXT' ? 1 : -1; |
||||||
|
let newMonthIndex = date.month + toSum; |
||||||
|
let newYear = date.year; |
||||||
|
if (newMonthIndex < 1) { |
||||||
|
newMonthIndex = 12; |
||||||
|
newYear -= 1; |
||||||
|
} |
||||||
|
if (newMonthIndex > 12) { |
||||||
|
newMonthIndex = 1; |
||||||
|
newYear += 1; |
||||||
|
} |
||||||
|
const newDate = { year: newYear, month: newMonthIndex, day: 1 }; |
||||||
|
return newDate; |
||||||
|
}; |
||||||
|
|
||||||
|
const hasProperty = (object, propertyName) => |
||||||
|
Object.prototype.hasOwnProperty.call(object || {}, propertyName); |
||||||
|
|
||||||
|
const getValueType = value => { |
||||||
|
if (Array.isArray(value)) return TYPE_MUTLI_DATE; |
||||||
|
if (hasProperty(value, 'from') && hasProperty(value, 'to')) return TYPE_RANGE; |
||||||
|
if ( |
||||||
|
!value || |
||||||
|
(hasProperty(value, 'year') && hasProperty(value, 'month') && hasProperty(value, 'day')) |
||||||
|
) { |
||||||
|
return TYPE_SINGLE_DATE; |
||||||
|
} |
||||||
|
throw new TypeError( |
||||||
|
`The passed value is malformed! Please make sure you're using one of the valid value types for date picker.`, |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export { |
||||||
|
createUniqueRange, |
||||||
|
isSameDay, |
||||||
|
putZero, |
||||||
|
toExtendedDay, |
||||||
|
shallowClone, |
||||||
|
deepCloneObject, |
||||||
|
getDateAccordingToMonth, |
||||||
|
getValueType, |
||||||
|
}; |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import { useMemo } from 'react'; |
||||||
|
|
||||||
|
import utils from './localeUtils'; |
||||||
|
import getLanguageText from './localeLanguages'; |
||||||
|
|
||||||
|
const useLocaleUtils = locale => useMemo(() => utils(locale), [locale]); |
||||||
|
|
||||||
|
const useLocaleLanguage = locale => useMemo(() => getLanguageText(locale), [locale]); |
||||||
|
|
||||||
|
export { useLocaleUtils, useLocaleLanguage }; |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
const handleArrowKeys = (e, { allowVerticalArrows }) => { |
||||||
|
const { activeElement } = document; |
||||||
|
const getNthChildSafe = (element, index) => (element ? element.children[index] : null); |
||||||
|
const getStandardItem = item => item && (item.hasAttribute('aria-hidden') ? null : item); |
||||||
|
const { nextSibling: nextRow, previousSibling: previousRow } = activeElement.parentElement; |
||||||
|
const nextSibling = getStandardItem(activeElement.nextSibling || getNthChildSafe(nextRow, 0)); |
||||||
|
const previousRowLength = previousRow ? previousRow.children.length - 1 : 0; |
||||||
|
const previousSibling = getStandardItem( |
||||||
|
activeElement.previousSibling || getNthChildSafe(previousRow, previousRowLength), |
||||||
|
); |
||||||
|
const getVerticalSibling = row => |
||||||
|
getNthChildSafe(row, Array.from(activeElement.parentElement.children).indexOf(activeElement)); |
||||||
|
const downSibling = getStandardItem(getVerticalSibling(nextRow)); |
||||||
|
const upSibling = getStandardItem(getVerticalSibling(previousRow)); |
||||||
|
const isDefaultSelectable = activeElement.dataset.isDefaultSelectable === 'true'; |
||||||
|
|
||||||
|
if (!isDefaultSelectable) activeElement.tabIndex = '-1'; |
||||||
|
const focusIfAvailable = element => { |
||||||
|
e.preventDefault(); |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (element) { |
||||||
|
element.setAttribute('tabindex', '0'); |
||||||
|
element.focus(); |
||||||
|
} |
||||||
|
}; |
||||||
|
switch (e.key) { |
||||||
|
case 'ArrowRight': |
||||||
|
focusIfAvailable(nextSibling); |
||||||
|
break; |
||||||
|
case 'ArrowLeft': |
||||||
|
focusIfAvailable(previousSibling); |
||||||
|
break; |
||||||
|
case 'ArrowDown': |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (allowVerticalArrows) focusIfAvailable(downSibling); |
||||||
|
break; |
||||||
|
case 'ArrowUp': |
||||||
|
/* istanbul ignore else */ |
||||||
|
if (allowVerticalArrows) focusIfAvailable(upSibling); |
||||||
|
break; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default handleArrowKeys; |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
import jalaali from 'jalaali-js'; |
||||||
|
|
||||||
|
import { |
||||||
|
GREGORIAN_MONTHS, |
||||||
|
PERSIAN_MONTHS, |
||||||
|
GREGORIAN_WEEK_DAYS, |
||||||
|
PERSIAN_WEEK_DAYS, |
||||||
|
PERSIAN_NUMBERS, |
||||||
|
} from './constants'; |
||||||
|
import { toExtendedDay } from './generalUtils'; |
||||||
|
|
||||||
|
const localeLanguages = { |
||||||
|
en: { |
||||||
|
months: GREGORIAN_MONTHS, |
||||||
|
weekDays: GREGORIAN_WEEK_DAYS, |
||||||
|
weekStartingIndex: 0, |
||||||
|
getToday(gregorainTodayObject) { |
||||||
|
return gregorainTodayObject; |
||||||
|
}, |
||||||
|
toNativeDate(date) { |
||||||
|
return new Date(date.year, date.month - 1, date.day); |
||||||
|
}, |
||||||
|
getMonthLength(date) { |
||||||
|
return new Date(date.year, date.month, 0).getDate(); |
||||||
|
}, |
||||||
|
transformDigit(digit) { |
||||||
|
return digit; |
||||||
|
}, |
||||||
|
nextMonth: 'Next Month', |
||||||
|
previousMonth: 'Previous Month', |
||||||
|
openMonthSelector: 'Open Month Selector', |
||||||
|
openYearSelector: 'Open Year Selector', |
||||||
|
closeMonthSelector: 'Close Month Selector', |
||||||
|
closeYearSelector: 'Close Year Selector', |
||||||
|
from: 'from', |
||||||
|
to: 'to', |
||||||
|
defaultPlaceholder: 'Select...', |
||||||
|
digitSeparator: ',', |
||||||
|
yearLetterSkip: 0, |
||||||
|
isRtl: false, |
||||||
|
}, |
||||||
|
fa: { |
||||||
|
months: PERSIAN_MONTHS, |
||||||
|
weekDays: PERSIAN_WEEK_DAYS, |
||||||
|
weekStartingIndex: 1, |
||||||
|
getToday({ year, month, day }) { |
||||||
|
const { jy, jm, jd } = jalaali.toJalaali(year, month, day); |
||||||
|
return { year: jy, month: jm, day: jd }; |
||||||
|
}, |
||||||
|
toNativeDate(date) { |
||||||
|
const gregorian = jalaali.toGregorian(...toExtendedDay(date)); |
||||||
|
return new Date(gregorian.gy, gregorian.gm - 1, gregorian.gd); |
||||||
|
}, |
||||||
|
getMonthLength(date) { |
||||||
|
return jalaali.jalaaliMonthLength(date.year, date.month); |
||||||
|
}, |
||||||
|
transformDigit(digit) { |
||||||
|
return digit |
||||||
|
.toString() |
||||||
|
.split('') |
||||||
|
.map(letter => PERSIAN_NUMBERS[Number(letter)]) |
||||||
|
.join(''); |
||||||
|
}, |
||||||
|
nextMonth: 'ماه بعد', |
||||||
|
previousMonth: 'ماه قبل', |
||||||
|
openMonthSelector: 'نمایش انتخابگر ماه', |
||||||
|
openYearSelector: 'نمایش انتخابگر سال', |
||||||
|
closeMonthSelector: 'بستن انتخابگر ماه', |
||||||
|
closeYearSelector: 'بستن انتخابگر ماه', |
||||||
|
from: 'از', |
||||||
|
to: 'تا', |
||||||
|
defaultPlaceholder: 'انتخاب...', |
||||||
|
digitSeparator: '،', |
||||||
|
yearLetterSkip: -2, |
||||||
|
isRtl: true, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const getLocaleDetails = locale => { |
||||||
|
if (typeof locale === 'string') return localeLanguages[locale]; |
||||||
|
return locale; |
||||||
|
}; |
||||||
|
|
||||||
|
export { localeLanguages }; |
||||||
|
export default getLocaleDetails; |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
/* |
||||||
|
These utility functions highly depend on locale of the date picker(Persian or Gregorian) |
||||||
|
*/ |
||||||
|
|
||||||
|
import getLocaleDetails from './localeLanguages'; |
||||||
|
|
||||||
|
const utils = (locale = 'en') => { |
||||||
|
const { |
||||||
|
months: monthsList, |
||||||
|
getToday: localeGetToday, |
||||||
|
toNativeDate, |
||||||
|
getMonthLength, |
||||||
|
weekStartingIndex, |
||||||
|
transformDigit: getLanguageDigits, |
||||||
|
} = typeof locale === 'string' ? getLocaleDetails(locale) : locale; |
||||||
|
|
||||||
|
const getToday = () => { |
||||||
|
const todayDate = new Date(); |
||||||
|
const year = todayDate.getFullYear(); |
||||||
|
const month = todayDate.getMonth() + 1; |
||||||
|
const day = todayDate.getDate(); |
||||||
|
return localeGetToday({ year, month, day }); |
||||||
|
}; |
||||||
|
|
||||||
|
const getMonthName = month => monthsList[month - 1]; |
||||||
|
|
||||||
|
const getMonthNumber = monthName => monthsList.indexOf(monthName) + 1; |
||||||
|
|
||||||
|
const getMonthFirstWeekday = date => { |
||||||
|
const gregorianDate = toNativeDate({ ...date, day: 1 }); |
||||||
|
const weekday = gregorianDate.getDay(); |
||||||
|
const dayIndex = weekday + weekStartingIndex; |
||||||
|
return dayIndex % 7; |
||||||
|
}; |
||||||
|
|
||||||
|
const isBeforeDate = (day1, day2) => { |
||||||
|
if (!day1 || !day2) return false; |
||||||
|
return toNativeDate(day1) < toNativeDate(day2); |
||||||
|
}; |
||||||
|
|
||||||
|
const checkDayInDayRange = ({ day, from, to }) => { |
||||||
|
if (!day || !from || !to) return false; |
||||||
|
const nativeDay = toNativeDate(day); |
||||||
|
const nativeFrom = toNativeDate(from); |
||||||
|
const nativeTo = toNativeDate(to); |
||||||
|
return nativeDay > nativeFrom && nativeDay < nativeTo; |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
getToday, |
||||||
|
getMonthName, |
||||||
|
getMonthNumber, |
||||||
|
getMonthLength, |
||||||
|
getMonthFirstWeekday, |
||||||
|
isBeforeDate, |
||||||
|
checkDayInDayRange, |
||||||
|
getLanguageDigits, |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
export default utils; |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import { getDateAccordingToMonth } from './generalUtils'; |
||||||
|
|
||||||
|
const getSlideDate = ({ parent, isInitialActiveChild, activeDate, monthChangeDirection }) => { |
||||||
|
if (!parent) { |
||||||
|
return isInitialActiveChild ? activeDate : getDateAccordingToMonth(activeDate, 'NEXT'); |
||||||
|
} |
||||||
|
const child = parent.children[isInitialActiveChild ? 0 : 1]; |
||||||
|
const isActiveSlide = |
||||||
|
child.classList.contains('-shown') || child.classList.contains('-shownAnimated'); // check -shownAnimated for Safari bug
|
||||||
|
return isActiveSlide ? activeDate : getDateAccordingToMonth(activeDate, monthChangeDirection); |
||||||
|
}; |
||||||
|
|
||||||
|
const animateContent = ({ parent, direction }) => { |
||||||
|
const wrapperChildren = Array.from(parent.children); |
||||||
|
const shownItem = wrapperChildren.find(child => child.classList.contains('-shown')); |
||||||
|
const hiddenItem = wrapperChildren.find(child => child !== shownItem); |
||||||
|
const baseClass = shownItem.classList[0]; |
||||||
|
const isNextMonth = direction === 'NEXT'; |
||||||
|
const getAnimationClass = value => (value ? '-hiddenNext' : '-hiddenPrevious'); |
||||||
|
hiddenItem.style.transition = 'none'; |
||||||
|
shownItem.style.transition = ''; |
||||||
|
shownItem.className = `${baseClass} ${getAnimationClass(!isNextMonth)}`; |
||||||
|
hiddenItem.className = `${baseClass} ${getAnimationClass(isNextMonth)}`; |
||||||
|
hiddenItem.classList.add('-shownAnimated'); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleSlideAnimationEnd = ({ target }) => { |
||||||
|
target.classList.remove('-hiddenNext'); |
||||||
|
target.classList.remove('-hiddenPrevious'); |
||||||
|
target.classList.replace('-shownAnimated', '-shown'); |
||||||
|
}; |
||||||
|
|
||||||
|
export { animateContent, getSlideDate, handleSlideAnimationEnd }; |
||||||
@ -1,6 +1,7 @@ |
|||||||
import React, { useState } from "react"; |
import React, { useState } from "react"; |
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
import DatePicker from "../Calendar/CalendarComponents"; |
|
||||||
|
import DatePicker from "../CalendarComponents"; |
||||||
|
|
||||||
const RangeDatePicker = () => { |
const RangeDatePicker = () => { |
||||||
const [selectedDayRange, setSelectedDayRange] = useState({ |
const [selectedDayRange, setSelectedDayRange] = useState({ |
||||||
@ -1,10 +1,12 @@ |
|||||||
import React, { useState } from "react"; |
import React, { useState } from "react"; |
||||||
|
|
||||||
import DateRangePicker from "./DateRangePicker"; |
import DateRangePicker from "./DateRangePicker"; |
||||||
|
import RangeDatePicker from "./RangeDatePicker"; |
||||||
|
|
||||||
function Calender() { |
function Calender() { |
||||||
const list = { |
const list = { |
||||||
1: <DateRangePicker />, |
1: <DateRangePicker />, |
||||||
|
1: <RangeDatePicker />, |
||||||
}; |
}; |
||||||
const [type, setType] = useState(1); |
const [type, setType] = useState(1); |
||||||
return ( |
return ( |
||||||
Loading…
Reference in new issue