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

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} />,
-  ];
-};

package/src/views/Clock/ClockPointer.tsx

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import ClockType, { ClockViewType } from '../../constants/ClockType';
-import { Theme } from '@material-ui/core';
-import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
-
-export interface ClockPointerProps extends WithStyles<typeof styles> {
-  value: number;
-  hasSelected: boolean;
-  isInner: boolean;
-  type: ClockViewType;
-}
-
-export class ClockPointer extends React.Component<ClockPointerProps> {
-  public static getDerivedStateFromProps = (
-    nextProps: ClockPointerProps,
-    state: ClockPointer['state']
-  ) => {
-    if (nextProps.type !== state.previousType) {
-      return {
-        toAnimateTransform: true,
-        previousType: nextProps.type,
-      };
-    }
-
-    return {
-      toAnimateTransform: false,
-      previousType: nextProps.type,
-    };
-  };
-
-  public state = {
-    toAnimateTransform: false,
-    previousType: undefined,
-  };
-
-  public getAngleStyle = () => {
-    const { value, isInner, type } = this.props;
-
-    const max = type === ClockType.HOURS ? 12 : 60;
-    let angle = (360 / max) * value;
-
-    if (type === ClockType.HOURS && value > 12) {
-      angle -= 360; // round up angle to max 360 degrees
-    }
-
-    return {
-      height: isInner ? '26%' : '40%',
-      transform: `rotateZ(${angle}deg)`,
-    };
-  };
-
-  public render() {
-    const { classes, hasSelected } = this.props;
-
-    return (
-      <div
-        style={this.getAngleStyle()}
-        className={clsx(classes.pointer, {
-          [classes.animateTransform]: this.state.toAnimateTransform,
-        })}
-      >
-        <div
-          className={clsx(classes.thumb, {
-            [classes.noPoint]: hasSelected,
-          })}
-        />
-      </div>
-    );
-  }
-}
-
-export const styles = (theme: Theme) =>
-  createStyles({
-    pointer: {
-      width: 2,
-      backgroundColor: theme.palette.primary.main,
-      position: 'absolute',
-      left: 'calc(50% - 1px)',
-      bottom: '50%',
-      transformOrigin: 'center bottom 0px',
-    },
-    animateTransform: {
-      transition: theme.transitions.create(['transform', 'height']),
-    },
-    thumb: {
-      width: 4,
-      height: 4,
-      backgroundColor: theme.palette.primary.contrastText,
-      borderRadius: '100%',
-      position: 'absolute',
-      top: -21,
-      left: -15,
-      border: `14px solid ${theme.palette.primary.main}`,
-      boxSizing: 'content-box',
-    },
-    noPoint: {
-      backgroundColor: theme.palette.primary.main,
-    },
-  });
-
-export default withStyles(styles, {
-  name: 'MuiPickersClockPointer',
-})(ClockPointer as React.ComponentType<ClockPointerProps>);

package/src/views/Clock/ClockView.tsx

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import Clock from './Clock';
-import ClockType, { ClockViewType } from '../../constants/ClockType';
-import { useUtils } from '../../_shared/hooks/useUtils';
-import { MaterialUiPickersDate } from '../../typings/date';
-import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
-import { convertToMeridiem, getMeridiem } from '../../_helpers/time-utils';
-
-export interface TimePickerViewProps {
-  /** TimePicker value */
-  date: MaterialUiPickersDate;
-  /** Clock type */
-  type: ClockViewType;
-  /** 12h/24h clock mode */
-  ampm?: boolean;
-  /** Minutes step */
-  minutesStep?: number;
-  /** On hour change */
-  onHourChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
-  /** On minutes change */
-  onMinutesChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
-  /** On seconds change */
-  onSecondsChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
-}
-
-export const TimePickerView: React.FC<TimePickerViewProps> = ({
-  type,
-  onHourChange,
-  onMinutesChange,
-  onSecondsChange,
-  ampm,
-  date,
-  minutesStep,
-}) => {
-  const utils = useUtils();
-  const viewProps = React.useMemo(() => {
-    switch (type) {
-      case ClockType.HOURS:
-        return {
-          value: utils.getHours(date),
-          children: getHourNumbers({ date, utils, ampm: Boolean(ampm) }),
-          onChange: (value: number, isFinish?: boolean) => {
-            const currentMeridiem = getMeridiem(date, utils);
-            const updatedTimeWithMeridiem = convertToMeridiem(
-              utils.setHours(date, value),
-              currentMeridiem,
-              Boolean(ampm),
-              utils
-            );
-
-            onHourChange(updatedTimeWithMeridiem, isFinish);
-          },
-        };
-
-      case ClockType.MINUTES:
-        const minutesValue = utils.getMinutes(date);
-        return {
-          value: minutesValue,
-          children: getMinutesNumbers({ value: minutesValue, utils }),
-          onChange: (value: number, isFinish?: boolean) => {
-            const updatedTime = utils.setMinutes(date, value);
-
-            onMinutesChange(updatedTime, isFinish);
-          },
-        };
-
-      case ClockType.SECONDS:
-        const secondsValue = utils.getSeconds(date);
-        return {
-          value: secondsValue,
-          children: getMinutesNumbers({ value: secondsValue, utils }),
-          onChange: (value: number, isFinish?: boolean) => {
-            const updatedTime = utils.setSeconds(date, value);
-
-            onSecondsChange(updatedTime, isFinish);
-          },
-        };
-
-      default:
-        throw new Error('You must provide the type for TimePickerView');
-    }
-  }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
-
-  return <Clock type={type} ampm={ampm} minutesStep={minutesStep} {...viewProps} />;
-};
-
-TimePickerView.displayName = 'TimePickerView';
-
-TimePickerView.propTypes = {
-  date: PropTypes.object.isRequired,
-  onHourChange: PropTypes.func.isRequired,
-  onMinutesChange: PropTypes.func.isRequired,
-  onSecondsChange: PropTypes.func.isRequired,
-  ampm: PropTypes.bool,
-  minutesStep: PropTypes.number,
-  type: PropTypes.oneOf(Object.keys(ClockType).map(key => ClockType[key as any])).isRequired,
-} as any;
-
-TimePickerView.defaultProps = {
-  ampm: true,
-  minutesStep: 1,
-};
-
-export default React.memo(TimePickerView);