delint EditableText
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/21833/head
parent
3449a60d32
commit
f2e4e515c1
|
@ -1,5 +1,6 @@
|
||||||
/*
|
/*
|
||||||
Copyright 2015, 2016 OpenMarket Ltd
|
Copyright 2015, 2016 OpenMarket Ltd
|
||||||
|
Copyright 2018 New Vector Ltd
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with 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.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
import React from 'react';
|
||||||
|
|
||||||
const React = require('react');
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
const KEY_TAB = 9;
|
|
||||||
const KEY_SHIFT = 16;
|
|
||||||
const KEY_WINDOWS = 91;
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'EditableText',
|
displayName: 'EditableText',
|
||||||
|
|
||||||
|
@ -66,9 +61,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillReceiveProps: function(nextProps) {
|
componentWillReceiveProps: function(nextProps) {
|
||||||
if (nextProps.initialValue !== this.props.initialValue ||
|
if (nextProps.initialValue !== this.props.initialValue || nextProps.initialValue !== this.value) {
|
||||||
nextProps.initialValue !== this.value
|
|
||||||
) {
|
|
||||||
this.value = nextProps.initialValue;
|
this.value = nextProps.initialValue;
|
||||||
if (this.refs.editable_div) {
|
if (this.refs.editable_div) {
|
||||||
this.showPlaceholder(!this.value);
|
this.showPlaceholder(!this.value);
|
||||||
|
@ -139,7 +132,7 @@ module.exports = React.createClass({
|
||||||
this.showPlaceholder(false);
|
this.showPlaceholder(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ev.key == "Enter") {
|
if (ev.key === "Enter") {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
}
|
}
|
||||||
|
@ -156,9 +149,9 @@ module.exports = React.createClass({
|
||||||
this.value = ev.target.textContent;
|
this.value = ev.target.textContent;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ev.key == "Enter") {
|
if (ev.key === "Enter") {
|
||||||
this.onFinish(ev);
|
this.onFinish(ev);
|
||||||
} else if (ev.key == "Escape") {
|
} else if (ev.key === "Escape") {
|
||||||
this.cancelEdit();
|
this.cancelEdit();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -193,7 +186,7 @@ module.exports = React.createClass({
|
||||||
const submit = (ev.key === "Enter") || shouldSubmit;
|
const submit = (ev.key === "Enter") || shouldSubmit;
|
||||||
this.setState({
|
this.setState({
|
||||||
phase: this.Phases.Display,
|
phase: this.Phases.Display,
|
||||||
}, function() {
|
}, () => {
|
||||||
if (this.value !== this.props.initialValue) {
|
if (this.value !== this.props.initialValue) {
|
||||||
self.onValueChanged(submit);
|
self.onValueChanged(submit);
|
||||||
}
|
}
|
||||||
|
@ -204,23 +197,35 @@ module.exports = React.createClass({
|
||||||
const sel = window.getSelection();
|
const sel = window.getSelection();
|
||||||
sel.removeAllRanges();
|
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);
|
this.showPlaceholder(!this.value);
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
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
|
// show the label
|
||||||
editable_el = <div className={this.props.className + " " + this.props.labelClassName} onClick={this.onClickDiv}>{ this.props.label || this.props.initialValue }</div>;
|
editableEl = <div className={className + " " + labelClassName} onClick={this.onClickDiv}>
|
||||||
|
{ label || initialValue }
|
||||||
|
</div>;
|
||||||
} else {
|
} else {
|
||||||
// show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
|
// show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
|
||||||
editable_el = <div ref="editable_div" contentEditable="true" className={this.props.className}
|
editableEl = <div ref="editable_div"
|
||||||
onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onBlur}></div>;
|
contentEditable={true}
|
||||||
|
className={className}
|
||||||
|
onKeyDown={this.onKeyDown}
|
||||||
|
onKeyUp={this.onKeyUp}
|
||||||
|
onFocus={this.onFocus}
|
||||||
|
onBlur={this.onBlur} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return editable_el;
|
return editableEl;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue