@docsvision/material-ui-pickers 3.2.0-beta.3 → 3.2.0-beta.30

package/src/views/Calendar/Calendar.tsx

@@ -1,360 +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('2100-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();
-
-    return Boolean(
-      (disableFuture && utils.isAfterDay(day, now)) ||
-        (disablePast && utils.isBeforeDay(day, now)) ||
-        (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;

package/src/views/Calendar/Day.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import clsx from 'clsx';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-
-export const useStyles = makeStyles(
-  theme => ({
-    day: {
-      width: 36,
-      height: 36,
-      fontSize: theme.typography.caption.fontSize,
-      margin: '0 2px',
-      color: theme.palette.text.primary,
-      fontWeight: theme.typography.fontWeightMedium,
-      padding: 0,
-    },
-    hidden: {
-      opacity: 0,
-      pointerEvents: 'none',
-    },
-    current: {
-      color: theme.palette.primary.main,
-      fontWeight: 600,
-    },
-    daySelected: {
-      color: theme.palette.primary.contrastText,
-      backgroundColor: theme.palette.primary.main,
-      fontWeight: theme.typography.fontWeightMedium,
-      '&:hover': {
-        backgroundColor: theme.palette.primary.main,
-      },
-    },
-    dayDisabled: {
-      pointerEvents: 'none',
-      color: theme.palette.text.hint,
-    },
-  }),
-  { name: 'MuiPickersDay' }
-);
-
-export interface DayProps {
-  /** Day text */
-  children: React.ReactNode;
-  /** Is today */
-  current?: boolean;
-  /** Disabled? */
-  disabled?: boolean;
-  /** Hidden? */
-  hidden?: boolean;
-  /** Selected? */
-  selected?: boolean;
-}
-
-export const Day: React.FC<DayProps> = ({
-  children,
-  disabled,
-  hidden,
-  current,
-  selected,
-  ...other
-}) => {
-  const classes = useStyles();
-  const className = clsx(classes.day, {
-    [classes.hidden]: hidden,
-    [classes.current]: current,
-    [classes.daySelected]: selected,
-    [classes.dayDisabled]: disabled,
-  });
-
-  return (
-    <IconButton className={className} tabIndex={hidden || disabled ? -1 : 0} {...other}>
-      <Typography variant="body2" color="inherit">
-        {children}
-      </Typography>
-    </IconButton>
-  );
-};
-
-Day.displayName = 'Day';
-
-Day.propTypes = {
-  current: PropTypes.bool,
-  disabled: PropTypes.bool,
-  hidden: PropTypes.bool,
-  selected: PropTypes.bool,
-};
-
-Day.defaultProps = {
-  disabled: false,
-  hidden: false,
-  current: false,
-  selected: false,
-};
-
-export default Day;

package/src/views/Calendar/DayWrapper.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-export interface DayWrapperProps {
-  value: any;
-  children: React.ReactNode;
-  dayInCurrentMonth?: boolean;
-  disabled?: boolean;
-  onSelect: (value: any) => void;
-}
-
-const DayWrapper: React.FC<DayWrapperProps> = ({
-  children,
-  value,
-  disabled,
-  onSelect,
-  dayInCurrentMonth,
-  ...other
-}) => {
-  const handleClick = React.useCallback(() => onSelect(value), [onSelect, value]);
-
-  return (
-    <div
-      role="presentation"
-      onClick={dayInCurrentMonth && !disabled ? handleClick : undefined}
-      onKeyPress={dayInCurrentMonth && !disabled ? handleClick : undefined}
-      {...other}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default DayWrapper;