@docsvision/material-ui-pickers 3.2.0-beta.24 → 3.2.0-beta.26

package/src/_shared/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const ArrowLeftIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
+      <path fill="none" d="M0 0h24v24H0V0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/ArrowRightIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const ArrowRightIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+      <path fill="none" d="M0 0h24v24H0V0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/DateRangeIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const DateRangeIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/KeyboardIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const KeyboardIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/TimeIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const TimeIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+    </SvgIcon>
+  );
+};

package/src/constants/ClockType.ts

@@ -0,0 +1,11 @@
+enum ClockType {
+  HOURS = 'hours',
+
+  MINUTES = 'minutes',
+
+  SECONDS = 'seconds',
+}
+
+export type ClockViewType = 'hours' | 'minutes' | 'seconds';
+
+export default ClockType;

package/src/constants/dimensions.ts

@@ -0,0 +1,5 @@
+export const DIALOG_WIDTH = 310;
+
+export const DIALOG_WIDTH_WIDER = 325;
+
+export const VIEW_HEIGHT = 305;

package/src/constants/prop-types.ts

@@ -0,0 +1,37 @@
+import * as PropTypes from 'prop-types';
+import { BaseTimePickerProps } from '../TimePicker/TimePicker';
+import { BaseDatePickerProps } from '../DatePicker/DatePicker';
+
+const date = PropTypes.oneOfType([
+  PropTypes.object,
+  PropTypes.string,
+  PropTypes.number,
+  PropTypes.instanceOf(Date),
+]);
+
+const datePickerView = PropTypes.oneOf(['year', 'month', 'day']);
+
+export type ParsableDate = object | string | number | Date | null | undefined;
+
+export const DomainPropTypes = { date, datePickerView };
+
+/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
+export const timePickerDefaultProps = {
+  ampm: true,
+  invalidDateMessage: 'Invalid Time Format',
+} as BaseTimePickerProps;
+
+export const datePickerDefaultProps = {
+  minDate: new Date('1900-01-01'),
+  maxDate: new Date('2200-01-01'),
+  invalidDateMessage: 'Invalid Date Format',
+  minDateMessage: 'Date should not be before minimal date',
+  maxDateMessage: 'Date should not be after maximal date',
+  allowKeyboardControl: true,
+} as BaseDatePickerProps;
+
+export const dateTimePickerDefaultProps = {
+  ...timePickerDefaultProps,
+  ...datePickerDefaultProps,
+  showTabs: true,
+} as BaseTimePickerProps & BaseDatePickerProps;

package/src/index.ts

@@ -0,0 +1,48 @@
+import { MaterialUiPickersDate } from './typings/date';
+import { KeyboardTimePickerProps } from './TimePicker';
+import { DatePickerProps, KeyboardDatePickerProps } from './DatePicker';
+import { DateTimePickerProps, KeyboardDateTimePickerProps } from './DateTimePicker';
+
+export type TimePickerProps = KeyboardTimePickerProps;
+
+export type KeyboardTimePickerProps = KeyboardTimePickerProps;
+
+export type DatePickerProps = DatePickerProps;
+
+export type KeyboardDatePickerProps = KeyboardDatePickerProps;
+
+export type DateTimePickerProps = DateTimePickerProps;
+
+export type KeyboardDateTimePickerProps = KeyboardDateTimePickerProps;
+
+export type MaterialUiPickersDate = MaterialUiPickersDate;
+
+export { DatePicker, KeyboardDatePicker } from './DatePicker';
+
+export { TimePicker, KeyboardTimePicker } from './TimePicker';
+
+export { DateTimePicker, KeyboardDateTimePicker } from './DateTimePicker';
+
+export { default as Calendar } from './views/Calendar/Calendar';
+
+export { default as Day } from './views/Calendar/Day';
+
+export { default as TimePickerView } from './views/Clock/ClockView';
+
+export { default as Clock } from './views/Clock/Clock';
+
+export { Picker } from './Picker/Picker';
+
+export { makePurePicker } from './Picker/WrappedPurePicker';
+
+export { makeKeyboardPicker } from './Picker/WrappedKeyboardPicker';
+
+export { validate } from './_helpers/text-field-helper';
+
+export { useUtils } from './_shared/hooks/useUtils';
+
+export { usePickerState } from './_shared/hooks/usePickerState';
+
+export { useKeyboardPickerState } from './_shared/hooks/useKeyboardPickerState';
+
+export { default as MuiPickersUtilsProvider, MuiPickersContext } from './MuiPickersUtilsProvider';

package/src/typings/BasePicker.tsx

@@ -0,0 +1,60 @@
+import { MaterialUiPickersDate } from './date';
+import { WrapperVariant } from '../wrappers/Wrapper';
+import { ParsableDate } from '../constants/prop-types';
+import { ToolbarComponentProps } from '../Picker/Picker';
+
+export interface BasePickerProps {
+  /** Picker value */
+  value: ParsableDate;
+  /** onChange callback */
+  onChange: (date: MaterialUiPickersDate) => void;
+  /**
+   * Auto accept date on selection
+   * @default false
+   */
+  autoOk?: boolean;
+  /** Format string */
+  format?: string;
+  /** Disable datepicker and text field */
+  disabled?: boolean;
+  /** Dynamic formatter of text field value */
+  labelFunc?: (date: MaterialUiPickersDate, invalidLabel: string) => string;
+  /** Date that will be initially highlighted if null was passed */
+  initialFocusedDate?: ParsableDate;
+  /**
+   * Message displaying in text field if date is invalid (doesn't work in keyboard mode)
+   * @default 'unknown'
+   */
+  invalidLabel?: string;
+  /**
+   * Message displaying in text field, if null passed (doesn't work in keyboard mode)
+   * @default ' '
+   */
+  emptyLabel?: string;
+  /** Callback fired when date is accepted */
+  onAccept?: (date: MaterialUiPickersDate) => void;
+  /** Callback fired when new error should be displayed */
+  onError?: (error: React.ReactNode, value: MaterialUiPickersDate | ParsableDate) => void;
+  /** On open callback */
+  onOpen?: () => void;
+  /** On close callback */
+  onClose?: () => void;
+  /** Controlled picker open state */
+  open?: boolean;
+  /**
+   * Hide toolbar and show only date/time views
+   * @default false
+   */
+  disableToolbar?: boolean;
+  /**
+   * Force rendering in particular orientation
+   * @default "portrait"
+   */
+  orientation?: 'portrait' | 'landscape';
+  /* Component that will replace default toolbar renderer */
+  ToolbarComponent?: React.ComponentType<ToolbarComponentProps>;
+  variant?: WrapperVariant;
+  showShiftButtons?: boolean;
+  setShiftFunction?: (days: number) => Date;
+  shiftButtonValues?: Object;
+}

package/src/typings/date.ts

@@ -0,0 +1,3 @@
+import { DateType } from '@date-io/type';
+
+export type MaterialUiPickersDate = DateType | null;

package/src/typings/extendMui.ts

@@ -0,0 +1,10 @@
+import { Omit } from '@material-ui/core';
+/**
+ * All standard components exposed by `material-ui` are `StyledComponents` with
+ * certain `classes`, on which one can also set a top-level `className` and inline
+ * `style`.
+ */
+export type ExtendMui<C, Removals extends keyof C = never> = Omit<
+  C,
+  'classes' | 'theme' | Removals
+>;

package/src/typings/overrides.ts

@@ -0,0 +1,44 @@
+import { styles as ClockStyles } from '../views/Clock/Clock';
+import { useStyles as DayStyles } from '../views/Calendar/Day';
+import { styles as ModalDialogStyles } from '../_shared/ModalDialog';
+import { styles as CalendarStyles } from '../views/Calendar/Calendar';
+import { useStyles as MuiPickersYearStyles } from '../views/Year/Year';
+import { styles as ToolbarButtonStyles } from '../_shared/ToolbarButton';
+import { useStyles as MuiPickersMonthStyles } from '../views/Month/Month';
+import { styles as ClockPointerStyles } from '../views/Clock/ClockPointer';
+import { useStyles as PickerToolbarStyles } from '../_shared/PickerToolbar';
+import { useStyles as ClockNumberStyles } from '../views/Clock/ClockNumber';
+import { useStyles as DTTabsStyles } from '../DateTimePicker/DateTimePickerTabs';
+import { useStyles as DatePickerRootStyles } from '../DatePicker/DatePickerToolbar';
+import { useStyles as MuiPickersYearSelectionStyles } from '../views/Year/YearView';
+import { StyleRules, StyleRulesCallback } from '@material-ui/core/styles/withStyles';
+import { useStyles as CalendarHeaderStyles } from '../views/Calendar/CalendarHeader';
+import { useStyles as DTHeaderStyles } from '../DateTimePicker/DateTimePickerToolbar';
+import { useStyles as TimePickerToolbarStyles } from '../TimePicker/TimePickerToolbar';
+import { useStyles as SlideTransitionStyles } from '../views/Calendar/SlideTransition';
+import { useStyles as MuiPickersMonthSelectionStyles } from '../views/Month/MonthView';
+import { useStyles as MuiPickerDTToolbarStyles } from '../DateTimePicker/DateTimePickerToolbar';
+
+type Classes<T> = Partial<StyleRules<any>>;
+
+export interface MuiPickersOverrides {
+  MuiPickersDay?: Classes<typeof DayStyles>;
+  MuiPickerDTHeader?: Classes<typeof DTHeaderStyles>;
+  MuiPickerDTTabs?: Classes<typeof DTTabsStyles>;
+  MuiPickersCalendar?: Classes<typeof CalendarStyles>;
+  MuiPickersCalendarHeader?: Classes<typeof CalendarHeaderStyles>;
+  MuiPickersSlideTransition?: Classes<typeof SlideTransitionStyles>;
+  MuiPickersYearSelectionStyles?: Classes<typeof MuiPickersYearSelectionStyles>;
+  MuiPickersYear?: Classes<typeof MuiPickersYearStyles>;
+  MuiPickersMonthSelection?: Classes<typeof MuiPickersMonthSelectionStyles>;
+  MuiPickersMonth?: Classes<typeof MuiPickersMonthStyles>;
+  MuiPickersTimePickerToolbar?: Classes<typeof TimePickerToolbarStyles>;
+  MuiPickersClock?: Classes<typeof ClockStyles>;
+  MuiPickersClockNumber?: Classes<typeof ClockNumberStyles>;
+  MuiPickersClockPointer?: Classes<typeof ClockPointerStyles>;
+  MuiPickersModal?: Classes<typeof ModalDialogStyles>;
+  MuiPickersToolbar?: Classes<typeof PickerToolbarStyles>;
+  MuiPickersToolbarButton?: Classes<typeof ToolbarButtonStyles>;
+  MuiPickersDatePickerRoot?: Classes<typeof DatePickerRootStyles>;
+  MuiPickerDTToolbar?: Classes<typeof MuiPickerDTToolbarStyles>;
+}

package/src/views/Calendar/Calendar.tsx

@@ -0,0 +1,361 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import Day from './Day';
+import DayWrapper from './DayWrapper';
+import CalendarHeader from './CalendarHeader';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import SlideTransition, { SlideDirection } from './SlideTransition';
+import { Theme } from '@material-ui/core';
+import { MaterialUiPickersDate } from '../../typings/date';
+import { runKeyHandler } from '../../_shared/hooks/useKeyDown';
+import { IconButtonProps } from '@material-ui/core/IconButton';
+import { withStyles, WithStyles } from '@material-ui/core/styles';
+import { findClosestEnabledDate } from '../../_helpers/date-utils';
+import { withUtils, WithUtilsProps } from '../../_shared/WithUtils';
+
+export interface OutterCalendarProps {
+  /** Left arrow icon */
+  leftArrowIcon?: React.ReactNode;
+  /** Right arrow icon */
+  rightArrowIcon?: React.ReactNode;
+  /** Custom renderer for day */
+  renderDay?: (
+    day: MaterialUiPickersDate,
+    selectedDate: MaterialUiPickersDate,
+    dayInCurrentMonth: boolean,
+    dayComponent: JSX.Element
+  ) => JSX.Element;
+  /**
+   * Enables keyboard listener for moving between days in calendar
+   * @default true
+   */
+  allowKeyboardControl?: boolean;
+  /**
+   * Props to pass to left arrow button
+   * @type {Partial<IconButtonProps>}
+   */
+  leftArrowButtonProps?: Partial<IconButtonProps>;
+  /**
+   * Props to pass to right arrow button
+   * @type {Partial<IconButtonProps>}
+   */
+  rightArrowButtonProps?: Partial<IconButtonProps>;
+  /** Disable specific date */
+  shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;
+  /** Callback firing on month change. Return promise to render spinner till it will not be resolved */
+  onMonthChange?: (date: MaterialUiPickersDate) => void | Promise<void>;
+  /** Custom loading indicator  */
+  loadingIndicator?: JSX.Element;
+}
+
+export interface CalendarProps
+  extends OutterCalendarProps,
+    WithUtilsProps,
+    WithStyles<typeof styles, true> {
+  /** Calendar Date */
+  date: MaterialUiPickersDate;
+  /** Calendar onChange */
+  onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
+  /** Min date */
+  minDate?: MaterialUiPickersDate;
+  /** Max date */
+  maxDate?: MaterialUiPickersDate;
+  /** Disable past dates */
+  disablePast?: boolean;
+  /** Disable future dates */
+  disableFuture?: boolean;
+}
+
+export interface CalendarState {
+  slideDirection: SlideDirection;
+  currentMonth: MaterialUiPickersDate;
+  lastDate?: MaterialUiPickersDate;
+  loadingQueue: number;
+}
+
+const KeyDownListener = ({ onKeyDown }: { onKeyDown: (e: KeyboardEvent) => void }) => {
+  React.useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [onKeyDown]);
+
+  return null;
+};
+
+export class Calendar extends React.Component<CalendarProps, CalendarState> {
+  static propTypes: any = {
+    renderDay: PropTypes.func,
+    shouldDisableDate: PropTypes.func,
+    allowKeyboardControl: PropTypes.bool,
+  };
+
+  static defaultProps: Partial<CalendarProps> = {
+    minDate: new Date('1900-01-01'),
+    maxDate: new Date('2200-01-01'),
+    disablePast: false,
+    disableFuture: false,
+    allowKeyboardControl: true,
+  };
+
+  static getDerivedStateFromProps(nextProps: CalendarProps, state: CalendarState) {
+    const { utils, date: nextDate } = nextProps;
+
+    if (!utils.isEqual(nextDate, state.lastDate)) {
+      const nextMonth = utils.getMonth(nextDate);
+      const lastDate = state.lastDate || nextDate;
+      const lastMonth = utils.getMonth(lastDate);
+
+      return {
+        lastDate: nextDate,
+        currentMonth: nextProps.utils.startOfMonth(nextDate),
+        // prettier-ignore
+        slideDirection: nextMonth === lastMonth
+          ? state.slideDirection
+          : utils.isAfterDay(nextDate, lastDate)
+            ? 'left'
+            : 'right'
+      };
+    }
+
+    return null;
+  }
+
+  state: CalendarState = {
+    slideDirection: 'left',
+    currentMonth: this.props.utils.startOfMonth(this.props.date),
+    loadingQueue: 0,
+  };
+
+  componentDidMount() {
+    const { date, minDate, maxDate, utils, disablePast, disableFuture } = this.props;
+
+    if (this.shouldDisableDate(date)) {
+      const closestEnabledDate = findClosestEnabledDate({
+        date,
+        utils,
+        minDate: utils.date(minDate),
+        maxDate: utils.date(maxDate),
+        disablePast: Boolean(disablePast),
+        disableFuture: Boolean(disableFuture),
+        shouldDisableDate: this.shouldDisableDate,
+      });
+
+      this.handleDaySelect(closestEnabledDate, false);
+    }
+  }
+
+  private pushToLoadingQueue = () => {
+    const loadingQueue = this.state.loadingQueue + 1;
+    this.setState({ loadingQueue });
+  };
+
+  private popFromLoadingQueue = () => {
+    let loadingQueue = this.state.loadingQueue;
+    loadingQueue = loadingQueue <= 0 ? 0 : loadingQueue - 1;
+    this.setState({ loadingQueue });
+  };
+
+  handleChangeMonth = (newMonth: MaterialUiPickersDate, slideDirection: SlideDirection) => {
+    this.setState({ currentMonth: newMonth, slideDirection });
+
+    if (this.props.onMonthChange) {
+      const returnVal = this.props.onMonthChange(newMonth);
+      if (returnVal) {
+        this.pushToLoadingQueue();
+        returnVal.then(() => {
+          this.popFromLoadingQueue();
+        });
+      }
+    }
+  };
+
+  validateMinMaxDate = (day: MaterialUiPickersDate) => {
+    const { minDate, maxDate, utils, disableFuture, disablePast } = this.props;
+    const now = utils.date();
+    const moment = utils.moment;
+
+    return Boolean(
+      (disableFuture && utils.isAfterDay(day, now)) ||
+        (disablePast && moment(day).isBefore(now, 'second')) ||
+        (minDate && utils.isBeforeDay(day, utils.date(minDate))) ||
+        (maxDate && utils.isAfterDay(day, utils.date(maxDate)))
+    );
+  };
+
+  shouldDisablePrevMonth = () => {
+    const { utils, disablePast, minDate } = this.props;
+
+    const now = utils.date();
+    const firstEnabledMonth = utils.startOfMonth(
+      disablePast && utils.isAfter(now, utils.date(minDate)) ? now : utils.date(minDate)
+    );
+
+    return !utils.isBefore(firstEnabledMonth, this.state.currentMonth);
+  };
+
+  shouldDisableNextMonth = () => {
+    const { utils, disableFuture, maxDate } = this.props;
+
+    const now = utils.date();
+    const lastEnabledMonth = utils.startOfMonth(
+      disableFuture && utils.isBefore(now, utils.date(maxDate)) ? now : utils.date(maxDate)
+    );
+
+    return !utils.isAfter(lastEnabledMonth, this.state.currentMonth);
+  };
+
+  shouldDisableDate = (day: MaterialUiPickersDate) => {
+    const { shouldDisableDate } = this.props;
+
+    return this.validateMinMaxDate(day) || Boolean(shouldDisableDate && shouldDisableDate(day));
+  };
+
+  handleDaySelect = (day: MaterialUiPickersDate, isFinish = true) => {
+    const { date, utils } = this.props;
+
+    this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);
+  };
+
+  moveToDay = (day: MaterialUiPickersDate) => {
+    const { utils } = this.props;
+
+    if (day && !this.shouldDisableDate(day)) {
+      if (utils.getMonth(day) !== utils.getMonth(this.state.currentMonth)) {
+        this.handleChangeMonth(utils.startOfMonth(day), 'left');
+      }
+
+      this.handleDaySelect(day, false);
+    }
+  };
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    const { theme, date, utils } = this.props;
+
+    runKeyHandler(event, {
+      ArrowUp: () => this.moveToDay(utils.addDays(date, -7)),
+      ArrowDown: () => this.moveToDay(utils.addDays(date, 7)),
+      ArrowLeft: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1)),
+      ArrowRight: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1)),
+    });
+  };
+
+  private renderWeeks = () => {
+    const { utils, classes } = this.props;
+    const weeks = utils.getWeekArray(this.state.currentMonth);
+
+    return weeks.map(week => (
+      <div key={`week-${week[0]!.toString()}`} className={classes.week}>
+        {this.renderDays(week)}
+      </div>
+    ));
+  };
+
+  private renderDays = (week: MaterialUiPickersDate[]) => {
+    const { date, renderDay, utils } = this.props;
+
+    const now = utils.date();
+    const selectedDate = utils.startOfDay(date);
+    const currentMonthNumber = utils.getMonth(this.state.currentMonth);
+
+    return week.map(day => {
+      const disabled = this.shouldDisableDate(day);
+      const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
+
+      let dayComponent = (
+        <Day
+          disabled={disabled}
+          current={utils.isSameDay(day, now)}
+          hidden={!isDayInCurrentMonth}
+          selected={utils.isSameDay(selectedDate, day)}
+        >
+          {utils.getDayText(day)}
+        </Day>
+      );
+
+      if (renderDay) {
+        dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);
+      }
+
+      return (
+        <DayWrapper
+          value={day}
+          key={day!.toString()}
+          disabled={disabled}
+          dayInCurrentMonth={isDayInCurrentMonth}
+          onSelect={this.handleDaySelect}
+        >
+          {dayComponent}
+        </DayWrapper>
+      );
+    });
+  };
+
+  render() {
+    const { currentMonth, slideDirection } = this.state;
+    const {
+      classes,
+      allowKeyboardControl,
+      leftArrowButtonProps,
+      leftArrowIcon,
+      rightArrowButtonProps,
+      rightArrowIcon,
+      loadingIndicator,
+    } = this.props;
+    const loadingElement = loadingIndicator ? loadingIndicator : <CircularProgress />;
+
+    return (
+      <React.Fragment>
+        {allowKeyboardControl && <KeyDownListener onKeyDown={this.handleKeyDown} />}
+
+        <CalendarHeader
+          currentMonth={currentMonth!}
+          slideDirection={slideDirection}
+          onMonthChange={this.handleChangeMonth}
+          leftArrowIcon={leftArrowIcon}
+          leftArrowButtonProps={leftArrowButtonProps}
+          rightArrowIcon={rightArrowIcon}
+          rightArrowButtonProps={rightArrowButtonProps}
+          disablePrevMonth={this.shouldDisablePrevMonth()}
+          disableNextMonth={this.shouldDisableNextMonth()}
+        />
+
+        <SlideTransition
+          slideDirection={slideDirection}
+          transKey={currentMonth!.toString()}
+          className={classes.transitionContainer}
+        >
+          <>
+            {(this.state.loadingQueue > 0 && (
+              <div className={classes.progressContainer}>{loadingElement}</div>
+            )) || <div>{this.renderWeeks()}</div>}
+          </>
+        </SlideTransition>
+      </React.Fragment>
+    );
+  }
+}
+
+export const styles = (theme: Theme) => ({
+  transitionContainer: {
+    minHeight: 36 * 6,
+    marginTop: theme.spacing(1.5),
+  },
+  progressContainer: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  week: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+});
+
+export default withStyles(styles, {
+  name: 'MuiPickersCalendar',
+  withTheme: true,
+})(withUtils()(Calendar));