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

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));

package/src/views/Calendar/CalendarHeader.tsx

@@ -1,141 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import SlideTransition, { SlideDirection } from './SlideTransition';
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
-import { DateType } from '@date-io/type';
-import { useUtils } from '../../_shared/hooks/useUtils';
-import { MaterialUiPickersDate } from '../../typings/date';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import { ArrowLeftIcon } from '../../_shared/icons/ArrowLeftIcon';
-import { ArrowRightIcon } from '../../_shared/icons/ArrowRightIcon';
-
-export interface CalendarHeaderProps {
-  currentMonth: DateType;
-  leftArrowIcon?: React.ReactNode;
-  rightArrowIcon?: React.ReactNode;
-  leftArrowButtonProps?: Partial<IconButtonProps>;
-  rightArrowButtonProps?: Partial<IconButtonProps>;
-  disablePrevMonth?: boolean;
-  disableNextMonth?: boolean;
-  slideDirection: SlideDirection;
-  onMonthChange: (date: MaterialUiPickersDate, direction: SlideDirection) => void | Promise<void>;
-}
-
-export const useStyles = makeStyles(
-  theme => ({
-    switchHeader: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginTop: theme.spacing(0.5),
-      marginBottom: theme.spacing(1),
-    },
-    transitionContainer: {
-      width: '100%',
-      overflow: 'hidden',
-      height: 23,
-    },
-    iconButton: {
-      zIndex: 1,
-      backgroundColor: theme.palette.background.paper,
-    },
-    daysHeader: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      maxHeight: 16,
-    },
-    dayLabel: {
-      width: 36,
-      margin: '0 2px',
-      textAlign: 'center',
-      color: theme.palette.text.hint,
-    },
-  }),
-  { name: 'MuiPickersCalendarHeader' }
-);
-
-export const CalendarHeader: React.SFC<CalendarHeaderProps> = ({
-  currentMonth,
-  onMonthChange,
-  leftArrowIcon,
-  rightArrowIcon,
-  leftArrowButtonProps,
-  rightArrowButtonProps,
-  disablePrevMonth,
-  disableNextMonth,
-  slideDirection,
-}) => {
-  const utils = useUtils();
-  const classes = useStyles();
-  const theme = useTheme();
-  const rtl = theme.direction === 'rtl';
-
-  const selectNextMonth = () => onMonthChange(utils.getNextMonth(currentMonth), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(currentMonth), 'right');
-
-  return (
-    <div>
-      <div className={classes.switchHeader}>
-        <IconButton
-          {...leftArrowButtonProps}
-          disabled={disablePrevMonth}
-          onClick={selectPreviousMonth}
-          className={classes.iconButton}
-        >
-          {rtl ? rightArrowIcon : leftArrowIcon}
-        </IconButton>
-
-        <SlideTransition
-          slideDirection={slideDirection}
-          transKey={currentMonth.toString()}
-          className={classes.transitionContainer}
-        >
-          <Typography align="center" variant="body1">
-            {utils.getCalendarHeaderText(currentMonth)}
-          </Typography>
-        </SlideTransition>
-
-        <IconButton
-          {...rightArrowButtonProps}
-          disabled={disableNextMonth}
-          onClick={selectNextMonth}
-          className={classes.iconButton}
-        >
-          {rtl ? leftArrowIcon : rightArrowIcon}
-        </IconButton>
-      </div>
-
-      <div className={classes.daysHeader}>
-        {utils.getWeekdays().map((day, index) => (
-          <Typography
-            key={index} // eslint-disable-line react/no-array-index-key
-            variant="caption"
-            className={classes.dayLabel}
-          >
-            {day}
-          </Typography>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-CalendarHeader.displayName = 'CalendarHeader';
-
-CalendarHeader.propTypes = {
-  leftArrowIcon: PropTypes.node,
-  rightArrowIcon: PropTypes.node,
-  disablePrevMonth: PropTypes.bool,
-  disableNextMonth: PropTypes.bool,
-};
-
-CalendarHeader.defaultProps = {
-  leftArrowIcon: <ArrowLeftIcon />,
-  rightArrowIcon: <ArrowRightIcon />,
-  disablePrevMonth: false,
-  disableNextMonth: false,
-};
-
-export default CalendarHeader;