diff --git a/lib/components/package.json b/lib/components/package.json index fa91795dc13..36fcae541fe 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -52,7 +52,6 @@ "overlayscrollbars": "^1.13.1", "polished": "^3.6.7", "react-color": "^2.19.3", - "react-hotkeys": "^0.10.0", "react-popper-tooltip": "^3.1.1", "react-syntax-highlighter": "^13.5.3", "react-textarea-autosize": "^8.3.0", diff --git a/lib/components/src/controls/react-editable-json-tree/components/JsonAddValue.js b/lib/components/src/controls/react-editable-json-tree/components/JsonAddValue.js index c64414fe85f..8facea83c24 100644 --- a/lib/components/src/controls/react-editable-json-tree/components/JsonAddValue.js +++ b/lib/components/src/controls/react-editable-json-tree/components/JsonAddValue.js @@ -8,7 +8,6 @@ /* ************************************* */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { HotKeys } from 'react-hotkeys'; import inputUsageTypes from '../types/inputUsageTypes'; /* ************************************* */ @@ -47,6 +46,7 @@ class JsonAddValue extends Component { // Bind this.refInputValue = this.refInputValue.bind(this); this.refInputKey = this.refInputKey.bind(this); + this.onKeydown = this.onKeydown.bind(this); this.onSubmit = this.onSubmit.bind(this); } @@ -61,6 +61,24 @@ class JsonAddValue extends Component { if (onlyValue && inputRefValue && typeof inputRefValue.focus === 'function') { inputRefValue.focus(); } + + document.addEventListener('keydown', this.onKeydown); + } + + componentWillUnmount() { + document.removeEventListener('keydown', this.onKeydown); + } + + onKeydown(event) { + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return; + if (event.code === 'Enter' || event.key === 'Enter') { + event.preventDefault(); + this.onSubmit(); + } + if (event.code === 'Escape' || event.key === 'Escape') { + event.preventDefault(); + this.props.handleCancel(); + } } onSubmit() { @@ -122,17 +140,12 @@ class JsonAddValue extends Component { separatorElement = ':'; } - const handlers = { - esc: handleCancel, - enter: this.onSubmit, - }; - return ( - + {inputElementKeyLayout} {separatorElement} {inputElementValueLayout}{' '} {cancelButtonElementLayout} {addButtonElementLayout} - + ); } } diff --git a/lib/components/src/controls/react-editable-json-tree/components/JsonFunctionValue.js b/lib/components/src/controls/react-editable-json-tree/components/JsonFunctionValue.js index 6b157cf3c73..13ca6e63a34 100644 --- a/lib/components/src/controls/react-editable-json-tree/components/JsonFunctionValue.js +++ b/lib/components/src/controls/react-editable-json-tree/components/JsonFunctionValue.js @@ -8,7 +8,6 @@ /* ************************************* */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { HotKeys } from 'react-hotkeys'; import { isComponentWillChange } from '../utils/objectTypes'; import inputUsageTypes from '../types/inputUsageTypes'; @@ -65,6 +64,7 @@ class JsonFunctionValue extends Component { this.refInput = this.refInput.bind(this); this.handleCancelEdit = this.handleCancelEdit.bind(this); this.handleEdit = this.handleEdit.bind(this); + this.onKeydown = this.onKeydown.bind(this); } componentWillReceiveProps(nextProps) { @@ -83,9 +83,30 @@ class JsonFunctionValue extends Component { } } + componentDidMount() { + document.addEventListener('keydown', this.onKeydown); + } + + componentWillUnmount() { + document.removeEventListener('keydown', this.onKeydown); + } + + onKeydown(event) { + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return; + if (event.code === 'Enter' || event.key === 'Enter') { + event.preventDefault(); + this.handleEdit(); + } + if (event.code === 'Escape' || event.key === 'Escape') { + event.preventDefault(); + this.handleCancelEdit(); + } + } + handleEdit() { const { handleUpdateValue, originalValue, logger, onSubmitValueParser, keyPath } = this.props; const { inputRef, name, deep } = this.state; + if (!inputRef) return; const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value); @@ -189,24 +210,14 @@ class JsonFunctionValue extends Component { minusElement = resultOnlyResult ? null : minusMenuLayout; } - const handlers = { - esc: this.handleCancelEdit, - enter: this.handleEdit, - }; - return ( - +
  • {name} :{' '} {result} {minusElement} - +
    • ); } } diff --git a/lib/components/src/controls/react-editable-json-tree/components/JsonValue.js b/lib/components/src/controls/react-editable-json-tree/components/JsonValue.js index fd09e2cb544..c799599775f 100644 --- a/lib/components/src/controls/react-editable-json-tree/components/JsonValue.js +++ b/lib/components/src/controls/react-editable-json-tree/components/JsonValue.js @@ -8,7 +8,6 @@ /* ************************************* */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { HotKeys } from 'react-hotkeys'; import { isComponentWillChange } from '../utils/objectTypes'; import inputUsageTypes from '../types/inputUsageTypes'; @@ -65,6 +64,7 @@ class JsonValue extends Component { this.refInput = this.refInput.bind(this); this.handleCancelEdit = this.handleCancelEdit.bind(this); this.handleEdit = this.handleEdit.bind(this); + this.onKeydown = this.onKeydown.bind(this); } componentWillReceiveProps(nextProps) { @@ -83,9 +83,30 @@ class JsonValue extends Component { } } + componentDidMount() { + document.addEventListener('keydown', this.onKeydown); + } + + componentWillUnmount() { + document.removeEventListener('keydown', this.onKeydown); + } + + onKeydown(event) { + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return; + if (event.code === 'Enter' || event.key === 'Enter') { + event.preventDefault(); + this.handleEdit(); + } + if (event.code === 'Escape' || event.key === 'Escape') { + event.preventDefault(); + this.handleCancelEdit(); + } + } + handleEdit() { const { handleUpdateValue, originalValue, logger, onSubmitValueParser, keyPath } = this.props; const { inputRef, name, deep } = this.state; + if (!inputRef) return; const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value); @@ -189,19 +210,14 @@ class JsonValue extends Component { minusElement = readOnlyResult ? null : minusMenuLayout; } - const handlers = { - esc: this.handleCancelEdit, - enter: this.handleEdit, - }; - return ( - +
  • {name} :{' '} {result} {minusElement} - +
    • ); } } diff --git a/yarn.lock b/yarn.lock index 70602ad6487..e433abdf290 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11702,7 +11702,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" -create-react-class@^15.5.2, create-react-class@^15.6.0: +create-react-class@^15.6.0: version "15.7.0" resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e" integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng== @@ -21982,11 +21982,6 @@ lodash@4.17.20, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== -lodash@^4.13.1: - version "4.17.21" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" - integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== - log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18" @@ -23218,11 +23213,6 @@ mount-point@^3.0.0: pify "^2.3.0" pinkie-promise "^2.0.1" -mousetrap@^1.5.2: - version "1.6.5" - resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9" - integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA== - mout@^1.0.0: version "1.2.2" resolved "https://registry.yarnpkg.com/mout/-/mout-1.2.2.tgz#c9b718a499806a0632cede178e80f436259e777d" @@ -27422,16 +27412,6 @@ react-helmet-async@^1.0.7: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-hotkeys@^0.10.0: - version "0.10.0" - resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-0.10.0.tgz#d1e78bd63f16d6db58d550d33c8eb071f35d94fb" - integrity sha1-0eeL1j8W1ttY1VDTPI6wcfNdlPs= - dependencies: - create-react-class "^15.5.2" - lodash "^4.13.1" - mousetrap "^1.5.2" - prop-types "^15.5.8" - react-input-autosize@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"