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

package/src/_shared/ModalDialog.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Button from '@material-ui/core/Button';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import Dialog, { DialogProps } from '@material-ui/core/Dialog';
+import { DIALOG_WIDTH } from '../constants/dimensions';
+import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+
+export interface ModalDialogProps extends DialogProps {
+  onAccept: () => void;
+  onDismiss: () => void;
+  onClear: () => void;
+  onSetToday: () => void;
+  okLabel?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  clearLabel?: React.ReactNode;
+  todayLabel?: React.ReactNode;
+  clearable?: boolean;
+  showTodayButton?: boolean;
+  showTabs?: boolean;
+  wider?: boolean;
+}
+
+export const ModalDialog: React.SFC<ModalDialogProps & WithStyles<typeof styles>> = ({
+  children,
+  classes,
+  onAccept,
+  onDismiss,
+  onClear,
+  onSetToday,
+  okLabel,
+  cancelLabel,
+  clearLabel,
+  todayLabel,
+  clearable,
+  showTodayButton,
+  showTabs,
+  wider,
+  ...other
+}) => (
+  <Dialog
+    role="dialog"
+    onClose={onDismiss}
+    classes={{
+      paper: clsx(classes.dialogRoot, {
+        [classes.dialogRootWider]: wider,
+      }),
+    }}
+    {...other}
+  >
+    <DialogContent children={children} className={classes.dialog} />
+
+    <DialogActions
+      classes={{
+        root: clsx({
+          [classes.withAdditionalAction]: clearable || showTodayButton,
+        }),
+      }}
+    >
+      {clearable && (
+        <Button color="primary" onClick={onClear}>
+          {clearLabel}
+        </Button>
+      )}
+
+      {!clearable && showTodayButton && (
+        <Button color="primary" onClick={onSetToday}>
+          {todayLabel}
+        </Button>
+      )}
+
+      {cancelLabel && (
+        <Button color="primary" onClick={onDismiss}>
+          {cancelLabel}
+        </Button>
+      )}
+
+      {okLabel && (
+        <Button color="primary" onClick={onAccept}>
+          {okLabel}
+        </Button>
+      )}
+    </DialogActions>
+  </Dialog>
+);
+
+ModalDialog.displayName = 'ModalDialog';
+
+export const styles = createStyles({
+  dialogRoot: {
+    minWidth: DIALOG_WIDTH,
+    // maxWidth: DIALOG_WIDTH_WIDER,
+  },
+  dialogRootWider: {
+    // minWidth: DIALOG_WIDTH_WIDER,
+  },
+  dialog: {
+    '&:first-child': {
+      padding: 0,
+    },
+  },
+  withAdditionalAction: {
+    // set justifyContent to default value to fix IE11 layout bug
+    // see https://github.com/dmtrKovalenko/material-ui-pickers/pull/267
+    justifyContent: 'flex-start',
+
+    '& > *:first-child': {
+      marginRight: 'auto',
+    },
+  },
+});
+
+export default withStyles(styles, { name: 'MuiPickersModal' })(ModalDialog);

package/src/_shared/PickerToolbar.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';
+import { ExtendMui } from '../typings/extendMui';
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(
+  theme => ({
+    toolbar: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 100,
+      backgroundColor:
+        theme.palette.type === 'light'
+          ? theme.palette.primary.main
+          : theme.palette.background.default,
+    },
+    toolbarLandscape: {
+      height: 'auto',
+      maxWidth: 150,
+      padding: 8,
+      justifyContent: 'flex-start',
+    },
+  }),
+  { name: 'MuiPickersToolbar' }
+);
+
+interface PickerToolbarProps extends ExtendMui<ToolbarProps> {
+  isLandscape: boolean;
+}
+
+const PickerToolbar: React.SFC<PickerToolbarProps> = ({
+  children,
+  isLandscape,
+  className = null,
+  ...other
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Toolbar
+      className={clsx(classes.toolbar, { [classes.toolbarLandscape]: isLandscape }, className)}
+      {...other}
+    >
+      {children}
+    </Toolbar>
+  );
+};
+
+export default PickerToolbar;

package/src/_shared/PureDateInput.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';
+import { ExtendMui } from '../typings/extendMui';
+
+export interface PureDateInputProps
+  extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
+  /** Pass material-ui text field variant down, bypass internal variant prop */
+  inputVariant?: TextFieldProps['variant'];
+  /** Override input component */
+  TextFieldComponent?: React.ComponentType<TextFieldProps>;
+  InputProps?: TextFieldProps['InputProps'];
+  inputValue: string;
+  validationError?: React.ReactNode;
+}
+
+export const PureDateInput: React.FC<PureDateInputProps> = ({
+  inputValue,
+  inputVariant,
+  validationError,
+  InputProps,
+  TextFieldComponent = TextField,
+  ...other
+}) => {
+  const PureDateInputProps = React.useMemo(
+    () => ({
+      ...InputProps,
+      readOnly: true,
+    }),
+    [InputProps]
+  );
+
+  return (
+    <TextFieldComponent
+      error={Boolean(validationError)}
+      helperText={validationError}
+      {...other}
+      // do not overridable
+      value={inputValue}
+      variant={inputVariant as any}
+      InputProps={PureDateInputProps}
+    />
+  );
+};
+
+PureDateInput.displayName = 'PureDateInput';

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 };
+}