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

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

package/src/views/Month/Month.tsx

@@ -1,76 +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';
-
-export interface MonthProps {
-  children: React.ReactNode;
-  disabled?: boolean;
-  onSelect: (value: any) => void;
-  selected?: boolean;
-  value: any;
-}
-
-export const useStyles = makeStyles(
-  theme => ({
-    root: {
-      flex: '1 0 33.33%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      outline: 'none',
-      height: 75,
-      transition: theme.transitions.create('font-size', { duration: '100ms' }),
-      '&:focus': {
-        color: theme.palette.primary.main,
-        fontWeight: theme.typography.fontWeightMedium,
-      },
-    },
-    monthSelected: {
-      color: theme.palette.primary.main,
-      fontWeight: theme.typography.fontWeightMedium,
-    },
-    monthDisabled: {
-      pointerEvents: 'none',
-      color: theme.palette.text.hint,
-    },
-  }),
-  { name: 'MuiPickersMonth' }
-);
-
-export const Month: React.FC<MonthProps> = ({
-  selected,
-  onSelect,
-  disabled,
-  value,
-  children,
-  ...other
-}) => {
-  const classes = useStyles();
-  const handleSelection = React.useCallback(() => {
-    onSelect(value);
-  }, [onSelect, value]);
-
-  return (
-    <Typography
-      role="button"
-      component="div"
-      className={clsx(classes.root, {
-        [classes.monthSelected]: selected,
-        [classes.monthDisabled]: disabled,
-      })}
-      tabIndex={disabled ? -1 : 0}
-      onClick={handleSelection}
-      onKeyPress={handleSelection}
-      color={selected ? 'primary' : undefined}
-      variant={selected ? 'h5' : 'subtitle1'}
-      children={children}
-      {...other}
-    />
-  );
-};
-
-Month.displayName = 'Month';
-
-export default Month;

package/src/views/Month/MonthView.tsx

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import Month from './Month';
-import { makeStyles } from '@material-ui/core/styles';
-import { useUtils } from '../../_shared/hooks/useUtils';
-import { ParsableDate } from '../../constants/prop-types';
-import { MaterialUiPickersDate } from '../../typings/date';
-
-export interface MonthSelectionProps {
-  date: MaterialUiPickersDate;
-  minDate?: ParsableDate;
-  maxDate?: ParsableDate;
-  onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void;
-  disablePast?: boolean | null | undefined;
-  disableFuture?: boolean | null | undefined;
-  onMonthChange?: (date: MaterialUiPickersDate) => void | Promise<void>;
-}
-
-export const useStyles = makeStyles(
-  {
-    container: {
-      width: 310,
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignContent: 'stretch',
-    },
-  },
-  { name: 'MuiPickersMonthSelection' }
-);
-
-export const MonthSelection: React.FC<MonthSelectionProps> = ({
-  disablePast,
-  disableFuture,
-  minDate,
-  maxDate,
-  date,
-  onMonthChange,
-  onChange,
-}) => {
-  const utils = useUtils();
-  const classes = useStyles();
-  const currentMonth = utils.getMonth(date);
-
-  const shouldDisableMonth = (month: MaterialUiPickersDate) => {
-    const now = utils.date();
-    const utilMinDate = utils.date(minDate);
-    const utilMaxDate = utils.date(maxDate);
-
-    const firstEnabledMonth = utils.startOfMonth(
-      disablePast && utils.isAfter(now, utilMinDate) ? now : utilMinDate
-    );
-
-    const lastEnabledMonth = utils.startOfMonth(
-      disableFuture && utils.isBefore(now, utilMaxDate) ? now : utilMaxDate
-    );
-
-    const isBeforeFirstEnabled = utils.isBefore(month, firstEnabledMonth);
-    const isAfterLastEnabled = utils.isAfter(month, lastEnabledMonth);
-
-    return isBeforeFirstEnabled || isAfterLastEnabled;
-  };
-
-  const onMonthSelect = React.useCallback(
-    (month: number) => {
-      const newDate = utils.setMonth(date, month);
-
-      onChange(newDate, true);
-      if (onMonthChange) {
-        onMonthChange(newDate);
-      }
-    },
-    [date, onChange, onMonthChange, utils]
-  );
-
-  return (
-    <div className={classes.container}>
-      {utils.getMonthArray(date).map(month => {
-        const monthNumber = utils.getMonth(month);
-        const monthText = utils.format(month, 'MMM');
-
-        return (
-          <Month
-            key={monthText}
-            value={monthNumber}
-            selected={monthNumber === currentMonth}
-            onSelect={onMonthSelect}
-            disabled={shouldDisableMonth(month)}
-          >
-            {monthText}
-          </Month>
-        );
-      })}
-    </div>
-  );
-};

package/src/views/Year/Year.tsx

@@ -1,77 +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';
-
-export interface YearProps {
-  children: React.ReactNode;
-  disabled?: boolean;
-  onSelect: (value: any) => void;
-  selected?: boolean;
-  value: any;
-  forwardedRef?: React.Ref<HTMLElement | null>;
-}
-
-export const useStyles = makeStyles(
-  theme => ({
-    root: {
-      height: 40,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      outline: 'none',
-      '&:focus': {
-        color: theme.palette.primary.main,
-        fontWeight: theme.typography.fontWeightMedium,
-      },
-    },
-    yearSelected: {
-      margin: '10px 0',
-      fontWeight: theme.typography.fontWeightMedium,
-    },
-    yearDisabled: {
-      pointerEvents: 'none',
-      color: theme.palette.text.hint,
-    },
-  }),
-  { name: 'MuiPickersYear' }
-);
-
-export const Year: React.FC<YearProps> = ({
-  onSelect,
-  forwardedRef,
-  value,
-  selected,
-  disabled,
-  children,
-  ...other
-}) => {
-  const classes = useStyles();
-  const handleClick = React.useCallback(() => onSelect(value), [onSelect, value]);
-
-  return (
-    <Typography
-      role="button"
-      component="div"
-      tabIndex={disabled ? -1 : 0}
-      onClick={handleClick}
-      onKeyPress={handleClick}
-      color={selected ? 'primary' : undefined}
-      variant={selected ? 'h5' : 'subtitle1'}
-      children={children}
-      ref={forwardedRef}
-      className={clsx(classes.root, {
-        [classes.yearSelected]: selected,
-        [classes.yearDisabled]: disabled,
-      })}
-      {...other}
-    />
-  );
-};
-
-Year.displayName = 'Year';
-
-export default React.forwardRef<HTMLElement, YearProps>((props, ref) => (
-  <Year {...props} forwardedRef={ref} />
-));

package/src/views/Year/YearView.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import Year from './Year';
-import { DateType } from '@date-io/type';
-import { makeStyles } from '@material-ui/core/styles';
-import { useUtils } from '../../_shared/hooks/useUtils';
-import { VariantContext } from '../../wrappers/Wrapper';
-import { MaterialUiPickersDate } from '../../typings/date';
-
-export interface YearSelectionProps {
-  date: MaterialUiPickersDate;
-  minDate: DateType;
-  maxDate: DateType;
-  onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void;
-  disablePast?: boolean | null | undefined;
-  disableFuture?: boolean | null | undefined;
-  animateYearScrolling?: boolean | null | undefined;
-  onYearChange?: (date: MaterialUiPickersDate) => void;
-}
-
-export const useStyles = makeStyles(
-  {
-    container: {
-      height: 300,
-      overflowY: 'auto',
-    },
-  },
-  { name: 'MuiPickersYearSelection' }
-);
-
-export const YearSelection: React.FC<YearSelectionProps> = ({
-  date,
-  onChange,
-  onYearChange,
-  minDate,
-  maxDate,
-  disablePast,
-  disableFuture,
-  animateYearScrolling,
-}) => {
-  const utils = useUtils();
-  const classes = useStyles();
-  const currentVariant = React.useContext(VariantContext);
-  const selectedYearRef = React.useRef<HTMLElement>(null);
-
-  React.useEffect(() => {
-    if (selectedYearRef.current && selectedYearRef.current.scrollIntoView) {
-      selectedYearRef.current.scrollIntoView({
-        block: currentVariant === 'static' ? 'nearest' : 'center',
-        behavior: animateYearScrolling ? 'smooth' : 'auto',
-      });
-    }
-  }, []); // eslint-disable-line
-
-  const currentYear = utils.getYear(date);
-  const onYearSelect = React.useCallback(
-    (year: number) => {
-      const newDate = utils.setYear(date, year);
-      if (onYearChange) {
-        onYearChange(newDate);
-      }
-
-      onChange(newDate, true);
-    },
-    [date, onChange, onYearChange, utils]
-  );
-
-  return (
-    <div className={classes.container}>
-      {utils.getYearRange(minDate, maxDate).map(year => {
-        const yearNumber = utils.getYear(year);
-        const selected = yearNumber === currentYear;
-
-        return (
-          <Year
-            key={utils.getYearText(year)}
-            selected={selected}
-            value={yearNumber}
-            onSelect={onYearSelect}
-            ref={selected ? selectedYearRef : undefined}
-            disabled={Boolean(
-              (disablePast && utils.isBeforeYear(year, utils.date())) ||
-                (disableFuture && utils.isAfterYear(year, utils.date()))
-            )}
-          >
-            {utils.getYearText(year)}
-          </Year>
-        );
-      })}
-    </div>
-  );
-};

package/src/wrappers/InlineWrapper.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Popover, { PopoverProps as PopoverPropsType } from '@material-ui/core/Popover';
-import { WrapperProps } from './Wrapper';
-import { makeStyles } from '@material-ui/core/styles';
-import { useKeyDown } from '../_shared/hooks/useKeyDown';
-import { TextFieldProps } from '@material-ui/core/TextField';
-import { DIALOG_WIDTH, DIALOG_WIDTH_WIDER } from '../constants/dimensions';
-
-export const useStyles = makeStyles(
-  {
-    popoverPaper: {
-      width: DIALOG_WIDTH,
-      paddingBottom: 8,
-    },
-    popoverPaperWider: {
-      width: DIALOG_WIDTH_WIDER,
-    },
-  },
-  { name: 'MuiPickersInlineWrapper' }
-);
-
-export interface InlineWrapperProps<T = TextFieldProps> extends WrapperProps<T> {
-  /** Popover props passed to material-ui Popover (with variant="inline") */
-  PopoverProps?: Partial<PopoverPropsType>;
-}
-
-export const InlineWrapper: React.FC<InlineWrapperProps> = ({
-  open,
-  wider,
-  children,
-  PopoverProps,
-  onClear,
-  onDismiss,
-  onSetToday,
-  onAccept,
-  showTabs,
-  DateInputProps,
-  InputComponent,
-  ...other
-}) => {
-  const ref = React.useRef();
-  const classes = useStyles();
-
-  useKeyDown(open, {
-    Enter: onAccept,
-  });
-
-  return (
-    <React.Fragment>
-      <InputComponent {...other} {...DateInputProps} inputRef={ref} />
-
-      <Popover
-        open={open}
-        onClose={onDismiss}
-        anchorEl={ref.current}
-        classes={{
-          paper: clsx(classes.popoverPaper, { [classes.popoverPaperWider]: wider }),
-        }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center',
-        }}
-        children={children}
-        {...PopoverProps}
-      />
-    </React.Fragment>
-  );
-};
-
-InlineWrapper.propTypes = {
-  onOpen: PropTypes.func,
-  onClose: PropTypes.func,
-  PopoverProps: PropTypes.object,
-} as any;