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

package/src/_helpers/text-field-helper.ts

@@ -1,239 +0,0 @@
-import { DatePickerProps } from '..';
-import { Omit } from '@material-ui/core';
-import { IUtils } from '@date-io/core/IUtils';
-import { ParsableDate } from '../constants/prop-types';
-import { BasePickerProps } from '../typings/BasePicker';
-
-const replaceAt = (str: string, index: number, replacement: string) => {
-  replacement = replacement || '';
-  return str.substr(0, index) + replacement + str.substr(index + replacement.length);
-};
-
-export const getDisplayDate = (
-  value: ParsableDate,
-  format: string,
-  utils: IUtils<any>,
-  isEmpty: boolean,
-  { invalidLabel, emptyLabel, labelFunc }: Omit<BasePickerProps, 'value' | 'onChange'>
-) => {
-  const date = utils.date(value);
-  if (labelFunc) {
-    return labelFunc(isEmpty ? null : date, invalidLabel!);
-  }
-
-  if (isEmpty) {
-    return emptyLabel || '';
-  }
-
-  return utils.isValid(date) ? utils.format(date, format) : invalidLabel!;
-};
-
-export interface BaseValidationProps {
-  /**
-   * Message, appearing when date cannot be parsed
-   * @default 'Invalid Date Format'
-   */
-  invalidDateMessage?: React.ReactNode;
-}
-
-export interface DateValidationProps extends BaseValidationProps {
-  /**
-   * Error message, shown if date is less then minimal date
-   * @default 'Date should not be before minimal date'
-   */
-  minDateMessage?: React.ReactNode;
-  /**
-   * Error message, shown if date is more then maximal date
-   * @default 'Date should not be after maximal date'
-   */
-  maxDateMessage?: React.ReactNode;
-}
-
-const getComparisonMaxDate = (utils: IUtils<any>, strictCompareDates: boolean, date: Date) => {
-  if (strictCompareDates) {
-    return date;
-  }
-
-  return utils.endOfDay(date);
-};
-
-const getComparisonMinDate = (utils: IUtils<any>, strictCompareDates: boolean, date: Date) => {
-  if (strictCompareDates) {
-    return date;
-  }
-
-  return utils.startOfDay(date);
-};
-
-export const validate = (
-  value: ParsableDate,
-  utils: IUtils<any>,
-  {
-    maxDate,
-    minDate,
-    disablePast,
-    disableFuture,
-    maxDateMessage,
-    minDateMessage,
-    invalidDateMessage,
-    strictCompareDates,
-  }: Omit<DatePickerProps, 'views' | 'openTo'> // DateTimePicker doesn't support
-): React.ReactNode => {
-  const parsedValue = utils.date(value);
-
-  // if null - do not show error
-  if (value === null) {
-    return '';
-  }
-
-  if (!utils.isValid(value)) {
-    return invalidDateMessage;
-  }
-
-  if (
-    maxDate &&
-    utils.isAfter(
-      parsedValue,
-      getComparisonMaxDate(utils, !!strictCompareDates, utils.date(maxDate))
-    )
-  ) {
-    return maxDateMessage;
-  }
-
-  if (
-    disableFuture &&
-    utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date()))
-  ) {
-    return maxDateMessage;
-  }
-
-  if (
-    minDate &&
-    utils.isBefore(
-      parsedValue,
-      getComparisonMinDate(utils, !!strictCompareDates, utils.date(minDate))
-    )
-  ) {
-    return minDateMessage;
-  }
-  if (
-    disablePast &&
-    utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date()))
-  ) {
-    return minDateMessage;
-  }
-
-  return '';
-};
-
-export function pick12hOr24hFormat(
-  userFormat: string | undefined,
-  ampm: boolean | undefined = true,
-  formats: { '12h': string; '24h': string }
-) {
-  if (userFormat) {
-    return userFormat;
-  }
-
-  return ampm ? formats['12h'] : formats['24h'];
-}
-
-export function makeMaskFromFormat(format: string, numberMaskChar: string) {
-  return format.replace(/[a-z]/gi, numberMaskChar);
-}
-
-export const maskedDateFormatter = (mask: string, numberMaskChar: string) => (
-  value: string,
-  oldValue: string,
-  currentCaretPosition?: number
-) => {
-  const refuse = /[^\d\w_]+/gi;
-
-  if (!value || value === '') {
-    return value;
-  }
-
-  if (!oldValue) {
-    oldValue = '';
-  }
-
-  if (value == oldValue) {
-    return value;
-  }
-
-  if (value.length < oldValue.length && currentCaretPosition != null) {
-    value =
-      value.slice(0, currentCaretPosition) +
-      '_' +
-      value.slice(currentCaretPosition, oldValue.length);
-  }
-
-  let refusedOldValue = oldValue.replace(refuse, '');
-  let refusedNewValue = value.replace(refuse, '');
-  let refusedMaskSymbols = mask.replace(refuse, '');
-
-  const minLength =
-    refusedOldValue.length > refusedNewValue.length
-      ? refusedNewValue.length
-      : refusedOldValue.length;
-
-  let startPos = 0;
-  let endPosShift = 0;
-  while (startPos < minLength) {
-    if (refusedNewValue[startPos] == refusedOldValue[startPos]) {
-      startPos++;
-    } else {
-      break;
-    }
-  }
-
-  while (
-    endPosShift < minLength &&
-    startPos < refusedNewValue.length - endPosShift &&
-    startPos < refusedOldValue.length - endPosShift
-  ) {
-    if (
-      refusedNewValue[refusedNewValue.length - endPosShift - 1] ==
-      refusedOldValue[refusedOldValue.length - endPosShift - 1]
-    ) {
-      endPosShift++;
-    } else {
-      break;
-    }
-  }
-
-  let endStartPos = refusedNewValue.length - endPosShift;
-  endStartPos = endStartPos < startPos ? startPos : endStartPos;
-
-  let firstPart = refusedNewValue.slice(0, startPos);
-  let addedPart = refusedNewValue.slice(startPos, endStartPos);
-  let endPart = refusedNewValue.slice(endStartPos, refusedNewValue.length);
-
-  let maxSymbolsInEnd = refusedMaskSymbols.length - firstPart.length - addedPart.length;
-  while (maxSymbolsInEnd > endPart.length) {
-    addedPart += numberMaskChar;
-    maxSymbolsInEnd--;
-  }
-  let entireRefusedString =
-    firstPart + addedPart + endPart.slice(endPart.length - maxSymbolsInEnd, endPart.length);
-
-  // Do nothing ?...
-  entireRefusedString = entireRefusedString.slice(0, refusedMaskSymbols.length);
-
-  let i = 0;
-  let n = 0;
-  let result = '';
-  while (i < mask.length) {
-    const maskChar = mask[i];
-    if (maskChar === numberMaskChar && n < entireRefusedString.length) {
-      const parsedChar = entireRefusedString[n];
-      result += parsedChar;
-      n += 1;
-    } else {
-      result += maskChar;
-    }
-    i += 1;
-  }
-
-  return result;
-};

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,161 +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 { 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';
-import { useState } from 'react';
-import { Rifm } from '../Rifm/Rifm';
-
-export interface KeyboardDateInputProps
-  extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
-  format: string;
-  onChange: (value: string | null) => void;
-  onBlur?: () => 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;
-  /**
-   * Show errors only when input blur
-   */
-  showErrorOnBlur?: boolean;
-}
-
-const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps> = ({
-  inputValue,
-  showErrorOnBlur = false,
-  inputVariant,
-  validationError,
-  KeyboardButtonProps,
-  InputAdornmentProps,
-  onClick,
-  onChange,
-  onBlur,
-  onFocus,
-  InputProps,
-  mask,
-  maskChar = '_',
-  refuse = /[^\d_]+/gi,
-  format,
-  keyboardIcon,
-  disabled,
-  rifmFormatter,
-  TextFieldComponent = TextField,
-  ...other
-}) => {
-  const inputMask = mask || makeMaskFromFormat(format, maskChar);
-  const letterPosition = format.indexOf('a');
-  // prettier-ignore
-  const formatter = React.useCallback(
-    maskedDateFormatter(inputMask, maskChar),
-    [mask, maskChar]
-  );
-
-  const position =
-    InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
-
-  const handleChange = (text: string) => {
-    const finalString = text === '' || text === inputMask ? null : text;
-    onChange(finalString);
-  };
-
-  const replace = (text: string): string => {
-    return text;
-  };
-
-  const [showErrorFlag, handleBlur] = useState(showErrorOnBlur ? true : false);
-
-  return (
-    <Rifm
-      value={inputValue}
-      onChange={handleChange}
-      format={rifmFormatter || formatter}
-      replace={replace}
-      mask={true}
-      maskChar={maskChar}
-      letterPosition={letterPosition}
-    >
-      {({ onChange, value }) => (
-        <TextFieldComponent
-          disabled={disabled}
-          error={Boolean(validationError) && !showErrorFlag}
-          helperText={!showErrorFlag && validationError}
-          {...other}
-          value={value}
-          onChange={onChange}
-          // onInput={changeInputStringValue}
-          // onKeyUp={handleKeyUp}
-          // onMouseUp={handleClick}
-          onBlur={() => {
-            if (onBlur) {
-              onBlur();
-            }
-            if (showErrorOnBlur) {              
-              handleBlur(false);
-            }
-          }}
-          onFocus={(ev: any) => {
-            if (onFocus) {
-              onFocus(ev);
-            }
-            if (showErrorOnBlur) {
-              handleBlur(true);
-            }
-          }}
-          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';