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

package/src/__tests__/test-utils.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import * as enzyme from 'enzyme';
-import LuxonUtils from '@date-io/luxon';
-import MomentUtils from '@date-io/moment';
-import DateFnsUtils from '@date-io/date-fns';
-import MuiPickersUtilsProvider from '../MuiPickersUtilsProvider';
-import { WithUtilsProps } from '../_shared/WithUtils';
-
-const getUtilClass = () => {
-  switch (process.env.UTILS) {
-    case 'moment':
-      return MomentUtils;
-    case 'date-fns':
-      return DateFnsUtils;
-    case 'luxon':
-      return LuxonUtils;
-    default:
-      return DateFnsUtils;
-  }
-};
-
-export const UtilClassToUse: any = getUtilClass();
-export const utilsToUse = new UtilClassToUse();
-
-const getComponentWithUtils = <P extends WithUtilsProps>(element: React.ReactElement<P>) =>
-  React.cloneElement(element, { utils: utilsToUse } as any);
-
-export const shallow = <P extends WithUtilsProps>(element: React.ReactElement<P>) =>
-  enzyme.shallow(getComponentWithUtils(element));
-
-export const mount = <P extends WithUtilsProps>(element: React.ReactElement<P>) =>
-  enzyme.mount(<MuiPickersUtilsProvider utils={UtilClassToUse}>{element}</MuiPickersUtilsProvider>);
-
-export const shallowRender = (render: (props: any) => React.ReactElement<any>) => {
-  return enzyme.shallow(render({ utils: utilsToUse, classes: {} as any, theme: {} as any }));
-};
-
-// toHaveBeenCalledWith doesn't work with moment because of changing some internal props
-export const toHaveBeenCalledExceptMoment = (mock: jest.Mock<any, any>, params: any[]) => {
-  if (process.env.UTILS === 'moment') {
-    return expect(mock).toHaveBeenCalled();
-  }
-
-  return expect(mock).toHaveBeenCalledWith(...params);
-};

package/src/__tests__/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["./**/*.tsx", "../../typings.d.ts"],
-  "exclude": []
-}

package/src/_helpers/date-utils.ts

@@ -1,92 +0,0 @@
-import { arrayIncludes } from './utils';
-import { IUtils } from '@date-io/core/IUtils';
-import { MaterialUiPickersDate } from '../typings/date';
-import { DatePickerView } from '../DatePicker/DatePicker';
-
-interface FindClosestDateParams {
-  date: MaterialUiPickersDate;
-  utils: IUtils<MaterialUiPickersDate>;
-  minDate: MaterialUiPickersDate;
-  maxDate: MaterialUiPickersDate;
-  disableFuture: boolean;
-  disablePast: boolean;
-  shouldDisableDate: (date: MaterialUiPickersDate) => boolean;
-}
-
-export const findClosestEnabledDate = ({
-  date,
-  utils,
-  minDate,
-  maxDate,
-  disableFuture,
-  disablePast,
-  shouldDisableDate,
-}: FindClosestDateParams) => {
-  const today = utils.startOfDay(utils.date());
-
-  if (disablePast && utils.isBefore(minDate!, today)) {
-    minDate = today;
-  }
-
-  if (disableFuture && utils.isAfter(maxDate, today)) {
-    maxDate = today;
-  }
-
-  let forward = date;
-  let backward = date;
-  if (utils.isBefore(date, minDate)) {
-    forward = utils.date(minDate);
-    backward = null;
-  }
-
-  if (utils.isAfter(date, maxDate)) {
-    if (backward) {
-      backward = utils.date(maxDate);
-    }
-
-    forward = null;
-  }
-
-  while (forward || backward) {
-    if (forward && utils.isAfter(forward, maxDate)) {
-      forward = null;
-    }
-    if (backward && utils.isBefore(backward, minDate)) {
-      backward = null;
-    }
-
-    if (forward) {
-      if (!shouldDisableDate(forward)) {
-        return forward;
-      }
-      forward = utils.addDays(forward, 1);
-    }
-
-    if (backward) {
-      if (!shouldDisableDate(backward)) {
-        return backward;
-      }
-      backward = utils.addDays(backward, -1);
-    }
-  }
-
-  return null;
-};
-
-export const isYearOnlyView = (views: DatePickerView[]) =>
-  views.length === 1 && views[0] === 'year';
-
-export const isYearAndMonthViews = (views: DatePickerView[]) =>
-  views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');
-
-export const getFormatByViews = (views: DatePickerView[], utils: IUtils<MaterialUiPickersDate>) => {
-  if (isYearOnlyView(views)) {
-    return utils.yearFormat;
-  }
-
-  if (isYearAndMonthViews(views)) {
-    return utils.yearMonthFormat;
-  }
-
-  return utils.dateFormat;
-};

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;