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

package/src/__tests__/test-utils.tsx

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

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

package/src/_helpers/date-utils.ts

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

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

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

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

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