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

package/src/Picker/Picker.tsx

@@ -1,268 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import Calendar from '../views/Calendar/Calendar';
-import { useUtils } from '../_shared/hooks/useUtils';
-import { useViews } from '../_shared/hooks/useViews';
-import { makeStyles } from '@material-ui/core/styles';
-import { YearSelection } from '../views/Year/YearView';
-import { MaterialUiPickersDate } from '../typings/date';
-import { BasePickerProps } from '../typings/BasePicker';
-import { TimePickerView } from '../views/Clock/ClockView';
-import { MonthSelection } from '../views/Month/MonthView';
-import { BaseTimePickerProps } from '../TimePicker/TimePicker';
-import { BaseDatePickerProps } from '../DatePicker/DatePicker';
-import { useIsLandscape } from '../_shared/hooks/useIsLandscape';
-import { datePickerDefaultProps } from '../constants/prop-types';
-import { DIALOG_WIDTH_WIDER, DIALOG_WIDTH, VIEW_HEIGHT } from '../constants/dimensions';
-import { DialogActions, Button } from '@material-ui/core';
-
-const viewsMap = {
-  year: YearSelection,
-  month: MonthSelection,
-  date: Calendar,
-  hours: TimePickerView,
-  minutes: TimePickerView,
-  seconds: TimePickerView,
-};
-
-export type PickerView = keyof typeof viewsMap;
-
-export type ToolbarComponentProps = BaseDatePickerProps &
-  BaseTimePickerProps & {
-    views: PickerView[];
-    openView: PickerView;
-    date: MaterialUiPickersDate;
-    setOpenView: (view: PickerView) => void;
-    onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
-    // TODO move out, cause it is DateTimePickerOnly
-    hideTabs?: boolean;
-    dateRangeIcon?: React.ReactNode;
-    timeIcon?: React.ReactNode;
-    isLandscape: boolean;
-  };
-
-export interface PickerViewProps extends BaseDatePickerProps, BaseTimePickerProps {
-  views: PickerView[];
-  openTo: PickerView;
-  disableToolbar?: boolean;
-  ToolbarComponent: React.ComponentType<ToolbarComponentProps>;
-  // TODO move out, cause it is DateTimePickerOnly
-  hideTabs?: boolean;
-  dateRangeIcon?: React.ReactNode;
-  timeIcon?: React.ReactNode;
-}
-
-interface PickerProps extends PickerViewProps {
-  date: MaterialUiPickersDate;
-  orientation?: BasePickerProps['orientation'];
-  onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
-  showActionsBar?: boolean;
-  showTodayButton?: boolean;
-  todayLabel?: string;
-  showShiftButtons?: boolean;
-  onSetToday?: () => void;
-  onSetShift?: (days: number) => void;
-}
-
-const useStyles = makeStyles(
-  {
-    container: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    containerLandscape: {
-      flexDirection: 'row',
-    },
-    pickerView: {
-      overflowX: 'hidden',
-      minHeight: VIEW_HEIGHT,
-      minWidth: DIALOG_WIDTH,
-      maxWidth: DIALOG_WIDTH_WIDER,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-    },
-    pickerViewLandscape: {
-      padding: '0 8px',
-    },
-  },
-  { name: 'MuiPickersBasePicker' }
-);
-
-const useButtonsStyles = makeStyles(
-  {
-    root: {
-      minWidth: 32,
-    },
-  },
-  { name: 'MuiButtonBase' }
-);
-
-export const useDialogActionsStyles = makeStyles({
-  withAdditionalAction: {},
-});
-
-export const Picker: React.FunctionComponent<PickerProps> = props => {
-  const {
-    date,
-    ampm,
-    views,
-    disableToolbar,
-    disablePast,
-    disableFuture,
-    hideTabs,
-    onChange,
-    openTo,
-    minutesStep,
-    dateRangeIcon,
-    timeIcon,
-    minDate: unparsedMinDate,
-    maxDate: unparsedMaxDate,
-    animateYearScrolling,
-    leftArrowIcon,
-    rightArrowIcon,
-    renderDay,
-    shouldDisableDate,
-    allowKeyboardControl,
-    onMonthChange,
-    onYearChange,
-    leftArrowButtonProps,
-    rightArrowButtonProps,
-    ToolbarComponent,
-    loadingIndicator,
-    orientation,
-    showActionsBar,
-    onSetToday,
-    showTodayButton,
-    todayLabel,
-    onSetShift,
-    showShiftButtons,
-  } = props;
-
-  const utils = useUtils();
-  const classes = useStyles();
-  const buttonClasses = useButtonsStyles();
-  const dialogActionsClasses = useDialogActionsStyles();
-  const isLandscape = useIsLandscape(orientation);
-  const { openView, setOpenView, handleChangeAndOpenNext } = useViews(views, openTo, onChange);
-
-  const minDate = React.useMemo(() => utils.date(unparsedMinDate)!, [unparsedMinDate, utils]);
-  const maxDate = React.useMemo(() => utils.date(unparsedMaxDate)!, [unparsedMaxDate, utils]);
-
-  const shiftButtonValues = [1, 2, 3, 7];
-  let shiftButtons =
-    onSetShift && showShiftButtons
-      ? shiftButtonValues.map(shiftValue => {
-          return (
-            <Button color="primary" onClick={() => onSetShift(shiftValue)} key={shiftValue}>
-              {shiftValue > 0 ? '+' : ''}
-              {shiftValue}
-            </Button>
-          );
-        })
-      : null;
-
-  return (
-    <div
-      className={clsx(classes.container, {
-        [classes.containerLandscape]: isLandscape,
-      })}
-    >
-      {!disableToolbar && (
-        <ToolbarComponent
-          date={date}
-          onChange={onChange}
-          setOpenView={setOpenView}
-          openView={openView}
-          hideTabs={hideTabs}
-          dateRangeIcon={dateRangeIcon}
-          timeIcon={timeIcon}
-          isLandscape={isLandscape}
-          {...props}
-        />
-      )}
-
-      <div className={clsx(classes.pickerView, { [classes.pickerViewLandscape]: isLandscape })}>
-        {openView === 'year' && (
-          <YearSelection
-            date={date}
-            onChange={handleChangeAndOpenNext}
-            minDate={minDate}
-            maxDate={maxDate}
-            disablePast={disablePast}
-            disableFuture={disableFuture}
-            onYearChange={onYearChange}
-            animateYearScrolling={animateYearScrolling}
-          />
-        )}
-
-        {openView === 'month' && (
-          <MonthSelection
-            date={date}
-            onChange={handleChangeAndOpenNext}
-            minDate={minDate}
-            maxDate={maxDate}
-            disablePast={disablePast}
-            disableFuture={disableFuture}
-            onMonthChange={onMonthChange}
-          />
-        )}
-
-        {openView === 'date' && (
-          <Calendar
-            date={date}
-            onChange={handleChangeAndOpenNext}
-            onMonthChange={onMonthChange}
-            disablePast={disablePast}
-            disableFuture={disableFuture}
-            minDate={minDate}
-            maxDate={maxDate}
-            leftArrowIcon={leftArrowIcon}
-            leftArrowButtonProps={leftArrowButtonProps}
-            rightArrowIcon={rightArrowIcon}
-            rightArrowButtonProps={rightArrowButtonProps}
-            renderDay={renderDay}
-            shouldDisableDate={shouldDisableDate}
-            allowKeyboardControl={allowKeyboardControl}
-            loadingIndicator={loadingIndicator}
-          />
-        )}
-
-        {(openView === 'hours' || openView === 'minutes' || openView === 'seconds') && (
-          <TimePickerView
-            date={date}
-            ampm={ampm}
-            type={openView}
-            minutesStep={minutesStep}
-            onHourChange={handleChangeAndOpenNext}
-            onMinutesChange={handleChangeAndOpenNext}
-            onSecondsChange={handleChangeAndOpenNext}
-          />
-        )}
-      </div>
-
-      {showActionsBar && (
-        <DialogActions
-          classes={{
-            root: clsx({
-              [dialogActionsClasses.withAdditionalAction]: showTodayButton,
-            }),
-          }}
-        >
-          {showTodayButton && (
-            <Button color="primary" onClick={onSetToday} key="today">
-              {todayLabel}
-            </Button>
-          )}
-
-          {showShiftButtons && shiftButtons}
-        </DialogActions>
-      )}
-    </div>
-  );
-};
-
-Picker.defaultProps = {
-  ...datePickerDefaultProps,
-  views: Object.keys(viewsMap),
-} as any;

package/src/Picker/WrappedKeyboardPicker.tsx

@@ -1,132 +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,
-      ...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}
-        />
-      </Wrapper>
-    );
-  }
-
-  return WrappedKeyboardPicker;
-}

package/src/Picker/WrappedPurePicker.tsx

@@ -1,124 +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,
-      ...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}
-        />
-      </Wrapper>
-    );
-  }
-
-  return WrappedPurePicker;
-}

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;