Skip to content

Commit

Permalink
feat: add esc key support to #date-picker + tab key focus opens the h…
Browse files Browse the repository at this point in the history 
…idden date input
  • Loading branch information
@tujoworker
tujoworker committed May 16, 2019
1 parent 5337b2a commit 3a2aadb
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 22 deletions.
50 changes: 39 additions & 11 deletions packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import keycode from 'keycode'
import {
registerElement,
// processChildren,
Expand Down Expand Up @@ -224,6 +225,7 @@ export default class DatePicker extends PureComponent {
endDate: null,
_startDate: props.start_date,
_endDate: props.end_date,
showInput: props.show_input,
opened,
hidden: !opened,
direction: props.direction,
Expand Down Expand Up @@ -273,17 +275,30 @@ export default class DatePicker extends PureComponent {
setOutsideClickHandler = () => {
if (!this.handleClickOutside && typeof document !== 'undefined') {
this.handleClickOutside = event => {
let targetElement = event.target
do {
if (targetElement == this._wrapperRef.current) {
return // stop here
}
targetElement = targetElement.parentNode
} while (targetElement)

this.hidePicker()
try {
let targetElement = event.target
do {
if (targetElement == this._wrapperRef.current) {
return // stop here
}
targetElement = targetElement.parentNode
} while (targetElement)

this.hidePicker()
} catch (e) {
console.log(e)
}
}
document.addEventListener('mousedown', this.handleClickOutside)

this.keydownCallback = event => {
const keyCode = keycode(event)
if (keyCode === 'esc') {
window.removeEventListener('keydown', this.keydownCallback)
this.hidePicker()
}
}
window.addEventListener('keydown', this.keydownCallback)
}
}

Expand All @@ -292,13 +307,23 @@ export default class DatePicker extends PureComponent {
document.removeEventListener('mousedown', this.handleClickOutside)
this.handleClickOutside = null
}
if (this.keydownCallback) {
window.removeEventListener('keydown', this.keydownCallback)
this.keydownCallback = null
}
}

componentWillUnmount() {
clearTimeout(this._hideTimeout)
this.removeOutsideClickHandler()
}

onSubmitButtonFocus = () => {
this.setState({
showInput: true
})
}

onInputChange = ({ startDate, endDate }) => {
// make sure endDate is same as startDate if we don't use range
if (!this.props.range) {
Expand Down Expand Up @@ -451,7 +476,7 @@ export default class DatePicker extends PureComponent {
label,
only_month,
hide_navigation_buttons,
show_input,
show_input /* eslint-disable-line */,
range,
first_day,
reset_date,
Expand Down Expand Up @@ -496,6 +521,7 @@ export default class DatePicker extends PureComponent {
maxDate,
opened,
hidden,
showInput,
show_submit_button,
show_cancel_button
} = this.state
Expand Down Expand Up @@ -530,7 +556,7 @@ export default class DatePicker extends PureComponent {
'dnb-date-picker',
opened && 'dnb-date-picker--opened',
hidden && 'dnb-date-picker--hidden',
show_input && 'dnb-date-picker--show-input',
showInput && 'dnb-date-picker--show-input',
(show_submit_button || show_cancel_button) &&
'dnb-date-picker--show-footer'

Expand All @@ -555,6 +581,8 @@ export default class DatePicker extends PureComponent {
endDate={endDate}
minDate={minDate}
maxDate={maxDate}
showInput={showInput}
onSubmitButtonFocus={this.onSubmitButtonFocus}
{...inputParams}
/>
{showStatus && (
Expand Down
32 changes: 31 additions & 1 deletion packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,10 @@ export const propTypes = {
maxDate: PropTypes.instanceOf(Date),
range: PropTypes.bool,
disabled: PropTypes.bool,
showInput: PropTypes.bool,
onChange: PropTypes.func,
onSubmit: PropTypes.func,
onSubmitButtonFocus: PropTypes.func,
onFocus: PropTypes.func
}

Expand All @@ -45,8 +47,10 @@ export const defaultProps = {
minDate: null,
maxDate: null,
disabled: null,
showInput: null,
onChange: null,
onSubmit: null,
onSubmitButtonFocus: null,
onFocus: null
}

Expand Down Expand Up @@ -123,6 +127,27 @@ export default class DatePickerInput extends PureComponent {
return state
}

onKeyUpHandler = () => {
if (this.props.showInput) {
return
}
if (this._startDayRef.current) {
setTimeout(() => {
try {
const elem = this._startDayRef.current.inputElement
elem.focus()
elem.select()
} catch (e) {
console.log(e)
}
}, 100)
}
if (typeof this.props.onSubmitButtonFocus === 'function') {
this.props.onSubmitButtonFocus()
}
this.onKeyUpHandler = null
}

onPickerChange = ({ startDate, endDate }) => {
this.setState({
startDate,
Expand Down Expand Up @@ -477,6 +502,8 @@ export default class DatePickerInput extends PureComponent {
onChange /* eslint-disable-line */,
onFocus /* eslint-disable-line */,
onSubmit /* eslint-disable-line */,
onSubmitButtonFocus /* eslint-disable-line */,
showInput /* eslint-disable-line */,
disabled,

...rest
Expand All @@ -498,7 +525,10 @@ export default class DatePickerInput extends PureComponent {
// title={submit_button_title} // Not implemented yet
icon="calendar"
variant="secondary"
on_submit={this.props.onSubmit}
on_submit={onSubmit}
// on_submit={this.onKeyUpHandler}
// onFocus={this.onKeyUpHandler}
onKeyUp={this.onKeyUpHandler}
{...rest}
/>
}
Expand Down
17 changes: 12 additions & 5 deletions ...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,10 @@ exports[`DatePicker component have to match snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onSubmit={[Function]}
onSubmitButtonFocus={[Function]}
range={true}
separatorRexExp={/\\[-\\\\/ \\]/g}
showInput={true}
startDate={2019-01-01T00:00:00.000Z}
>
<Input
Expand Down Expand Up @@ -124,6 +126,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
icon="calendar"
icon_size="medium"
id="date-picker-id"
onKeyUp={[Function]}
on_submit={[Function]}
on_submit_blur={null}
on_submit_focus={null}
Expand Down Expand Up @@ -595,6 +598,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
icon="calendar"
icon_size="medium"
id="date-picker-id"
onKeyUp={[Function]}
on_submit={[Function]}
on_submit_blur={null}
on_submit_focus={null}
Expand Down Expand Up @@ -624,6 +628,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
on_click={null}
size="medium"
text={null}
Expand All @@ -638,6 +643,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
onMouseOut={[Function]}
type="submit"
>
Expand All @@ -661,6 +667,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyUp={[Function]}
on_click={null}
size="medium"
text={null}
Expand Down Expand Up @@ -1602,13 +1609,13 @@ a.dnb-button:active, a.dnb-button:focus {
margin-right: 2.2rem; }
.dnb-date-picker__input__wrapper {
display: block;
width: 0;
visibility: hidden; }
display: none; }
.dnb-date-picker--show-input .dnb-date-picker__input__wrapper {
width: auto;
visibility: visible; }
display: block; }
.dnb-input__submit-button button:focus ~ .dnb-date-picker__input__wrapper {
display: block; }
.dnb-date-picker--separator {
margin: 0 -0.2rem; }
Expand Down
10 changes: 5 additions & 5 deletions packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,13 +139,13 @@
margin-right: 2.2rem;
}
&__input__wrapper {
display: block;
width: 0; // hide input by default
visibility: hidden;
display: none;
}
&--show-input &__input__wrapper {
width: auto;
visibility: visible;
display: block;
}
.dnb-input__submit-button button:focus ~ &__input__wrapper {
display: block;
}

&--separator {
Expand Down

0 comments on commit 3a2aadb

Please sign in to comment.