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

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

package/src/views/Calendar/CalendarHeader.tsx

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