diff --git a/src/context/ContextCalendar.jsx b/src/context/ContextCalendar.jsx index f4fcd3182a..9b36b3b7f5 100644 --- a/src/context/ContextCalendar.jsx +++ b/src/context/ContextCalendar.jsx @@ -1,20 +1,56 @@ import React from 'react'; import PropTypes from 'prop-types'; import Calendar from 'rc-calendar'; +import _ from 'lodash'; + +const ENTER_KEY = 13; +const UP_ARROW_KEY = 38; +const DOWN_ARROW_KEY = 40; +const LEFT_ARROW_KEY = 37; +const RIGHT_ARROW_KEY = 39; class ContextCalendar extends React.Component { handleDateSelect = (date) => { this.props.closePortal(); const context = { key: 'set-date-id', context: `${date.format('D MMM YYYY')}`, object: date }; - this.props.onSelected(this.props.state, context); + return this.props.onSelected(this.props.state, context); + } + + handleArrowKey = (e) => { + e.preventDefault(); + e.stopPropagation(); } + onKeyDown = (e, data, state, editor) => { + const keyCode = e.which; + if (keyCode === ENTER_KEY) { + this.handleArrowKey(e); + if (_.isUndefined(this.refs.input.state.selectedValue)) { + this.refs.input.state.selectedValue = this.refs.input.state.value; + } + return this.handleDateSelect(this.refs.input.state.selectedValue); + } else if (keyCode === UP_ARROW_KEY) { + this.handleArrowKey(e); + this.refs.input.goTime(-1, 'weeks'); + } else if (keyCode === DOWN_ARROW_KEY) { + this.handleArrowKey(e); + this.refs.input.goTime(1, 'weeks'); + } else if (keyCode === LEFT_ARROW_KEY) { + this.handleArrowKey(e); + this.refs.input.goTime(-1, 'days'); + } else if (keyCode === RIGHT_ARROW_KEY) { + this.handleArrowKey(e); + this.refs.input.goTime(1, 'days'); + } + } + + render() { return ( input && setTimeout(() => { input.focus(); }, 100)} + ref="input" /> ); } diff --git a/src/notes/FluxNotesEditor.jsx b/src/notes/FluxNotesEditor.jsx index 29dcb8589d..4806e51f9a 100644 --- a/src/notes/FluxNotesEditor.jsx +++ b/src/notes/FluxNotesEditor.jsx @@ -88,6 +88,7 @@ class FluxNotesEditor extends React.Component { closeCompletionPortal = () => { if (this.state.completionComponentShortcut) { // Clean up some variables stored at the Editor level + this.setState({ completionComponentShortcut: null, portalOptions: [],