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

package/src/views/Clock/ClockPointer.tsx

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

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

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

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

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

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

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