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

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;

package/src/_shared/ModalDialog.tsx

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

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

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