Refactor wrapping <Picker /> in state to be 1 component (#1263)

* Refactor wrapping <Picker /> in state to be 1 component * Fix incorrect outputted typescript definitions * Fixed incorrect KeyboardDatePicker props output
mui · Aug 17, 2019 · f58fc1d · f58fc1d
1 parent 5ba61b6
commit f58fc1d
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 247 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -450,7 +450,7 @@
     },
     "openTo": {
       "defaultValue": null,
-      "description": "Open to DatePicker",
+      "description": "First view to show in DatePicker",
       "name": "openTo",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/DatePicker/DatePicker.tsx",
@@ -1138,7 +1138,7 @@
     },
     "openTo": {
       "defaultValue": null,
-      "description": "Open to DatePicker",
+      "description": "First view to show in DatePicker",
       "name": "openTo",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/DatePicker/DatePicker.tsx",
@@ -1718,7 +1718,7 @@
     },
     "openTo": {
       "defaultValue": null,
-      "description": "Open to timepicker",
+      "description": "First view to show in timepicker",
       "name": "openTo",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/TimePicker/TimePicker.tsx",
@@ -2214,7 +2214,7 @@
     },
     "openTo": {
       "defaultValue": null,
-      "description": "Open to timepicker",
+      "description": "First view to show in timepicker",
       "name": "openTo",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/TimePicker/TimePicker.tsx",
@@ -2602,7 +2602,7 @@
     },
     "openTo": {
       "defaultValue": null,
-      "description": "Open to DatePicker",
+      "description": "First view to show in DatePicker",
       "name": "openTo",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/DateTimePicker/DateTimePicker.tsx",
@@ -3359,7 +3359,7 @@
     },
     "openTo": {
       "defaultValue": null,
-      "description": "Open to DatePicker",
+      "description": "First view to show in DatePicker",
       "name": "openTo",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/DateTimePicker/DateTimePicker.tsx",

diff --git a/lib/src/DatePicker/DatePicker.tsx b/lib/src/DatePicker/DatePicker.tsx
@@ -1,11 +1,18 @@
 import { useUtils } from '../_shared/hooks/useUtils';
-import { DatePickerToolbar } from './DatePickerToolbar';
 import { MaterialUiPickersDate } from '../typings/date';
+import { DatePickerToolbar } from './DatePickerToolbar';
+import { PureDateInput } from '../_shared/PureDateInput';
 import { getFormatByViews } from '../_helpers/date-utils';
+import { KeyboardDateInput } from '../_shared/KeyboardDateInput';
 import { OutterCalendarProps } from '../views/Calendar/Calendar';
+import { usePickerState } from '../_shared/hooks/usePickerState';
 import { datePickerDefaultProps, ParsableDate } from '../constants/prop-types';
-import { WrappedPurePickerProps, makePurePicker } from '../Picker/WrappedPurePicker';
-import { makeKeyboardPicker, WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';
+import { useKeyboardPickerState } from '../_shared/hooks/useKeyboardPickerState';
+import {
+  WithKeyboardInputProps,
+  WithPureInputProps,
+  makePickerWithState,
+} from '../Picker/makePickerWithState';
 
 export type DatePickerView = 'year' | 'date' | 'month';
 
@@ -52,13 +59,13 @@ export interface DatePickerViewsProps extends BaseDatePickerProps {
    * @type {Array<"year" | "date" | "month">}
    */
   views?: DatePickerView[];
-  /** Open to DatePicker */
+  /** First view to show in DatePicker */
   openTo?: DatePickerView;
 }
 
-export type DatePickerProps = WrappedPurePickerProps & DatePickerViewsProps;
+export type DatePickerProps = WithPureInputProps & DatePickerViewsProps;
 
-export type KeyboardDatePickerProps = WrappedKeyboardPickerProps & DatePickerViewsProps;
+export type KeyboardDatePickerProps = WithKeyboardInputProps & DatePickerViewsProps;
 
 const defaultProps = {
   ...datePickerDefaultProps,
@@ -74,13 +81,17 @@ function useOptions(props: DatePickerViewsProps) {
   };
 }
 
-export const DatePicker = makePurePicker<DatePickerViewsProps>({
+export const DatePicker = makePickerWithState<DatePickerProps>({
   useOptions,
+  Input: PureDateInput,
+  useState: usePickerState,
   DefaultToolbarComponent: DatePickerToolbar,
 });
 
-export const KeyboardDatePicker = makeKeyboardPicker<DatePickerViewsProps>({
+export const KeyboardDatePicker = makePickerWithState<KeyboardDatePickerProps>({
   useOptions,
+  Input: KeyboardDateInput,
+  useState: useKeyboardPickerState,
   DefaultToolbarComponent: DatePickerToolbar,
 });
 

diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx
@@ -1,11 +1,18 @@
 import { useUtils } from '../_shared/hooks/useUtils';
-import { BaseDatePickerProps } from '../DatePicker/DatePicker';
+import { PureDateInput } from '../_shared/PureDateInput';
 import { BaseTimePickerProps } from '../TimePicker/TimePicker';
+import { BaseDatePickerProps } from '../DatePicker/DatePicker';
 import { DateTimePickerToolbar } from './DateTimePickerToolbar';
+import { KeyboardDateInput } from '../_shared/KeyboardDateInput';
+import { usePickerState } from '../_shared/hooks/usePickerState';
 import { pick12hOr24hFormat } from '../_helpers/text-field-helper';
 import { dateTimePickerDefaultProps } from '../constants/prop-types';
-import { WrappedPurePickerProps, makePurePicker } from '../Picker/WrappedPurePicker';
-import { makeKeyboardPicker, WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';
+import { useKeyboardPickerState } from '../_shared/hooks/useKeyboardPickerState';
+import {
+  WithKeyboardInputProps,
+  makePickerWithState,
+  WithPureInputProps,
+} from '../Picker/makePickerWithState';
 
 export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes';
 
@@ -14,7 +21,7 @@ export type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;
 export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
   /** Array of views to show */
   views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];
-  /** Open to DatePicker */
+  /** First view to show in DatePicker */
   openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';
   /** To show tabs */
   hideTabs?: boolean;
@@ -24,9 +31,9 @@ export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
   timeIcon?: React.ReactNode;
 }
 
-export type DateTimePickerProps = WrappedPurePickerProps & DateTimePickerViewsProps;
+export type DateTimePickerProps = WithPureInputProps & DateTimePickerViewsProps;
 
-export type KeyboardDateTimePickerProps = WrappedKeyboardPickerProps & DateTimePickerViewsProps;
+export type KeyboardDateTimePickerProps = WithKeyboardInputProps & DateTimePickerViewsProps;
 
 const defaultProps = {
   ...dateTimePickerDefaultProps,
@@ -52,13 +59,17 @@ function useOptions(props: DateTimePickerProps | KeyboardDateTimePickerProps) {
   };
 }
 
-export const DateTimePicker = makePurePicker<DateTimePickerProps>({
+export const DateTimePicker = makePickerWithState<DateTimePickerProps>({
   useOptions,
+  Input: PureDateInput,
+  useState: usePickerState,
   DefaultToolbarComponent: DateTimePickerToolbar,
 });
 
-export const KeyboardDateTimePicker = makeKeyboardPicker<KeyboardDateTimePickerProps>({
+export const KeyboardDateTimePicker = makePickerWithState<KeyboardDateTimePickerProps>({
   useOptions,
+  Input: KeyboardDateInput,
+  useState: useKeyboardPickerState,
   DefaultToolbarComponent: DateTimePickerToolbar,
   getCustomProps: props => ({
     refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi,

diff --git a/lib/src/Picker/Picker.tsx b/lib/src/Picker/Picker.tsx
@@ -82,37 +82,18 @@ const useStyles = makeStyles(
   { name: 'MuiPickersBasePicker' }
 );
 
-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,
-  } = props;
-
+export const Picker: React.FunctionComponent<PickerProps> = ({
+  date,
+  views,
+  disableToolbar,
+  onChange,
+  openTo,
+  minDate: unparsedMinDate,
+  maxDate: unparsedMaxDate,
+  ToolbarComponent,
+  orientation,
+  ...rest
+}) => {
   const utils = useUtils();
   const classes = useStyles();
   const isLandscape = useIsLandscape(orientation);
@@ -129,70 +110,52 @@ export const Picker: React.FunctionComponent<PickerProps> = props => {
     >
       {!disableToolbar && (
         <ToolbarComponent
+          {...rest}
+          views={views}
+          isLandscape={isLandscape}
           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
+            {...rest}
             date={date}
             onChange={handleChangeAndOpenNext}
             minDate={minDate}
             maxDate={maxDate}
-            disablePast={disablePast}
-            disableFuture={disableFuture}
-            onYearChange={onYearChange}
-            animateYearScrolling={animateYearScrolling}
           />
         )}
 
         {openView === 'month' && (
           <MonthSelection
+            {...rest}
             date={date}
             onChange={handleChangeAndOpenNext}
             minDate={minDate}
             maxDate={maxDate}
-            disablePast={disablePast}
-            disableFuture={disableFuture}
-            onMonthChange={onMonthChange}
           />
         )}
 
         {openView === 'date' && (
           <Calendar
+            {...rest}
             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') && (
           <ClockView
+            {...rest}
             date={date}
-            ampm={ampm}
             type={openView}
-            minutesStep={minutesStep}
             onHourChange={handleChangeAndOpenNext}
             onMinutesChange={handleChangeAndOpenNext}
             onSecondsChange={handleChangeAndOpenNext}