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

package/src/_shared/icons/ArrowLeftIcon.tsx

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

package/src/constants/dimensions.ts

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

package/src/constants/prop-types.ts

@@ -1,37 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

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

package/src/typings/extendMui.ts

@@ -1,10 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,361 +0,0 @@
-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));