@docsvision/material-ui-pickers 3.2.0-beta.3 → 3.2.0-beta.30

package/src/_helpers/time-utils.ts

@@ -1,83 +0,0 @@
-import { IUtils } from '@date-io/core/IUtils';
-import { MaterialUiPickersDate } from '../typings/date';
-
-const center = {
-  x: 260 / 2,
-  y: 260 / 2,
-};
-
-const basePoint = {
-  x: center.x,
-  y: 0,
-};
-
-const cx = basePoint.x - center.x;
-const cy = basePoint.y - center.y;
-
-const rad2deg = (rad: number) => rad * 57.29577951308232;
-
-const getAngleValue = (step: number, offsetX: number, offsetY: number) => {
-  const x = offsetX - center.x;
-  const y = offsetY - center.y;
-
-  const atan = Math.atan2(cx, cy) - Math.atan2(x, y);
-
-  let deg = rad2deg(atan);
-  deg = Math.round(deg / step) * step;
-  deg %= 360;
-
-  const value = Math.floor(deg / step) || 0;
-  const delta = Math.pow(x, 2) + Math.pow(y, 2);
-  const distance = Math.sqrt(delta);
-
-  return { value, distance };
-};
-
-export const getHours = (offsetX: number, offsetY: number, ampm: boolean) => {
-  let { value, distance } = getAngleValue(30, offsetX, offsetY);
-  value = value || 12;
-
-  if (!ampm) {
-    if (distance < 90) {
-      value += 12;
-      value %= 24;
-    }
-  } else {
-    value %= 12;
-  }
-
-  return value;
-};
-
-export const getMinutes = (offsetX: number, offsetY: number, step = 1) => {
-  const angleStep = step * 6;
-  let { value } = getAngleValue(angleStep, offsetX, offsetY);
-  value = (value * step) % 60;
-
-  return value;
-};
-
-export const getMeridiem = (
-  date: MaterialUiPickersDate,
-  utils: IUtils<MaterialUiPickersDate>
-): 'am' | 'pm' => {
-  return utils.getHours(date) >= 12 ? 'pm' : 'am';
-};
-
-export const convertToMeridiem = (
-  time: MaterialUiPickersDate,
-  meridiem: 'am' | 'pm',
-  ampm: boolean,
-  utils: IUtils<MaterialUiPickersDate>
-) => {
-  if (ampm) {
-    const currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';
-    if (currentMeridiem !== meridiem) {
-      const hours = meridiem === 'am' ? utils.getHours(time) - 12 : utils.getHours(time) + 12;
-
-      return utils.setHours(time, hours);
-    }
-  }
-
-  return time;
-};

package/src/_helpers/utils.ts

@@ -1,8 +0,0 @@
-/** Use it instead of .includes method for IE support */
-export function arrayIncludes<T>(array: T[], itemOrItems: T | T[]) {
-  if (Array.isArray(itemOrItems)) {
-    return itemOrItems.every(item => array.indexOf(item) !== -1);
-  }
-
-  return array.indexOf(itemOrItems) !== -1;
-}

package/src/_shared/KeyboardDateInput.tsx

@@ -1,123 +0,0 @@
-import * as React from 'react';
-import InputAdornment, { InputAdornmentProps } from '@material-ui/core/InputAdornment';
-import TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';
-import { Rifm } from 'rifm';
-import { IconButton } from '@material-ui/core';
-import { ExtendMui } from '../typings/extendMui';
-import { KeyboardIcon } from './icons/KeyboardIcon';
-import { IconButtonProps } from '@material-ui/core/IconButton';
-import { makeMaskFromFormat, maskedDateFormatter } from '../_helpers/text-field-helper';
-
-export interface KeyboardDateInputProps
-  extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
-  format: string;
-  onChange: (value: string | null) => void;
-  onClick?: () => void;
-  validationError?: React.ReactNode;
-  inputValue: string;
-  InputProps?: TextFieldProps['InputProps'];
-  /** Override input component */
-  TextFieldComponent?: React.ComponentType<TextFieldProps>;
-  /** Icon displaying for open picker button */
-  keyboardIcon?: React.ReactNode;
-  /** Pass material-ui text field variant down, bypass internal variant prop */
-  inputVariant?: TextFieldProps['variant'];
-  /**
-   * Custom mask. Can be used to override generate from format. (e.g. __/__/____ __:__)
-   */
-  mask?: string;
-  /**
-   * Char string that will be replaced with number (for "_" mask will be "__/__/____")
-   * @default '_'
-   */
-  maskChar?: string;
-  /**
-   * Refuse values regexp
-   * @default /[^\d]+/gi
-   */
-  refuse?: RegExp;
-  /**
-   * Props to pass to keyboard input adornment
-   * @type {Partial<InputAdornmentProps>}
-   */
-  InputAdornmentProps?: Partial<InputAdornmentProps>;
-  /**
-   * Props to pass to keyboard adornment button
-   * @type {Partial<IconButtonProps>}
-   */
-  KeyboardButtonProps?: Partial<IconButtonProps>;
-  /** Custom formatter to be passed into Rifm component */
-  rifmFormatter?: (str: string) => string;
-}
-
-const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps> = ({
-  inputValue,
-  inputVariant,
-  validationError,
-  KeyboardButtonProps,
-  InputAdornmentProps,
-  onClick,
-  onChange,
-  InputProps,
-  mask,
-  maskChar = '_',
-  refuse = /[^\d]+/gi,
-  format,
-  keyboardIcon,
-  disabled,
-  rifmFormatter,
-  TextFieldComponent = TextField,
-  ...other
-}) => {
-  const inputMask = mask || makeMaskFromFormat(format, maskChar);
-  // prettier-ignore
-  const formatter = React.useCallback(
-    maskedDateFormatter(inputMask, maskChar, refuse),
-    [mask, maskChar]
-  );
-
-  const position =
-    InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
-
-  const handleChange = (text: string) => {
-    const finalString = text === '' || text === inputMask ? null : text;
-    onChange(finalString);
-  };
-
-  return (
-    <Rifm
-      value={inputValue}
-      onChange={handleChange}
-      refuse={refuse}
-      format={rifmFormatter || formatter}
-    >
-      {({ onChange, value }) => (
-        <TextFieldComponent
-          disabled={disabled}
-          error={Boolean(validationError)}
-          helperText={validationError}
-          {...other}
-          value={value}
-          onChange={onChange}
-          variant={inputVariant as any}
-          InputProps={{
-            ...InputProps,
-            [`${position}Adornment`]: (
-              <InputAdornment position={position} {...InputAdornmentProps}>
-                <IconButton disabled={disabled} {...KeyboardButtonProps} onClick={onClick}>
-                  {keyboardIcon}
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-        />
-      )}
-    </Rifm>
-  );
-};
-
-KeyboardDateInput.defaultProps = {
-  keyboardIcon: <KeyboardIcon />,
-};
-
-export default KeyboardDateInput;

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.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,
-  };
-}