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

package/src/Picker/Picker.tsx

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

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

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