diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js index ce1817c272..1f49bcddae 100644 --- a/src/components/views/elements/EditableText.js +++ b/src/components/views/elements/EditableText.js @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +Copyright 2018 New Vector Ltd Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,15 +15,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -'use strict'; - -const React = require('react'); +import React from 'react'; import PropTypes from 'prop-types'; -const KEY_TAB = 9; -const KEY_SHIFT = 16; -const KEY_WINDOWS = 91; - module.exports = React.createClass({ displayName: 'EditableText', @@ -66,9 +61,7 @@ module.exports = React.createClass({ }, componentWillReceiveProps: function(nextProps) { - if (nextProps.initialValue !== this.props.initialValue || - nextProps.initialValue !== this.value - ) { + if (nextProps.initialValue !== this.props.initialValue || nextProps.initialValue !== this.value) { this.value = nextProps.initialValue; if (this.refs.editable_div) { this.showPlaceholder(!this.value); @@ -139,7 +132,7 @@ module.exports = React.createClass({ this.showPlaceholder(false); } - if (ev.key == "Enter") { + if (ev.key === "Enter") { ev.stopPropagation(); ev.preventDefault(); } @@ -156,9 +149,9 @@ module.exports = React.createClass({ this.value = ev.target.textContent; } - if (ev.key == "Enter") { + if (ev.key === "Enter") { this.onFinish(ev); - } else if (ev.key == "Escape") { + } else if (ev.key === "Escape") { this.cancelEdit(); } @@ -193,7 +186,7 @@ module.exports = React.createClass({ const submit = (ev.key === "Enter") || shouldSubmit; this.setState({ phase: this.Phases.Display, - }, function() { + }, () => { if (this.value !== this.props.initialValue) { self.onValueChanged(submit); } @@ -204,23 +197,35 @@ module.exports = React.createClass({ const sel = window.getSelection(); sel.removeAllRanges(); - if (this.props.blurToCancel) {this.cancelEdit();} else {this.onFinish(ev, this.props.blurToSubmit);} + if (this.props.blurToCancel) { + this.cancelEdit(); + } else { + this.onFinish(ev, this.props.blurToSubmit); + } this.showPlaceholder(!this.value); }, render: function() { - let editable_el; + const {className, editable, initialValue, label, labelClassName} = this.props; + let editableEl; - if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) { + if (!editable || (this.state.phase === this.Phases.Display && (label || labelClassName) && !this.value)) { // show the label - editable_el =
{ this.props.label || this.props.initialValue }
; + editableEl =
+ { label || initialValue } +
; } else { // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together - editable_el =
; + editableEl =
; } - return editable_el; + return editableEl; }, });