2023-02-28 11:38:24 +00:00
|
|
|
import React, { useEffect, useState } from "react";
|
2023-02-21 10:26:57 +00:00
|
|
|
import propTypes from "prop-types";
|
2023-02-02 09:30:50 +00:00
|
|
|
import moment from "moment";
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2023-02-02 09:30:50 +00:00
|
|
|
import { Days, Months, Years } from "./sub-components";
|
2023-02-08 11:41:55 +00:00
|
|
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
2019-08-28 12:53:38 +00:00
|
|
|
|
2023-02-28 11:38:24 +00:00
|
|
|
import { getValidDates } from "./utils";
|
|
|
|
|
2023-02-08 14:46:42 +00:00
|
|
|
const Calendar = ({
|
|
|
|
locale,
|
|
|
|
selectedDate,
|
2023-02-28 11:38:24 +00:00
|
|
|
setSelectedDate,
|
2023-02-08 14:46:42 +00:00
|
|
|
minDate,
|
|
|
|
maxDate,
|
|
|
|
id,
|
|
|
|
className,
|
2023-02-21 10:26:57 +00:00
|
|
|
style,
|
2023-02-28 11:38:24 +00:00
|
|
|
initialDate,
|
2023-03-01 11:23:42 +00:00
|
|
|
onChange,
|
2023-02-08 14:46:42 +00:00
|
|
|
}) => {
|
|
|
|
moment.locale(locale);
|
2023-02-28 11:38:24 +00:00
|
|
|
|
2023-03-01 11:50:22 +00:00
|
|
|
function handleDateChange(date) {
|
2023-03-01 11:23:42 +00:00
|
|
|
setSelectedDate(date);
|
|
|
|
onChange(date);
|
2023-03-01 11:50:22 +00:00
|
|
|
}
|
2023-03-01 11:23:42 +00:00
|
|
|
|
2023-02-04 12:22:48 +00:00
|
|
|
const [observedDate, setObservedDate] = useState(moment());
|
|
|
|
const [selectedScene, setSelectedScene] = useState(0);
|
2023-02-28 11:38:24 +00:00
|
|
|
[minDate, maxDate] = getValidDates(minDate, maxDate);
|
|
|
|
initialDate = moment(initialDate);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!initialDate || initialDate > maxDate || initialDate < minDate) {
|
2023-03-01 09:04:58 +00:00
|
|
|
initialDate = minDate
|
|
|
|
.clone()
|
|
|
|
.add(maxDate.diff(minDate, "days") / 2, "day");
|
|
|
|
console.error(
|
|
|
|
"Initial date is out of min/max dates boundaries. Initial date will be set as mid value between min and max dates"
|
2023-02-28 11:38:24 +00:00
|
|
|
);
|
|
|
|
}
|
2023-03-01 12:19:36 +00:00
|
|
|
initialDate.startOf("day");
|
2023-03-31 14:21:25 +00:00
|
|
|
// setSelectedDate(initialDate);
|
2023-03-01 09:04:58 +00:00
|
|
|
setObservedDate(initialDate);
|
2023-02-28 11:38:24 +00:00
|
|
|
}, []);
|
2019-08-23 12:23:22 +00:00
|
|
|
|
2023-01-30 14:27:58 +00:00
|
|
|
return (
|
2023-02-21 10:26:57 +00:00
|
|
|
<ColorTheme
|
|
|
|
themeId={ThemeType.Calendar}
|
|
|
|
id={id}
|
|
|
|
className={className}
|
|
|
|
style={style}
|
|
|
|
>
|
2023-02-04 12:22:48 +00:00
|
|
|
{selectedScene === 0 ? (
|
|
|
|
<Days
|
|
|
|
observedDate={observedDate}
|
|
|
|
setObservedDate={setObservedDate}
|
|
|
|
setSelectedScene={setSelectedScene}
|
|
|
|
selectedDate={selectedDate}
|
2023-03-01 11:23:42 +00:00
|
|
|
handleDateChange={handleDateChange}
|
2023-02-06 14:14:03 +00:00
|
|
|
minDate={minDate}
|
|
|
|
maxDate={maxDate}
|
2023-02-04 12:22:48 +00:00
|
|
|
/>
|
|
|
|
) : selectedScene === 1 ? (
|
|
|
|
<Months
|
|
|
|
observedDate={observedDate}
|
|
|
|
setObservedDate={setObservedDate}
|
|
|
|
setSelectedScene={setSelectedScene}
|
|
|
|
selectedDate={selectedDate}
|
2023-02-06 14:14:03 +00:00
|
|
|
minDate={minDate}
|
|
|
|
maxDate={maxDate}
|
2023-02-04 12:22:48 +00:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<Years
|
|
|
|
observedDate={observedDate}
|
|
|
|
setObservedDate={setObservedDate}
|
|
|
|
setSelectedScene={setSelectedScene}
|
|
|
|
selectedDate={selectedDate}
|
2023-02-06 14:14:03 +00:00
|
|
|
minDate={minDate}
|
|
|
|
maxDate={maxDate}
|
2023-02-04 12:22:48 +00:00
|
|
|
/>
|
|
|
|
)}
|
2023-02-08 11:41:55 +00:00
|
|
|
</ColorTheme>
|
2023-01-30 14:27:58 +00:00
|
|
|
);
|
2019-09-10 11:28:56 +00:00
|
|
|
};
|
|
|
|
|
2023-02-21 10:26:57 +00:00
|
|
|
Calendar.propTypes = {
|
2023-02-08 14:46:42 +00:00
|
|
|
/** Class name */
|
2023-02-21 10:26:57 +00:00
|
|
|
className: propTypes.string,
|
2023-02-08 14:46:42 +00:00
|
|
|
/** Used as HTML `id` property */
|
2023-02-21 10:26:57 +00:00
|
|
|
id: propTypes.string,
|
2023-02-08 14:46:42 +00:00
|
|
|
/** Specifies the locale of calendar */
|
2023-02-21 10:26:57 +00:00
|
|
|
locale: propTypes.string,
|
2023-02-28 11:38:24 +00:00
|
|
|
/** Value of selected date (moment object)*/
|
2023-02-21 10:26:57 +00:00
|
|
|
selectedDate: propTypes.object,
|
2023-02-08 14:46:42 +00:00
|
|
|
/** Allow you to handle changing events of component */
|
2023-03-01 11:23:42 +00:00
|
|
|
onChange: propTypes.func,
|
|
|
|
/** Changes selected date state */
|
2023-02-28 11:38:24 +00:00
|
|
|
setSelectedDate: propTypes.func,
|
2023-02-08 14:46:42 +00:00
|
|
|
/** Specifies the minimum selectable date */
|
2023-02-21 10:26:57 +00:00
|
|
|
minDate: propTypes.object,
|
2023-02-08 14:46:42 +00:00
|
|
|
/** Specifies the maximum selectable date */
|
2023-02-21 10:26:57 +00:00
|
|
|
maxDate: propTypes.object,
|
2023-02-09 10:06:47 +00:00
|
|
|
/** Accepts css style */
|
2023-02-21 10:26:57 +00:00
|
|
|
style: propTypes.oneOfType([propTypes.object, propTypes.array]),
|
2023-02-28 11:38:24 +00:00
|
|
|
/** First shown date */
|
|
|
|
initialDate: propTypes.object,
|
2023-02-08 14:46:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Calendar.defaultProps = {
|
|
|
|
locale: "en",
|
|
|
|
minDate: new Date("1970/01/01"),
|
|
|
|
maxDate: new Date("2040/01/01"),
|
|
|
|
id: "",
|
|
|
|
className: "",
|
2023-02-28 11:38:24 +00:00
|
|
|
initialDate: new Date(),
|
2023-03-01 11:23:42 +00:00
|
|
|
onChange: (date) => {
|
|
|
|
console.log(date);
|
|
|
|
},
|
2023-02-08 14:46:42 +00:00
|
|
|
};
|
|
|
|
|
2019-09-10 11:28:56 +00:00
|
|
|
export default Calendar;
|