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

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;

package/src/views/Calendar/Day.tsx

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

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

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

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

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

@@ -0,0 +1,76 @@
+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} />,
+  ];
+};