setStartDate(date)}
+ customInput={}
+ renderCustomHeader={renderCustomHeader}
+ locale="zhCN"
+ dateFormat="yyyy-MM-dd HH:mm"
+ showTimeSelect
+ timeFormat="HH:mm:ss"
+ showPopperArrow={false}
+ timeCaption="时间"
+ />
+ );
+};
diff --git a/packages/discuz-design/components/datepicker/layouts/web/jumper.jsx b/packages/discuz-design/components/datepicker/layouts/web/jumper.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/calendar.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/calendar.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9ab861907b054ae5235898c2c06941e22da94d0
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/calendar.jsx
@@ -0,0 +1,973 @@
+import YearDropdown from './year_dropdown';
+import MonthDropdown from './month_dropdown';
+import MonthYearDropdown from './month_year_dropdown';
+import Month from './month';
+import Time from './time';
+import Year from './year';
+import InputTime from './inputTime';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import CalendarContainer from './calendar_container';
+import {
+ newDate,
+ setMonth,
+ getMonth,
+ addMonths,
+ subMonths,
+ getStartOfWeek,
+ getStartOfToday,
+ addDays,
+ formatDate,
+ setYear,
+ getYear,
+ isBefore,
+ addYears,
+ subYears,
+ isAfter,
+ getFormattedWeekdayInLocale,
+ getWeekdayShortInLocale,
+ getWeekdayMinInLocale,
+ isSameDay,
+ monthDisabledBefore,
+ monthDisabledAfter,
+ yearDisabledBefore,
+ yearDisabledAfter,
+ yearsDisabledAfter,
+ yearsDisabledBefore,
+ getEffectiveMinDate,
+ getEffectiveMaxDate,
+ addZero,
+ isValid,
+ getYearsPeriod,
+ DEFAULT_YEAR_ITEM_NUMBER,
+} from './date_utils';
+
+const DROPDOWN_FOCUS_CLASSNAMES = [
+ 'react-datepicker__year-select',
+ 'react-datepicker__month-select',
+ 'react-datepicker__month-year-select',
+];
+
+const isDropdownSelect = (element = {}) => {
+ const classNames = (element.className || '').split(/\s+/);
+ return DROPDOWN_FOCUS_CLASSNAMES.some(testClassname => classNames.indexOf(testClassname) >= 0);
+};
+
+export default class Calendar extends React.Component {
+ static get defaultProps() {
+ return {
+ onDropdownFocus: () => {},
+ monthsShown: 1,
+ monthSelectedIn: 0,
+ forceShowMonthNavigation: false,
+ timeCaption: 'Time',
+ previousYearButtonLabel: 'Previous Year',
+ nextYearButtonLabel: 'Next Year',
+ previousMonthButtonLabel: 'Previous Month',
+ nextMonthButtonLabel: 'Next Month',
+ customTimeInput: null,
+ yearItemNumber: DEFAULT_YEAR_ITEM_NUMBER,
+ };
+ }
+
+ static propTypes = {
+ adjustDateOnChange: PropTypes.bool,
+ arrowProps: PropTypes.object,
+ chooseDayAriaLabelPrefix: PropTypes.string,
+ className: PropTypes.string,
+ children: PropTypes.node,
+ container: PropTypes.func,
+ dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+ .isRequired,
+ dayClassName: PropTypes.func,
+ weekDayClassName: PropTypes.func,
+ disabledDayAriaLabelPrefix: PropTypes.string,
+ monthClassName: PropTypes.func,
+ timeClassName: PropTypes.func,
+ disabledKeyboardNavigation: PropTypes.bool,
+ calendarStartDay: PropTypes.number,
+ dropdownMode: PropTypes.oneOf(['scroll', 'select']),
+ endDate: PropTypes.instanceOf(Date),
+ excludeDates: PropTypes.array,
+ filterDate: PropTypes.func,
+ fixedHeight: PropTypes.bool,
+ formatWeekNumber: PropTypes.func,
+ highlightDates: PropTypes.instanceOf(Map),
+ includeDates: PropTypes.array,
+ includeTimes: PropTypes.array,
+ injectTimes: PropTypes.array,
+ inline: PropTypes.bool,
+ shouldFocusDayInline: PropTypes.bool,
+ locale: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.shape({ locale: PropTypes.object }),
+ ]),
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
+ monthsShown: PropTypes.number,
+ monthSelectedIn: PropTypes.number,
+ nextMonthAriaLabel: PropTypes.string,
+ nextYearAriaLabel: PropTypes.string,
+ onClickOutside: PropTypes.func.isRequired,
+ onMonthChange: PropTypes.func,
+ onYearChange: PropTypes.func,
+ forceShowMonthNavigation: PropTypes.bool,
+ onDropdownFocus: PropTypes.func,
+ onSelect: PropTypes.func.isRequired,
+ onWeekSelect: PropTypes.func,
+ showTimeSelect: PropTypes.bool,
+ showTimeInput: PropTypes.bool,
+ showMonthYearPicker: PropTypes.bool,
+ showFullMonthYearPicker: PropTypes.bool,
+ showTwoColumnMonthYearPicker: PropTypes.bool,
+ showFourColumnMonthYearPicker: PropTypes.bool,
+ showYearPicker: PropTypes.bool,
+ showQuarterYearPicker: PropTypes.bool,
+ showTimeSelectOnly: PropTypes.bool,
+ timeFormat: PropTypes.string,
+ timeIntervals: PropTypes.number,
+ onTimeChange: PropTypes.func,
+ timeInputLabel: PropTypes.string,
+ minTime: PropTypes.instanceOf(Date),
+ maxTime: PropTypes.instanceOf(Date),
+ excludeTimes: PropTypes.array,
+ filterTime: PropTypes.func,
+ timeCaption: PropTypes.string,
+ openToDate: PropTypes.instanceOf(Date),
+ peekNextMonth: PropTypes.bool,
+ previousMonthAriaLabel: PropTypes.string,
+ previousYearAriaLabel: PropTypes.string,
+ scrollableYearDropdown: PropTypes.bool,
+ scrollableMonthYearDropdown: PropTypes.bool,
+ preSelection: PropTypes.instanceOf(Date),
+ selected: PropTypes.instanceOf(Date),
+ selectsEnd: PropTypes.bool,
+ selectsStart: PropTypes.bool,
+ selectsRange: PropTypes.bool,
+ showMonthDropdown: PropTypes.bool,
+ showPreviousMonths: PropTypes.bool,
+ showMonthYearDropdown: PropTypes.bool,
+ showWeekNumbers: PropTypes.bool,
+ showYearDropdown: PropTypes.bool,
+ startDate: PropTypes.instanceOf(Date),
+ todayButton: PropTypes.string,
+ useWeekdaysShort: PropTypes.bool,
+ formatWeekDay: PropTypes.func,
+ withPortal: PropTypes.bool,
+ weekLabel: PropTypes.string,
+ yearItemNumber: PropTypes.number,
+ yearDropdownItemNumber: PropTypes.number,
+ setOpen: PropTypes.func,
+ shouldCloseOnSelect: PropTypes.bool,
+ useShortMonthInDropdown: PropTypes.bool,
+ showDisabledMonthNavigation: PropTypes.bool,
+ previousMonthButtonLabel: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
+ ]),
+ nextMonthButtonLabel: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
+ ]),
+ previousYearButtonLabel: PropTypes.string,
+ nextYearButtonLabel: PropTypes.string,
+ renderCustomHeader: PropTypes.func,
+ renderDayContents: PropTypes.func,
+ onDayMouseEnter: PropTypes.func,
+ onMonthMouseLeave: PropTypes.func,
+ showPopperArrow: PropTypes.bool,
+ handleOnKeyDown: PropTypes.func,
+ handleOnDayKeyDown: PropTypes.func,
+ isInputFocused: PropTypes.bool,
+ customTimeInput: PropTypes.element,
+ weekAriaLabelPrefix: PropTypes.string,
+ setPreSelection: PropTypes.func,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.containerRef = React.createRef();
+
+ this.state = {
+ date: this.getDateInView(),
+ selectingDate: null,
+ monthContainer: null,
+ };
+ }
+
+ componentDidMount() {
+ // monthContainer height is needed in time component
+ // to determine the height for the ul in the time component
+ // setState here so height is given after final component
+ // layout is rendered
+ if (this.props.showTimeSelect) {
+ this.assignMonthContainer = (() => {
+ this.setState({ monthContainer: this.monthContainer });
+ })();
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.preSelection
+ && !isSameDay(this.props.preSelection, prevProps.preSelection)
+ ) {
+ this.setState({
+ date: this.props.preSelection,
+ });
+ } else if (
+ this.props.openToDate
+ && !isSameDay(this.props.openToDate, prevProps.openToDate)
+ ) {
+ this.setState({
+ date: this.props.openToDate,
+ });
+ }
+ }
+
+ handleClickOutside = (event) => {
+ this.props.onClickOutside(event);
+ };
+
+ setClickOutsideRef = () => this.containerRef.current;
+
+ handleDropdownFocus = (event) => {
+ if (isDropdownSelect(event.target)) {
+ this.props.onDropdownFocus();
+ }
+ };
+
+ getDateInView = () => {
+ const { preSelection, selected, openToDate } = this.props;
+ const minDate = getEffectiveMinDate(this.props);
+ const maxDate = getEffectiveMaxDate(this.props);
+ const current = newDate();
+ const initialDate = openToDate || selected || preSelection;
+ if (initialDate) {
+ return initialDate;
+ }
+ if (minDate && isBefore(current, minDate)) {
+ return minDate;
+ } if (maxDate && isAfter(current, maxDate)) {
+ return maxDate;
+ }
+
+ return current;
+ };
+
+ increaseMonth = () => {
+ this.setState(
+ ({ date }) => ({
+ date: addMonths(date, 1),
+ }),
+ () => this.handleMonthChange(this.state.date),
+ );
+ };
+
+ decreaseMonth = () => {
+ this.setState(
+ ({ date }) => ({
+ date: subMonths(date, 1),
+ }),
+ () => this.handleMonthChange(this.state.date),
+ );
+ };
+
+ handleDayClick = (day, event, monthSelectedIn) => {
+ this.props.onSelect(day, event, monthSelectedIn);
+ this.props.setPreSelection && this.props.setPreSelection(day);
+ };
+
+ handleDayMouseEnter = (day) => {
+ this.setState({ selectingDate: day });
+ this.props.onDayMouseEnter && this.props.onDayMouseEnter(day);
+ };
+
+ handleMonthMouseLeave = () => {
+ this.setState({ selectingDate: null });
+ this.props.onMonthMouseLeave && this.props.onMonthMouseLeave();
+ };
+
+ handleYearChange = (date) => {
+ if (this.props.onYearChange) {
+ this.props.onYearChange(date);
+ }
+ if (this.props.adjustDateOnChange) {
+ if (this.props.onSelect) {
+ this.props.onSelect(date);
+ }
+ if (this.props.setOpen) {
+ this.props.setOpen(true);
+ }
+ }
+
+ this.props.setPreSelection && this.props.setPreSelection(date);
+ };
+
+ handleMonthChange = (date) => {
+ if (this.props.onMonthChange) {
+ this.props.onMonthChange(date);
+ }
+ if (this.props.adjustDateOnChange) {
+ if (this.props.onSelect) {
+ this.props.onSelect(date);
+ }
+ if (this.props.setOpen) {
+ this.props.setOpen(true);
+ }
+ }
+
+ this.props.setPreSelection && this.props.setPreSelection(date);
+ };
+
+ handleMonthYearChange = (date) => {
+ this.handleYearChange(date);
+ this.handleMonthChange(date);
+ };
+
+ changeYear = (year) => {
+ this.setState(
+ ({ date }) => ({
+ date: setYear(date, year),
+ }),
+ () => this.handleYearChange(this.state.date),
+ );
+ };
+
+ changeMonth = (month) => {
+ this.setState(
+ ({ date }) => ({
+ date: setMonth(date, month),
+ }),
+ () => this.handleMonthChange(this.state.date),
+ );
+ };
+
+ changeMonthYear = (monthYear) => {
+ this.setState(
+ ({ date }) => ({
+ date: setYear(setMonth(date, getMonth(monthYear)), getYear(monthYear)),
+ }),
+ () => this.handleMonthYearChange(this.state.date),
+ );
+ };
+
+ header = (date = this.state.date) => {
+ const startOfWeek = getStartOfWeek(
+ date,
+ this.props.locale,
+ this.props.calendarStartDay,
+ );
+
+ const dayNames = [];
+ if (this.props.showWeekNumbers) {
+ dayNames.push(
+ {this.props.weekLabel || '#'}
+
);
+ }
+ return dayNames.concat([0, 1, 2, 3, 4, 5, 6].map((offset) => {
+ const day = addDays(startOfWeek, offset);
+ const weekDayName = this.formatWeekday(day, this.props.locale);
+
+ const weekDayClassName = this.props.weekDayClassName
+ ? this.props.weekDayClassName(day)
+ : undefined;
+
+ return (
+
+ {weekDayName}
+
+ );
+ }));
+ };
+
+ formatWeekday = (day, locale) => {
+ if (this.props.formatWeekDay) {
+ return getFormattedWeekdayInLocale(day, this.props.formatWeekDay, locale);
+ }
+ return this.props.useWeekdaysShort
+ ? getWeekdayShortInLocale(day, locale)
+ : getWeekdayMinInLocale(day, locale);
+ };
+
+ decreaseYear = () => {
+ this.setState(
+ ({ date }) => ({
+ date: subYears(
+ date,
+ this.props.showYearPicker ? this.props.yearItemNumber : 1,
+ ),
+ }),
+ () => this.handleYearChange(this.state.date),
+ );
+ };
+
+ renderPreviousButton = () => {
+ if (this.props.renderCustomHeader) {
+ return;
+ }
+
+ let allPrevDaysDisabled;
+ switch (true) {
+ case this.props.showMonthYearPicker:
+ allPrevDaysDisabled = yearDisabledBefore(this.state.date, this.props);
+ break;
+ case this.props.showYearPicker:
+ allPrevDaysDisabled = yearsDisabledBefore(this.state.date, this.props);
+ break;
+ default:
+ allPrevDaysDisabled = monthDisabledBefore(this.state.date, this.props);
+ break;
+ }
+
+ if (
+ (!this.props.forceShowMonthNavigation
+ && !this.props.showDisabledMonthNavigation
+ && allPrevDaysDisabled)
+ || this.props.showTimeSelectOnly
+ ) {
+ return;
+ }
+
+ const iconClasses = [
+ 'react-datepicker__navigation-icon',
+ 'react-datepicker__navigation-icon--previous',
+ ];
+
+ const classes = [
+ 'react-datepicker__navigation',
+ 'react-datepicker__navigation--previous',
+ ];
+
+ let clickHandler = this.decreaseMonth;
+
+ if (
+ this.props.showMonthYearPicker
+ || this.props.showQuarterYearPicker
+ || this.props.showYearPicker
+ ) {
+ clickHandler = this.decreaseYear;
+ }
+
+ if (allPrevDaysDisabled && this.props.showDisabledMonthNavigation) {
+ classes.push('react-datepicker__navigation--previous--disabled');
+ clickHandler = null;
+ }
+
+ const isForYear = this.props.showMonthYearPicker
+ || this.props.showQuarterYearPicker
+ || this.props.showYearPicker;
+
+ const { previousMonthButtonLabel, previousYearButtonLabel } = this.props;
+
+ const {
+ previousMonthAriaLabel = typeof previousMonthButtonLabel === 'string'
+ ? previousMonthButtonLabel
+ : 'Previous Month',
+ previousYearAriaLabel = typeof previousYearButtonLabel === 'string'
+ ? previousYearButtonLabel
+ : 'Previous Year',
+ } = this.props;
+
+ return (
+
+ );
+ };
+
+ increaseYear = () => {
+ this.setState(
+ ({ date }) => ({
+ date: addYears(
+ date,
+ this.props.showYearPicker ? this.props.yearItemNumber : 1,
+ ),
+ }),
+ () => this.handleYearChange(this.state.date),
+ );
+ };
+
+ renderNextButton = () => {
+ if (this.props.renderCustomHeader) {
+ return;
+ }
+
+ let allNextDaysDisabled;
+ switch (true) {
+ case this.props.showMonthYearPicker:
+ allNextDaysDisabled = yearDisabledAfter(this.state.date, this.props);
+ break;
+ case this.props.showYearPicker:
+ allNextDaysDisabled = yearsDisabledAfter(this.state.date, this.props);
+ break;
+ default:
+ allNextDaysDisabled = monthDisabledAfter(this.state.date, this.props);
+ break;
+ }
+
+ if (
+ (!this.props.forceShowMonthNavigation
+ && !this.props.showDisabledMonthNavigation
+ && allNextDaysDisabled)
+ || this.props.showTimeSelectOnly
+ ) {
+ return;
+ }
+
+ const classes = [
+ 'react-datepicker__navigation',
+ 'react-datepicker__navigation--next',
+ ];
+ const iconClasses = [
+ 'react-datepicker__navigation-icon',
+ 'react-datepicker__navigation-icon--next',
+ ];
+ if (this.props.showTimeSelect) {
+ classes.push('react-datepicker__navigation--next--with-time');
+ }
+ if (this.props.todayButton) {
+ classes.push('react-datepicker__navigation--next--with-today-button');
+ }
+
+ let clickHandler = this.increaseMonth;
+
+ if (
+ this.props.showMonthYearPicker
+ || this.props.showQuarterYearPicker
+ || this.props.showYearPicker
+ ) {
+ clickHandler = this.increaseYear;
+ }
+
+ if (allNextDaysDisabled && this.props.showDisabledMonthNavigation) {
+ classes.push('react-datepicker__navigation--next--disabled');
+ clickHandler = null;
+ }
+
+ const isForYear = this.props.showMonthYearPicker
+ || this.props.showQuarterYearPicker
+ || this.props.showYearPicker;
+
+ const { nextMonthButtonLabel, nextYearButtonLabel } = this.props;
+ const {
+ nextMonthAriaLabel = typeof nextMonthButtonLabel === 'string'
+ ? nextMonthButtonLabel
+ : 'Next Month',
+ nextYearAriaLabel = typeof nextYearButtonLabel === 'string'
+ ? nextYearButtonLabel
+ : 'Next Year',
+ } = this.props;
+
+ return (
+
+ );
+ };
+
+ renderCurrentMonth = (date = this.state.date) => {
+ const classes = ['react-datepicker__current-month'];
+
+ if (this.props.showYearDropdown) {
+ classes.push('react-datepicker__current-month--hasYearDropdown');
+ }
+ if (this.props.showMonthDropdown) {
+ classes.push('react-datepicker__current-month--hasMonthDropdown');
+ }
+ if (this.props.showMonthYearDropdown) {
+ classes.push('react-datepicker__current-month--hasMonthYearDropdown');
+ }
+ return (
+
+ {formatDate(date, this.props.dateFormat, this.props.locale)}
+
+ );
+ };
+
+ renderYearDropdown = (overrideHide = false) => {
+ if (!this.props.showYearDropdown || overrideHide) {
+ return;
+ }
+ return (
+
+ );
+ };
+
+ renderMonthDropdown = (overrideHide = false) => {
+ if (!this.props.showMonthDropdown || overrideHide) {
+ return;
+ }
+ return (
+
+ );
+ };
+
+ renderMonthYearDropdown = (overrideHide = false) => {
+ if (!this.props.showMonthYearDropdown || overrideHide) {
+ return;
+ }
+ return (
+
+ );
+ };
+
+ renderTodayButton = () => {
+ if (!this.props.todayButton || this.props.showTimeSelectOnly) {
+ return;
+ }
+ return (
+ this.props.onSelect(getStartOfToday(), e)}
+ >
+ {this.props.todayButton}
+
+ );
+ };
+
+ renderDefaultHeader = ({ monthDate, i }) => (
+
+ {this.renderCurrentMonth(monthDate)}
+
+ {this.renderMonthDropdown(i !== 0)}
+ {this.renderMonthYearDropdown(i !== 0)}
+ {this.renderYearDropdown(i !== 0)}
+
+
+ {this.header(monthDate)}
+
+
+ {this.props.renderCustomHeader({
+ ...this.state,
+ customHeaderCount: i,
+ monthDate,
+ changeMonth: this.changeMonth,
+ changeYear: this.changeYear,
+ decreaseMonth: this.decreaseMonth,
+ increaseMonth: this.increaseMonth,
+ decreaseYear: this.decreaseYear,
+ increaseYear: this.increaseYear,
+ prevMonthButtonDisabled,
+ nextMonthButtonDisabled,
+ prevYearButtonDisabled,
+ nextYearButtonDisabled,
+ })}
+ {showDayNames && (
+
+ {this.header(monthDate)}
+
+ )}
+
+ {showYearPicker ? `${startPeriod} - ${endPeriod}` : getYear(date)}
+
+ );
+ };
+
+ renderHeader = (headerArgs) => {
+ switch (true) {
+ case this.props.renderCustomHeader !== undefined:
+ return this.renderCustomHeader(headerArgs);
+ case this.props.showMonthYearPicker
+ || this.props.showQuarterYearPicker
+ || this.props.showYearPicker:
+ return this.renderYearHeader(headerArgs);
+ default:
+ return this.renderDefaultHeader(headerArgs);
+ }
+ };
+
+ renderMonths = () => {
+ if (this.props.showTimeSelectOnly || this.props.showYearPicker) {
+ return;
+ }
+
+ const monthList = [];
+ const monthsToSubtract = this.props.showPreviousMonths
+ ? this.props.monthsShown - 1
+ : 0;
+ const fromMonthDate = subMonths(this.state.date, monthsToSubtract);
+ for (let i = 0; i < this.props.monthsShown; ++i) {
+ const monthsToAdd = i - this.props.monthSelectedIn;
+ const monthDate = addMonths(fromMonthDate, monthsToAdd);
+ const monthKey = `month-${i}`;
+ const monthShowsDuplicateDaysEnd = i < this.props.monthsShown - 1;
+ const monthShowsDuplicateDaysStart = i > 0;
+ monthList.push( {
+ this.monthContainer = div;
+ }}
+ className="react-datepicker__month-container"
+ >
+ {this.renderHeader({ monthDate, i })}
+
+
);
+ }
+ return monthList;
+ };
+
+ renderYears = () => {
+ if (this.props.showTimeSelectOnly) {
+ return;
+ }
+ if (this.props.showYearPicker) {
+ return (
+
+ {this.renderHeader()}
+
+
+ );
+ }
+ };
+
+ renderTimeSection = () => {
+ if (
+ this.props.showTimeSelect
+ && (this.state.monthContainer || this.props.showTimeSelectOnly)
+ ) {
+ return (
+
+ );
+ }
+ };
+
+ renderInputTimeSection = () => {
+ const time = new Date(this.props.selected);
+ const timeValid = isValid(time) && Boolean(this.props.selected);
+ const timeString = timeValid
+ ? `${addZero(time.getHours())}:${addZero(time.getMinutes())}`
+ : '';
+ if (this.props.showTimeInput) {
+ return (
+
+ );
+ }
+ };
+
+ render() {
+ const Container = this.props.container || CalendarContainer;
+ return (
+
+
+ {this.renderPreviousButton()}
+ {this.renderNextButton()}
+ {this.renderMonths()}
+ {this.renderYears()}
+ {this.renderTodayButton()}
+ {this.renderTimeSection()}
+ {this.renderInputTimeSection()}
+ {this.props.children}
+
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/calendar_container.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/calendar_container.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3e12b0641cfc9c0169aea47567865f74cd9b3600
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/calendar_container.jsx
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function CalendarContainer({
+ className,
+ children,
+ showPopperArrow,
+ arrowProps = {},
+}) {
+ return (
+
+ {showPopperArrow && (
+
+ )}
+ {children}
+
+ {this.renderDayContents()}
+
+ );
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/index.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8cdcb853d81187cc9f0280d71346fc270deed82b
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/index.jsx
@@ -0,0 +1,1074 @@
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Calendar from './calendar';
+import Portal from './portal';
+import PopperComponent, { popperPlacementPositions } from './popper_component';
+import classnames from 'classnames';
+import startOfDay from 'date-fns/startOfDay';
+import endOfDay from 'date-fns/endOfDay';
+import {
+ newDate,
+ isDate,
+ isBefore,
+ isAfter,
+ isEqual,
+ setTime,
+ getSeconds,
+ getMinutes,
+ getHours,
+ addDays,
+ addMonths,
+ addWeeks,
+ addYears,
+ subDays,
+ subMonths,
+ subWeeks,
+ subYears,
+ isDayDisabled,
+ isDayInRange,
+ getEffectiveMinDate,
+ getEffectiveMaxDate,
+ parseDate,
+ safeDateFormat,
+ safeDateRangeFormat,
+ getHightLightDaysMap,
+ getYear,
+ getMonth,
+ registerLocale,
+ setDefaultLocale,
+ getDefaultLocale,
+ DEFAULT_YEAR_ITEM_NUMBER,
+} from './date_utils';
+import onClickOutside from 'react-onclickoutside';
+
+export { default as CalendarContainer } from './calendar_container';
+
+export { registerLocale, setDefaultLocale, getDefaultLocale };
+
+const outsideClickIgnoreClass = 'react-datepicker-ignore-onclickoutside';
+const WrappedCalendar = onClickOutside(Calendar);
+
+// Compares dates year+month combinations
+function hasPreSelectionChanged(date1, date2) {
+ if (date1 && date2) {
+ return (
+ getMonth(date1) !== getMonth(date2) || getYear(date1) !== getYear(date2)
+ );
+ }
+
+ return date1 !== date2;
+}
+
+/**
+ * General datepicker component.
+ */
+const INPUT_ERR_1 = 'Date input not valid.';
+
+export default class DatePicker extends React.Component {
+ static get defaultProps() {
+ return {
+ allowSameDay: false,
+ dateFormat: 'MM/dd/yyyy',
+ dateFormatCalendar: 'LLLL yyyy',
+ onChange() {},
+ disabled: false,
+ disabledKeyboardNavigation: false,
+ dropdownMode: 'scroll',
+ onFocus() {},
+ onBlur() {},
+ onKeyDown() {},
+ onInputClick() {},
+ onSelect() {},
+ onClickOutside() {},
+ onMonthChange() {},
+ onCalendarOpen() {},
+ onCalendarClose() {},
+ preventOpenOnFocus: false,
+ onYearChange() {},
+ onInputError() {},
+ monthsShown: 1,
+ readOnly: false,
+ withPortal: false,
+ shouldCloseOnSelect: true,
+ showTimeSelect: false,
+ showTimeInput: false,
+ showPreviousMonths: false,
+ showMonthYearPicker: false,
+ showFullMonthYearPicker: false,
+ showTwoColumnMonthYearPicker: false,
+ showFourColumnMonthYearPicker: false,
+ showYearPicker: false,
+ showQuarterYearPicker: false,
+ strictParsing: false,
+ timeIntervals: 30,
+ timeCaption: 'Time',
+ previousMonthAriaLabel: 'Previous Month',
+ previousMonthButtonLabel: 'Previous Month',
+ nextMonthAriaLabel: 'Next Month',
+ nextMonthButtonLabel: 'Next Month',
+ previousYearAriaLabel: 'Previous Year',
+ previousYearButtonLabel: 'Previous Year',
+ nextYearAriaLabel: 'Next Year',
+ nextYearButtonLabel: 'Next Year',
+ timeInputLabel: 'Time',
+ enableTabLoop: true,
+ yearItemNumber: DEFAULT_YEAR_ITEM_NUMBER,
+
+ renderDayContents(date) {
+ return date;
+ },
+ focusSelectedMonth: false,
+ showPopperArrow: true,
+ excludeScrollbar: true,
+ customTimeInput: null,
+ calendarStartDay: undefined,
+ };
+ }
+
+ static propTypes = {
+ adjustDateOnChange: PropTypes.bool,
+ allowSameDay: PropTypes.bool,
+ ariaDescribedBy: PropTypes.string,
+ ariaInvalid: PropTypes.string,
+ ariaLabelClose: PropTypes.string,
+ ariaLabelledBy: PropTypes.string,
+ ariaRequired: PropTypes.string,
+ autoComplete: PropTypes.string,
+ autoFocus: PropTypes.bool,
+ calendarClassName: PropTypes.string,
+ calendarContainer: PropTypes.func,
+ children: PropTypes.node,
+ chooseDayAriaLabelPrefix: PropTypes.string,
+ closeOnScroll: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+ className: PropTypes.string,
+ customInput: PropTypes.element,
+ customInputRef: PropTypes.string,
+ calendarStartDay: PropTypes.number,
+ // eslint-disable-next-line react/no-unused-prop-types
+ dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+ dateFormatCalendar: PropTypes.string,
+ dayClassName: PropTypes.func,
+ weekDayClassName: PropTypes.func,
+ disabledDayAriaLabelPrefix: PropTypes.string,
+ monthClassName: PropTypes.func,
+ timeClassName: PropTypes.func,
+ disabled: PropTypes.bool,
+ disabledKeyboardNavigation: PropTypes.bool,
+ dropdownMode: PropTypes.oneOf(['scroll', 'select']).isRequired,
+ endDate: PropTypes.instanceOf(Date),
+ excludeDates: PropTypes.array,
+ filterDate: PropTypes.func,
+ fixedHeight: PropTypes.bool,
+ formatWeekNumber: PropTypes.func,
+ highlightDates: PropTypes.array,
+ id: PropTypes.string,
+ includeDates: PropTypes.array,
+ includeTimes: PropTypes.array,
+ injectTimes: PropTypes.array,
+ inline: PropTypes.bool,
+ isClearable: PropTypes.bool,
+ locale: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.shape({ locale: PropTypes.object }),
+ ]),
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
+ monthsShown: PropTypes.number,
+ name: PropTypes.string,
+ onBlur: PropTypes.func,
+ onChange: PropTypes.func.isRequired,
+ onSelect: PropTypes.func,
+ onWeekSelect: PropTypes.func,
+ onClickOutside: PropTypes.func,
+ onChangeRaw: PropTypes.func,
+ onFocus: PropTypes.func,
+ onInputClick: PropTypes.func,
+ onKeyDown: PropTypes.func,
+ onMonthChange: PropTypes.func,
+ onYearChange: PropTypes.func,
+ onInputError: PropTypes.func,
+ open: PropTypes.bool,
+ onCalendarOpen: PropTypes.func,
+ onCalendarClose: PropTypes.func,
+ openToDate: PropTypes.instanceOf(Date),
+ peekNextMonth: PropTypes.bool,
+ placeholderText: PropTypes.string,
+ popperContainer: PropTypes.func,
+ popperClassName: PropTypes.string, // props
+ popperModifiers: PropTypes.arrayOf(PropTypes.object), // props
+ popperPlacement: PropTypes.oneOf(popperPlacementPositions), // props
+ popperProps: PropTypes.object,
+ preventOpenOnFocus: PropTypes.bool,
+ readOnly: PropTypes.bool,
+ required: PropTypes.bool,
+ scrollableYearDropdown: PropTypes.bool,
+ scrollableMonthYearDropdown: PropTypes.bool,
+ selected: PropTypes.instanceOf(Date),
+ selectsEnd: PropTypes.bool,
+ selectsStart: PropTypes.bool,
+ selectsRange: PropTypes.bool,
+ showMonthDropdown: PropTypes.bool,
+ showPreviousMonths: PropTypes.bool,
+ showMonthYearDropdown: PropTypes.bool,
+ showWeekNumbers: PropTypes.bool,
+ showYearDropdown: PropTypes.bool,
+ strictParsing: PropTypes.bool,
+ forceShowMonthNavigation: PropTypes.bool,
+ showDisabledMonthNavigation: PropTypes.bool,
+ startDate: PropTypes.instanceOf(Date),
+ startOpen: PropTypes.bool,
+ tabIndex: PropTypes.number,
+ timeCaption: PropTypes.string,
+ title: PropTypes.string,
+ todayButton: PropTypes.node,
+ useWeekdaysShort: PropTypes.bool,
+ formatWeekDay: PropTypes.func,
+ value: PropTypes.string,
+ weekLabel: PropTypes.string,
+ withPortal: PropTypes.bool,
+ portalId: PropTypes.string,
+ yearItemNumber: PropTypes.number,
+ yearDropdownItemNumber: PropTypes.number,
+ shouldCloseOnSelect: PropTypes.bool,
+ showTimeInput: PropTypes.bool,
+ showMonthYearPicker: PropTypes.bool,
+ showFullMonthYearPicker: PropTypes.bool,
+ showTwoColumnMonthYearPicker: PropTypes.bool,
+ showFourColumnMonthYearPicker: PropTypes.bool,
+ showYearPicker: PropTypes.bool,
+ showQuarterYearPicker: PropTypes.bool,
+ showTimeSelect: PropTypes.bool,
+ showTimeSelectOnly: PropTypes.bool,
+ timeFormat: PropTypes.string,
+ timeIntervals: PropTypes.number,
+ minTime: PropTypes.instanceOf(Date),
+ maxTime: PropTypes.instanceOf(Date),
+ excludeTimes: PropTypes.array,
+ filterTime: PropTypes.func,
+ useShortMonthInDropdown: PropTypes.bool,
+ clearButtonTitle: PropTypes.string,
+ clearButtonClassName: PropTypes.string,
+ previousMonthAriaLabel: PropTypes.string,
+ previousMonthButtonLabel: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
+ ]),
+ nextMonthAriaLabel: PropTypes.string,
+ nextMonthButtonLabel: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
+ ]),
+ previousYearAriaLabel: PropTypes.string,
+ previousYearButtonLabel: PropTypes.string,
+ nextYearAriaLabel: PropTypes.string,
+ nextYearButtonLabel: PropTypes.string,
+ timeInputLabel: PropTypes.string,
+ renderCustomHeader: PropTypes.func,
+ renderDayContents: PropTypes.func,
+ wrapperClassName: PropTypes.string,
+ focusSelectedMonth: PropTypes.bool,
+ onDayMouseEnter: PropTypes.func,
+ onMonthMouseLeave: PropTypes.func,
+ showPopperArrow: PropTypes.bool,
+ excludeScrollbar: PropTypes.bool,
+ enableTabLoop: PropTypes.bool,
+ customTimeInput: PropTypes.element,
+ weekAriaLabelPrefix: PropTypes.string,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = this.calcInitialState();
+ }
+
+ componentDidMount() {
+ window.addEventListener('scroll', this.onScroll, true);
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (
+ prevProps.inline
+ && hasPreSelectionChanged(prevProps.selected, this.props.selected)
+ ) {
+ this.setPreSelection(this.props.selected);
+ }
+ if (
+ this.state.monthSelectedIn !== undefined
+ && prevProps.monthsShown !== this.props.monthsShown
+ ) {
+ this.setState({ monthSelectedIn: 0 });
+ }
+ if (prevProps.highlightDates !== this.props.highlightDates) {
+ this.setState({
+ highlightDates: getHightLightDaysMap(this.props.highlightDates),
+ });
+ }
+ if (
+ !prevState.focused
+ && !isEqual(prevProps.selected, this.props.selected)
+ ) {
+ this.setState({ inputValue: null });
+ }
+
+ if (prevState.open !== this.state.open) {
+ if (prevState.open === false && this.state.open === true) {
+ this.props.onCalendarOpen();
+ }
+
+ if (prevState.open === true && this.state.open === false) {
+ this.props.onCalendarClose();
+ }
+ }
+ }
+
+ componentWillUnmount() {
+ this.clearPreventFocusTimeout();
+ window.removeEventListener('scroll', this.onScroll, true);
+ }
+
+ getPreSelection = () => (this.props.openToDate
+ ? this.props.openToDate
+ : this.props.selectsEnd && this.props.startDate
+ ? this.props.startDate
+ : this.props.selectsStart && this.props.endDate
+ ? this.props.endDate
+ : newDate());
+
+ calcInitialState = () => {
+ const defaultPreSelection = this.getPreSelection();
+ const minDate = getEffectiveMinDate(this.props);
+ const maxDate = getEffectiveMaxDate(this.props);
+ const boundedPreSelection = minDate && isBefore(defaultPreSelection, startOfDay(minDate))
+ ? minDate
+ : maxDate && isAfter(defaultPreSelection, endOfDay(maxDate))
+ ? maxDate
+ : defaultPreSelection;
+ return {
+ open: this.props.startOpen || false,
+ preventFocus: false,
+ preSelection:
+ (this.props.selectsRange
+ ? this.props.startDate
+ : this.props.selected) ?? boundedPreSelection,
+ // transforming highlighted days (perhaps nested array)
+ // to flat Map for faster access in day.jsx
+ highlightDates: getHightLightDaysMap(this.props.highlightDates),
+ focused: false,
+ // used to focus day in inline version after month has changed, but not on
+ // initial render
+ shouldFocusDayInline: false,
+ };
+ };
+
+ clearPreventFocusTimeout = () => {
+ if (this.preventFocusTimeout) {
+ clearTimeout(this.preventFocusTimeout);
+ }
+ };
+
+ setFocus = () => {
+ if (this.input && this.input.focus) {
+ this.input.focus({ preventScroll: true });
+ }
+ };
+
+ setBlur = () => {
+ if (this.input && this.input.blur) {
+ this.input.blur();
+ }
+
+ this.cancelFocusInput();
+ };
+
+ setOpen = (open, skipSetBlur = false) => {
+ this.setState(
+ {
+ open,
+ preSelection:
+ open && this.state.open
+ ? this.state.preSelection
+ : this.calcInitialState().preSelection,
+ lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE,
+ },
+ () => {
+ if (!open) {
+ this.setState(
+ prev => ({
+ focused: skipSetBlur ? prev.focused : false,
+ }),
+ () => {
+ !skipSetBlur && this.setBlur();
+
+ this.setState({ inputValue: null });
+ },
+ );
+ }
+ },
+ );
+ };
+ inputOk = () => isDate(this.state.preSelection);
+
+ isCalendarOpen = () => (this.props.open === undefined
+ ? this.state.open && !this.props.disabled && !this.props.readOnly
+ : this.props.open);
+
+ handleFocus = (event) => {
+ if (!this.state.preventFocus) {
+ this.props.onFocus(event);
+ if (!this.props.preventOpenOnFocus && !this.props.readOnly) {
+ this.setOpen(true);
+ }
+ }
+ this.setState({ focused: true });
+ };
+
+ cancelFocusInput = () => {
+ clearTimeout(this.inputFocusTimeout);
+ this.inputFocusTimeout = null;
+ };
+
+ deferFocusInput = () => {
+ this.cancelFocusInput();
+ this.inputFocusTimeout = setTimeout(() => this.setFocus(), 1);
+ };
+
+ handleDropdownFocus = () => {
+ this.cancelFocusInput();
+ };
+
+ handleBlur = (event) => {
+ if (!this.state.open || this.props.withPortal || this.props.showTimeInput) {
+ this.props.onBlur(event);
+ }
+
+ this.setState({ focused: false });
+ };
+
+ handleCalendarClickOutside = (event) => {
+ if (!this.props.inline) {
+ this.setOpen(false);
+ }
+ this.props.onClickOutside(event);
+ if (this.props.withPortal) {
+ event.preventDefault();
+ }
+ };
+
+ handleChange = (...allArgs) => {
+ const event = allArgs[0];
+ if (this.props.onChangeRaw) {
+ this.props.onChangeRaw.apply(this, allArgs);
+ if (
+ typeof event.isDefaultPrevented !== 'function'
+ || event.isDefaultPrevented()
+ ) {
+ return;
+ }
+ }
+ this.setState({
+ inputValue: event.target.value,
+ lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT,
+ });
+ const date = parseDate(
+ event.target.value,
+ this.props.dateFormat,
+ this.props.locale,
+ this.props.strictParsing,
+ this.props.minDate,
+ );
+ if (date || !event.target.value) {
+ this.setSelected(date, event, true);
+ }
+ };
+
+ handleSelect = (date, event, monthSelectedIn) => {
+ // Preventing onFocus event to fix issue
+ // https://github.com/Hacker0x01/react-datepicker/issues/628
+ this.setState({ preventFocus: true }, () => {
+ this.preventFocusTimeout = setTimeout(
+ () => this.setState({ preventFocus: false }),
+ 50,
+ );
+ return this.preventFocusTimeout;
+ });
+ if (this.props.onChangeRaw) {
+ this.props.onChangeRaw(event);
+ }
+ this.setSelected(date, event, false, monthSelectedIn);
+ if (!this.props.shouldCloseOnSelect || this.props.showTimeSelect) {
+ this.setPreSelection(date);
+ } else if (!this.props.inline) {
+ if (!this.props.selectsRange) {
+ this.setOpen(false);
+ }
+ const { startDate, endDate } = this.props;
+ if (startDate && !endDate && !isBefore(date, startDate)) {
+ this.setOpen(false);
+ }
+ }
+ };
+
+ setSelected = (date, event, keepInput, monthSelectedIn) => {
+ let changedDate = date;
+
+ if (changedDate !== null && isDayDisabled(changedDate, this.props)) {
+ return;
+ }
+ const { onChange, selectsRange, startDate, endDate } = this.props;
+
+ if (
+ !isEqual(this.props.selected, changedDate)
+ || this.props.allowSameDay
+ || selectsRange
+ ) {
+ if (changedDate !== null) {
+ if (
+ this.props.selected
+ && (!keepInput
+ || (!this.props.showTimeSelect
+ && !this.props.showTimeSelectOnly
+ && !this.props.showTimeInput))
+ ) {
+ changedDate = setTime(changedDate, {
+ hour: getHours(this.props.selected),
+ minute: getMinutes(this.props.selected),
+ second: getSeconds(this.props.selected),
+ });
+ }
+ if (!this.props.inline) {
+ this.setState({
+ preSelection: changedDate,
+ });
+ }
+ if (!this.props.focusSelectedMonth) {
+ this.setState({ monthSelectedIn });
+ }
+ }
+ if (selectsRange) {
+ const noRanges = !startDate && !endDate;
+ const hasStartRange = startDate && !endDate;
+ const isRangeFilled = startDate && endDate;
+ if (noRanges) {
+ onChange([changedDate, null], event);
+ } else if (hasStartRange) {
+ if (isBefore(changedDate, startDate)) {
+ onChange([changedDate, null], event);
+ } else {
+ onChange([startDate, changedDate], event);
+ }
+ }
+ if (isRangeFilled) {
+ onChange([changedDate, null], event);
+ }
+ } else {
+ onChange(changedDate, event);
+ }
+ }
+
+ if (!keepInput) {
+ this.props.onSelect(changedDate, event);
+ this.setState({ inputValue: null });
+ }
+ };
+
+ // When checking preSelection via min/maxDate, times need to be manipulated via startOfDay/endOfDay
+ setPreSelection = (date) => {
+ const hasMinDate = typeof this.props.minDate !== 'undefined';
+ const hasMaxDate = typeof this.props.maxDate !== 'undefined';
+ let isValidDateSelection = true;
+ if (date) {
+ const dateStartOfDay = startOfDay(date);
+ if (hasMinDate && hasMaxDate) {
+ // isDayinRange uses startOfDay internally, so not necessary to manipulate times here
+ isValidDateSelection = isDayInRange(
+ date,
+ this.props.minDate,
+ this.props.maxDate,
+ );
+ } else if (hasMinDate) {
+ const minDateStartOfDay = startOfDay(this.props.minDate);
+ isValidDateSelection = isAfter(date, minDateStartOfDay)
+ || isEqual(dateStartOfDay, minDateStartOfDay);
+ } else if (hasMaxDate) {
+ const maxDateEndOfDay = endOfDay(this.props.maxDate);
+ isValidDateSelection = isBefore(date, maxDateEndOfDay)
+ || isEqual(dateStartOfDay, maxDateEndOfDay);
+ }
+ }
+ if (isValidDateSelection) {
+ this.setState({
+ preSelection: date,
+ });
+ }
+ };
+
+ handleTimeChange = (time) => {
+ const selected = this.props.selected
+ ? this.props.selected
+ : this.getPreSelection();
+ const changedDate = setTime(selected, {
+ hour: getHours(time),
+ minute: getMinutes(time),
+ });
+
+ this.setState({
+ preSelection: changedDate,
+ });
+
+ this.props.onChange(changedDate);
+ if (this.props.shouldCloseOnSelect) {
+ this.setOpen(false);
+ }
+ if (this.props.showTimeInput) {
+ this.setOpen(true);
+ }
+ this.setState({ inputValue: null });
+ };
+
+ onInputClick = () => {
+ if (!this.props.disabled && !this.props.readOnly) {
+ this.setOpen(true);
+ }
+
+ this.props.onInputClick();
+ };
+
+ onInputKeyDown = (event) => {
+ this.props.onKeyDown(event);
+ const eventKey = event.key;
+
+ if (
+ !this.state.open
+ && !this.props.inline
+ && !this.props.preventOpenOnFocus
+ ) {
+ if (
+ eventKey === 'ArrowDown'
+ || eventKey === 'ArrowUp'
+ || eventKey === 'Enter'
+ ) {
+ this.onInputClick();
+ }
+ return;
+ }
+
+ // if calendar is open, these keys will focus the selected day
+ if (this.state.open) {
+ if (eventKey === 'ArrowDown' || eventKey === 'ArrowUp') {
+ event.preventDefault();
+ const selectedDay = this.calendar.componentNode
+ && this.calendar.componentNode.querySelector('.react-datepicker__day[tabindex="0"]');
+ selectedDay && selectedDay.focus({ preventScroll: true });
+
+ return;
+ }
+
+ const copy = newDate(this.state.preSelection);
+ if (eventKey === 'Enter') {
+ event.preventDefault();
+ if (
+ this.inputOk()
+ && this.state.lastPreSelectChange === PRESELECT_CHANGE_VIA_NAVIGATE
+ ) {
+ this.handleSelect(copy, event);
+ !this.props.shouldCloseOnSelect && this.setPreSelection(copy);
+ } else {
+ this.setOpen(false);
+ }
+ } else if (eventKey === 'Escape') {
+ event.preventDefault();
+
+ this.setOpen(false);
+ }
+
+ if (!this.inputOk()) {
+ this.props.onInputError({ code: 1, msg: INPUT_ERR_1 });
+ }
+ }
+ };
+
+ // keyDown events passed down to day.jsx
+ onDayKeyDown = (event) => {
+ this.props.onKeyDown(event);
+ const eventKey = event.key;
+
+ const copy = newDate(this.state.preSelection);
+ if (eventKey === 'Enter') {
+ event.preventDefault();
+ this.handleSelect(copy, event);
+ !this.props.shouldCloseOnSelect && this.setPreSelection(copy);
+ } else if (eventKey === 'Escape') {
+ event.preventDefault();
+
+ this.setOpen(false);
+ if (!this.inputOk()) {
+ this.props.onInputError({ code: 1, msg: INPUT_ERR_1 });
+ }
+ } else if (!this.props.disabledKeyboardNavigation) {
+ let newSelection;
+ switch (eventKey) {
+ case 'ArrowLeft':
+ newSelection = subDays(copy, 1);
+ break;
+ case 'ArrowRight':
+ newSelection = addDays(copy, 1);
+ break;
+ case 'ArrowUp':
+ newSelection = subWeeks(copy, 1);
+ break;
+ case 'ArrowDown':
+ newSelection = addWeeks(copy, 1);
+ break;
+ case 'PageUp':
+ newSelection = subMonths(copy, 1);
+ break;
+ case 'PageDown':
+ newSelection = addMonths(copy, 1);
+ break;
+ case 'Home':
+ newSelection = subYears(copy, 1);
+ break;
+ case 'End':
+ newSelection = addYears(copy, 1);
+ break;
+ }
+ if (!newSelection) {
+ if (this.props.onInputError) {
+ this.props.onInputError({ code: 1, msg: INPUT_ERR_1 });
+ }
+ return;
+ }
+ event.preventDefault();
+ this.setState({ lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE });
+ if (this.props.adjustDateOnChange) {
+ this.setSelected(newSelection);
+ }
+ this.setPreSelection(newSelection);
+ // need to figure out whether month has changed to focus day in inline version
+ if (this.props.inline) {
+ const prevMonth = getMonth(copy);
+ const newMonth = getMonth(newSelection);
+ const prevYear = getYear(copy);
+ const newYear = getYear(newSelection);
+
+ if (prevMonth !== newMonth || prevYear !== newYear) {
+ // month has changed
+ this.setState({ shouldFocusDayInline: true });
+ } else {
+ // month hasn't changed
+ this.setState({ shouldFocusDayInline: false });
+ }
+ }
+ }
+ };
+
+ // handle generic key down events in the popper that do not adjust or select dates
+ // ex: while focusing prev and next month buttons
+ onPopperKeyDown = (event) => {
+ const eventKey = event.key;
+ if (eventKey === 'Escape') {
+ // close the popper and refocus the input
+ // stop the input from auto opening onFocus
+ // close the popper
+ // setFocus to the input
+ // allow input auto opening onFocus
+ event.preventDefault();
+ this.setState(
+ {
+ preventFocus: true,
+ },
+ () => {
+ this.setOpen(false);
+ setTimeout(() => {
+ this.setFocus();
+ this.setState({ preventFocus: false });
+ });
+ },
+ );
+ }
+ };
+
+ onClearClick = (event) => {
+ if (event) {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ }
+ if (this.props.selectsRange) {
+ this.props.onChange([null, null], event);
+ } else {
+ this.props.onChange(null, event);
+ }
+ this.setState({ inputValue: null });
+ };
+
+ clear = () => {
+ this.onClearClick();
+ };
+
+ onScroll = (event) => {
+ if (
+ typeof this.props.closeOnScroll === 'boolean'
+ && this.props.closeOnScroll
+ ) {
+ if (
+ event.target === document
+ || event.target === document.documentElement
+ || event.target === document.body
+ ) {
+ this.setOpen(false);
+ }
+ } else if (typeof this.props.closeOnScroll === 'function') {
+ if (this.props.closeOnScroll(event)) {
+ this.setOpen(false);
+ }
+ }
+ };
+
+ renderCalendar = () => {
+ if (!this.props.inline && !this.isCalendarOpen()) {
+ return null;
+ }
+ return (
+ {
+ this.calendar = elem;
+ }}
+ locale={this.props.locale}
+ calendarStartDay={this.props.calendarStartDay}
+ chooseDayAriaLabelPrefix={this.props.chooseDayAriaLabelPrefix}
+ disabledDayAriaLabelPrefix={this.props.disabledDayAriaLabelPrefix}
+ weekAriaLabelPrefix={this.props.weekAriaLabelPrefix}
+ adjustDateOnChange={this.props.adjustDateOnChange}
+ setOpen={this.setOpen}
+ shouldCloseOnSelect={this.props.shouldCloseOnSelect}
+ dateFormat={this.props.dateFormatCalendar}
+ useWeekdaysShort={this.props.useWeekdaysShort}
+ formatWeekDay={this.props.formatWeekDay}
+ dropdownMode={this.props.dropdownMode}
+ selected={this.props.selected}
+ preSelection={this.state.preSelection}
+ onSelect={this.handleSelect}
+ onWeekSelect={this.props.onWeekSelect}
+ openToDate={this.props.openToDate}
+ minDate={this.props.minDate}
+ maxDate={this.props.maxDate}
+ selectsStart={this.props.selectsStart}
+ selectsEnd={this.props.selectsEnd}
+ selectsRange={this.props.selectsRange}
+ startDate={this.props.startDate}
+ endDate={this.props.endDate}
+ excludeDates={this.props.excludeDates}
+ filterDate={this.props.filterDate}
+ onClickOutside={this.handleCalendarClickOutside}
+ formatWeekNumber={this.props.formatWeekNumber}
+ highlightDates={this.state.highlightDates}
+ includeDates={this.props.includeDates}
+ includeTimes={this.props.includeTimes}
+ injectTimes={this.props.injectTimes}
+ inline={this.props.inline}
+ shouldFocusDayInline={this.state.shouldFocusDayInline}
+ peekNextMonth={this.props.peekNextMonth}
+ showMonthDropdown={this.props.showMonthDropdown}
+ showPreviousMonths={this.props.showPreviousMonths}
+ useShortMonthInDropdown={this.props.useShortMonthInDropdown}
+ showMonthYearDropdown={this.props.showMonthYearDropdown}
+ showWeekNumbers={this.props.showWeekNumbers}
+ showYearDropdown={this.props.showYearDropdown}
+ withPortal={this.props.withPortal}
+ forceShowMonthNavigation={this.props.forceShowMonthNavigation}
+ showDisabledMonthNavigation={this.props.showDisabledMonthNavigation}
+ scrollableYearDropdown={this.props.scrollableYearDropdown}
+ scrollableMonthYearDropdown={this.props.scrollableMonthYearDropdown}
+ todayButton={this.props.todayButton}
+ weekLabel={this.props.weekLabel}
+ outsideClickIgnoreClass={outsideClickIgnoreClass}
+ fixedHeight={this.props.fixedHeight}
+ monthsShown={this.props.monthsShown}
+ monthSelectedIn={this.state.monthSelectedIn}
+ onDropdownFocus={this.handleDropdownFocus}
+ onMonthChange={this.props.onMonthChange}
+ onYearChange={this.props.onYearChange}
+ dayClassName={this.props.dayClassName}
+ weekDayClassName={this.props.weekDayClassName}
+ monthClassName={this.props.monthClassName}
+ timeClassName={this.props.timeClassName}
+ showTimeSelect={this.props.showTimeSelect}
+ showTimeSelectOnly={this.props.showTimeSelectOnly}
+ onTimeChange={this.handleTimeChange}
+ timeFormat={this.props.timeFormat}
+ timeIntervals={this.props.timeIntervals}
+ minTime={this.props.minTime}
+ maxTime={this.props.maxTime}
+ excludeTimes={this.props.excludeTimes}
+ filterTime={this.props.filterTime}
+ timeCaption={this.props.timeCaption}
+ className={this.props.calendarClassName}
+ container={this.props.calendarContainer}
+ yearItemNumber={this.props.yearItemNumber}
+ yearDropdownItemNumber={this.props.yearDropdownItemNumber}
+ previousMonthAriaLabel={this.props.previousMonthAriaLabel}
+ previousMonthButtonLabel={this.props.previousMonthButtonLabel}
+ nextMonthAriaLabel={this.props.nextMonthAriaLabel}
+ nextMonthButtonLabel={this.props.nextMonthButtonLabel}
+ previousYearAriaLabel={this.props.previousYearAriaLabel}
+ previousYearButtonLabel={this.props.previousYearButtonLabel}
+ nextYearAriaLabel={this.props.nextYearAriaLabel}
+ nextYearButtonLabel={this.props.nextYearButtonLabel}
+ timeInputLabel={this.props.timeInputLabel}
+ disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
+ renderCustomHeader={this.props.renderCustomHeader}
+ popperProps={this.props.popperProps}
+ renderDayContents={this.props.renderDayContents}
+ onDayMouseEnter={this.props.onDayMouseEnter}
+ onMonthMouseLeave={this.props.onMonthMouseLeave}
+ showTimeInput={this.props.showTimeInput}
+ showMonthYearPicker={this.props.showMonthYearPicker}
+ showFullMonthYearPicker={this.props.showFullMonthYearPicker}
+ showTwoColumnMonthYearPicker={this.props.showTwoColumnMonthYearPicker}
+ showFourColumnMonthYearPicker={this.props.showFourColumnMonthYearPicker}
+ showYearPicker={this.props.showYearPicker}
+ showQuarterYearPicker={this.props.showQuarterYearPicker}
+ showPopperArrow={this.props.showPopperArrow}
+ excludeScrollbar={this.props.excludeScrollbar}
+ handleOnKeyDown={this.props.onKeyDown}
+ handleOnDayKeyDown={this.onDayKeyDown}
+ isInputFocused={this.state.focused}
+ customTimeInput={this.props.customTimeInput}
+ setPreSelection={this.setPreSelection}
+ >
+ {this.props.children}
+
+ );
+ };
+
+ renderDateInput = () => {
+ const className = classnames(this.props.className, {
+ [outsideClickIgnoreClass]: this.state.open,
+ });
+
+ const customInput = this.props.customInput || ;
+ const customInputRef = this.props.customInputRef || 'ref';
+ const inputValue = typeof this.props.value === 'string'
+ ? this.props.value
+ : typeof this.state.inputValue === 'string'
+ ? this.state.inputValue
+ : this.props.selectsRange
+ ? safeDateRangeFormat(
+ this.props.startDate,
+ this.props.endDate,
+ this.props,
+ )
+ : safeDateFormat(this.props.selected, this.props);
+
+ return React.cloneElement(customInput, {
+ [customInputRef]: (input) => {
+ this.input = input;
+ },
+ value: inputValue,
+ onBlur: this.handleBlur,
+ onChange: this.handleChange,
+ onClick: this.onInputClick,
+ onFocus: this.handleFocus,
+ onKeyDown: this.onInputKeyDown,
+ id: this.props.id,
+ name: this.props.name,
+ autoFocus: this.props.autoFocus,
+ placeholder: this.props.placeholderText,
+ disabled: this.props.disabled,
+ autoComplete: this.props.autoComplete,
+ className: classnames(customInput.props.className, className),
+ title: this.props.title,
+ readOnly: this.props.readOnly,
+ required: this.props.required,
+ tabIndex: this.props.tabIndex,
+ 'aria-describedby': this.props.ariaDescribedBy,
+ 'aria-invalid': this.props.ariaInvalid,
+ 'aria-labelledby': this.props.ariaLabelledBy,
+ 'aria-required': this.props.ariaRequired,
+ });
+ };
+
+ renderClearButton = () => {
+ const {
+ isClearable,
+ selected,
+ startDate,
+ endDate,
+ clearButtonTitle,
+ clearButtonClassName = '',
+ ariaLabelClose = 'Close',
+ } = this.props;
+ if (
+ isClearable
+ && (selected != null || startDate != null || endDate != null)
+ ) {
+ return (
+
+ );
+ }
+ return null;
+ };
+
+ renderInputContainer() {
+ return (
+
+ {this.renderDateInput()}
+ {this.renderClearButton()}
+
+ );
+ }
+
+ render() {
+ const calendar = this.renderCalendar();
+
+ if (this.props.inline) return calendar;
+
+ if (this.props.withPortal) {
+ let portalContainer = this.state.open ? (
+ {calendar}
+ ) : null;
+
+ if (this.state.open && this.props.portalId) {
+ portalContainer = (
+ {portalContainer}
+ );
+ }
+
+ return (
+
+ {this.renderInputContainer()}
+ {portalContainer}
+
+ );
+ };
+
+ return (
+
+ );
+ }
+}
+
+const PRESELECT_CHANGE_VIA_INPUT = 'input';
+const PRESELECT_CHANGE_VIA_NAVIGATE = 'navigate';
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/inputTime.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/inputTime.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3b16cd186568aad5a0334ad0cd7bb52863d8a518
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/inputTime.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class inputTime extends React.Component {
+ static propTypes = {
+ onChange: PropTypes.func,
+ date: PropTypes.instanceOf(Date),
+ timeString: PropTypes.string,
+ timeInputLabel: PropTypes.string,
+ customTimeInput: PropTypes.element,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: this.props.timeString,
+ };
+ }
+
+ static getDerivedStateFromProps(props, state) {
+ if (props.timeString !== state.time) {
+ return {
+ time: props.timeString,
+ };
+ }
+
+ // Return null to indicate no change to state.
+ return null;
+ }
+
+ onTimeChange = (time) => {
+ this.setState({ time });
+ const date = new Date();
+ date.setHours(time.split(':')[0]);
+ date.setMinutes(time.split(':')[1]);
+ this.props.onChange(date);
+ };
+
+ renderTimeInput = () => {
+ const { time } = this.state;
+ const { date, timeString, customTimeInput } = this.props;
+
+ if (customTimeInput) {
+ return React.cloneElement(customTimeInput, {
+ date,
+ value: time,
+ onChange: this.onTimeChange,
+ });
+ }
+
+ return (
+ {
+ this.onTimeChange(ev.target.value || timeString);
+ }}
+ />
+ );
+ };
+
+ render() {
+ return (
+
+
+ {this.props.timeInputLabel}
+
+
+
+ {this.renderTimeInput()}
+
+
+
+ {month.map((m, j) => (
+
{
+ this.onMonthClick(ev, m);
+ }}
+ onKeyDown={(ev) => {
+ this.onMonthKeyDown(ev, m);
+ }}
+ tabIndex={this.getTabIndex(m)}
+ className={this.getMonthClassNames(m)}
+ role="button"
+ aria-label={this.getAriaLabel(m)}
+ >
+ {showFullMonthYearPicker
+ ? utils.getMonthInLocale(m, locale)
+ : utils.getMonthShortInLocale(m, locale)}
+
+ ))}
+
+ {quarters.map((q, j) => (
+
{
+ this.onQuarterClick(ev, q);
+ }}
+ className={this.getQuarterClassNames(q)}
+ >
+ {utils.getQuarterShortInLocale(q, this.props.locale)}
+
+ ))}
+
+ {showMonthYearPicker
+ ? this.renderMonths()
+ : showQuarterYearPicker
+ ? this.renderQuarters()
+ : this.renderWeeks()}
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_dropdown.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_dropdown.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e3c1d9f381cc65746b80478ccca8e6935aefa364
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_dropdown.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MonthDropdownOptions from './month_dropdown_options';
+import onClickOutside from 'react-onclickoutside';
+import * as utils from './date_utils';
+
+const WrappedMonthDropdownOptions = onClickOutside(MonthDropdownOptions);
+
+export default class MonthDropdown extends React.Component {
+ static propTypes = {
+ dropdownMode: PropTypes.oneOf(['scroll', 'select']).isRequired,
+ locale: PropTypes.string,
+ month: PropTypes.number.isRequired,
+ onChange: PropTypes.func.isRequired,
+ useShortMonthInDropdown: PropTypes.bool,
+ };
+
+ state = {
+ dropdownVisible: false,
+ };
+
+ renderSelectOptions = monthNames => monthNames.map((M, i) => (
+
+ ));
+
+ renderSelectMode = monthNames => (
+
+ );
+
+ renderReadView = (visible, monthNames) => (
+
+
+
+ {monthNames[this.props.month]}
+
+
+ );
+
+ renderDropdown = monthNames => (
+
+ );
+
+ renderScrollMode = (monthNames) => {
+ const { dropdownVisible } = this.state;
+ const result = [this.renderReadView(!dropdownVisible, monthNames)];
+ if (dropdownVisible) {
+ result.unshift(this.renderDropdown(monthNames));
+ }
+ return result;
+ };
+
+ onChange = (month) => {
+ this.toggleDropdown();
+ if (month !== this.props.month) {
+ this.props.onChange(month);
+ }
+ };
+
+ toggleDropdown = () => this.setState({
+ dropdownVisible: !this.state.dropdownVisible,
+ });
+
+ render() {
+ const monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(this.props.useShortMonthInDropdown
+ ? M => utils.getMonthShortInLocale(M, this.props.locale)
+ : M => utils.getMonthInLocale(M, this.props.locale));
+
+ let renderedDropdown;
+ switch (this.props.dropdownMode) {
+ case 'scroll':
+ renderedDropdown = this.renderScrollMode(monthNames);
+ break;
+ case 'select':
+ renderedDropdown = this.renderSelectMode(monthNames);
+ break;
+ }
+
+ return (
+
+ {renderedDropdown}
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_dropdown_options.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_dropdown_options.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..41e968b1edbd6e395809e097dfee05c5ab9e86a0
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_dropdown_options.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class MonthDropdownOptions extends React.Component {
+ static propTypes = {
+ onCancel: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ month: PropTypes.number.isRequired,
+ monthNames: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+ };
+
+ renderOptions = () => this.props.monthNames.map((month, i) => (
+
+ {this.props.month === i ? (
+ ✓
+ ) : (
+ ''
+ )}
+ {month}
+
+ ));
+
+ onChange = month => this.props.onChange(month);
+
+ handleClickOutside = () => this.props.onCancel();
+
+ render() {
+ return (
+
+ {this.renderOptions()}
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_year_dropdown.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_year_dropdown.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2be3a1e4c01ec1d02ec4ea6e29aa518728f6c59c
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_year_dropdown.jsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MonthYearDropdownOptions from './month_year_dropdown_options';
+import onClickOutside from 'react-onclickoutside';
+import {
+ addMonths,
+ formatDate,
+ getStartOfMonth,
+ isAfter,
+ isSameMonth,
+ isSameYear,
+ newDate,
+ getTime,
+} from './date_utils';
+
+const WrappedMonthYearDropdownOptions = onClickOutside(MonthYearDropdownOptions);
+
+export default class MonthYearDropdown extends React.Component {
+ static propTypes = {
+ dropdownMode: PropTypes.oneOf(['scroll', 'select']).isRequired,
+ dateFormat: PropTypes.string.isRequired,
+ locale: PropTypes.string,
+ maxDate: PropTypes.instanceOf(Date).isRequired,
+ minDate: PropTypes.instanceOf(Date).isRequired,
+ date: PropTypes.instanceOf(Date).isRequired,
+ onChange: PropTypes.func.isRequired,
+ scrollableMonthYearDropdown: PropTypes.bool,
+ };
+
+ state = {
+ dropdownVisible: false,
+ };
+
+ renderSelectOptions = () => {
+ let currDate = getStartOfMonth(this.props.minDate);
+ const lastDate = getStartOfMonth(this.props.maxDate);
+ const options = [];
+
+ while (!isAfter(currDate, lastDate)) {
+ const timepoint = getTime(currDate);
+ options.push();
+
+ currDate = addMonths(currDate, 1);
+ }
+
+ return options;
+ };
+
+ onSelectChange = (e) => {
+ this.onChange(e.target.value);
+ };
+
+ renderSelectMode = () => (
+
+ );
+
+ renderReadView = (visible) => {
+ const yearMonth = formatDate(
+ this.props.date,
+ this.props.dateFormat,
+ this.props.locale,
+ );
+
+ return (
+ this.toggleDropdown(event)}
+ >
+
+
+ {yearMonth}
+
+
+ );
+ };
+
+ renderDropdown = () => (
+
+ );
+
+ renderScrollMode = () => {
+ const { dropdownVisible } = this.state;
+ const result = [this.renderReadView(!dropdownVisible)];
+ if (dropdownVisible) {
+ result.unshift(this.renderDropdown());
+ }
+ return result;
+ };
+
+ onChange = (monthYearPoint) => {
+ this.toggleDropdown();
+
+ const changedDate = newDate(parseInt(monthYearPoint));
+
+ if (
+ isSameYear(this.props.date, changedDate)
+ && isSameMonth(this.props.date, changedDate)
+ ) {
+ return;
+ }
+
+ this.props.onChange(changedDate);
+ };
+
+ toggleDropdown = () => this.setState({
+ dropdownVisible: !this.state.dropdownVisible,
+ });
+
+ render() {
+ let renderedDropdown;
+ switch (this.props.dropdownMode) {
+ case 'scroll':
+ renderedDropdown = this.renderScrollMode();
+ break;
+ case 'select':
+ renderedDropdown = this.renderSelectMode();
+ break;
+ }
+
+ return (
+
+ {renderedDropdown}
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_year_dropdown_options.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_year_dropdown_options.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..237f6b11643052a8182d34986d7afbb914562de5
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/month_year_dropdown_options.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+ addMonths,
+ formatDate,
+ getStartOfMonth,
+ newDate,
+ isAfter,
+ isSameMonth,
+ isSameYear,
+ getTime,
+} from './date_utils';
+
+function generateMonthYears(minDate, maxDate) {
+ const list = [];
+
+ let currDate = getStartOfMonth(minDate);
+ const lastDate = getStartOfMonth(maxDate);
+
+ while (!isAfter(currDate, lastDate)) {
+ list.push(newDate(currDate));
+
+ currDate = addMonths(currDate, 1);
+ }
+ return list;
+}
+
+export default class MonthYearDropdownOptions extends React.Component {
+ static propTypes = {
+ minDate: PropTypes.instanceOf(Date).isRequired,
+ maxDate: PropTypes.instanceOf(Date).isRequired,
+ onCancel: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ scrollableMonthYearDropdown: PropTypes.bool,
+ date: PropTypes.instanceOf(Date).isRequired,
+ dateFormat: PropTypes.string.isRequired,
+ locale: PropTypes.string,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ monthYearsList: generateMonthYears(
+ this.props.minDate,
+ this.props.maxDate,
+ ),
+ };
+ }
+
+ renderOptions = () => this.state.monthYearsList.map((monthYear) => {
+ const monthYearPoint = getTime(monthYear);
+ const isSameMonthYear = isSameYear(this.props.date, monthYear)
+ && isSameMonth(this.props.date, monthYear);
+
+ return (
+
+ {isSameMonthYear ? (
+
+ ✓
+
+ ) : (
+ ''
+ )}
+ {formatDate(monthYear, this.props.dateFormat, this.props.locale)}
+
+ );
+ });
+
+ onChange = monthYear => this.props.onChange(monthYear);
+
+ handleClickOutside = () => {
+ this.props.onCancel();
+ };
+
+ render() {
+ const dropdownClass = classNames({
+ 'react-datepicker__month-year-dropdown': true,
+ 'react-datepicker__month-year-dropdown--scrollable':
+ this.props.scrollableMonthYearDropdown,
+ });
+
+ return {this.renderOptions()}
;
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/popper_component.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/popper_component.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1ee92680b20efc388af4ae6dc855689e914abadd
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/popper_component.jsx
@@ -0,0 +1,103 @@
+import classnames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Manager, Reference, Popper } from 'react-popper';
+import { placements } from '@popperjs/core';
+import TabLoop from './tab_loop';
+import Portal from './portal';
+
+export const popperPlacementPositions = placements;
+
+export default class PopperComponent extends React.Component {
+ static get defaultProps() {
+ return {
+ hidePopper: true,
+ popperModifiers: [],
+ popperProps: {},
+ popperPlacement: 'bottom-start',
+ };
+ }
+
+ static propTypes = {
+ className: PropTypes.string,
+ wrapperClassName: PropTypes.string,
+ hidePopper: PropTypes.bool,
+ popperComponent: PropTypes.element,
+ popperModifiers: PropTypes.arrayOf(PropTypes.object), // props
+ popperPlacement: PropTypes.oneOf(popperPlacementPositions), // props
+ popperContainer: PropTypes.func,
+ popperProps: PropTypes.object,
+ targetComponent: PropTypes.element,
+ enableTabLoop: PropTypes.bool,
+ popperOnKeyDown: PropTypes.func,
+ portalId: PropTypes.string,
+ };
+
+ render() {
+ const {
+ className,
+ wrapperClassName,
+ hidePopper,
+ popperComponent,
+ popperModifiers,
+ popperPlacement,
+ popperProps,
+ targetComponent,
+ enableTabLoop,
+ popperOnKeyDown,
+ portalId,
+ } = this.props;
+
+ let popper;
+
+ if (!hidePopper) {
+ const classes = classnames('react-datepicker-popper', className);
+ popper = (
+
+ {({ ref, style, placement, arrowProps }) => (
+
+
+ {React.cloneElement(popperComponent, { arrowProps })}
+
+
+ )}
+
+ );
+ }
+
+ if (this.props.popperContainer) {
+ popper = React.createElement(this.props.popperContainer, {}, popper);
+ }
+
+ if (portalId && !hidePopper) {
+ popper = {popper};
+ }
+
+ const wrapperClasses = classnames(
+ 'react-datepicker-wrapper',
+ wrapperClassName,
+ );
+
+ return (
+
+
+ {({ ref }) => (
+
+ {targetComponent}
+
+ )}
+
+ {popper}
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/portal.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/portal.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..127ffc6c2ca37a86168bbf50a0a4549961358412
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/portal.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+
+export default class Portal extends React.Component {
+ static propTypes = {
+ children: PropTypes.any,
+ portalId: PropTypes.string,
+ };
+
+ constructor(props) {
+ super(props);
+ this.el = document.createElement('div');
+ }
+
+ componentDidMount() {
+ this.portalRoot = document.getElementById(this.props.portalId);
+ if (!this.portalRoot) {
+ this.portalRoot = document.createElement('div');
+ this.portalRoot.setAttribute('id', this.props.portalId);
+ document.body.appendChild(this.portalRoot);
+ }
+ this.portalRoot.appendChild(this.el);
+ }
+
+ componentWillUnmount() {
+ this.portalRoot.removeChild(this.el);
+ }
+
+ render() {
+ return ReactDOM.createPortal(this.props.children, this.el);
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/tab_loop.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/tab_loop.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2d51e0569c32399e60cd772186c66bf9c59ae64a
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/tab_loop.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// TabLoop prevents the user from tabbing outside of the popper
+// It creates a tabindex loop so that "Tab" on the last element will focus the first element
+// and "Shift Tab" on the first element will focus the last element
+
+const focusableElementsSelector = '[tabindex], a, button, input, select, textarea';
+const focusableFilter = node => !node.disabled && node.tabIndex !== -1;
+
+export default class TabLoop extends React.Component {
+ static get defaultProps() {
+ return {
+ enableTabLoop: true,
+ };
+ }
+
+ static propTypes = {
+ children: PropTypes.any,
+ enableTabLoop: PropTypes.bool,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.tabLoopRef = React.createRef();
+ }
+
+ // query all focusable elements
+ // trim first and last because they are the focus guards
+ getTabChildren = () => Array.prototype.slice
+ .call(
+ this.tabLoopRef.current.querySelectorAll(focusableElementsSelector),
+ 1,
+ -1,
+ )
+ .filter(focusableFilter);
+
+ handleFocusStart = (e) => {
+ const tabChildren = this.getTabChildren();
+ tabChildren
+ && tabChildren.length > 1
+ && tabChildren[tabChildren.length - 1].focus();
+ };
+
+ handleFocusEnd = (e) => {
+ const tabChildren = this.getTabChildren();
+ tabChildren && tabChildren.length > 1 && tabChildren[0].focus();
+ };
+
+ render() {
+ if (!this.props.enableTabLoop) {
+ return this.props.children;
+ }
+ return (
+
+
+ {this.props.children}
+
+
+
{
+ this.header = header;
+ }}
+ >
+
+ {this.props.timeCaption}
+
+
+
+
+
{
+ this.list = list;
+ }}
+ style={height ? { height } : {}}
+ tabIndex="0"
+ >
+ {this.renderTimes()}
+
+
+
+
{this.renderDays()}
;
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/week_number.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/week_number.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3570b04f2be90ac745e3ea76151e92dcfba60ebe
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/week_number.jsx
@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class WeekNumber extends React.Component {
+ static propTypes = {
+ weekNumber: PropTypes.number.isRequired,
+ onClick: PropTypes.func,
+ };
+
+ handleClick = (event) => {
+ if (this.props.onClick) {
+ this.props.onClick(event);
+ }
+ };
+
+ render() {
+ const { weekNumber, ariaLabelPrefix = 'week ', onClick } = this.props;
+ const weekNumberClasses = {
+ 'react-datepicker__week-number': true,
+ 'react-datepicker__week-number--clickable': !!onClick,
+ };
+ return (
+
+ {weekNumber}
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c658c809f1808f2de1074914fd1e6f9f0387800
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year.jsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getYear, newDate } from './date_utils';
+import * as utils from './date_utils';
+import classnames from 'classnames';
+
+export default class Year extends React.Component {
+ static propTypes = {
+ date: PropTypes.string,
+ disabledKeyboardNavigation: PropTypes.bool,
+ onDayClick: PropTypes.func,
+ preSelection: PropTypes.instanceOf(Date),
+ setPreSelection: PropTypes.func,
+ selected: PropTypes.object,
+ inline: PropTypes.bool,
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
+ yearItemNumber: PropTypes.number,
+ };
+
+ constructor(props) {
+ super(props);
+ }
+
+ YEAR_REFS = [...Array(this.props.yearItemNumber)].map(() => React.createRef());
+
+ isDisabled = date => utils.isDayDisabled(date, this.props);
+
+ isExcluded = date => utils.isDayExcluded(date, this.props);
+
+ updateFocusOnPaginate = (refIndex) => {
+ const waitForReRender = function () {
+ this.YEAR_REFS[refIndex].current.focus();
+ }.bind(this);
+
+ window.requestAnimationFrame(waitForReRender);
+ };
+
+ handleYearClick = (day, event) => {
+ if (this.props.onDayClick) {
+ this.props.onDayClick(day, event);
+ }
+ };
+
+ handleYearNavigation = (newYear, newDate) => {
+ const { date, yearItemNumber } = this.props;
+ const { startPeriod } = utils.getYearsPeriod(date, yearItemNumber);
+
+ if (this.isDisabled(newDate) || this.isExcluded(newDate)) return;
+ this.props.setPreSelection(newDate);
+
+ if (newYear - startPeriod === -1) {
+ this.updateFocusOnPaginate(yearItemNumber - 1);
+ } else if (newYear - startPeriod === yearItemNumber) {
+ this.updateFocusOnPaginate(0);
+ } else this.YEAR_REFS[newYear - startPeriod].current.focus();
+ };
+
+ isSameDay = (y, other) => utils.isSameDay(y, other);
+
+ isKeyboardSelected = (y) => {
+ const date = utils.getStartOfYear(utils.setYear(this.props.date, y));
+ return (
+ !this.props.disabledKeyboardNavigation
+ && !this.props.inline
+ && !utils.isSameDay(date, utils.getStartOfYear(this.props.selected))
+ && utils.isSameDay(date, utils.getStartOfYear(this.props.preSelection))
+ );
+ };
+
+ onYearClick = (e, y) => {
+ const { date } = this.props;
+ this.handleYearClick(utils.getStartOfYear(utils.setYear(date, y)), e);
+ };
+
+ onYearKeyDown = (e, y) => {
+ const { key } = e;
+ if (!this.props.disabledKeyboardNavigation) {
+ switch (key) {
+ case 'Enter':
+ this.onYearClick(e, y);
+ this.props.setPreSelection(this.props.selected);
+ break;
+ case 'ArrowRight':
+ this.handleYearNavigation(
+ y + 1,
+ utils.addYears(this.props.preSelection, 1),
+ );
+ break;
+ case 'ArrowLeft':
+ this.handleYearNavigation(
+ y - 1,
+ utils.subYears(this.props.preSelection, 1),
+ );
+ break;
+ }
+ }
+ };
+
+ getYearClassNames = (y) => {
+ const { minDate, maxDate, selected } = this.props;
+ return classnames('react-datepicker__year-text', {
+ 'react-datepicker__year-text--selected': y === getYear(selected),
+ 'react-datepicker__year-text--disabled':
+ (minDate || maxDate) && utils.isYearDisabled(y, this.props),
+ // 'react-datepicker__year-text--keyboard-selected':
+ // this.isKeyboardSelected(y),
+ 'react-datepicker__year-text--today': y === getYear(newDate()),
+ });
+ };
+
+ getYearTabIndex = (y) => {
+ if (this.props.disabledKeyboardNavigation) return '-1';
+ const preSelected = utils.getYear(this.props.preSelection);
+
+ return y === preSelected ? '0' : '-1';
+ };
+
+ render() {
+ const yearsList = [];
+ const { date, yearItemNumber } = this.props;
+ const { startPeriod, endPeriod } = utils.getYearsPeriod(
+ date,
+ yearItemNumber,
+ );
+
+ for (let y = startPeriod; y <= endPeriod; y++) {
+ yearsList.push( {
+ this.onYearClick(ev, y);
+ }}
+ onKeyDown={(ev) => {
+ this.onYearKeyDown(ev, y);
+ }}
+ tabIndex={this.getYearTabIndex(y)}
+ className={this.getYearClassNames(y)}
+ key={y}
+ >
+ {y}
+
);
+ }
+
+ return (
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year_dropdown.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year_dropdown.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b4d10f48bf7eaf608f91c9cd299e657bc4e8da0b
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year_dropdown.jsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import YearDropdownOptions from './year_dropdown_options';
+import onClickOutside from 'react-onclickoutside';
+import { getYear } from './date_utils';
+
+const WrappedYearDropdownOptions = onClickOutside(YearDropdownOptions);
+
+export default class YearDropdown extends React.Component {
+ static propTypes = {
+ adjustDateOnChange: PropTypes.bool,
+ dropdownMode: PropTypes.oneOf(['scroll', 'select']).isRequired,
+ maxDate: PropTypes.instanceOf(Date),
+ minDate: PropTypes.instanceOf(Date),
+ onChange: PropTypes.func.isRequired,
+ scrollableYearDropdown: PropTypes.bool,
+ year: PropTypes.number.isRequired,
+ yearDropdownItemNumber: PropTypes.number,
+ date: PropTypes.instanceOf(Date),
+ onSelect: PropTypes.func,
+ setOpen: PropTypes.func,
+ };
+
+ state = {
+ dropdownVisible: false,
+ };
+
+ renderSelectOptions = () => {
+ const minYear = this.props.minDate ? getYear(this.props.minDate) : 1900;
+ const maxYear = this.props.maxDate ? getYear(this.props.maxDate) : 2100;
+
+ const options = [];
+ for (let i = minYear; i <= maxYear; i++) {
+ options.push();
+ }
+ return options;
+ };
+
+ onSelectChange = (e) => {
+ this.onChange(e.target.value);
+ };
+
+ renderSelectMode = () => (
+
+ );
+
+ renderReadView = visible => (
+ this.toggleDropdown(event)}
+ >
+
+
+ {this.props.year}
+
+
+ );
+
+ renderDropdown = () => (
+
+ );
+
+ renderScrollMode = () => {
+ const { dropdownVisible } = this.state;
+ const result = [this.renderReadView(!dropdownVisible)];
+ if (dropdownVisible) {
+ result.unshift(this.renderDropdown());
+ }
+ return result;
+ };
+
+ onChange = (year) => {
+ this.toggleDropdown();
+ if (year === this.props.year) return;
+ this.props.onChange(year);
+ };
+
+ toggleDropdown = (event) => {
+ this.setState(
+ {
+ dropdownVisible: !this.state.dropdownVisible,
+ },
+ () => {
+ if (this.props.adjustDateOnChange) {
+ this.handleYearChange(this.props.date, event);
+ }
+ },
+ );
+ };
+
+ handleYearChange = (date, event) => {
+ this.onSelect(date, event);
+ this.setOpen();
+ };
+
+ onSelect = (date, event) => {
+ if (this.props.onSelect) {
+ this.props.onSelect(date, event);
+ }
+ };
+
+ setOpen = () => {
+ if (this.props.setOpen) {
+ this.props.setOpen(true);
+ }
+ };
+
+ render() {
+ let renderedDropdown;
+ switch (this.props.dropdownMode) {
+ case 'scroll':
+ renderedDropdown = this.renderScrollMode();
+ break;
+ case 'select':
+ renderedDropdown = this.renderSelectMode();
+ break;
+ }
+
+ return (
+
+ {renderedDropdown}
+
+ );
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year_dropdown_options.jsx b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year_dropdown_options.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c37a9be26abb515a198c733bfe02bdd4594ca066
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/lib/react-datepicker/year_dropdown_options.jsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { getYear } from './date_utils';
+
+function generateYears(year, noOfYear, minDate, maxDate) {
+ const list = [];
+ for (let i = 0; i < 2 * noOfYear + 1; i++) {
+ const newYear = year + noOfYear - i;
+ let isInRange = true;
+
+ if (minDate) {
+ isInRange = getYear(minDate) <= newYear;
+ }
+
+ if (maxDate && isInRange) {
+ isInRange = getYear(maxDate) >= newYear;
+ }
+
+ if (isInRange) {
+ list.push(newYear);
+ }
+ }
+
+ return list;
+}
+
+export default class YearDropdownOptions extends React.Component {
+ static propTypes = {
+ minDate: PropTypes.instanceOf(Date),
+ maxDate: PropTypes.instanceOf(Date),
+ onCancel: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ scrollableYearDropdown: PropTypes.bool,
+ year: PropTypes.number.isRequired,
+ yearDropdownItemNumber: PropTypes.number,
+ };
+
+ constructor(props) {
+ super(props);
+ const { yearDropdownItemNumber, scrollableYearDropdown } = props;
+ const noOfYear = yearDropdownItemNumber || (scrollableYearDropdown ? 10 : 5);
+
+ this.state = {
+ yearsList: generateYears(
+ this.props.year,
+ noOfYear,
+ this.props.minDate,
+ this.props.maxDate,
+ ),
+ };
+ }
+
+ renderOptions = () => {
+ const selectedYear = this.props.year;
+ const options = this.state.yearsList.map(year => (
+
+ {selectedYear === year ? (
+ ✓
+ ) : (
+ ''
+ )}
+ {year}
+
+ ));
+
+ const minYear = this.props.minDate ? getYear(this.props.minDate) : null;
+ const maxYear = this.props.maxDate ? getYear(this.props.maxDate) : null;
+
+ if (!maxYear || !this.state.yearsList.find(year => year === maxYear)) {
+ options.unshift();
+ }
+
+ if (!minYear || !this.state.yearsList.find(year => year === minYear)) {
+ options.push();
+ }
+
+ return options;
+ };
+
+ onChange = (year) => {
+ this.props.onChange(year);
+ };
+
+ handleClickOutside = () => {
+ this.props.onCancel();
+ };
+
+ shiftYears = (amount) => {
+ const years = this.state.yearsList.map(year => year + amount);
+
+ this.setState({
+ yearsList: years,
+ });
+ };
+
+ incrementYears = () => this.shiftYears(1);
+
+ decrementYears = () => this.shiftYears(-1);
+
+ render() {
+ const dropdownClass = classNames({
+ 'react-datepicker__year-dropdown': true,
+ 'react-datepicker__year-dropdown--scrollable':
+ this.props.scrollableYearDropdown,
+ });
+
+ return {this.renderOptions()}
;
+ }
+}
diff --git a/packages/discuz-design/components/datepicker/layouts/web/month-picker.tsx b/packages/discuz-design/components/datepicker/layouts/web/month-picker.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..70850bb4c463779057b502247a2ba8205a55cda1
--- /dev/null
+++ b/packages/discuz-design/components/datepicker/layouts/web/month-picker.tsx
@@ -0,0 +1,108 @@
+import React, { useState, forwardRef } from 'react';
+import classNames from 'classnames';
+import DatePicker, { registerLocale } from './lib/react-datepicker';
+import { DatepickerProps } from '../../interface';
+import { useConfig } from '../../../../extends/configContext';
+import { getYear, getMonth } from 'date-fns';
+
+import Input from '../../../input';
+import Icon from '../../../icon';
+import Button from '../../../button';
+
+import zhCN from 'date-fns/locale/zh-CN';
+registerLocale('zhCN', zhCN);
+
+/**
+ * 月份选择器
+ */
+export default (props) => {
+ const { clsPrefix } = useConfig();
+
+ const [startDate, setStartDate] = useState(new Date());
+
+ const onNowClick = ({ changeYear, changeMonth }) => {
+ changeYear(getYear(Date.now()));
+ changeMonth(getMonth(Date.now()));
+ };
+
+ const ExampleCustomInput = forwardRef(({ value, isYear, onClick }, ref) => (
+
+ ));
+
+ const renderCustomHeader = ({
+ date,
+ changeYear,
+ changeMonth,
+ decreaseMonth,
+ increaseMonth,
+ prevMonthButtonDisabled,
+ nextMonthButtonDisabled,
+ }) => (
+
+
+ changeYear(getYear(date))}
+ showYearPicker
+ dateFormat="yyyy"
+ locale="zhCN"
+ customInput={}
+ />
+
+
+
+ changeYear(getYear(date) - 1)}
+ >
+
+ changeYear(getYear(date) + 1)}
+ size={12}
+ >
+
+
+
+
+
+
+
+ changeYear(getYear(date) - 1)}
+ >
+
+ changeYear(getYear(date) + 1)}
+ size={12}
+ >
+
+