Merge pull request #791 from FluxNotes/refocus-editor-datepicker

Moved calendar onKeyDown logic to slate plugin
FluxNotes · Oct 17, 2019 · 406af20 · 406af20
2 parents 6422b85 + 9ed82c4
commit 406af20
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git 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 (
             <Calendar
                 showDateInput={false}
                 onSelect={this.handleDateSelect}
-                ref={input => input && setTimeout(() => { input.focus(); }, 100)}
+                ref="input"
             />
         );
     }

diff --git 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: [],