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

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;

package/src/views/Calendar/SlideTransition.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-
-export type SlideDirection = 'right' | 'left';
-interface SlideTransitionProps {
-  transKey: React.Key;
-  className?: string;
-  slideDirection: SlideDirection;
-  children: React.ReactChild;
-}
-
-const animationDuration = 350;
-export const useStyles = makeStyles(
-  theme => {
-    const slideTransition = theme.transitions.create('transform', {
-      duration: animationDuration,
-      easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',
-    });
-
-    return {
-      transitionContainer: {
-        display: 'block',
-        position: 'relative',
-        '& > *': {
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          left: 0,
-        },
-      },
-      'slideEnter-left': {
-        willChange: 'transform',
-        transform: 'translate(100%)',
-      },
-      'slideEnter-right': {
-        willChange: 'transform',
-        transform: 'translate(-100%)',
-      },
-      slideEnterActive: {
-        transform: 'translate(0%)',
-        transition: slideTransition,
-      },
-      slideExit: {
-        transform: 'translate(0%)',
-      },
-      'slideExitActiveLeft-left': {
-        willChange: 'transform',
-        transform: 'translate(-200%)',
-        transition: slideTransition,
-      },
-      'slideExitActiveLeft-right': {
-        willChange: 'transform',
-        transform: 'translate(200%)',
-        transition: slideTransition,
-      },
-    };
-  },
-  { name: 'MuiPickersSlideTransition' }
-);
-
-const SlideTransition: React.SFC<SlideTransitionProps> = ({
-  children,
-  transKey,
-  slideDirection,
-  className = null,
-}) => {
-  const classes = useStyles();
-  const transitionClasses = {
-    exit: classes.slideExit,
-    enterActive: classes.slideEnterActive,
-    // @ts-ignore
-    enter: classes['slideEnter-' + slideDirection],
-    // @ts-ignore
-    exitActive: classes['slideExitActiveLeft-' + slideDirection],
-  };
-
-  return (
-    <TransitionGroup
-      className={clsx(classes.transitionContainer, className)}
-      childFactory={element =>
-        React.cloneElement(element, {
-          classNames: transitionClasses,
-        })
-      }
-    >
-      <CSSTransition
-        mountOnEnter
-        unmountOnExit
-        key={transKey + slideDirection}
-        timeout={animationDuration}
-        classNames={transitionClasses}
-        children={children}
-      />
-    </TransitionGroup>
-  );
-};
-
-export default SlideTransition;

package/src/views/Clock/Clock.tsx

@@ -1,172 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import ClockPointer from './ClockPointer';
-import ClockType, { ClockViewType } from '../../constants/ClockType';
-import { getHours, getMinutes } from '../../_helpers/time-utils';
-import { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core/styles';
-
-export interface ClockProps extends WithStyles<typeof styles> {
-  type: ClockViewType;
-  value: number;
-  onChange: (value: number, isFinish?: boolean) => void;
-  ampm?: boolean;
-  minutesStep?: number;
-  children: React.ReactElement<any>[];
-}
-
-export class Clock extends React.Component<ClockProps> {
-  public static propTypes: any = {
-    type: PropTypes.oneOf(Object.keys(ClockType).map(key => ClockType[key as any])).isRequired,
-    value: PropTypes.number.isRequired,
-    onChange: PropTypes.func.isRequired,
-    children: PropTypes.arrayOf(PropTypes.node).isRequired,
-    ampm: PropTypes.bool,
-    minutesStep: PropTypes.number,
-    innerRef: PropTypes.any,
-  };
-
-  public static defaultProps = {
-    ampm: false,
-    minutesStep: 1,
-  };
-
-  public isMoving = false;
-
-  public setTime(e: any, isFinish = false) {
-    let { offsetX, offsetY } = e;
-
-    if (typeof offsetX === 'undefined') {
-      const rect = e.target.getBoundingClientRect();
-
-      offsetX = e.changedTouches[0].clientX - rect.left;
-      offsetY = e.changedTouches[0].clientY - rect.top;
-    }
-
-    const value =
-      this.props.type === ClockType.SECONDS || this.props.type === ClockType.MINUTES
-        ? getMinutes(offsetX, offsetY, this.props.minutesStep)
-        : getHours(offsetX, offsetY, Boolean(this.props.ampm));
-
-    this.props.onChange(value, isFinish);
-  }
-
-  public handleTouchMove = (e: React.TouchEvent) => {
-    this.isMoving = true;
-    this.setTime(e);
-  };
-
-  public handleTouchEnd = (e: React.TouchEvent) => {
-    if (this.isMoving) {
-      this.setTime(e, true);
-      this.isMoving = false;
-    }
-  };
-
-  public handleMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari
-    const isButtonPressed =
-      typeof e.buttons === 'undefined' ? e.nativeEvent.which === 1 : e.buttons === 1;
-
-    if (isButtonPressed) {
-      this.setTime(e.nativeEvent, false);
-    }
-  };
-
-  public handleMouseUp = (e: React.MouseEvent) => {
-    if (this.isMoving) {
-      this.isMoving = false;
-    }
-
-    this.setTime(e.nativeEvent, true);
-  };
-
-  public hasSelected = () => {
-    const { type, value } = this.props;
-
-    if (type === ClockType.HOURS) {
-      return true;
-    }
-
-    return value % 5 === 0;
-  };
-
-  public render() {
-    const { classes, value, children, type, ampm } = this.props;
-
-    const isPointerInner = !ampm && type === ClockType.HOURS && (value < 1 || value > 12);
-
-    return (
-      <div className={classes.container}>
-        <div className={classes.clock}>
-          <div
-            role="menu"
-            tabIndex={-1}
-            className={classes.squareMask}
-            onTouchMove={this.handleTouchMove}
-            onTouchEnd={this.handleTouchEnd}
-            onMouseUp={this.handleMouseUp}
-            onMouseMove={this.handleMove}
-          />
-
-          <div className={classes.pin} />
-
-          <ClockPointer
-            type={type}
-            value={value}
-            isInner={isPointerInner}
-            hasSelected={this.hasSelected()}
-          />
-
-          {children}
-        </div>
-      </div>
-    );
-  }
-}
-
-export const styles = (theme: Theme) =>
-  createStyles({
-    container: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'flex-end',
-      margin: `${theme.spacing(2)}px 0 ${theme.spacing(1)}px`,
-    },
-    clock: {
-      backgroundColor: 'rgba(0,0,0,.07)',
-      borderRadius: '50%',
-      height: 260,
-      width: 260,
-      position: 'relative',
-      pointerEvents: 'none',
-      zIndex: 1,
-    },
-    squareMask: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      pointerEvents: 'auto',
-      outline: 'none',
-      touchActions: 'none',
-      userSelect: 'none',
-      '&:active': {
-        cursor: 'move',
-      },
-    },
-    pin: {
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-      backgroundColor: theme.palette.primary.main,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-  });
-
-export default withStyles(styles, {
-  name: 'MuiPickersClock',
-})(Clock as React.ComponentType<ClockProps>);

package/src/views/Clock/ClockNumber.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-
-const positions: Record<number, [number, number]> = {
-  0: [0, 40],
-  1: [55, 19.6],
-  2: [94.4, 59.5],
-  3: [109, 114],
-  4: [94.4, 168.5],
-  5: [54.5, 208.4],
-  6: [0, 223],
-  7: [-54.5, 208.4],
-  8: [-94.4, 168.5],
-  9: [-109, 114],
-  10: [-94.4, 59.5],
-  11: [-54.5, 19.6],
-  12: [0, 5],
-  13: [36.9, 49.9],
-  14: [64, 77],
-  15: [74, 114],
-  16: [64, 151],
-  17: [37, 178],
-  18: [0, 188],
-  19: [-37, 178],
-  20: [-64, 151],
-  21: [-74, 114],
-  22: [-64, 77],
-  23: [-37, 50],
-};
-
-export interface ClockNumberProps {
-  index: number;
-  label: string;
-  selected: boolean;
-  isInner?: boolean;
-}
-
-export const useStyles = makeStyles(
-  theme => {
-    const size = theme.spacing(4);
-
-    return {
-      clockNumber: {
-        width: size,
-        height: 32,
-        userSelect: 'none',
-        position: 'absolute',
-        left: `calc(50% - ${size / 2}px)`,
-        display: 'inline-flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: '50%',
-        color:
-          theme.palette.type === 'light' ? theme.palette.text.primary : theme.palette.text.hint,
-      },
-      clockNumberSelected: {
-        color: theme.palette.primary.contrastText,
-      },
-    };
-  },
-  { name: 'MuiPickersClockNumber' }
-);
-
-export const ClockNumber: React.FC<ClockNumberProps> = ({ selected, label, index, isInner }) => {
-  const classes = useStyles();
-  const className = clsx(classes.clockNumber, {
-    [classes.clockNumberSelected]: selected,
-  });
-
-  const transformStyle = React.useMemo(() => {
-    const position = positions[index];
-
-    return {
-      transform: `translate(${position[0]}px, ${position[1]}px`,
-    };
-  }, [index]);
-
-  return (
-    <Typography
-      component="span"
-      className={className}
-      variant={isInner ? 'body2' : 'body1'}
-      style={transformStyle}
-      children={label}
-    />
-  );
-};
-
-export default ClockNumber;

package/src/views/Clock/ClockNumbers.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import ClockNumber from './ClockNumber';
-import { IUtils } from '@date-io/core/IUtils';
-import { MaterialUiPickersDate } from '../../typings/date';
-
-export const getHourNumbers = ({
-  ampm,
-  utils,
-  date,
-}: {
-  ampm: boolean;
-  utils: IUtils<MaterialUiPickersDate>;
-  date: MaterialUiPickersDate;
-}) => {
-  const currentHours = utils.getHours(date);
-
-  const hourNumbers: JSX.Element[] = [];
-  const startHour = ampm ? 1 : 0;
-  const endHour = ampm ? 12 : 23;
-
-  const isSelected = (hour: number) => {
-    if (ampm) {
-      if (hour === 12) {
-        return currentHours === 12 || currentHours === 0;
-      }
-
-      return currentHours === hour || currentHours - 12 === hour;
-    }
-
-    return currentHours === hour;
-  };
-
-  for (let hour = startHour; hour <= endHour; hour += 1) {
-    let label = hour.toString();
-
-    if (hour === 0) {
-      label = '00';
-    }
-
-    const props = {
-      index: hour,
-      label: utils.formatNumber(label),
-      selected: isSelected(hour),
-      isInner: !ampm && (hour === 0 || hour > 12),
-    };
-
-    hourNumbers.push(<ClockNumber key={hour} {...props} />);
-  }
-
-  return hourNumbers;
-};
-
-export const getMinutesNumbers = ({
-  value,
-  utils,
-}: {
-  value: number;
-  utils: IUtils<MaterialUiPickersDate>;
-}) => {
-  const f = utils.formatNumber;
-
-  return [
-    <ClockNumber label={f('00')} selected={value === 0} index={12} key={12} />,
-    <ClockNumber label={f('05')} selected={value === 5} index={1} key={1} />,
-    <ClockNumber label={f('10')} selected={value === 10} index={2} key={2} />,
-    <ClockNumber label={f('15')} selected={value === 15} index={3} key={3} />,
-    <ClockNumber label={f('20')} selected={value === 20} index={4} key={4} />,
-    <ClockNumber label={f('25')} selected={value === 25} index={5} key={5} />,
-    <ClockNumber label={f('30')} selected={value === 30} index={6} key={6} />,
-    <ClockNumber label={f('35')} selected={value === 35} index={7} key={7} />,
-    <ClockNumber label={f('40')} selected={value === 40} index={8} key={8} />,
-    <ClockNumber label={f('45')} selected={value === 45} index={9} key={9} />,
-    <ClockNumber label={f('50')} selected={value === 50} index={10} key={10} />,
-    <ClockNumber label={f('55')} selected={value === 55} index={11} key={11} />,
-  ];
-};