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

package/src/Rifm/Rifm.ts

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

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

package/src/TimePicker/TimePickerToolbar.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import ClockType from '../constants/ClockType';
+import ToolbarText from '../_shared/ToolbarText';
+import ToolbarButton from '../_shared/ToolbarButton';
+import PickerToolbar from '../_shared/PickerToolbar';
+import { arrayIncludes } from '../_helpers/utils';
+import { useUtils } from '../_shared/hooks/useUtils';
+import { MaterialUiPickersDate } from '../typings/date';
+import { ToolbarComponentProps } from '../Picker/Picker';
+import { useTheme, makeStyles } from '@material-ui/core/styles';
+import { convertToMeridiem, getMeridiem } from '../_helpers/time-utils';
+
+export const useStyles = makeStyles(
+  {
+    toolbarLandscape: {
+      flexWrap: 'wrap',
+    },
+    toolbarAmpmLeftPadding: {
+      paddingLeft: 50,
+    },
+    separator: {
+      margin: '0 4px 0 2px',
+      cursor: 'default',
+    },
+    hourMinuteLabel: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-end',
+    },
+    hourMinuteLabelLandscape: {
+      marginTop: 'auto',
+    },
+    hourMinuteLabelReverse: {
+      flexDirection: 'row-reverse',
+    },
+    ampmSelection: {
+      marginLeft: 20,
+      marginRight: -20,
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    ampmLandscape: {
+      margin: '4px 0 auto',
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      flexBasis: '100%',
+    },
+    ampmSelectionWithSeconds: {
+      marginLeft: 15,
+      marginRight: 10,
+    },
+    ampmLabel: {
+      fontSize: 18,
+    },
+  },
+  { name: 'MuiPickersTimePickerToolbar' }
+);
+
+export function useMeridiemMode(
+  date: MaterialUiPickersDate,
+  ampm: boolean | undefined,
+  onChange: (date: MaterialUiPickersDate, isFinished?: boolean | undefined) => void
+) {
+  const utils = useUtils();
+  const meridiemMode = getMeridiem(date, utils);
+
+  const handleMeridiemChange = React.useCallback(
+    (mode: 'am' | 'pm') => {
+      const timeWithMeridiem = convertToMeridiem(date, mode, Boolean(ampm), utils);
+      onChange(timeWithMeridiem, false);
+    },
+    [ampm, date, onChange, utils]
+  );
+
+  return { meridiemMode, handleMeridiemChange };
+}
+
+const TimePickerToolbar: React.FC<ToolbarComponentProps> = ({
+  date,
+  views,
+  ampm,
+  openView,
+  onChange,
+  isLandscape,
+  setOpenView,
+}) => {
+  const utils = useUtils();
+  const theme = useTheme();
+  const classes = useStyles();
+  const { meridiemMode, handleMeridiemChange } = useMeridiemMode(date, ampm, onChange);
+
+  const clockTypographyVariant = isLandscape ? 'h3' : 'h2';
+
+  return (
+    <PickerToolbar
+      isLandscape={isLandscape}
+      className={clsx({
+        [classes.toolbarLandscape]: isLandscape,
+        [classes.toolbarAmpmLeftPadding]: ampm && !isLandscape,
+      })}
+    >
+      <div
+        className={clsx(classes.hourMinuteLabel, {
+          [classes.hourMinuteLabelLandscape]: isLandscape,
+          [classes.hourMinuteLabelReverse]: theme.direction === 'rtl',
+        })}
+      >
+        {arrayIncludes(views, 'hours') && (
+          <ToolbarButton
+            variant={clockTypographyVariant}
+            onClick={() => setOpenView(ClockType.HOURS)}
+            selected={openView === ClockType.HOURS}
+            label={utils.getHourText(date, Boolean(ampm))}
+          />
+        )}
+
+        {arrayIncludes(views, ['hours', 'minutes']) && (
+          <ToolbarText
+            label=":"
+            variant={clockTypographyVariant}
+            selected={false}
+            className={classes.separator}
+          />
+        )}
+
+        {arrayIncludes(views, 'minutes') && (
+          <ToolbarButton
+            variant={clockTypographyVariant}
+            onClick={() => setOpenView(ClockType.MINUTES)}
+            selected={openView === ClockType.MINUTES}
+            label={utils.getMinuteText(date)}
+          />
+        )}
+
+        {arrayIncludes(views, ['minutes', 'seconds']) && (
+          <ToolbarText variant="h2" label=":" selected={false} className={classes.separator} />
+        )}
+
+        {arrayIncludes(views, 'seconds') && (
+          <ToolbarButton
+            variant="h2"
+            onClick={() => setOpenView(ClockType.SECONDS)}
+            selected={openView === ClockType.SECONDS}
+            label={utils.getSecondText(date)}
+          />
+        )}
+      </div>
+
+      {ampm && (
+        <div
+          className={clsx(classes.ampmSelection, {
+            [classes.ampmLandscape]: isLandscape,
+            [classes.ampmSelectionWithSeconds]: arrayIncludes(views, 'seconds'),
+          })}
+        >
+          <ToolbarButton
+            disableRipple
+            variant="subtitle1"
+            selected={meridiemMode === 'am'}
+            typographyClassName={classes.ampmLabel}
+            label={utils.getMeridiemText('am')}
+            onClick={() => handleMeridiemChange('am')}
+          />
+
+          <ToolbarButton
+            disableRipple
+            variant="subtitle1"
+            selected={meridiemMode === 'pm'}
+            typographyClassName={classes.ampmLabel}
+            label={utils.getMeridiemText('pm')}
+            onClick={() => handleMeridiemChange('pm')}
+          />
+        </div>
+      )}
+    </PickerToolbar>
+  );
+};
+
+export default TimePickerToolbar;

package/src/TimePicker/index.tsx

@@ -0,0 +1,7 @@
+import { KeyboardTimePickerProps, TimePickerProps } from './TimePicker';
+
+export type TimePickerProps = TimePickerProps;
+
+export type KeyboardTimePickerProps = KeyboardTimePickerProps;
+
+export { KeyboardTimePicker, TimePicker } from './TimePicker';

package/src/__tests__/DatePicker/Calendar.test.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { ShallowWrapper } from 'enzyme';
+import { shallowRender, utilsToUse } from '../test-utils';
+import { Calendar, CalendarProps } from '../../views/Calendar/Calendar';
+
+describe('Calendar', () => {
+  let component: ShallowWrapper<CalendarProps>;
+  const onChangeMock = jest.fn();
+  const onMonthChangeMock = jest.fn();
+
+  beforeEach(() => {
+    component = shallowRender(props => (
+      <Calendar
+        date={utilsToUse.date('01-01-2017')}
+        onMonthChange={onMonthChangeMock}
+        onChange={onChangeMock}
+        {...props}
+      />
+    ));
+  });
+
+  it('Should swipe between month', () => {
+    component.find('CalendarHeader').prop<any>('onMonthChange')(utilsToUse.date());
+    expect(onMonthChangeMock).toHaveBeenCalled();
+  });
+});
+
+describe('Calendar - disabled selected date on mount', () => {
+  let component: ShallowWrapper<any, any, any>;
+
+  beforeEach(() => {
+    component = shallowRender(props => (
+      <Calendar
+        date={utilsToUse.date('01-01-2017')}
+        minDate={new Date('01-01-2018')}
+        onChange={jest.fn()}
+        utils={utilsToUse}
+        {...props}
+      />
+    ));
+  });
+
+  it('Should dispatch onDateSelect with isFinish = false on mount', () => {
+    const { onChange } = component.instance().props;
+    if (process.env.UTILS === 'moment') {
+      return expect(onChange).toHaveBeenCalled();
+    }
+
+    expect(onChange).toHaveBeenCalledWith(utilsToUse.date('01-01-2018'), false);
+  });
+});

package/src/__tests__/DatePicker/Month.test.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ShallowWrapper } from 'enzyme';
+import { shallow, utilsToUse } from '../test-utils';
+import { Month, MonthProps } from '../../views/Month/Month';
+
+describe('Month', () => {
+  let component: ShallowWrapper<MonthProps>;
+
+  beforeEach(() => {
+    component = shallow(
+      <Month value={utilsToUse.date('01-01-2017')} onSelect={jest.fn()}>
+        Oct
+      </Month>
+    );
+  });
+
+  it('Should render', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+describe('Month - disabled state', () => {
+  let component: ShallowWrapper<MonthProps>;
+
+  beforeEach(() => {
+    component = shallow(
+      <Month disabled value={utilsToUse.date('01-01-2017')} onSelect={jest.fn()}>
+        Oct
+      </Month>
+    );
+  });
+
+  it('Should render in disabled state', () => {
+    expect(component.prop('tabIndex')).toBe(-1);
+  });
+});

package/src/__tests__/DatePicker/MonthSelection.test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Month from '../../views/Month/Month';
+import { ReactWrapper } from 'enzyme';
+import { mount, utilsToUse } from '../test-utils';
+import { MonthSelection, MonthSelectionProps } from '../../views/Month/MonthView';
+
+describe('MonthSelection', () => {
+  let component: ReactWrapper<MonthSelectionProps>;
+
+  beforeEach(() => {
+    component = mount(
+      <MonthSelection
+        minDate={new Date('03-01-2017')}
+        maxDate={new Date('05-01-2017')}
+        date={utilsToUse.date('04-01-2017')}
+        onChange={jest.fn()}
+      />
+    );
+  });
+
+  it('Should render disabled months before min date and after max date', () => {
+    expect(component.find(Month).map(month => month.prop('disabled'))).toEqual([
+      true,
+      true,
+      false,
+      false,
+      false,
+      true,
+      true,
+      true,
+      true,
+      true,
+      true,
+      true,
+    ]);
+  });
+});

package/src/__tests__/MuiPickersUtilsProvider.test.tsx

@@ -0,0 +1,21 @@
+// required to use just shallow here because utils prop override
+import * as React from 'react';
+import DateFnsUtils from '@date-io/date-fns';
+import MuiPickersUtilsProvider, { MuiPickersUtilsProviderProps } from '../MuiPickersUtilsProvider';
+import { shallow, ShallowWrapper } from 'enzyme'; // required to use just shallow here because utils prop override
+
+describe('MuiPickersUtilsProvider', () => {
+  let component: ShallowWrapper<MuiPickersUtilsProviderProps>;
+
+  beforeEach(() => {
+    component = shallow(
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <div />
+      </MuiPickersUtilsProvider>
+    );
+  });
+
+  it('Should render context provider', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/__tests__/TimePicker/Clock.test.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ShallowWrapper } from 'enzyme';
+import { shallow } from '../test-utils';
+import { Clock, ClockProps } from '../../views/Clock/Clock';
+
+const mouseClockEvent = {
+  preventDefault: jest.fn(),
+  stopPropagation: jest.fn(),
+  buttons: 1,
+  nativeEvent: {
+    offsetX: 10,
+    offsetY: 25,
+  },
+};
+
+describe('Clock', () => {
+  let component: ShallowWrapper<ClockProps>;
+  const onChangeMock = jest.fn();
+
+  beforeEach(() => {
+    onChangeMock.mockReset();
+    component = shallow(
+      <Clock
+        type="minutes"
+        onChange={onChangeMock}
+        classes={{} as any}
+        value={12}
+        children={[<div key="foo">foo</div>]}
+      />
+    );
+  });
+
+  it('Should renders', () => {
+    // console.log(component.debug());
+    expect(component).toBeTruthy();
+  });
+
+  it('Should set time on mouse move with click', () => {
+    component.find('[role="menu"]').simulate('mouseMove', mouseClockEvent);
+
+    expect(onChangeMock).toHaveBeenCalledWith(52, false);
+  });
+
+  it('Should set isMoving = false on mouse up', () => {
+    (component.instance() as Clock).isMoving = true;
+    component.find('[role="menu"]').simulate('mouseUp', mouseClockEvent);
+
+    expect((component.instance() as Clock).isMoving).toBeFalsy();
+  });
+
+  it('Should set time on touch move', () => {
+    component.find('[role="menu"]').simulate('touchMove', {
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+      changedTouches: [{ clientX: 10, clientY: 15 }],
+      target: {
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+      },
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith(52, false);
+  });
+
+  it('Should set isMoving = false on touch end', () => {
+    component.find('[role="menu"]').simulate('touchEnd');
+    expect((component.instance() as Clock).isMoving).toBeFalsy();
+  });
+});