From 56bc6685d9e39b19ca4b6d045f0f2b7dc9a819fc Mon Sep 17 00:00:00 2001 From: Karen Date: Mon, 14 Oct 2019 15:43:39 -0400 Subject: [PATCH 1/4] Moved calendar onKeyDown logic to slate plugin --- src/context/ContextCalendar.jsx | 42 ++++++++++++++++++++++++++++++++- src/notes/FluxNotesEditor.jsx | 2 +- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/context/ContextCalendar.jsx b/src/context/ContextCalendar.jsx index f4fcd3182a..9e3f454785 100644 --- a/src/context/ContextCalendar.jsx +++ b/src/context/ContextCalendar.jsx @@ -1,6 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import Calendar from 'rc-calendar'; +import Lang 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) => { @@ -9,12 +16,45 @@ class ContextCalendar extends React.Component { this.props.onSelected(this.props.state, context); } + onKeyDown = (e, data, state, editor) => { + const keyCode = e.which; + if (keyCode === ENTER_KEY) { + e.preventDefault(); + e.stopPropagation(); + if (Lang.isUndefined(this.cal.state.selectedValue)) { + this.cal.state.selectedValue = this.cal.state.value.format("D MMM YYYY"); + } + this.props.closePortal(); + const date = this.cal.state.selectedValue; + const context = { key: 'set-date-id', context: `${date}`, object: date }; + // If a plugin returns a state, it short circuits future plugins + return this.props.onSelected(this.props.state, context); + } else if (keyCode === UP_ARROW_KEY) { + e.preventDefault(); + e.stopPropagation(); + this.cal.goTime(-1, 'weeks'); + } else if (keyCode === DOWN_ARROW_KEY) { + e.preventDefault(); + e.stopPropagation(); + this.cal.goTime(1, 'weeks'); + } else if (keyCode === LEFT_ARROW_KEY) { + e.preventDefault(); + e.stopPropagation(); + this.cal.goTime(-1, 'days'); + } else if (keyCode === RIGHT_ARROW_KEY) { + e.preventDefault(); + e.stopPropagation(); + this.cal.goTime(1, 'days'); + } + } + + render() { return ( input && setTimeout(() => { input.focus(); }, 100)} + ref= {input => input && setTimeout(() => { this.cal = input; }, 100)} /> ); } diff --git a/src/notes/FluxNotesEditor.jsx b/src/notes/FluxNotesEditor.jsx index 29dcb8589d..2f43588e11 100644 --- a/src/notes/FluxNotesEditor.jsx +++ b/src/notes/FluxNotesEditor.jsx @@ -87,7 +87,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: [], From ce54ee0f3027229e6acc3ec063619a2d659c3cac Mon Sep 17 00:00:00 2001 From: Karen Date: Wed, 16 Oct 2019 10:39:20 -0400 Subject: [PATCH 2/4] Refactor code and remove setTimeout --- src/context/ContextCalendar.jsx | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/context/ContextCalendar.jsx b/src/context/ContextCalendar.jsx index 9e3f454785..450a551db8 100644 --- a/src/context/ContextCalendar.jsx +++ b/src/context/ContextCalendar.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Calendar from 'rc-calendar'; -import Lang from 'lodash'; +import _ from 'lodash'; const ENTER_KEY = 13; const UP_ARROW_KEY = 38; @@ -21,30 +21,26 @@ class ContextCalendar extends React.Component { if (keyCode === ENTER_KEY) { e.preventDefault(); e.stopPropagation(); - if (Lang.isUndefined(this.cal.state.selectedValue)) { - this.cal.state.selectedValue = this.cal.state.value.format("D MMM YYYY"); + if (_.isUndefined(this.refs.input.state.selectedValue)) { + this.refs.input.state.selectedValue = this.refs.input.state.value; } - this.props.closePortal(); - const date = this.cal.state.selectedValue; - const context = { key: 'set-date-id', context: `${date}`, object: date }; - // If a plugin returns a state, it short circuits future plugins - return this.props.onSelected(this.props.state, context); + this.handleDateSelect(this.refs.input.state.selectedValue); } else if (keyCode === UP_ARROW_KEY) { e.preventDefault(); e.stopPropagation(); - this.cal.goTime(-1, 'weeks'); + this.refs.input.goTime(-1, 'weeks'); } else if (keyCode === DOWN_ARROW_KEY) { e.preventDefault(); e.stopPropagation(); - this.cal.goTime(1, 'weeks'); + this.refs.input.goTime(1, 'weeks'); } else if (keyCode === LEFT_ARROW_KEY) { e.preventDefault(); e.stopPropagation(); - this.cal.goTime(-1, 'days'); + this.refs.input.goTime(-1, 'days'); } else if (keyCode === RIGHT_ARROW_KEY) { e.preventDefault(); e.stopPropagation(); - this.cal.goTime(1, 'days'); + this.refs.input.goTime(1, 'days'); } } @@ -54,7 +50,7 @@ class ContextCalendar extends React.Component { input && setTimeout(() => { this.cal = input; }, 100)} + ref="input" /> ); } From d530f245d285f03537e2fd3d74474d92888a6c59 Mon Sep 17 00:00:00 2001 From: Karen Date: Thu, 17 Oct 2019 09:29:32 -0400 Subject: [PATCH 3/4] Minor changes --- src/context/ContextCalendar.jsx | 20 ++++++++++---------- src/notes/FluxNotesEditor.jsx | 1 + 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/context/ContextCalendar.jsx b/src/context/ContextCalendar.jsx index 450a551db8..4f27cd7f03 100644 --- a/src/context/ContextCalendar.jsx +++ b/src/context/ContextCalendar.jsx @@ -16,30 +16,30 @@ class ContextCalendar extends React.Component { 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) { - e.preventDefault(); - e.stopPropagation(); + this.handleArrowKey(e); if (_.isUndefined(this.refs.input.state.selectedValue)) { this.refs.input.state.selectedValue = this.refs.input.state.value; } this.handleDateSelect(this.refs.input.state.selectedValue); } else if (keyCode === UP_ARROW_KEY) { - e.preventDefault(); - e.stopPropagation(); + this.handleArrowKey(e); this.refs.input.goTime(-1, 'weeks'); } else if (keyCode === DOWN_ARROW_KEY) { - e.preventDefault(); - e.stopPropagation(); + this.handleArrowKey(e); this.refs.input.goTime(1, 'weeks'); } else if (keyCode === LEFT_ARROW_KEY) { - e.preventDefault(); - e.stopPropagation(); + this.handleArrowKey(e); this.refs.input.goTime(-1, 'days'); } else if (keyCode === RIGHT_ARROW_KEY) { - e.preventDefault(); - e.stopPropagation(); + this.handleArrowKey(e); this.refs.input.goTime(1, 'days'); } } diff --git a/src/notes/FluxNotesEditor.jsx b/src/notes/FluxNotesEditor.jsx index 2f43588e11..4806e51f9a 100644 --- a/src/notes/FluxNotesEditor.jsx +++ b/src/notes/FluxNotesEditor.jsx @@ -87,6 +87,7 @@ class FluxNotesEditor extends React.Component { closeCompletionPortal = () => { if (this.state.completionComponentShortcut) { + // Clean up some variables stored at the Editor level this.setState({ completionComponentShortcut: null, From 9ed82c400c8ad5ed12bb0959235f18ec7a60d3f8 Mon Sep 17 00:00:00 2001 From: Karen Date: Thu, 17 Oct 2019 13:58:03 -0400 Subject: [PATCH 4/4] Return state to prop to fix short circuiting onKeyDown --- src/context/ContextCalendar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/context/ContextCalendar.jsx b/src/context/ContextCalendar.jsx index 4f27cd7f03..9b36b3b7f5 100644 --- a/src/context/ContextCalendar.jsx +++ b/src/context/ContextCalendar.jsx @@ -13,7 +13,7 @@ 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) => { @@ -28,7 +28,7 @@ class ContextCalendar extends React.Component { if (_.isUndefined(this.refs.input.state.selectedValue)) { this.refs.input.state.selectedValue = this.refs.input.state.value; } - this.handleDateSelect(this.refs.input.state.selectedValue); + return this.handleDateSelect(this.refs.input.state.selectedValue); } else if (keyCode === UP_ARROW_KEY) { this.handleArrowKey(e); this.refs.input.goTime(-1, 'weeks');