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

package/src/TimePicker/TimePickerToolbar.tsx

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

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

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

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

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

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

@@ -1,68 +0,0 @@
-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();
-  });
-});

package/src/__tests__/_helpers/date-utils.test.tsx

@@ -1,197 +0,0 @@
-import { utilsToUse } from '../test-utils';
-import { findClosestEnabledDate } from '../../_helpers/date-utils';
-
-describe('findClosestEnabledDate', () => {
-  const day18thText = utilsToUse.getDayText(utilsToUse.date('2018-08-18'));
-  const only18th = (date: any) => utilsToUse.getDayText(date) !== day18thText;
-
-  it('Should return null if all dates are disabled', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('1999-01-01'), // Use close-by min/max dates to reduce the test runtime.
-      maxDate: utilsToUse.date('2001-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: () => true,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(result).toBe(null);
-  });
-
-  it('Should return given date if it is enabled', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: () => false,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isSameDay(result, utilsToUse.date('2000-01-01'))).toBe(true);
-  });
-
-  it('Should return next 18th going from 10th', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2018-08-10'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-08-18'))).toBe(true);
-  });
-
-  it('Should return previous 18th going from 1st', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2018-08-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-07-18'))).toBe(true);
-  });
-
-  it('Should return future 18th if disablePast', () => {
-    const today = utilsToUse.startOfDay(utilsToUse.date());
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: false,
-      disablePast: true,
-    });
-
-    expect(utilsToUse.getDayText(result)).toBe(day18thText);
-    expect(utilsToUse.isBefore(result, today)).toBe(false);
-    expect(utilsToUse.isBefore(result, utilsToUse.addDays(today, 31))).toBe(true);
-  });
-
-  it('Should return past Saturday if disableFuture', () => {
-    const today = utilsToUse.startOfDay(utilsToUse.date());
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2099-01-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: true,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isBeforeDay(result, today)).toBe(true);
-    expect(utilsToUse.getDayText(result)).toBe(day18thText);
-    expect(utilsToUse.isBefore(result, utilsToUse.addDays(today, -31))).toBe(false);
-  });
-
-  it('Should return now if disablePast+disableFuture and now is valid', () => {
-    const today = utilsToUse.startOfDay(utilsToUse.date());
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: () => false,
-      disableFuture: true,
-      disablePast: true,
-    });
-
-    expect(utilsToUse.isSameDay(result, today)).toBe(true);
-  });
-
-  it('Should return null if disablePast+disableFuture and now is invalid', () => {
-    const today = utilsToUse.date();
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: date => utilsToUse.isSameDay(date, today),
-      disableFuture: true,
-      disablePast: true,
-    });
-
-    expect(result).toBeNull();
-  });
-
-  it('Should return minDate if it is after the date and valid', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('2018-08-18'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-08-18'))).toBe(true);
-  });
-
-  it('Should return next 18th after minDate', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('2018-08-01'),
-      maxDate: utilsToUse.date('2100-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-08-18'))).toBe(true);
-  });
-
-  it('Should return maxDate if it is before the date and valid', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2050-01-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2018-07-18'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-07-18'))).toBe(true);
-  });
-
-  it('Should return previous 18th before maxDate', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2050-01-01'),
-      minDate: utilsToUse.date('1900-01-01'),
-      maxDate: utilsToUse.date('2018-08-17'),
-      utils: utilsToUse,
-      shouldDisableDate: only18th,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-07-18'))).toBe(true);
-  });
-
-  it('Should return null if minDate is after maxDate', () => {
-    const result = findClosestEnabledDate({
-      date: utilsToUse.date('2000-01-01'),
-      minDate: utilsToUse.date('2000-01-01'),
-      maxDate: utilsToUse.date('1999-01-01'),
-      utils: utilsToUse,
-      shouldDisableDate: () => false,
-      disableFuture: false,
-      disablePast: false,
-    });
-
-    expect(result).toBeNull();
-  });
-});

package/src/__tests__/_helpers/text-field-helper.test.tsx

@@ -1,34 +0,0 @@
-import {
-  makeMaskFromFormat,
-  maskedDateFormatter,
-  pick12hOr24hFormat,
-} from '../../_helpers/text-field-helper';
-
-const refuse = /[^\d]+/gi;
-describe('test-field-helper', () => {
-  test('maskedDateFormatter', () => {
-    const formatterFn = maskedDateFormatter('__/__/____', '_', refuse);
-
-    expect(formatterFn('21')).toBe('21/__/____');
-    expect(formatterFn('21-12-21')).toBe('21/12/21__');
-    expect(formatterFn('21-12-2010')).toBe('21/12/2010');
-  });
-
-  test('makeMaskFromFormat', () => {
-    expect(makeMaskFromFormat('yyyy-mm-dd', '_')).toBe('____-__-__');
-    expect(makeMaskFromFormat('YYYY/LL/DD', '_')).toBe('____/__/__');
-    expect(makeMaskFromFormat('yyyy-mm-dd mm:hh', '_')).toBe('____-__-__ __:__');
-  });
-
-  test('pick12hOr24hFormat', () => {
-    expect(pick12hOr24hFormat(undefined, true, { '12h': 'hh:mm a', '24h': 'HH:mm' })).toBe(
-      'hh:mm a'
-    );
-    expect(pick12hOr24hFormat(undefined, undefined, { '12h': 'hh:mm a', '24h': 'HH:mm' })).toBe(
-      'hh:mm a'
-    );
-    expect(pick12hOr24hFormat(undefined, false, { '12h': 'hh:mm a', '24h': 'HH:mm' })).toBe(
-      'HH:mm'
-    );
-  });
-});