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

package/src/_shared/ModalDialog.tsx

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

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

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

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-/* 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

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

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

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