diff --git a/docs/prop-types.json b/docs/prop-types.json index d76a153c21a237..f8e5ede644c7bc 100644 --- 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 index 03ede688dd2ea9..e190fffc1f5ab9 100644 --- a/lib/src/DatePicker/DatePicker.tsx +++ b/lib/src/DatePicker/DatePicker.tsx @@ -38,12 +38,12 @@ export const DatePicker: React.FC = props => { onOpen, onClose, openTo, - openToYearSelection, renderDay, rightArrowIcon, shouldDisableDate, value, variant, + onlyCalendar, views, ...other } = props; @@ -64,6 +64,7 @@ export const DatePicker: React.FC = props => { > = props => { 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 index 2ad96764b38d36..aaf1680167c638 100644 --- 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,6 +61,7 @@ interface DatePickerState { export class DatePickerRoot extends React.PureComponent { public static propTypes: any = { + onlyCalendar: PropTypes.bool, views: PropTypes.arrayOf(DomainPropTypes.datePickerView), openTo: DomainPropTypes.datePickerView, }; @@ -68,6 +69,7 @@ export class DatePickerRoot extends React.PureComponent { 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 { classes, onMonthChange, onYearChange, + onlyCalendar, } = this.props; return ( <> - - - - {!this.isYearOnly && !this.isYearAndMonth && ( + {!onlyCalendar && ( + - )} - {this.isYearAndMonth && ( - - )} - + {!this.isYearOnly && !this.isYearAndMonth && ( + + )} + + {this.isYearAndMonth && ( + + )} + + )} {this.props.children} diff --git a/lib/src/DatePicker/KeyboardDatePicker.tsx b/lib/src/DatePicker/KeyboardDatePicker.tsx index d5df326bf14503..177473eecbabaa 100644 --- 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} /> ); diff --git a/lib/src/__tests__/e2e/DatePicker.test.tsx b/lib/src/__tests__/e2e/DatePicker.test.tsx index e95d447aa2df29..e83b755fc915f5 100644 --- 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 new file mode 100644 index 00000000000000..cd06570f8c099a --- /dev/null +++ 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( + + ); + + expect(component.find('WithStyles(PickerToolbar)').length).toBe(0); + }); +}); diff --git a/lib/src/_shared/PickerToolbar.tsx b/lib/src/_shared/PickerToolbar.tsx index d76d9380a33f0e..9a411183aea32b 100644 --- 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, WithStyles { - children: React.ReactNodeArray; -} +export interface PickerToolbarProps extends ExtendMui, WithStyles {} const PickerToolbar: React.SFC = ({ children, @@ -31,10 +29,6 @@ const PickerToolbar: React.SFC = ({ 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 index f8a4e5fe10c3a1..399e9c7b11e2c6 100644 --- 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 extends WrapperProps { /** Dialog props passed to material-ui Dialog */ PopoverProps?: Partial; - /** Show only calendar for datepicker in popover mode */ - onlyCalendar?: boolean; } export const styles = { @@ -33,7 +31,6 @@ const InlineWrapper: React.FC> = onClear, onDismiss, onSetToday, - onlyCalendar, classes, onAccept, DateInputProps, @@ -86,14 +83,9 @@ const InlineWrapper: React.FC> = }; 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);