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

package/src/_shared/ToolbarButton.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ToolbarText from './ToolbarText';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { ExtendMui } from '../typings/extendMui';
+import { TypographyProps } from '@material-ui/core/Typography';
+import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+
+export interface ToolbarButtonProps
+  extends ExtendMui<ButtonProps, 'variant'>,
+    WithStyles<typeof styles> {
+  variant: TypographyProps['variant'];
+  selected: boolean;
+  label: string;
+  align?: TypographyProps['align'];
+  typographyClassName?: string;
+}
+
+const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
+  classes,
+  className = null,
+  label,
+  selected,
+  variant,
+  align,
+  typographyClassName,
+  ...other
+}) => {
+  return (
+    <Button variant="text" className={clsx(classes.toolbarBtn, className)} {...other}>
+      <ToolbarText
+        align={align}
+        className={typographyClassName}
+        variant={variant}
+        label={label}
+        selected={selected}
+      />
+    </Button>
+  );
+};
+
+(ToolbarButton as any).propTypes = {
+  selected: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  classes: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  innerRef: PropTypes.any,
+};
+
+ToolbarButton.defaultProps = {
+  className: '',
+};
+
+export const styles = createStyles({
+  toolbarBtn: {
+    padding: 0,
+    minWidth: '16px',
+    textTransform: 'none',
+  },
+});
+
+export default withStyles(styles, { name: 'MuiPickersToolbarButton' })(ToolbarButton);

package/src/_shared/ToolbarText.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography, { TypographyProps } from '@material-ui/core/Typography';
+import { ExtendMui } from '../typings/extendMui';
+import { makeStyles, fade } from '@material-ui/core/styles';
+
+export interface ToolbarTextProps extends ExtendMui<TypographyProps> {
+  selected?: boolean;
+  label: string;
+}
+
+export const useStyles = makeStyles(
+  theme => {
+    const textColor =
+      theme.palette.type === 'light'
+        ? theme.palette.primary.contrastText
+        : theme.palette.getContrastText(theme.palette.background.default);
+
+    return {
+      toolbarTxt: {
+        color: fade(textColor, 0.54),
+      },
+      toolbarBtnSelected: {
+        color: textColor,
+      },
+    };
+  },
+  { name: 'MuiPickersToolbarText' }
+);
+
+const ToolbarText: React.FunctionComponent<ToolbarTextProps> = ({
+  selected,
+  label,
+  className = null,
+  ...other
+}) => {
+  const classes = useStyles();
+  return (
+    <Typography
+      children={label}
+      className={clsx(classes.toolbarTxt, className, {
+        [classes.toolbarBtnSelected]: selected,
+      })}
+      {...other}
+    />
+  );
+};
+
+export default ToolbarText;

package/src/_shared/WithUtils.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Omit } from '@material-ui/core';
+import { useUtils } from './hooks/useUtils';
+import { IUtils } from '@date-io/core/IUtils';
+import { MaterialUiPickersDate } from '../typings/date';
+
+export interface WithUtilsProps {
+  utils: IUtils<MaterialUiPickersDate>;
+}
+
+export const withUtils = () => <P extends WithUtilsProps>(Component: React.ComponentType<P>) => {
+  const WithUtils: React.SFC<Omit<P, keyof WithUtilsProps>> = props => {
+    const utils = useUtils();
+    return <Component utils={utils} {...(props as any)} />;
+  };
+
+  WithUtils.displayName = `WithUtils(${Component.displayName || Component.name})`;
+  return WithUtils;
+};

package/src/_shared/hooks/useIsLandscape.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useIsomorphicEffect } from './useKeyDown';
+import { BasePickerProps } from '../../typings/BasePicker';
+
+const getOrientation = () =>
+  typeof window !== 'undefined' &&
+  window.screen &&
+  window.screen.orientation &&
+  Math.abs(window.screen.orientation.angle) === 90
+    ? 'landscape'
+    : 'portrait';
+
+export function useIsLandscape(customOrientation?: BasePickerProps['orientation']) {
+  const [orientation, setOrientation] = React.useState<BasePickerProps['orientation']>(
+    getOrientation()
+  );
+
+  const eventHandler = React.useCallback(() => setOrientation(getOrientation()), []);
+
+  useIsomorphicEffect(() => {
+    window.addEventListener('orientationchange', eventHandler);
+    return () => window.removeEventListener('orientationchange', eventHandler);
+  }, [eventHandler]);
+
+  const orientationToUse = customOrientation || orientation;
+  return orientationToUse === 'landscape';
+}

package/src/_shared/hooks/useKeyDown.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+export const useIsomorphicEffect =
+  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+type KeyHandlers = Record<KeyboardEvent['key'], () => void>;
+
+export function runKeyHandler(e: KeyboardEvent, keyHandlers: KeyHandlers) {
+  const handler = keyHandlers[e.key];
+  if (handler) {
+    handler();
+    // if event was handled prevent other side effects (e.g. page scroll)
+    e.preventDefault();
+  }
+}
+
+export function useKeyDown(active: boolean, keyHandlers: KeyHandlers) {
+  const keyHandlersRef = React.useRef(keyHandlers);
+  useIsomorphicEffect(() => {
+    keyHandlersRef.current = keyHandlers;
+  });
+
+  React.useEffect(() => {
+    if (active) {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        runKeyHandler(event, keyHandlers);
+      };
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [active, keyHandlers]);
+}

package/src/_shared/hooks/useKeyboardPickerState.ts

@@ -0,0 +1,72 @@
+import { useUtils } from './useUtils';
+import { Omit } from '@material-ui/core';
+import { IUtils } from '@date-io/core/IUtils';
+import { BasePickerProps } from '../../typings/BasePicker';
+import { MaterialUiPickersDate } from '../../typings/date';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getDisplayDate } from '../../_helpers/text-field-helper';
+import { StateHookOptions, usePickerState } from './usePickerState';
+
+export interface BaseKeyboardPickerProps extends Omit<BasePickerProps, 'onChange'> {
+  /** String value for controlling value with pure input string. Overrides value prop */
+  inputValue?: string;
+  /** Keyboard onChange callback */
+  onChange: (date: MaterialUiPickersDate | null, value?: string | null) => void;
+}
+
+function parseInputString(value: string, utils: IUtils<any>, format: string) {
+  try {
+    return utils.parse(value, format);
+  } catch {
+    return null;
+  }
+}
+
+export function useKeyboardPickerState(props: BaseKeyboardPickerProps, options: StateHookOptions) {
+  const { format = options.getDefaultFormat(), inputValue, onChange, value } = props;
+  const utils = useUtils();
+
+  const displayDate = getDisplayDate(value, format, utils, value === null, props);
+  const [innerInputValue, setInnerInputValue] = useState(displayDate);
+  const dateValue = inputValue ? parseInputString(inputValue, utils, format) : value;
+
+  useEffect(() => {
+    if (value === null || utils.isValid(value)) {
+      setInnerInputValue(displayDate);
+    }
+  }, [displayDate, setInnerInputValue, utils, value]);
+
+  const handleKeyboardChange = useCallback(
+    (date: MaterialUiPickersDate) => {
+      onChange(date, date === null ? null : utils.format(date, format));
+    },
+    [format, onChange, utils]
+  );
+
+  const { inputProps: innerInputProps, wrapperProps, pickerProps } = usePickerState(
+    // Extend props interface
+    { ...props, value: dateValue, onChange: handleKeyboardChange },
+    options
+  );
+
+  const inputProps = useMemo(
+    () => ({
+      ...innerInputProps, // reuse validation and open/close logic
+      format: wrapperProps.format,
+      inputValue: inputValue || innerInputValue,
+      onChange: (value: string | null) => {
+        setInnerInputValue(value || '');
+        const date = value === null ? null : utils.parse(value, wrapperProps.format);
+
+        onChange(date, value);
+      },
+    }),
+    [innerInputProps, innerInputValue, inputValue, onChange, utils, wrapperProps.format]
+  );
+
+  return {
+    inputProps,
+    wrapperProps,
+    pickerProps,
+  };
+}

package/src/_shared/hooks/useOpenState.ts

@@ -0,0 +1,22 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { BasePickerProps } from '../../typings/BasePicker';
+import { useCallback, useState, Dispatch, SetStateAction } from 'react';
+
+export function useOpenState({ open, onOpen, onClose }: BasePickerProps) {
+  let setIsOpenState: null | Dispatch<SetStateAction<boolean>> = null;
+  if (open === undefined || open === null) {
+    // The component is uncontrolled, so we need to give it its own state.
+    [open, setIsOpenState] = useState<boolean>(false);
+  }
+
+  // prettier-ignore
+  const setIsOpen = useCallback((newIsOpen: boolean) => {
+    setIsOpenState && setIsOpenState(newIsOpen);
+
+    return newIsOpen
+      ? onOpen && onOpen()
+      : onClose && onClose();
+  }, [onOpen, onClose, setIsOpenState]);
+
+  return { isOpen: open, setIsOpen };
+}

package/src/_shared/hooks/usePickerState.ts

@@ -0,0 +1,134 @@
+import { useUtils } from './useUtils';
+import { IUtils } from '@date-io/core/IUtils';
+import { MaterialUiPickersDate } from '../..';
+import { useOpenState } from './useOpenState';
+import { BasePickerProps } from '../../typings/BasePicker';
+import { getDisplayDate, validate } from '../../_helpers/text-field-helper';
+import { useCallback, useDebugValue, useEffect, useMemo, useState, useRef } from 'react';
+
+export interface StateHookOptions {
+  getDefaultFormat: () => string;
+}
+
+const useValueToDate = (
+  utils: IUtils<MaterialUiPickersDate>,
+  { value, initialFocusedDate }: BasePickerProps
+) => {
+  const nowRef = useRef(utils.date());
+  const date = utils.date(value || initialFocusedDate || nowRef.current);
+
+  return date && utils.isValid(date) ? date : nowRef.current;
+};
+
+function useDateValues(props: BasePickerProps, options: StateHookOptions) {
+  const utils = useUtils();
+  const date = useValueToDate(utils, props);
+  const format = props.format || options.getDefaultFormat();
+
+  return { date, format };
+}
+
+export function usePickerState(props: BasePickerProps, options: StateHookOptions) {
+  const { autoOk, disabled, onAccept, onChange, onError, value, variant } = props;
+
+  const utils = useUtils();
+  const { isOpen, setIsOpen } = useOpenState(props);
+  const { date, format } = useDateValues(props, options);
+  const [pickerDate, setPickerDate] = useState(date);
+
+  useEffect(() => {
+    // if value was changed in closed state - treat it as accepted
+    if (!isOpen && !utils.isEqual(pickerDate, date)) {
+      setPickerDate(date);
+    }
+  }, [date, isOpen, pickerDate, utils]);
+
+  const acceptDate = useCallback(
+    (acceptedDate: MaterialUiPickersDate) => {
+      setIsOpen(false);
+      onChange(acceptedDate);
+
+      if (onAccept) {
+        onAccept(acceptedDate);
+      }
+    },
+    [onAccept, onChange, setIsOpen]
+  );
+
+  const wrapperProps = useMemo(
+    () => ({
+      format,
+      open: isOpen,
+      onClear: () => acceptDate(null),
+      onAccept: () => acceptDate(pickerDate),
+      onSetToday: () => setPickerDate(utils.date()),
+      onDismiss: () => {
+        setIsOpen(false);
+      },
+    }),
+    [acceptDate, format, isOpen, pickerDate, setIsOpen, utils]
+  );
+
+  const pickerProps = useMemo(
+    () => ({
+      date: pickerDate,
+      onChange: (newDate: MaterialUiPickersDate, isFinish = true) => {
+        setPickerDate(newDate);
+
+        if (variant === 'inline' || variant === 'static') {
+          onChange(newDate);
+        }
+
+        if (isFinish && autoOk) {
+          acceptDate(newDate);
+        }
+      },
+      onSetToday: () => {
+        let newDate = utils.date();
+        setPickerDate(newDate);
+
+        if (variant === 'inline' || variant === 'static') {
+          onChange(newDate);
+        }
+
+        if (autoOk) {
+          acceptDate(newDate);
+        }
+      },
+      onSetShift: (shiftDate: Date) => {
+        let newDate = utils.date(shiftDate);
+
+        if (variant === 'inline' || variant === 'static') {
+          onChange(newDate);
+        }
+
+        if (autoOk) {
+          acceptDate(newDate);
+        }
+      },
+    }),
+    [acceptDate, autoOk, onChange, pickerDate, variant]
+  );
+
+  const validationError = validate(value, utils, props);
+  useEffect(() => {
+    if (validationError && onError) {
+      onError(validationError, value);
+    }
+  }, [onError, validationError, value]);
+
+  const inputValue = getDisplayDate(date, format, utils, value === null, props);
+  const inputProps = useMemo(
+    () => ({
+      inputValue,
+      validationError,
+      onClick: () => !disabled && setIsOpen(true),
+    }),
+    [disabled, inputValue, setIsOpen, validationError]
+  );
+
+  const pickerState = { pickerProps, inputProps, wrapperProps };
+
+  useDebugValue(pickerState);
+  return pickerState;
+}

package/src/_shared/hooks/useUtils.ts

@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { IUtils } from '@date-io/core/IUtils';
+import { MaterialUiPickersDate } from '../../typings/date';
+import { MuiPickersContext } from '../../MuiPickersUtilsProvider';
+
+export const checkUtils = (utils: IUtils<MaterialUiPickersDate> | null | undefined) => {
+  if (!utils) {
+    // tslint:disable-next-line
+    throw new Error(
+      'Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports.  Recommendation: use named imports from the module index.'
+    );
+  }
+};
+
+export function useUtils() {
+  const utils = useContext(MuiPickersContext);
+  checkUtils(utils);
+
+  return utils!;
+}

package/src/_shared/hooks/useViews.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { MaterialUiPickersDate } from '../..';
+import { PickerView } from '../../Picker/Picker';
+import { arrayIncludes } from '../../_helpers/utils';
+
+export function useViews(
+  views: PickerView[],
+  openTo: PickerView,
+  onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void
+) {
+  const [openView, setOpenView] = React.useState(
+    openTo && arrayIncludes(views, openTo) ? openTo : views[0]
+  );
+
+  const handleChangeAndOpenNext = React.useCallback(
+    (date: MaterialUiPickersDate, isFinish?: boolean) => {
+      const nextViewToOpen = views[views.indexOf(openView!) + 1];
+      if (isFinish && nextViewToOpen) {
+        // do not close picker if needs to show next view
+        onChange(date, false);
+        setOpenView(nextViewToOpen);
+        return;
+      }
+
+      onChange(date, Boolean(isFinish));
+    },
+    [onChange, openView, views]
+  );
+
+  return { handleChangeAndOpenNext, openView, setOpenView };
+}

package/src/_shared/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const ArrowLeftIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" />
+      <path fill="none" d="M0 0h24v24H0V0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/ArrowRightIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const ArrowRightIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+      <path fill="none" d="M0 0h24v24H0V0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/DateRangeIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const DateRangeIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/KeyboardIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const KeyboardIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+    </SvgIcon>
+  );
+};

package/src/_shared/icons/TimeIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const TimeIcon: React.SFC<SvgIconProps> = props => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+    </SvgIcon>
+  );
+};

package/src/constants/ClockType.ts

@@ -0,0 +1,11 @@
+enum ClockType {
+  HOURS = 'hours',
+
+  MINUTES = 'minutes',
+
+  SECONDS = 'seconds',
+}
+
+export type ClockViewType = 'hours' | 'minutes' | 'seconds';
+
+export default ClockType;

package/src/constants/dimensions.ts

@@ -0,0 +1,5 @@
+export const DIALOG_WIDTH = 310;
+
+export const DIALOG_WIDTH_WIDER = 325;
+
+export const VIEW_HEIGHT = 305;

package/src/constants/prop-types.ts

@@ -0,0 +1,37 @@
+import * as PropTypes from 'prop-types';
+import { BaseTimePickerProps } from '../TimePicker/TimePicker';
+import { BaseDatePickerProps } from '../DatePicker/DatePicker';
+
+const date = PropTypes.oneOfType([
+  PropTypes.object,
+  PropTypes.string,
+  PropTypes.number,
+  PropTypes.instanceOf(Date),
+]);
+
+const datePickerView = PropTypes.oneOf(['year', 'month', 'day']);
+
+export type ParsableDate = object | string | number | Date | null | undefined;
+
+export const DomainPropTypes = { date, datePickerView };
+
+/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
+export const timePickerDefaultProps = {
+  ampm: true,
+  invalidDateMessage: 'Invalid Time Format',
+} as BaseTimePickerProps;
+
+export const datePickerDefaultProps = {
+  minDate: new Date('1900-01-01'),
+  maxDate: new Date('2200-01-01'),
+  invalidDateMessage: 'Invalid Date Format',
+  minDateMessage: 'Date should not be before minimal date',
+  maxDateMessage: 'Date should not be after maximal date',
+  allowKeyboardControl: true,
+} as BaseDatePickerProps;
+
+export const dateTimePickerDefaultProps = {
+  ...timePickerDefaultProps,
+  ...datePickerDefaultProps,
+  showTabs: true,
+} as BaseTimePickerProps & BaseDatePickerProps;

package/src/index.ts

@@ -0,0 +1,48 @@
+import { MaterialUiPickersDate } from './typings/date';
+import { KeyboardTimePickerProps } from './TimePicker';
+import { DatePickerProps, KeyboardDatePickerProps } from './DatePicker';
+import { DateTimePickerProps, KeyboardDateTimePickerProps } from './DateTimePicker';
+
+export type TimePickerProps = KeyboardTimePickerProps;
+
+export type KeyboardTimePickerProps = KeyboardTimePickerProps;
+
+export type DatePickerProps = DatePickerProps;
+
+export type KeyboardDatePickerProps = KeyboardDatePickerProps;
+
+export type DateTimePickerProps = DateTimePickerProps;
+
+export type KeyboardDateTimePickerProps = KeyboardDateTimePickerProps;
+
+export type MaterialUiPickersDate = MaterialUiPickersDate;
+
+export { DatePicker, KeyboardDatePicker } from './DatePicker';
+
+export { TimePicker, KeyboardTimePicker } from './TimePicker';
+
+export { DateTimePicker, KeyboardDateTimePicker } from './DateTimePicker';
+
+export { default as Calendar } from './views/Calendar/Calendar';
+
+export { default as Day } from './views/Calendar/Day';
+
+export { default as TimePickerView } from './views/Clock/ClockView';
+
+export { default as Clock } from './views/Clock/Clock';
+
+export { Picker } from './Picker/Picker';
+
+export { makePurePicker } from './Picker/WrappedPurePicker';
+
+export { makeKeyboardPicker } from './Picker/WrappedKeyboardPicker';
+
+export { validate } from './_helpers/text-field-helper';
+
+export { useUtils } from './_shared/hooks/useUtils';
+
+export { usePickerState } from './_shared/hooks/usePickerState';
+
+export { useKeyboardPickerState } from './_shared/hooks/useKeyboardPickerState';
+
+export { default as MuiPickersUtilsProvider, MuiPickersContext } from './MuiPickersUtilsProvider';