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

package/src/Picker/WrappedKeyboardPicker.tsx

@@ -1,136 +0,0 @@
-import * as React from 'react';
-import KeyboardDateInput, { KeyboardDateInputProps } from '../_shared/KeyboardDateInput';
-import { Picker, ToolbarComponentProps } from './Picker';
-import { ExtendWrapper, Wrapper } from '../wrappers/Wrapper';
-import { StateHookOptions } from '../_shared/hooks/usePickerState';
-import { DateValidationProps } from '../_helpers/text-field-helper';
-import {
-  BaseKeyboardPickerProps,
-  useKeyboardPickerState,
-} from '../_shared/hooks/useKeyboardPickerState';
-
-export type WrappedKeyboardPickerProps = DateValidationProps &
-  BaseKeyboardPickerProps &
-  ExtendWrapper<KeyboardDateInputProps>;
-
-export interface MakePickerOptions<T> {
-  useOptions: (props: any) => StateHookOptions;
-  getCustomProps?: (props: T) => Partial<T>;
-  DefaultToolbarComponent: React.ComponentType<ToolbarComponentProps>;
-}
-
-// Mostly duplicate of ./WrappedPurePicker.tsx to enable tree-shaking of keyboard logic
-// TODO investigate how to reduce duplications
-export function makeKeyboardPicker<T extends any>({
-  useOptions,
-  getCustomProps,
-  DefaultToolbarComponent,
-}: MakePickerOptions<WrappedKeyboardPickerProps & T>): React.FC<WrappedKeyboardPickerProps & T> {
-  function WrappedKeyboardPicker(props: WrappedKeyboardPickerProps & T) {
-    const {
-      allowKeyboardControl,
-      ampm,
-      hideTabs,
-      animateYearScrolling,
-      autoOk,
-      disableFuture,
-      disablePast,
-      format,
-      forwardedRef,
-      initialFocusedDate,
-      invalidDateMessage,
-      labelFunc,
-      leftArrowIcon,
-      leftArrowButtonProps,
-      maxDate,
-      maxDateMessage,
-      minDate,
-      onOpen,
-      onClose,
-      minDateMessage,
-      strictCompareDates,
-      minutesStep,
-      onAccept,
-      onChange,
-      onMonthChange,
-      onYearChange,
-      renderDay,
-      views,
-      openTo,
-      rightArrowIcon,
-      rightArrowButtonProps,
-      shouldDisableDate,
-      value,
-      dateRangeIcon,
-      emptyLabel,
-      invalidLabel,
-      timeIcon,
-      orientation,
-      variant,
-      disableToolbar,
-      loadingIndicator,
-      showActionsBar,
-      showTodayButton,
-      todayLabel,
-      ToolbarComponent = DefaultToolbarComponent,
-      showShiftButtons,
-      setShiftFunction,
-      shiftButtonValues,
-      ...other
-    } = props;
-
-    const injectedProps = getCustomProps ? getCustomProps(props) : {};
-
-    const options = useOptions(props);
-    const { pickerProps, inputProps, wrapperProps } = useKeyboardPickerState(props, options);
-
-    return (
-      <Wrapper
-        variant={variant}
-        InputComponent={KeyboardDateInput}
-        DateInputProps={inputProps}
-        {...injectedProps}
-        {...wrapperProps}
-        {...other}
-      >
-        <Picker
-          {...pickerProps}
-          ToolbarComponent={ToolbarComponent}
-          disableToolbar={disableToolbar}
-          hideTabs={hideTabs}
-          orientation={orientation}
-          showActionsBar={showActionsBar}
-          showTodayButton={showTodayButton}
-          todayLabel={todayLabel}
-          ampm={ampm}
-          views={views}
-          openTo={openTo}
-          allowKeyboardControl={allowKeyboardControl}
-          minutesStep={minutesStep}
-          animateYearScrolling={animateYearScrolling}
-          disableFuture={disableFuture}
-          disablePast={disablePast}
-          leftArrowIcon={leftArrowIcon}
-          leftArrowButtonProps={leftArrowButtonProps}
-          maxDate={maxDate}
-          minDate={minDate}
-          strictCompareDates={strictCompareDates}
-          onMonthChange={onMonthChange}
-          onYearChange={onYearChange}
-          renderDay={renderDay}
-          dateRangeIcon={dateRangeIcon}
-          timeIcon={timeIcon}
-          rightArrowIcon={rightArrowIcon}
-          rightArrowButtonProps={rightArrowButtonProps}
-          shouldDisableDate={shouldDisableDate}
-          loadingIndicator={loadingIndicator}
-          showShiftButtons={showShiftButtons}
-          setShiftFunction={setShiftFunction}
-          shiftButtonValues={shiftButtonValues}
-        />
-      </Wrapper>
-    );
-  }
-
-  return WrappedKeyboardPicker;
-}

package/src/Picker/WrappedPurePicker.tsx

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { Picker } from './Picker';
-import { BasePickerProps } from '../typings/BasePicker';
-import { MakePickerOptions } from './WrappedKeyboardPicker';
-import { ExtendWrapper, Wrapper } from '../wrappers/Wrapper';
-import { usePickerState } from '../_shared/hooks/usePickerState';
-import { DateValidationProps } from '../_helpers/text-field-helper';
-import { PureDateInput, PureDateInputProps } from '../_shared/PureDateInput';
-
-export type WrappedPurePickerProps = DateValidationProps &
-  BasePickerProps &
-  ExtendWrapper<PureDateInputProps>;
-
-export function makePurePicker<T extends any>({
-  useOptions,
-  getCustomProps,
-  DefaultToolbarComponent,
-}: MakePickerOptions<WrappedPurePickerProps & T>): React.FC<WrappedPurePickerProps & T> {
-  function WrappedPurePicker(props: WrappedPurePickerProps & T) {
-    const {
-      allowKeyboardControl,
-      ampm,
-      hideTabs,
-      animateYearScrolling,
-      autoOk,
-      disableFuture,
-      disablePast,
-      format,
-      forwardedRef,
-      initialFocusedDate,
-      invalidDateMessage,
-      labelFunc,
-      leftArrowIcon,
-      leftArrowButtonProps,
-      maxDate,
-      maxDateMessage,
-      minDate,
-      onOpen,
-      onClose,
-      minDateMessage,
-      strictCompareDates,
-      minutesStep,
-      onAccept,
-      onChange,
-      onMonthChange,
-      onYearChange,
-      renderDay,
-      views,
-      openTo,
-      rightArrowIcon,
-      rightArrowButtonProps,
-      shouldDisableDate,
-      dateRangeIcon,
-      emptyLabel,
-      invalidLabel,
-      timeIcon,
-      value,
-      variant,
-      orientation,
-      disableToolbar,
-      loadingIndicator,
-      ToolbarComponent = DefaultToolbarComponent,
-      showActionsBar,
-      showTodayButton,
-      todayLabel,
-      showShiftButtons,
-      setShiftFunction,
-      shiftButtonValues,
-      ...other
-    } = props;
-
-    const injectedProps = getCustomProps ? getCustomProps(props) : {};
-
-    const options = useOptions(props);
-    const { pickerProps, inputProps, wrapperProps } = usePickerState(props, options);
-
-    return (
-      <Wrapper
-        variant={variant}
-        InputComponent={PureDateInput}
-        DateInputProps={inputProps}
-        showTodayButton={showTodayButton}
-        todayLabel={todayLabel}
-        {...wrapperProps}
-        {...injectedProps}
-        {...other}
-      >
-        <Picker
-          {...pickerProps}
-          orientation={orientation}
-          disableToolbar={disableToolbar}
-          ToolbarComponent={ToolbarComponent}
-          hideTabs={hideTabs}
-          ampm={ampm}
-          views={views}
-          openTo={openTo}
-          allowKeyboardControl={allowKeyboardControl}
-          minutesStep={minutesStep}
-          animateYearScrolling={animateYearScrolling}
-          disableFuture={disableFuture}
-          disablePast={disablePast}
-          leftArrowIcon={leftArrowIcon}
-          leftArrowButtonProps={leftArrowButtonProps}
-          maxDate={maxDate}
-          minDate={minDate}
-          strictCompareDates={strictCompareDates}
-          onMonthChange={onMonthChange}
-          onYearChange={onYearChange}
-          renderDay={renderDay}
-          dateRangeIcon={dateRangeIcon}
-          timeIcon={timeIcon}
-          rightArrowIcon={rightArrowIcon}
-          rightArrowButtonProps={rightArrowButtonProps}
-          shouldDisableDate={shouldDisableDate}
-          loadingIndicator={loadingIndicator}
-          showActionsBar={showActionsBar}
-          showTodayButton={showTodayButton}
-          todayLabel={todayLabel}
-          showShiftButtons={showShiftButtons}
-          setShiftFunction={setShiftFunction}
-          shiftButtonValues={shiftButtonValues}
-        />
-      </Wrapper>
-    );
-  }
-
-  return WrappedPurePicker;
-}

package/src/Rifm/Rifm.ts

@@ -1,213 +0,0 @@
-import * as React from 'react';
-
-type Props = {
-  value: string;
-  maskChar: string;
-  onChange: (value: string) => void;
-  format: (str: string, oldValue: string, currentCaretPosition?: number) => string;
-  mask?: boolean;
-  replace?: (value: string) => string;
-  accept?: RegExp;
-  letterPosition?: number;
-  children: (value: {
-    value: string;
-    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-  }) => any;
-};
-
-export const Rifm = (props: Props) => {
-  const [, refresh] = React.useReducer(c => c + 1, 0);
-  const valueRef = React.useRef<any>(null);
-  const { replace, maskChar } = props;
-  const [previousValue, setPreviousValue] = React.useState({ value: '' });
-  const userValue = replace
-    ? replace(props.format(props.value, previousValue.value))
-    : props.format(props.value, previousValue.value);
-
-  const currentPreviousValue = previousValue.value;
-
-  // state of delete button see comments below about inputType support
-  const isDeleleteButtonDownRef = React.useRef(false);
-
-  const onChange = (evt: any) => {
-    const eventValue = evt.target.value;
-    const selectionStart = evt.target.selectionStart;
-
-    valueRef.current = [
-      eventValue, // eventValue
-      evt.target, // input
-      eventValue.length > userValue.length, // isSizeIncreaseOperation
-      isDeleleteButtonDownRef.current, // isDeleleteButtonDown
-      selectionStart, // selectionStart
-      userValue === props.format(eventValue, currentPreviousValue, selectionStart), // isNoOperation
-    ];
-
-    // The main trick is to update underlying input with non formatted value (= eventValue)
-    // that allows us to calculate right cursor position after formatting (see getCursorPosition)
-    // then we format new value and call props.onChange with masked/formatted value
-    // and finally we are able to set cursor position into right place
-    refresh(null);
-  };
-
-  // React prints warn on server in non production mode about useLayoutEffect usage
-  // in both cases it's noop
-  if (typeof window !== 'undefined') {
-    React.useLayoutEffect(() => {
-      if (valueRef.current == null) return;
-
-      let [
-        eventValue,
-        input,
-        isSizeIncreaseOperation,
-        isDeleleteButtonDown,
-        selectionStart,
-        // No operation means that value itself hasn't been changed, BTW cursor, selection etc can be changed
-        isNoOperation,
-      ] = valueRef.current;
-      valueRef.current = null;
-
-      // this usually occurs on deleting special symbols like ' here 123'123.00
-      // in case of isDeleleteButtonDown cursor should move differently vs backspace
-      const deleteWasNoOp = isDeleleteButtonDown && isNoOperation;
-
-      // Create string from only accepted symbols
-      const clean = (str: string) => (str.match(props.accept || /\d|\w/g) || []).join('');
-
-      const valueBeforeSelectionStart = clean(eventValue.substr(0, input.selectionStart));
-
-      // trying to find cursor position in formatted value having knowledge about valueBeforeSelectionStart
-      // This works because we assume that format doesn't change the order of accepted symbols.
-      // Imagine we have formatter which adds ' symbol between numbers, and by default we refuse all non numeric symbols
-      // for example we had input = 1'2|'4 (| means cursor position) then user entered '3' symbol
-      // inputValue = 1'23'|4 so valueBeforeSelectionStart = 123 and formatted value = 1'2'3'4
-      // calling getCursorPosition("1'2'3'4") will give us position after 3, 1'2'3|'4
-      // so for formatting just this function to determine cursor position after formatting is enough
-      // with masking we need to do some additional checks see `mask` below
-      const getCursorPosition = (val: any) => {
-        let start = 0;
-        let cleanPos = 0;
-
-        for (let i = 0; i !== valueBeforeSelectionStart.length; ++i) {
-          let newPos = val.indexOf(valueBeforeSelectionStart[i], start) + 1;
-
-          let newCleanPos = clean(val).indexOf(valueBeforeSelectionStart[i], cleanPos) + 1;
-
-          // this skips position change if accepted symbols order was broken
-          // For example fixes edge case with fixed point numbers:
-          // You have '0|.00', then press 1, it becomes 01|.00 and after format 1.00, this breaks our assumption
-          // that order of accepted symbols is not changed after format,
-          // so here we don't update start position if other accepted symbols was inbetween current and new position
-          if (newCleanPos - cleanPos > 1) {
-            newPos = start;
-            newCleanPos = cleanPos;
-          }
-
-          cleanPos = Math.max(newCleanPos, cleanPos);
-          start = Math.max(start, newPos);
-        }
-        return start;
-      };
-
-      //let start = getCursorPosition(eventValue);
-
-      //   // Masking part, for masks if size of mask is above some value
-      //   // we need to replace symbols instead of do nothing as like in format
-      //   if (props.mask === true && isSizeIncreaseOperation && !isNoOperation) {
-      //     const c = clean(eventValue.substr(start))[0];
-      //     start = eventValue.indexOf(c, start);
-
-      //     eventValue = `${eventValue.substr(0, start)}${eventValue.substr(
-      //       start + 1
-      //     )}`;
-      //   }
-
-      const formattedValue = props.format(eventValue, currentPreviousValue, selectionStart);
-      let replacedValue = replace ? replace(formattedValue) : formattedValue;
-
-      let start = getCursorPosition(formattedValue);
-      let inputCharPosition = start - 1;
-      if (inputCharPosition > -1) {
-        if (
-          props.letterPosition &&
-          props.letterPosition > -1 &&
-          replacedValue[inputCharPosition].match(/[a-zA-Z]/) &&
-          (inputCharPosition < props.letterPosition || inputCharPosition > props.letterPosition + 1)
-        ) {
-          replacedValue = currentPreviousValue;
-        } else if (
-          props.letterPosition &&
-          props.letterPosition > -1 &&
-          replacedValue[inputCharPosition].match(/\d/) &&
-          (inputCharPosition >= props.letterPosition &&
-            inputCharPosition <= props.letterPosition + 1)
-        ) {
-          replacedValue = currentPreviousValue;
-        }
-      }
-
-      if (userValue === replacedValue) {
-        // if nothing changed for formatted value, just refresh so userValue will be used at render
-        refresh(null);
-      } else {
-        props.onChange(replacedValue);
-      }
-
-      return () => {
-        // Visually improves working with masked values,
-        // like cursor jumping over refused symbols
-        // as an example date mask: was "5|1-24-3" then user pressed "6"
-        // it becomes "56-|12-43" with this code, and "56|-12-43" without
-        if (
-          props.mask != null &&
-          (isSizeIncreaseOperation || (isDeleleteButtonDown && !deleteWasNoOp))
-        ) {
-          while (
-            formattedValue[start] &&
-            clean(formattedValue[start]) === '' &&
-            formattedValue[start] != maskChar
-          ) {
-            start += 1;
-          }
-        }
-
-        //input.selectionStart = input.selectionEnd = start + (deleteWasNoOp ? 1 : 0);
-      };
-    });
-  }
-
-  React.useEffect(() => {
-    // until https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/inputType will be supported
-    // by all major browsers (now supported by: +chrome, +safari, ?edge, !firefox)
-    // there is no way I found to distinguish in onChange
-    // backspace or delete was called in some situations
-    // firefox track https://bugzilla.mozilla.org/show_bug.cgi?id=1447239
-    const handleKeyDown = (evt: KeyboardEvent) => {
-      if (evt.code === 'Delete') {
-        isDeleleteButtonDownRef.current = true;
-      }
-    };
-
-    const handleKeyUp = (evt: KeyboardEvent) => {
-      if (evt.code === 'Delete') {
-        isDeleleteButtonDownRef.current = false;
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('keyup', handleKeyUp);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('keyup', handleKeyUp);
-    };
-  }, []);
-
-  let value = valueRef.current != null ? valueRef.current[0] : userValue;
-  //   value = props.format(value, currentPreviousValue);
-  previousValue.value = value;
-
-  return props.children({
-    value: value,
-    onChange,
-  });
-};

package/src/TimePicker/TimePicker.tsx

@@ -1,67 +0,0 @@
-import TimePickerToolbar from './TimePickerToolbar';
-import { useUtils } from '../_shared/hooks/useUtils';
-import { timePickerDefaultProps } from '../constants/prop-types';
-import { pick12hOr24hFormat } from '../_helpers/text-field-helper';
-import { WrappedPurePickerProps, makePurePicker } from '../Picker/WrappedPurePicker';
-import { makeKeyboardPicker, WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';
-
-type TimePickerView = 'hours' | 'minutes' | 'seconds';
-
-export interface BaseTimePickerProps {
-  /**
-   * 12h/24h view for hour selection clock
-   * @default true
-   */
-  ampm?: boolean;
-  /**
-   * Step over minutes
-   * @default 1
-   */
-  minutesStep?: number;
-}
-
-export interface TimePickerViewsProps extends BaseTimePickerProps {
-  /** Array of views to show */
-  views?: ('hours' | 'minutes' | 'seconds')[];
-  /** Open to timepicker */
-  openTo?: 'hours' | 'minutes' | 'seconds';
-}
-
-export type TimePickerProps = WrappedPurePickerProps & TimePickerViewsProps;
-
-export type KeyboardTimePickerProps = WrappedKeyboardPickerProps & TimePickerViewsProps;
-
-const defaultProps = {
-  ...timePickerDefaultProps,
-  openTo: 'hours' as TimePickerView,
-  views: ['hours', 'minutes'] as TimePickerView[],
-};
-
-function useOptions(props: TimePickerProps | KeyboardTimePickerProps) {
-  const utils = useUtils();
-
-  return {
-    getDefaultFormat: () =>
-      pick12hOr24hFormat(props.format, props.ampm, {
-        '12h': utils.time12hFormat,
-        '24h': utils.time24hFormat,
-      }),
-  };
-}
-
-export const TimePicker = makePurePicker<TimePickerViewsProps>({
-  useOptions,
-  DefaultToolbarComponent: TimePickerToolbar,
-});
-
-export const KeyboardTimePicker = makeKeyboardPicker<TimePickerViewsProps>({
-  useOptions,
-  DefaultToolbarComponent: TimePickerToolbar,
-  getCustomProps: props => ({
-    refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi,
-  }),
-});
-
-TimePicker.defaultProps = defaultProps;
-
-KeyboardTimePicker.defaultProps = defaultProps;