rsuite 5.18.0 → 5.18.1-beta.4

package/esm/Calendar/Calendar.d.ts

@@ -1,61 +1,26 @@
-import React, { HTMLAttributes } from 'react';
-import { HeaderProps } from './Header';
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import React from 'react';
+import Calendar from './CalendarContainer';
 import { CalendarLocale } from '../locales';
-export declare enum CalendarState {
-    'DROP_TIME' = "DROP_TIME",
-    'DROP_MONTH' = "DROP_MONTH"
-}
-export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, Omit<HeaderProps, 'onMoveForward' | 'onMoveBackward' | 'showDate' | 'showTime' | 'showMonth'> {
-    /** The status of the calendar display: day, month, time. */
-    calendarState?: CalendarState;
-    /** The panel render based on date range */
-    dateRange?: Date[];
-    /** Disabled date */
-    disabledDate?: (date: Date) => boolean;
-    /** Disabled hours */
-    disabledHours?: (hour: number, date: Date) => boolean;
-    /** Disabled minutes */
-    disabledMinutes?: (minute: number, date: Date) => boolean;
-    /** Hidden seconds */
-    disabledSeconds?: (second: number, date: Date) => boolean;
-    /** Format str */
-    format: string;
-    /** Hidden hours */
-    hideHours?: (hour: number, date: Date) => boolean;
-    /** Hidden minutes */
-    hideMinutes?: (minute: number, date: Date) => boolean;
-    /** Hidden seconds */
-    hideSeconds?: (second: number, date: Date) => boolean;
-    /** The value that mouse hover on in range selection */
-    hoverRangeValue?: [Date, Date];
-    /** Is it in the same month as today */
-    inSameMonth?: (date: Date) => boolean;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export interface CalendarProps extends WithAsProps {
+    /** Controlled value */
+    value?: Date;
+    /** Default value  */
+    defaultValue?: Date;
+    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day  */
     isoWeek?: boolean;
-    /** Limit showing how many years in the future */
-    limitEndYear?: number;
+    /** Display a compact calendar   */
+    compact?: boolean;
+    /** Show border   */
+    bordered?: boolean;
     /** Custom locale */
-    locale: CalendarLocale;
-    /** Callback after the date has changed */
-    onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
-    /** Callback after the time has changed */
-    onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
-    /** Callback after mouse enter other date cell */
-    onMouseMove?: (date: Date) => void;
-    /** Switch to the callback triggered after the previous month. */
-    onMoveBackward?: (nextPageDate: Date) => void;
-    /** Switch to the callback triggered after the next month. */
-    onMoveForward?: (nextPageDate: Date) => void;
+    locale?: CalendarLocale;
+    /**  Callback fired before the value changed  */
+    onChange?: (date: Date) => void;
     /** Callback fired before the date selected */
-    onSelect?: (date: Date, event: React.MouseEvent) => void;
-    /** Date displayed on the current page */
-    calendarDate: Date;
-    /** Custom rendering cell*/
+    onSelect?: (date: Date) => void;
+    /** Custom render calendar cells  */
     renderCell?: (date: Date) => React.ReactNode;
-    /** Whether to show week numbers */
-    showWeekNumbers?: boolean;
-    inline?: boolean;
 }
-declare const Calendar: RsRefForwardingComponent<'div', CalendarProps>;
-export default Calendar;
+declare const CalendarPanel: RsRefForwardingComponent<typeof Calendar, CalendarProps>;
+export default CalendarPanel;

package/esm/Calendar/Calendar.js

@@ -1,175 +1,103 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import pick from 'lodash/pick';
-import MonthDropdown from './MonthDropdown';
-import TimeDropdown from './TimeDropdown';
-import View from './View';
-import Header from './Header';
-import { useClassNames, DateUtils, composeFunctions } from '../utils';
-import { CalendarProvider } from './CalendarContext';
-export var CalendarState;
-
-(function (CalendarState) {
-  CalendarState["DROP_TIME"] = "DROP_TIME";
-  CalendarState["DROP_MONTH"] = "DROP_MONTH";
-})(CalendarState || (CalendarState = {}));
-
-var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import Calendar from './CalendarContainer';
+import Button from '../Button';
+import { FormattedDate } from '../CustomProvider';
+import { useClassNames, useCustom } from '../utils';
+import useCalendarDate from './useCalendarDate';
+var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
+      Component = _props$as === void 0 ? Calendar : _props$as,
+      bordered = props.bordered,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
-      calendarState = props.calendarState,
-      dateRange = props.dateRange,
-      disabledBackward = props.disabledBackward,
-      disabledDate = props.disabledDate,
-      disabledForward = props.disabledForward,
-      format = props.format,
-      hoverRangeValue = props.hoverRangeValue,
-      inSameMonth = props.inSameMonth,
-      _props$isoWeek = props.isoWeek,
-      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
-      limitEndYear = props.limitEndYear,
-      locale = props.locale,
-      onChangePageDate = props.onChangePageDate,
-      onChangePageTime = props.onChangePageTime,
-      onMouseMove = props.onMouseMove,
-      onMoveBackward = props.onMoveBackward,
-      onMoveForward = props.onMoveForward,
+      compact = props.compact,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
+      isoWeek = props.isoWeek,
+      overrideLocale = props.locale,
+      onChange = props.onChange,
       onSelect = props.onSelect,
-      onToggleMeridian = props.onToggleMeridian,
-      onToggleMonthDropdown = props.onToggleMonthDropdown,
-      onToggleTimeDropdown = props.onToggleTimeDropdown,
-      calendarDate = props.calendarDate,
       renderCell = props.renderCell,
-      renderTitle = props.renderTitle,
-      renderToolbar = props.renderToolbar,
-      showMeridian = props.showMeridian,
-      showWeekNumbers = props.showWeekNumbers,
-      inline = props.inline,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarState", "dateRange", "disabledBackward", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangePageDate", "onChangePageTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      value = props.value,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onSelect", "renderCell", "value"]);
 
-  var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
+  var _useCalendarDate = useCalendarDate(value, defaultValue),
+      calendarDate = _useCalendarDate.calendarDate,
+      setCalendarDate = _useCalendarDate.setCalendarDate;
 
-  var isDisabledDate = useCallback(function (date) {
-    var _disabledDate;
+  var _useCustom = useCustom('Calendar', overrideLocale),
+      locale = _useCustom.locale;
 
-    return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
-  }, [disabledDate]);
+  var handleChange = useCallback(function (nextValue) {
+    setCalendarDate(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  }, [setCalendarDate, onChange]);
+  var handleClickToday = useCallback(function () {
+    handleChange(new Date());
+  }, [handleChange]);
+  var handleSelect = useCallback(function (nextValue) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
+    handleChange(nextValue);
+  }, [handleChange, onSelect]);
 
-  var isTimeDisabled = function isTimeDisabled(date) {
-    return DateUtils.disabledTime(props, date);
-  };
+  var _useClassNames = useClassNames(classPrefix),
+      prefix = _useClassNames.prefix,
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix;
 
-  var handleMoveForward = useCallback(function () {
-    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(DateUtils.addMonths(calendarDate, 1));
-  }, [onMoveForward, calendarDate]);
-  var handleMoveBackward = useCallback(function () {
-    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(DateUtils.addMonths(calendarDate, -1));
-  }, [onMoveBackward, calendarDate]);
-  var showDate = DateUtils.shouldDate(format);
-  var showTime = DateUtils.shouldTime(format);
-  var showMonth = DateUtils.shouldMonth(format);
-  var onlyShowTime = showTime && !showDate && !showMonth;
-  var onlyShowMonth = showMonth && !showDate && !showTime;
-  var dropTime = calendarState === CalendarState.DROP_TIME || onlyShowTime;
-  var dropMonth = calendarState === CalendarState.DROP_MONTH || onlyShowMonth;
-  var inSameThisMonthDate = useCallback(function (date) {
-    return composeFunctions(function (d) {
-      return DateUtils.setDate(d, 1);
-    }, function (d) {
-      return DateUtils.isSameMonth(d, date);
-    })(date);
-  }, []);
-  var calendarClasses = merge(className, withClassPrefix({
-    'show-time-dropdown': dropTime,
-    'show-month-dropdown': dropMonth,
-    'show-week-numbers': showWeekNumbers
+  var renderToolbar = useCallback(function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      className: prefix('btn-today'),
+      size: "sm",
+      onClick: handleClickToday
+    }, locale.today || 'Today');
+  }, [handleClickToday, locale.today, prefix]);
+  var customRenderCell = useCallback(function (date) {
+    return renderCell === null || renderCell === void 0 ? void 0 : renderCell(date);
+  }, [renderCell]);
+  var classes = merge(className, withClassPrefix('panel', {
+    bordered: bordered,
+    compact: compact
   }));
-  var timeDropdownProps = pick(rest, DateUtils.calendarOnlyProps);
-  var contextValue = useMemo(function () {
-    return {
-      date: calendarDate,
-      dateRange: dateRange,
-      disabledDate: isDisabledDate,
-      format: format,
-      hoverRangeValue: hoverRangeValue,
-      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
-      isoWeek: isoWeek,
-      locale: locale,
-      onChangePageDate: onChangePageDate,
-      onChangePageTime: onChangePageTime,
-      onMouseMove: onMouseMove,
-      onSelect: onSelect,
-      renderCell: renderCell,
-      showWeekNumbers: showWeekNumbers,
-      inline: inline
-    };
-  }, [calendarDate, dateRange, format, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageDate, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
-  return /*#__PURE__*/React.createElement(CalendarProvider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, DateUtils.omitHideDisabledProps(rest), {
-    className: calendarClasses,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Header, {
-    showMonth: showMonth,
-    showDate: showDate,
-    showTime: showTime,
-    showMeridian: showMeridian,
-    disabledTime: isTimeDisabled,
-    onMoveForward: handleMoveForward,
-    onMoveBackward: handleMoveBackward,
-    onToggleMonthDropdown: onToggleMonthDropdown,
-    onToggleTimeDropdown: onToggleTimeDropdown,
-    onToggleMeridian: onToggleMeridian,
-    renderTitle: renderTitle,
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    inline: true,
+    className: classes,
+    ref: ref,
+    isoWeek: isoWeek,
+    format: "yyyy-MM-dd",
+    calendarDate: calendarDate,
+    limitEndYear: 1000,
+    locale: locale,
+    renderTitle: function renderTitle(date) {
+      return /*#__PURE__*/React.createElement(FormattedDate, {
+        date: date,
+        formatStr: locale.formattedMonthPattern || 'MMMM  yyyy'
+      });
+    },
     renderToolbar: renderToolbar,
-    disabledBackward: disabledBackward,
-    disabledForward: disabledForward
-  }), showDate && /*#__PURE__*/React.createElement(View, null), showMonth && /*#__PURE__*/React.createElement(MonthDropdown, {
-    show: dropMonth,
-    limitEndYear: limitEndYear,
-    disabledMonth: isDisabledDate
-  }), showTime && /*#__PURE__*/React.createElement(TimeDropdown, _extends({}, timeDropdownProps, {
-    show: dropTime,
-    showMeridian: showMeridian
-  }))));
+    renderCell: customRenderCell,
+    onMoveForward: handleChange,
+    onMoveBackward: handleChange,
+    onChangePageDate: handleChange,
+    onSelect: handleSelect
+  }));
 });
-Calendar.displayName = 'Calendar';
-Calendar.propTypes = {
-  calendarState: PropTypes.oneOf(Object.values(CalendarState)),
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  disabledDate: PropTypes.func,
-  disabledHours: PropTypes.func,
-  disabledMinutes: PropTypes.func,
-  disabledSeconds: PropTypes.func,
-  format: PropTypes.string,
-  hideHours: PropTypes.func,
-  hideMinutes: PropTypes.func,
-  hideSeconds: PropTypes.func,
-  inSameMonth: PropTypes.func,
+CalendarPanel.displayName = 'CalendarPanel';
+CalendarPanel.propTypes = {
+  value: PropTypes.instanceOf(Date),
+  defaultValue: PropTypes.instanceOf(Date),
   isoWeek: PropTypes.bool,
-  limitEndYear: PropTypes.number,
+  compact: PropTypes.bool,
+  bordered: PropTypes.bool,
   locale: PropTypes.object,
-  onChangePageDate: PropTypes.func,
-  onChangePageTime: PropTypes.func,
-  onMoveBackward: PropTypes.func,
-  onMoveForward: PropTypes.func,
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  onChange: PropTypes.func,
   onSelect: PropTypes.func,
-  onToggleMeridian: PropTypes.func,
-  onToggleMonthDropdown: PropTypes.func,
-  onToggleTimeDropdown: PropTypes.func,
-  calendarDate: PropTypes.instanceOf(Date),
-  renderCell: PropTypes.func,
-  renderTitle: PropTypes.func,
-  renderToolbar: PropTypes.func,
-  showMeridian: PropTypes.bool,
-  showWeekNumbers: PropTypes.bool
+  renderCell: PropTypes.func
 };
-export default Calendar;
+export default CalendarPanel;

package/esm/Calendar/CalendarBody.d.ts

@@ -0,0 +1,4 @@
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export declare type CalendarBodyProps = WithAsProps;
+declare const CalendarBody: RsRefForwardingComponent<'div', CalendarBodyProps>;
+export default CalendarBody;

package/esm/Calendar/{View.js → CalendarBody.js}

@@ -5,12 +5,12 @@ import PropTypes from 'prop-types';
 import { DateUtils, useClassNames, useCustom } from '../utils';
 import Table from './Table';
 import { useCalendarContext } from './CalendarContext';
-var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var CalendarBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
       _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'calendar-view' : _props$classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'calendar-body' : _props$classPrefix,
       rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix"]);
 
   var _useCalendarContext = useCalendarContext(),
@@ -38,10 +38,10 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-label": formatDate(thisMonthDate, locale.formattedMonthPattern)
   }));
 });
-View.displayName = 'View';
-View.propTypes = {
+CalendarBody.displayName = 'CalendarBody';
+CalendarBody.propTypes = {
   as: PropTypes.elementType,
   className: PropTypes.string,
   classPrefix: PropTypes.string
 };
-export default View;
+export default CalendarBody;

package/esm/Calendar/CalendarContainer.d.ts

@@ -0,0 +1,61 @@
+import React, { HTMLAttributes } from 'react';
+import { CalendarHeaderProps } from './CalendarHeader';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import { CalendarLocale } from '../locales';
+import { CalendarState } from './useCalendarState';
+export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
+    /** The panel render based on date range */
+    dateRange?: Date[];
+    /** Date displayed on the current page */
+    calendarDate: Date;
+    /** Whether to show week numbers */
+    showWeekNumbers?: boolean;
+    inline?: boolean;
+    defaultState?: CalendarState;
+    /** Disabled date */
+    disabledDate?: (date: Date) => boolean;
+    /** Disabled hours */
+    disabledHours?: (hour: number, date: Date) => boolean;
+    /** Disabled minutes */
+    disabledMinutes?: (minute: number, date: Date) => boolean;
+    /** Hidden seconds */
+    disabledSeconds?: (second: number, date: Date) => boolean;
+    /** Format str */
+    format: string;
+    /** Hidden hours */
+    hideHours?: (hour: number, date: Date) => boolean;
+    /** Hidden minutes */
+    hideMinutes?: (minute: number, date: Date) => boolean;
+    /** Hidden seconds */
+    hideSeconds?: (second: number, date: Date) => boolean;
+    /** The value that mouse hover on in range selection */
+    hoverRangeValue?: [Date, Date];
+    /** Is it in the same month as today */
+    inSameMonth?: (date: Date) => boolean;
+    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+    isoWeek?: boolean;
+    /** Limit showing how many years in the future */
+    limitEndYear?: number;
+    /** Custom locale */
+    locale: CalendarLocale;
+    /** Callback after the date has changed */
+    onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
+    /** Callback after the time has changed */
+    onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
+    /** Callback after mouse enter other date cell */
+    onMouseMove?: (date: Date) => void;
+    /** Switch to the callback triggered after the previous month. */
+    onMoveBackward?: (nextPageDate: Date) => void;
+    /** Switch to the callback triggered after the next month. */
+    onMoveForward?: (nextPageDate: Date) => void;
+    /** Callback fired before the date selected */
+    onSelect?: (date: Date, event: React.MouseEvent) => void;
+    /** Custom rendering cell*/
+    renderCell?: (date: Date) => React.ReactNode;
+    /** Called when opening the month view */
+    onToggleMonthDropdown?: (toggle: boolean) => void;
+    /** Called when opening the time view */
+    onToggleTimeDropdown?: (toggle: boolean) => void;
+}
+declare const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps>;
+export default CalendarContainer;