@docsvision/material-ui-pickers 3.2.0-beta.3 → 3.2.0-beta.30

package/src/__tests__/e2e/KeyboardDatePicker.test.tsx

@@ -1,140 +0,0 @@
-import * as React from 'react';
-import addDays from 'date-fns/addDays';
-import { ReactWrapper } from 'enzyme';
-import { mount } from '../test-utils';
-import { KeyboardDatePicker, KeyboardDatePickerProps } from '../../DatePicker/DatePicker';
-
-describe('e2e -- DatePicker keyboard input', () => {
-  const onChangeMock = jest.fn();
-  let component: ReactWrapper<KeyboardDatePickerProps>;
-
-  beforeEach(() => {
-    component = mount(
-      <KeyboardDatePicker
-        label="Masked input"
-        placeholder="10/10/2018"
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-        value={new Date('2018-01-01T00:00:00.000Z')}
-        onChange={onChangeMock}
-        InputAdornmentProps={{
-          disableTypography: true,
-        }}
-        InputLabelProps={{
-          htmlFor: 'your-id',
-        }}
-      />
-    );
-  });
-
-  it('Should properly set value on change keyboard', () => {
-    const e = { target: { value: '10/11/2018' } };
-
-    component.find('input').simulate('change', e);
-    expect(component.find('input').prop('value')).toBe('10/11/2018');
-
-    component.find('input').simulate('blur');
-    expect(onChangeMock).toBeCalled();
-  });
-});
-
-describe('e2e -- KeyboardDatePicker validation errors', () => {
-  it('Should render error message if date is unparseable', () => {
-    const component = mount(
-      <KeyboardDatePicker
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-        value={new Date(NaN)}
-        onChange={jest.fn()}
-      />
-    );
-
-    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe('Invalid Date Format');
-  });
-
-  it('Should render error message if date is after disableFuture', () => {
-    const component = mount(
-      <KeyboardDatePicker
-        onChange={jest.fn()}
-        disableFuture
-        value={addDays(new Date(), 2)}
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-      />
-    );
-
-    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
-      'Date should not be after maximal date'
-    );
-  });
-
-  it('Should render error message if date is before disablePast', () => {
-    const component = mount(
-      <KeyboardDatePicker
-        onChange={jest.fn()}
-        disablePast
-        value={addDays(new Date(), -2)}
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-      />
-    );
-
-    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
-      'Date should not be before minimal date'
-    );
-  });
-
-  it('Should not render error message if date is after maxDate without strict comparison', () => {
-    const component = mount(
-      <KeyboardDatePicker
-        onChange={jest.fn()}
-        maxDate={new Date('2018-01-01T00:00:00.000Z')}
-        value={new Date('2018-01-01T01:00:00.000Z')}
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-      />
-    );
-
-    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe('');
-  });
-
-  it('Should render error message if date is after maxDate with strict comparison', () => {
-    const component = mount(
-      <KeyboardDatePicker
-        onChange={jest.fn()}
-        maxDate={new Date('2018-01-01T00:00:00.000Z')}
-        value={new Date('2018-01-01T01:00:00.000Z')}
-        strictCompareDates
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-      />
-    );
-
-    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
-      'Date should not be after maximal date'
-    );
-  });
-
-  it('Should not render error message if date is after minDate without strict comparison', () => {
-    const component = mount(
-      <KeyboardDatePicker
-        onChange={jest.fn()}
-        minDate={new Date('2018-01-01T01:00:00.000Z')}
-        value={new Date('2018-01-01T00:00:00.000Z')}
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-      />
-    );
-
-    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe('');
-  });
-
-  it('Should render error message if date is after minDate with strict comparison', () => {
-    const component = mount(
-      <KeyboardDatePicker
-        onChange={jest.fn()}
-        minDate={new Date('2018-01-01T01:00:00.000Z')}
-        value={new Date('2018-01-01T00:00:00.000Z')}
-        strictCompareDates
-        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
-      />
-    );
-
-    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
-      'Date should not be before minimal date'
-    );
-  });
-});

package/src/__tests__/e2e/KeyboardDateTimePicker.test.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { ReactWrapper } from 'enzyme';
-import { mount, utilsToUse } from '../test-utils';
-import {
-  KeyboardDateTimePicker,
-  KeyboardDateTimePickerProps,
-} from '../../DateTimePicker/DateTimePicker';
-
-const format = process.env.UTILS === 'moment' ? 'MM/DD/YYYY HH:mm' : 'MM/dd/yyyy hh:mm';
-
-describe('e2e - KeyboardDateTimePicker (inline)', () => {
-  let component: ReactWrapper<KeyboardDateTimePickerProps>;
-  const onChangeMock = jest.fn();
-  const onCloseMock = jest.fn();
-  const onOpenMock = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    component = mount(
-      <KeyboardDateTimePicker
-        autoOk
-        variant="inline"
-        inputVariant="outlined"
-        onChange={onChangeMock}
-        onClose={onCloseMock}
-        onOpen={onOpenMock}
-        format={format}
-        KeyboardButtonProps={{ id: 'keyboard-button' }}
-        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
-      />
-    );
-  });
-
-  it('Should renders', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('Should open modal with picker on click', () => {
-    component.find('button#keyboard-button').simulate('click');
-    expect(component.find('WithStyles(ForwardRef(Popover))').props().open).toBeTruthy();
-    expect(onOpenMock).toHaveBeenCalled();
-  });
-
-  it('Should apply keyboard input', () => {
-    component.find('input').simulate('change', { target: { value: '02/01/2018 10:00' } });
-    expect(onChangeMock).toHaveBeenCalled();
-  });
-});

package/src/__tests__/e2e/Theme.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { mount } from '../test-utils';
-import { DatePicker } from '../../DatePicker';
-import { createMuiTheme } from '@material-ui/core';
-import { ThemeProvider } from '@material-ui/styles';
-import { DateTimePicker } from '../../DateTimePicker/DateTimePicker';
-
-const theme = createMuiTheme({
-  palette: {
-    type: 'dark',
-  },
-});
-
-test('Should renders without crash in dark theme', () => {
-  const component = mount(
-    <ThemeProvider theme={theme}>
-      <DateTimePicker open openTo="hours" value={null} onChange={jest.fn()} />
-    </ThemeProvider>
-  );
-
-  expect(component).toBeTruthy();
-});
-
-test('Should render component with different orientation', () => {
-  const component = mount(
-    <DatePicker open orientation="landscape" value={null} onChange={jest.fn()} />
-  );
-
-  expect(component).toBeTruthy();
-});

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

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { ReactWrapper } from 'enzyme';
-import { clickOKButton } from './commands';
-import { TimePicker, TimePickerProps } from '../../TimePicker/TimePicker';
-import { mount, utilsToUse, toHaveBeenCalledExceptMoment } from '../test-utils';
-
-const fakeTouchEvent = {
-  buttons: 1,
-  nativeEvent: {
-    offsetX: 20,
-    offsetY: 15,
-  },
-};
-
-describe('e2e - TimePicker', () => {
-  let component: ReactWrapper<TimePickerProps>;
-  const onChangeMock = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    component = mount(
-      <TimePicker open value={utilsToUse.date('2018-01-01T00:00:00.000')} onChange={onChangeMock} />
-    );
-  });
-
-  it('Should renders', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('Should submit onChange on moving', () => {
-    component.find('Clock div[role="menu"]').simulate('mouseMove', fakeTouchEvent);
-    component.find('Clock div[role="menu"]').simulate('mouseUp', fakeTouchEvent);
-
-    expect(
-      component
-        .find('WithStyles(ToolbarButton)')
-        .at(0)
-        .text()
-    ).toBe('11');
-  });
-
-  it('Should change minutes (touch)', () => {
-    component
-      .find('WithStyles(ToolbarButton)')
-      .at(1)
-      .simulate('click');
-
-    component.find('Clock div[role="menu"]').simulate('touchMove', {
-      buttons: 1,
-      changedTouches: [
-        {
-          clientX: 20,
-          clientY: 15,
-        },
-      ],
-    });
-
-    expect(
-      component
-        .find('WithStyles(ToolbarButton)')
-        .at(1)
-        .text()
-    ).toBe('53');
-  });
-
-  it('Should change meridiem mode', () => {
-    component
-      .find('WithStyles(ToolbarButton)')
-      .at(3)
-      .simulate('click');
-
-    clickOKButton(component);
-    toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T12:00:00.000')]);
-  });
-});
-
-describe('e2e - TimePicker with seconds', () => {
-  let component: ReactWrapper<TimePickerProps>;
-  const onChangeMock = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    component = mount(
-      <TimePicker
-        open
-        views={['hours', 'minutes', 'seconds']}
-        value={utilsToUse.date('2018-01-01T00:00:12.000')}
-        onChange={onChangeMock}
-      />
-    );
-  });
-
-  it('Should show seconds number', () => {
-    expect(
-      component
-        .find('WithStyles(ToolbarButton)')
-        .at(2)
-        .text()
-    ).toBe('12');
-  });
-
-  it('Should change seconds', () => {
-    component
-      .find('WithStyles(ToolbarButton)')
-      .at(2)
-      .simulate('click');
-
-    component.find('Clock div[role="menu"]').simulate('touchMove', {
-      buttons: 1,
-      changedTouches: [
-        {
-          clientX: 20,
-          clientY: 15,
-        },
-      ],
-    });
-
-    clickOKButton(component);
-    toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T00:00:53.000')]);
-  });
-});

package/src/__tests__/e2e/commands.tsx

@@ -1,8 +0,0 @@
-import { ReactWrapper } from 'enzyme';
-
-export const clickOKButton = (component: ReactWrapper<any>) => {
-  component
-    .find('ForwardRef(DialogActions) WithStyles(ForwardRef(Button))')
-    .at(1)
-    .simulate('click');
-};

package/src/__tests__/setup.js

@@ -1,26 +0,0 @@
-const Enzyme = require('enzyme');
-const EnzymeAdapter = require('enzyme-adapter-react-16');
-
-// Setup enzyme's react adapter
-Enzyme.configure({ adapter: new EnzymeAdapter() });
-
-// Convert any console error into a thrown error
-const error = console.error;
-console.error = (...args) => {
-  error.apply(console, args);
-  if (args[0] instanceof Error) {
-    throw args[0];
-  } else {
-    // combine multi args into a string
-    const message = args
-      .map(value => {
-        if (typeof value === 'object') {
-          return JSON.stringify(value);
-        } else {
-          return value;
-        }
-      })
-      .join(' ');
-    throw new Error(message);
-  }
-};

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,165 +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';
-
-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, refuse: RegExp) => (
-  value: string
-) => {
-  if (value === '') {
-    return value;
-  }
-
-  let result = '';
-  const parsed = value.replace(refuse, '');
-
-  let i = 0;
-  let n = 0;
-  while (i < mask.length) {
-    const maskChar = mask[i];
-    if (maskChar === numberMaskChar && n < parsed.length) {
-      const parsedChar = parsed[n];
-      result += parsedChar;
-      n += 1;
-    } else {
-      result += maskChar;
-    }
-    i += 1;
-  }
-
-  return result;
-};