[DatePicker] Fix not working onlyCalendar prop (mui#988)

* Remove typing for deprecated openToYearSelection * [mui#984] Fix not working onlyCalendar prop * Change onlyCalendar prop description
mnajdova · Apr 14, 2019 · 0cc4fed · 0cc4fed
1 parent a9e830a
commit 0cc4fed
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 68 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -144,7 +144,7 @@
       "type": { "name": "boolean" }
     },
     "minDateMessage": {
-      "defaultValue": { "value": "Date should not be before minimal date" },
+      "defaultValue": null,
       "description": "Error message, shown if date is less then minimal date",
       "name": "minDateMessage",
       "parent": {
@@ -155,7 +155,7 @@
       "type": { "name": "ReactNode" }
     },
     "maxDateMessage": {
-      "defaultValue": { "value": "Date should not be after maximal date" },
+      "defaultValue": null,
       "description": "Error message, shown if date is more then maximal date",
       "name": "maxDateMessage",
       "parent": {
@@ -166,12 +166,12 @@
       "type": { "name": "ReactNode" }
     },
     "invalidDateMessage": {
-      "defaultValue": { "value": "Invalid Date Format" },
+      "defaultValue": null,
       "description": "Message, appearing when date cannot be parsed",
       "name": "invalidDateMessage",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/_helpers/text-field-helper.ts",
-        "name": "DateValidationProps"
+        "name": "BaseValidationProps"
       },
       "required": false,
       "type": { "name": "ReactNode" }
@@ -253,17 +253,6 @@
       "required": false,
       "type": { "name": "\"year\" | \"month\" | \"day\"" }
     },
-    "openToYearSelection": {
-      "defaultValue": null,
-      "description": "@deprecated use openTo instead",
-      "name": "openToYearSelection",
-      "parent": {
-        "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/DatePicker/DatePickerRoot.tsx",
-        "name": "BaseDatePickerProps"
-      },
-      "required": false,
-      "type": { "name": "boolean" }
-    },
     "leftArrowIcon": {
       "defaultValue": null,
       "description": "Left arrow icon",
@@ -297,6 +286,17 @@
       "required": false,
       "type": { "name": "RenderDay" }
     },
+    "onlyCalendar": {
+      "defaultValue": null,
+      "description": "Show only calendar, without toolbar",
+      "name": "onlyCalendar",
+      "parent": {
+        "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/DatePicker/DatePickerRoot.tsx",
+        "name": "BaseDatePickerProps"
+      },
+      "required": false,
+      "type": { "name": "boolean" }
+    },
     "allowKeyboardControl": {
       "defaultValue": null,
       "description": "Enables keyboard listener for moving between days in calendar",
@@ -486,8 +486,19 @@
       "required": false,
       "type": { "name": "boolean" }
     },
+    "invalidDateMessage": {
+      "defaultValue": null,
+      "description": "Message, appearing when date cannot be parsed",
+      "name": "invalidDateMessage",
+      "parent": {
+        "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/_helpers/text-field-helper.ts",
+        "name": "BaseValidationProps"
+      },
+      "required": false,
+      "type": { "name": "ReactNode" }
+    },
     "ampm": {
-      "defaultValue": { "value": "true" },
+      "defaultValue": null,
       "description": "12h/24h view for hour selection clock",
       "name": "ampm",
       "parent": {
@@ -692,7 +703,7 @@
       "name": "invalidDateMessage",
       "parent": {
         "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/_helpers/text-field-helper.ts",
-        "name": "DateValidationProps"
+        "name": "BaseValidationProps"
       },
       "required": false,
       "type": { "name": "ReactNode" }
@@ -709,7 +720,7 @@
       "type": { "name": "boolean" }
     },
     "showTabs": {
-      "defaultValue": { "value": "true" },
+      "defaultValue": null,
       "description": "Show or hide date/time tabs (hidden automatically on small screens)",
       "name": "showTabs",
       "parent": {
@@ -753,7 +764,7 @@
       "type": { "name": "ReactNode" }
     },
     "ampm": {
-      "defaultValue": { "value": "true" },
+      "defaultValue": null,
       "description": "12h/24h view for hour selection clock",
       "name": "ampm",
       "parent": {
@@ -862,6 +873,17 @@
       "required": false,
       "type": { "name": "RenderDay" }
     },
+    "onlyCalendar": {
+      "defaultValue": null,
+      "description": "Show only calendar, without toolbar",
+      "name": "onlyCalendar",
+      "parent": {
+        "fileName": "/Users/dmitrijkovalenko/dev/material-ui-pickers/lib/src/DatePicker/DatePickerRoot.tsx",
+        "name": "BaseDatePickerProps"
+      },
+      "required": false,
+      "type": { "name": "boolean" }
+    },
     "allowKeyboardControl": {
       "defaultValue": null,
       "description": "Enables keyboard listener for moving between days in calendar",

diff --git a/lib/src/DatePicker/DatePicker.tsx b/lib/src/DatePicker/DatePicker.tsx
@@ -38,12 +38,12 @@ export const DatePicker: React.FC<DatePickerProps> = props => {
     onOpen,
     onClose,
     openTo,
-    openToYearSelection,
     renderDay,
     rightArrowIcon,
     shouldDisableDate,
     value,
     variant,
+    onlyCalendar,
     views,
     ...other
   } = props;
@@ -64,14 +64,14 @@ export const DatePicker: React.FC<DatePickerProps> = props => {
     >
       <DatePickerRoot
         {...pickerProps}
+        onlyCalendar={onlyCalendar}
         allowKeyboardControl={allowKeyboardControl}
         animateYearScrolling={animateYearScrolling}
         disableFuture={disableFuture}
         disablePast={disablePast}
         leftArrowIcon={leftArrowIcon}
         maxDate={maxDate}
         minDate={minDate}
-        openToYearSelection={openToYearSelection}
         renderDay={renderDay}
         rightArrowIcon={rightArrowIcon}
         shouldDisableDate={shouldDisableDate}

diff --git a/lib/src/DatePicker/DatePickerRoot.tsx b/lib/src/DatePicker/DatePickerRoot.tsx
@@ -29,14 +29,14 @@ export interface BaseDatePickerProps {
   views?: ('year' | 'month' | 'day')[];
   /** Initial view to show when date picker is open */
   openTo?: 'year' | 'month' | 'day';
-  /** @deprecated use openTo instead */
-  openToYearSelection?: boolean;
   /** Left arrow icon */
   leftArrowIcon?: React.ReactNode;
   /** Right arrow icon */
   rightArrowIcon?: React.ReactNode;
   /** Custom renderer for day */
   renderDay?: RenderDay;
+  /** Show only calendar, without toolbar */
+  onlyCalendar?: boolean;
   /** Enables keyboard listener for moving between days in calendar */
   allowKeyboardControl?: boolean;
   /** Disable specific date */
@@ -61,13 +61,15 @@ interface DatePickerState {
 
 export class DatePickerRoot extends React.PureComponent<DatePickerRootProps> {
   public static propTypes: any = {
+    onlyCalendar: PropTypes.bool,
     views: PropTypes.arrayOf(DomainPropTypes.datePickerView),
     openTo: DomainPropTypes.datePickerView,
   };
 
   public static defaultProps = {
     minDate: new Date('1900-01-01'),
     maxDate: new Date('2100-01-01'),
+    onlyCalendar: false,
     views: ['year', 'day'] as DatePickerViewType[],
   };
 
@@ -150,36 +152,39 @@ export class DatePickerRoot extends React.PureComponent<DatePickerRootProps> {
       classes,
       onMonthChange,
       onYearChange,
+      onlyCalendar,
     } = this.props;
 
     return (
       <>
-        <PickerToolbar className={clsx({ [classes.toolbarCenter]: this.isYearOnly })}>
-          <ToolbarButton
-            variant={this.isYearOnly ? 'h3' : 'subtitle1'}
-            onClick={this.isYearOnly ? undefined : this.openYearSelection}
-            selected={openView === 'year'}
-            label={utils.getYearText(this.date)}
-          />
-
-          {!this.isYearOnly && !this.isYearAndMonth && (
+        {!onlyCalendar && (
+          <PickerToolbar className={clsx({ [classes.toolbarCenter]: this.isYearOnly })}>
             <ToolbarButton
-              variant="h4"
-              onClick={this.openCalendar}
-              selected={openView === 'day'}
-              label={utils.getDatePickerHeaderText(this.date)}
+              variant={this.isYearOnly ? 'h3' : 'subtitle1'}
+              onClick={this.isYearOnly ? undefined : this.openYearSelection}
+              selected={openView === 'year'}
+              label={utils.getYearText(this.date)}
             />
-          )}
 
-          {this.isYearAndMonth && (
-            <ToolbarButton
-              variant="h4"
-              onClick={this.openMonthSelection}
-              selected={openView === 'month'}
-              label={utils.getMonthText(this.date)}
-            />
-          )}
-        </PickerToolbar>
+            {!this.isYearOnly && !this.isYearAndMonth && (
+              <ToolbarButton
+                variant="h4"
+                onClick={this.openCalendar}
+                selected={openView === 'day'}
+                label={utils.getDatePickerHeaderText(this.date)}
+              />
+            )}
+
+            {this.isYearAndMonth && (
+              <ToolbarButton
+                variant="h4"
+                onClick={this.openMonthSelection}
+                selected={openView === 'month'}
+                label={utils.getMonthText(this.date)}
+              />
+            )}
+          </PickerToolbar>
+        )}
 
         {this.props.children}
 

diff --git a/lib/src/DatePicker/KeyboardDatePicker.tsx b/lib/src/DatePicker/KeyboardDatePicker.tsx
@@ -18,7 +18,6 @@ export type KeyboardDatePickerProps = BaseDatePickerProps &
 
 export function KeyboardDatePicker(props: KeyboardDatePickerProps) {
   const {
-    variant,
     allowKeyboardControl,
     animateYearScrolling,
     autoOk,
@@ -36,16 +35,17 @@ export function KeyboardDatePicker(props: KeyboardDatePickerProps) {
     minDateMessage,
     onAccept,
     onChange,
+    onClose,
+    onlyCalendar,
     onMonthChange,
+    onOpen,
     onYearChange,
     openTo,
-    openToYearSelection,
-    onOpen,
-    onClose,
     renderDay,
     rightArrowIcon,
     shouldDisableDate,
     value,
+    variant,
     views,
     ...other
   } = props;
@@ -73,12 +73,12 @@ export function KeyboardDatePicker(props: KeyboardDatePickerProps) {
         leftArrowIcon={leftArrowIcon}
         maxDate={maxDate}
         minDate={minDate}
-        openToYearSelection={openToYearSelection}
+        onlyCalendar={onlyCalendar}
+        openTo={openTo}
         renderDay={renderDay}
         rightArrowIcon={rightArrowIcon}
         shouldDisableDate={shouldDisableDate}
         views={views}
-        openTo={openTo}
       />
     </Wrapper>
   );

diff --git a/lib/src/__tests__/e2e/DatePicker.test.tsx b/lib/src/__tests__/e2e/DatePicker.test.tsx
@@ -102,7 +102,7 @@ describe('e2e - DatePicker inline variant', () => {
 
     popoverOnClose();
 
-    expect(component.find('WithStyles(ForwardRef(Popover))').props().open).toBeFalsy();
+    expect(component.find('WithStyles(ForwardRef(Popover))').prop('open')).toBeFalsy();
     expect(onCloseMock).toHaveBeenCalled();
   });
 

diff --git a/lib/src/__tests__/e2e/DatePickerProps.test.tsx b/lib/src/__tests__/e2e/DatePickerProps.test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import DatePicker from '../../DatePicker/DatePicker';
+import { mount, utilsToUse } from '../test-utils';
+
+describe('DatePicker - different props', () => {
+  it('Should not render toolbar if onlyCalendar = true', () => {
+    const component = mount(
+      <DatePicker
+        open
+        onlyCalendar
+        onChange={jest.fn()}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+      />
+    );
+
+    expect(component.find('WithStyles(PickerToolbar)').length).toBe(0);
+  });
+});
diff --git a/lib/src/_shared/PickerToolbar.tsx b/lib/src/_shared/PickerToolbar.tsx
@@ -7,9 +7,7 @@ import withStyles, { WithStyles } from '@material-ui/styles/withStyles';
 import { Theme } from '@material-ui/core';
 import { ExtendMui } from '../typings/extendMui';
 
-export interface PickerToolbarProps extends ExtendMui<ToolbarProps>, WithStyles<typeof styles> {
-  children: React.ReactNodeArray;
-}
+export interface PickerToolbarProps extends ExtendMui<ToolbarProps>, WithStyles<typeof styles> {}
 
 const PickerToolbar: React.SFC<PickerToolbarProps> = ({
   children,
@@ -31,10 +29,6 @@ const PickerToolbar: React.SFC<PickerToolbarProps> = ({
   innerRef: PropTypes.any,
 };
 
-PickerToolbar.defaultProps = {
-  className: '',
-};
-
 export const styles = (theme: Theme) =>
   createStyles({
     toolbar: {

diff --git a/lib/src/wrappers/InlineWrapper.tsx b/lib/src/wrappers/InlineWrapper.tsx
@@ -11,8 +11,6 @@ import { DIALOG_WIDTH, DIALOG_WIDTH_WIDER } from '../constants/dimensions';
 export interface InlineWrapperProps<T = TextFieldProps> extends WrapperProps<T> {
   /** Dialog props passed to material-ui Dialog */
   PopoverProps?: Partial<PopoverPropsType>;
-  /** Show only calendar for datepicker in popover mode */
-  onlyCalendar?: boolean;
 }
 
 export const styles = {
@@ -33,7 +31,6 @@ const InlineWrapper: React.FC<InlineWrapperProps & WithStyles<typeof styles>> =
   onClear,
   onDismiss,
   onSetToday,
-  onlyCalendar,
   classes,
   onAccept,
   DateInputProps,
@@ -86,14 +83,9 @@ const InlineWrapper: React.FC<InlineWrapperProps & WithStyles<typeof styles>> =
 };
 
 InlineWrapper.propTypes = {
-  onlyCalendar: PropTypes.bool,
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   PopoverProps: PropTypes.object,
 } as any;
 
-InlineWrapper.defaultProps = {
-  onlyCalendar: false,
-};
-
 export default withStyles(styles)(InlineWrapper);