|
|
|
|
@ -1,20 +1,20 @@ |
|
|
|
|
import React, { useState, useRef, useEffect } from 'react'; |
|
|
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
getDateAccordingToMonth, |
|
|
|
|
shallowClone, |
|
|
|
|
getValueType, |
|
|
|
|
} from './shared/generalUtils'; |
|
|
|
|
} from "./shared/generalUtils"; |
|
|
|
|
import { |
|
|
|
|
TYPE_SINGLE_DATE, |
|
|
|
|
TYPE_RANGE, |
|
|
|
|
TYPE_MUTLI_DATE, |
|
|
|
|
} from './shared/constants'; |
|
|
|
|
import { useLocaleUtils, useLocaleLanguage } from './shared/hooks'; |
|
|
|
|
} from "./shared/constants"; |
|
|
|
|
import { useLocaleUtils, useLocaleLanguage } from "./shared/hooks"; |
|
|
|
|
|
|
|
|
|
import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
import { Header, MonthSelector, YearSelector, DaysList } from "./components"; |
|
|
|
|
|
|
|
|
|
const Calendar = ({ |
|
|
|
|
const Calendar = ({ |
|
|
|
|
value, |
|
|
|
|
onChange, |
|
|
|
|
onDisabledDayError, |
|
|
|
|
@ -38,12 +38,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
customDaysClassName, |
|
|
|
|
events, |
|
|
|
|
renderEvents, |
|
|
|
|
type |
|
|
|
|
type, |
|
|
|
|
}) => { |
|
|
|
|
const calendarElement = useRef(null); |
|
|
|
|
const [mainState, setMainState] = useState({ |
|
|
|
|
activeDate: null, |
|
|
|
|
monthChangeDirection: '', |
|
|
|
|
monthChangeDirection: "", |
|
|
|
|
isMonthSelectorOpen: false, |
|
|
|
|
isYearSelectorOpen: false, |
|
|
|
|
}); |
|
|
|
|
@ -51,10 +51,10 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
useEffect(() => { |
|
|
|
|
const handleKeyUp = ({ key }) => { |
|
|
|
|
/* istanbul ignore else */ |
|
|
|
|
if (key === 'Tab') |
|
|
|
|
calendarElement.current.classList.remove('-noFocusOutline'); |
|
|
|
|
if (key === "Tab") |
|
|
|
|
calendarElement.current.classList.remove("-noFocusOutline"); |
|
|
|
|
}; |
|
|
|
|
calendarElement.current.addEventListener('keyup', handleKeyUp, false); |
|
|
|
|
calendarElement.current.addEventListener("keyup", handleKeyUp, false); |
|
|
|
|
return () => { |
|
|
|
|
// calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
|
|
|
|
|
}; |
|
|
|
|
@ -68,8 +68,8 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
setMainState({ ...mainState, [property]: !mainState[property] }); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const toggleMonthSelector = createStateToggler('isMonthSelectorOpen'); |
|
|
|
|
const toggleYearSelector = createStateToggler('isYearSelectorOpen'); |
|
|
|
|
const toggleMonthSelector = createStateToggler("isMonthSelectorOpen"); |
|
|
|
|
const toggleYearSelector = createStateToggler("isYearSelectorOpen"); |
|
|
|
|
|
|
|
|
|
const getComputedActiveDate = () => { |
|
|
|
|
const valueType = getValueType(value); |
|
|
|
|
@ -85,8 +85,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
: getComputedActiveDate(); |
|
|
|
|
|
|
|
|
|
const weekdays = weekDaysList.map((weekDay) => ( |
|
|
|
|
<abbr key={weekDay.name} title={weekDay.name} className={`Calendar__weekDay ${type}`}> |
|
|
|
|
{ type == 'dashboard' ? weekDay.name : weekDay.short} |
|
|
|
|
<abbr |
|
|
|
|
key={weekDay.name} |
|
|
|
|
title={weekDay.name} |
|
|
|
|
className={`Calendar__weekDay ${type}`} |
|
|
|
|
> |
|
|
|
|
{type == "dashboard" ? weekDay.name : weekDay.short} |
|
|
|
|
</abbr> |
|
|
|
|
)); |
|
|
|
|
|
|
|
|
|
@ -104,7 +108,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
activeDate, |
|
|
|
|
mainState.monthChangeDirection |
|
|
|
|
), |
|
|
|
|
monthChangeDirection: '', |
|
|
|
|
monthChangeDirection: "", |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
@ -126,13 +130,14 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr' |
|
|
|
|
}`}
|
|
|
|
|
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${ |
|
|
|
|
isRtl ? "rtl" : "ltr" |
|
|
|
|
}`}
|
|
|
|
|
role="grid" |
|
|
|
|
style={{ |
|
|
|
|
'--cl-color-primary': colorPrimary, |
|
|
|
|
'--cl-color-primary-light': colorPrimaryLight, |
|
|
|
|
'--animation-duration': slideAnimationDuration, |
|
|
|
|
"--cl-color-primary": colorPrimary, |
|
|
|
|
"--cl-color-primary-light": colorPrimaryLight, |
|
|
|
|
"--animation-duration": slideAnimationDuration, |
|
|
|
|
}} |
|
|
|
|
ref={calendarElement} |
|
|
|
|
> |
|
|
|
|
@ -196,18 +201,28 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
isQuickSelectorOpen={ |
|
|
|
|
mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen |
|
|
|
|
} |
|
|
|
|
showEvent={event => setEventInFooter(event)} |
|
|
|
|
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-bold'>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
{renderFooter()}</div> |
|
|
|
|
{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> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
@ -215,17 +230,16 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components'; |
|
|
|
|
Calendar.defaultProps = { |
|
|
|
|
minimumDate: null, |
|
|
|
|
maximumDate: null, |
|
|
|
|
colorPrimary: '#0eca2d', |
|
|
|
|
colorPrimaryLight: '#cff4d5', |
|
|
|
|
slideAnimationDuration: '0.4s', |
|
|
|
|
calendarClassName: '', |
|
|
|
|
locale: 'en', |
|
|
|
|
colorPrimary: "#0eca2d", |
|
|
|
|
colorPrimaryLight: "#cff4d5", |
|
|
|
|
slideAnimationDuration: "0.4s", |
|
|
|
|
calendarClassName: "", |
|
|
|
|
locale: "en", |
|
|
|
|
value: null, |
|
|
|
|
renderFooter: () => null, |
|
|
|
|
renderEvents : () => null, |
|
|
|
|
renderEvents: () => null, |
|
|
|
|
customDaysClassName: [], |
|
|
|
|
events: [], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default Calendar; |
|
|
|
|
export default Calendar; |
|
|
|
|
|
