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

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();
+  });
+});

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

@@ -0,0 +1,197 @@
+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('2200-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('2200-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('2200-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('2200-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('2200-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('2200-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('2200-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('2200-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('2200-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

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