From 3a69a77ea85112d0346ea00f67e4789b697266b1 Mon Sep 17 00:00:00 2001 From: Daniel Howard Date: Wed, 15 Feb 2017 22:12:31 -0800 Subject: [PATCH 1/2] [DatePicker] Add option to hide date display --- src/DatePicker/Calendar.js | 26 +++++++++++++++----------- src/DatePicker/DatePicker.js | 7 +++++++ src/DatePicker/DatePickerDialog.js | 7 +++++-- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/DatePicker/Calendar.js b/src/DatePicker/Calendar.js index 66cb1dd805c275..ebd9e6b2faf1ce 100644 --- a/src/DatePicker/Calendar.js +++ b/src/DatePicker/Calendar.js @@ -42,6 +42,7 @@ class Calendar extends Component { onTouchTapOk: PropTypes.func, open: PropTypes.bool, shouldDisableDate: PropTypes.func, + showDateDisplay: PropTypes.bool, }; static defaultProps = { @@ -239,6 +240,7 @@ class Calendar extends Component { render() { const {prepareStyles} = this.context.muiTheme; + const {showDateDisplay} = this.props; const toolbarInteractions = this.getToolbarInteractions(); const isLandscape = this.props.mode === 'landscape'; const {calendarTextColor} = this.context.muiTheme.datePicker; @@ -247,7 +249,7 @@ class Calendar extends Component { root: { color: calendarTextColor, userSelect: 'none', - width: isLandscape ? 479 : 310, + width: (showDateDisplay && isLandscape) ? 479 : 310, }, calendar: { display: 'flex', @@ -310,16 +312,18 @@ class Calendar extends Component { target="window" onKeyDown={this.handleWindowKeyDown} /> - + {showDateDisplay && + + }
{this.state.displayMonthDay &&
diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 03612c2308bb98..2c71a5fdbc596b 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -121,6 +121,10 @@ class DatePicker extends Component { * @returns {boolean} Indicates whether the day should be disabled. */ shouldDisableDate: PropTypes.func, + /** + * Show date display + */ + showDateDisplay: PropTypes.bool, /** * Override the inline-styles of the root element. */ @@ -141,6 +145,7 @@ class DatePicker extends Component { disabled: false, disableYearSelection: false, firstDayOfWeek: 1, + showDateDisplay: true, style: {}, }; @@ -275,6 +280,7 @@ class DatePicker extends Component { onShow, onTouchTap, // eslint-disable-line no-unused-vars shouldDisableDate, + showDateDisplay, style, textFieldStyle, ...other @@ -312,6 +318,7 @@ class DatePicker extends Component { onDismiss={onDismiss} ref="dialogWindow" shouldDisableDate={shouldDisableDate} + showDateDisplay={showDateDisplay} />
); diff --git a/src/DatePicker/DatePickerDialog.js b/src/DatePicker/DatePickerDialog.js index 430455137dbd9f..b518e997ce2be6 100644 --- a/src/DatePicker/DatePickerDialog.js +++ b/src/DatePicker/DatePickerDialog.js @@ -28,6 +28,7 @@ class DatePickerDialog extends Component { onShow: PropTypes.func, open: PropTypes.bool, shouldDisableDate: PropTypes.func, + showDateDisplay: PropTypes.bool, style: PropTypes.object, }; @@ -118,6 +119,7 @@ class DatePickerDialog extends Component { onDismiss, // eslint-disable-line no-unused-vars onShow, // eslint-disable-line no-unused-vars shouldDisableDate, + showDateDisplay, style, // eslint-disable-line no-unused-vars animation, ...other @@ -131,8 +133,8 @@ class DatePickerDialog extends Component { }, dialogBodyContent: { padding: 0, - minHeight: mode === 'landscape' ? 330 : 434, - minWidth: mode === 'landscape' ? 479 : 310, + minHeight: (!showDateDisplay || mode === 'landscape') ? 330 : 434, + minWidth: (!showDateDisplay || mode !== 'landscape') ? 310 : 479, }, }; @@ -173,6 +175,7 @@ class DatePickerDialog extends Component { onTouchTapOk={this.handleTouchTapOk} okLabel={okLabel} shouldDisableDate={shouldDisableDate} + showDateDisplay={showDateDisplay} />
From 947ea53f00b7829c3779592678c631b178580ab0 Mon Sep 17 00:00:00 2001 From: Daniel Howard Date: Sun, 19 Feb 2017 17:40:20 -0800 Subject: [PATCH 2/2] [DatePicker] Rename prop and add tests --- src/DatePicker/Calendar.js | 8 ++++---- src/DatePicker/Calendar.spec.js | 30 ++++++++++++++++++++++++++++++ src/DatePicker/DatePicker.js | 14 +++++++------- src/DatePicker/DatePickerDialog.js | 12 ++++++------ 4 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/DatePicker/Calendar.js b/src/DatePicker/Calendar.js index ebd9e6b2faf1ce..149ff9c5975488 100644 --- a/src/DatePicker/Calendar.js +++ b/src/DatePicker/Calendar.js @@ -31,6 +31,7 @@ class Calendar extends Component { cancelLabel: PropTypes.node, disableYearSelection: PropTypes.bool, firstDayOfWeek: PropTypes.number, + hideCalendarDate: PropTypes.bool, initialDate: PropTypes.object, locale: PropTypes.string.isRequired, maxDate: PropTypes.object, @@ -42,7 +43,6 @@ class Calendar extends Component { onTouchTapOk: PropTypes.func, open: PropTypes.bool, shouldDisableDate: PropTypes.func, - showDateDisplay: PropTypes.bool, }; static defaultProps = { @@ -240,7 +240,7 @@ class Calendar extends Component { render() { const {prepareStyles} = this.context.muiTheme; - const {showDateDisplay} = this.props; + const {hideCalendarDate} = this.props; const toolbarInteractions = this.getToolbarInteractions(); const isLandscape = this.props.mode === 'landscape'; const {calendarTextColor} = this.context.muiTheme.datePicker; @@ -249,7 +249,7 @@ class Calendar extends Component { root: { color: calendarTextColor, userSelect: 'none', - width: (showDateDisplay && isLandscape) ? 479 : 310, + width: (!hideCalendarDate && isLandscape) ? 479 : 310, }, calendar: { display: 'flex', @@ -312,7 +312,7 @@ class Calendar extends Component { target="window" onKeyDown={this.handleWindowKeyDown} /> - {showDateDisplay && + {!hideCalendarDate && ', () => { assert.notOk(wrapper.find('CalendarToolbar').prop('prevMonth')); }); }); + + describe('Date Display', () => { + it('should be visible by default', () => { + const wrapper = shallowWithContext( + + ); + + assert.strictEqual(wrapper.find(DateDisplay).length, 1, 'should show date display'); + assert.strictEqual(wrapper.props().style.width, 479, 'should allow space for date display'); + }); + + it('should be hidden when hideCalendarDate is set', () => { + const wrapper = shallowWithContext( + + ); + + assert.strictEqual(wrapper.find(DateDisplay).length, 0, 'should hide date display'); + assert.strictEqual(wrapper.props().style.width, 310, 'should not allow space for date display'); + }); + }); }); diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 2c71a5fdbc596b..10a9c68f556121 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -65,6 +65,10 @@ class DatePicker extends Component { * @returns {any} The formatted date. */ formatDate: PropTypes.func, + /** + * Hide date display + */ + hideCalendarDate: PropTypes.bool, /** * Locale used for formatting the `DatePicker` date strings. Other than for 'en-US', you * must provide a `DateTimeFormat` that supports the chosen `locale`. @@ -121,10 +125,6 @@ class DatePicker extends Component { * @returns {boolean} Indicates whether the day should be disabled. */ shouldDisableDate: PropTypes.func, - /** - * Show date display - */ - showDateDisplay: PropTypes.bool, /** * Override the inline-styles of the root element. */ @@ -145,7 +145,7 @@ class DatePicker extends Component { disabled: false, disableYearSelection: false, firstDayOfWeek: 1, - showDateDisplay: true, + hideCalendarDate: false, style: {}, }; @@ -280,7 +280,7 @@ class DatePicker extends Component { onShow, onTouchTap, // eslint-disable-line no-unused-vars shouldDisableDate, - showDateDisplay, + hideCalendarDate, style, textFieldStyle, ...other @@ -318,7 +318,7 @@ class DatePicker extends Component { onDismiss={onDismiss} ref="dialogWindow" shouldDisableDate={shouldDisableDate} - showDateDisplay={showDateDisplay} + hideCalendarDate={hideCalendarDate} /> ); diff --git a/src/DatePicker/DatePickerDialog.js b/src/DatePicker/DatePickerDialog.js index b518e997ce2be6..a85e20cc474d01 100644 --- a/src/DatePicker/DatePickerDialog.js +++ b/src/DatePicker/DatePickerDialog.js @@ -17,6 +17,7 @@ class DatePickerDialog extends Component { containerStyle: PropTypes.object, disableYearSelection: PropTypes.bool, firstDayOfWeek: PropTypes.number, + hideCalendarDate: PropTypes.bool, initialDate: PropTypes.object, locale: PropTypes.string, maxDate: PropTypes.object, @@ -28,7 +29,6 @@ class DatePickerDialog extends Component { onShow: PropTypes.func, open: PropTypes.bool, shouldDisableDate: PropTypes.func, - showDateDisplay: PropTypes.bool, style: PropTypes.object, }; @@ -119,7 +119,7 @@ class DatePickerDialog extends Component { onDismiss, // eslint-disable-line no-unused-vars onShow, // eslint-disable-line no-unused-vars shouldDisableDate, - showDateDisplay, + hideCalendarDate, style, // eslint-disable-line no-unused-vars animation, ...other @@ -129,12 +129,12 @@ class DatePickerDialog extends Component { const styles = { dialogContent: { - width: mode === 'landscape' ? 479 : 310, + width: (!hideCalendarDate && mode === 'landscape') ? 479 : 310, }, dialogBodyContent: { padding: 0, - minHeight: (!showDateDisplay || mode === 'landscape') ? 330 : 434, - minWidth: (!showDateDisplay || mode !== 'landscape') ? 310 : 479, + minHeight: (hideCalendarDate || mode === 'landscape') ? 330 : 434, + minWidth: (hideCalendarDate || mode !== 'landscape') ? 310 : 479, }, }; @@ -175,7 +175,7 @@ class DatePickerDialog extends Component { onTouchTapOk={this.handleTouchTapOk} okLabel={okLabel} shouldDisableDate={shouldDisableDate} - showDateDisplay={showDateDisplay} + hideCalendarDate={hideCalendarDate} />