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

package/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -1,123 +0,0 @@
-import * as React from 'react';
-import ToolbarText from '../_shared/ToolbarText';
-import PickerToolbar from '../_shared/PickerToolbar';
-import ToolbarButton from '../_shared/ToolbarButton';
-import DateTimePickerTabs from './DateTimePickerTabs';
-import { Grid } from '@material-ui/core';
-import { useUtils } from '../_shared/hooks/useUtils';
-import { DateTimePickerView } from './DateTimePicker';
-import { ToolbarComponentProps } from '../Picker/Picker';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import { useMeridiemMode } from '../TimePicker/TimePickerToolbar';
-
-export const useStyles = makeStyles(
-  _ => ({
-    toolbar: {
-      paddingLeft: 16,
-      paddingRight: 16,
-      justifyContent: 'space-around',
-    },
-    separator: {
-      margin: '0 4px 0 2px',
-      cursor: 'default',
-    },
-  }),
-  { name: 'MuiPickerDTToolbar' }
-);
-
-export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
-  date,
-  openView,
-  setOpenView,
-  ampm,
-  hideTabs,
-  dateRangeIcon,
-  timeIcon,
-  onChange,
-}) => {
-  const utils = useUtils();
-  const classes = useStyles();
-  const showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
-  const { meridiemMode, handleMeridiemChange } = useMeridiemMode(date, ampm, onChange);
-  const theme = useTheme();
-  const rtl = theme.direction === 'rtl';
-
-  return (
-    <>
-      <PickerToolbar isLandscape={false} className={classes.toolbar}>
-        <Grid container justify="center" wrap="nowrap">
-          <Grid item container xs={5} justify="flex-start" direction="column">
-            <div>
-              <ToolbarButton
-                variant="subtitle1"
-                onClick={() => setOpenView('year')}
-                selected={openView === 'year'}
-                label={utils.getYearText(date)}
-              />
-            </div>
-            <div>
-              <ToolbarButton
-                variant="h4"
-                onClick={() => setOpenView('date')}
-                selected={openView === 'date'}
-                label={utils.getDateTimePickerHeaderText(date)}
-              />
-            </div>
-          </Grid>
-
-          <Grid
-            item
-            container
-            xs={6}
-            justify="center"
-            alignItems="flex-end"
-            direction={rtl ? 'row-reverse' : 'row'}
-          >
-            <ToolbarButton
-              variant="h3"
-              onClick={() => setOpenView('hours')}
-              selected={openView === 'hours'}
-              label={utils.getHourText(date, ampm!)}
-            />
-
-            <ToolbarText variant="h3" label=":" className={classes.separator} />
-
-            <ToolbarButton
-              variant="h3"
-              onClick={() => setOpenView('minutes')}
-              selected={openView === 'minutes'}
-              label={utils.getMinuteText(date)}
-            />
-          </Grid>
-
-          {ampm && (
-            <Grid item container xs={1} direction="column" justify="flex-end">
-              <ToolbarButton
-                variant="subtitle1"
-                selected={meridiemMode === 'am'}
-                label={utils.getMeridiemText('am')}
-                onClick={() => handleMeridiemChange('am')}
-              />
-
-              <ToolbarButton
-                variant="subtitle1"
-                selected={meridiemMode === 'pm'}
-                label={utils.getMeridiemText('pm')}
-                onClick={() => handleMeridiemChange('pm')}
-              />
-            </Grid>
-          )}
-        </Grid>
-      </PickerToolbar>
-
-      {showTabs && (
-        <DateTimePickerTabs
-          dateRangeIcon={dateRangeIcon}
-          timeIcon={timeIcon}
-          view={openView as DateTimePickerView}
-          onChange={setOpenView}
-        />
-      )}
-    </>
-  );
-};

package/src/DateTimePicker/index.ts

@@ -1,7 +0,0 @@
-import { DateTimePickerProps, KeyboardDateTimePickerProps } from './DateTimePicker';
-
-export type DateTimePickerProps = DateTimePickerProps;
-
-export type KeyboardDateTimePickerProps = KeyboardDateTimePickerProps;
-
-export { KeyboardDateTimePicker, DateTimePicker } from './DateTimePicker';

package/src/MuiPickersUtilsProvider.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { IUtils } from '@date-io/core/IUtils';
-import { MaterialUiPickersDate } from './typings/date';
-
-export const MuiPickersContext = React.createContext<IUtils<MaterialUiPickersDate> | null>(null);
-
-export interface MuiPickersUtilsProviderProps {
-  utils: any;
-  children: React.ReactNode;
-  locale?: any;
-  libInstance?: any;
-}
-
-export const MuiPickersUtilsProvider: React.FC<MuiPickersUtilsProviderProps> = ({
-  utils: Utils,
-  children,
-  locale,
-  libInstance,
-}) => {
-  const utils = React.useMemo(() => new Utils({ locale, moment: libInstance }), [
-    Utils,
-    libInstance,
-    locale,
-  ]);
-
-  return <MuiPickersContext.Provider value={utils} children={children} />;
-};
-
-MuiPickersUtilsProvider.propTypes = {
-  utils: PropTypes.func.isRequired,
-  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  children: PropTypes.oneOfType([
-    PropTypes.element.isRequired,
-    PropTypes.arrayOf(PropTypes.element.isRequired),
-  ]).isRequired,
-};
-
-export default MuiPickersUtilsProvider;

package/src/Picker/Picker.tsx

@@ -1,275 +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;
-  setShiftFunction?: (days: number) => Date;
-  shiftButtonValues?: Object;
-  onSetToday?: () => void;
-  onSetShift?: (shiftDate: Date) => 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,
-    setShiftFunction,
-    shiftButtonValues,
-  } = 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]);
-
-  let shiftButtons = new Array();
-  if (showShiftButtons && setShiftFunction && onSetShift && shiftButtonValues) {
-    for (let key in shiftButtonValues) {
-      shiftButtons.push(
-        <Button
-          color="primary"
-          onClick={() => onSetShift(setShiftFunction(parseInt(key)))}
-          key={shiftButtonValues[key]}
-        >
-          {parseInt(key) > 0 ? '+' : ''}
-          {shiftButtonValues[key]}
-        </Button>
-      );
-    }
-  }
-
-  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 && setShiftFunction && shiftButtons}
-        </DialogActions>
-      )}
-    </div>
-  );
-};
-
-Picker.defaultProps = {
-  ...datePickerDefaultProps,
-  views: Object.keys(viewsMap),
-} as any;

package/src/Picker/WrappedKeyboardPicker.tsx

@@ -1,136 +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,
-      setShiftFunction,
-      shiftButtonValues,
-      ...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}
-          setShiftFunction={setShiftFunction}
-          shiftButtonValues={shiftButtonValues}
-        />
-      </Wrapper>
-    );
-  }
-
-  return WrappedKeyboardPicker;
-}

package/src/Picker/WrappedPurePicker.tsx

@@ -1,128 +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,
-      setShiftFunction,
-      shiftButtonValues,
-      ...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}
-          setShiftFunction={setShiftFunction}
-          shiftButtonValues={shiftButtonValues}
-        />
-      </Wrapper>
-    );
-  }
-
-  return WrappedPurePicker;
-}