2015-07-15 15:52:27 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-07-15 15:52:27 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var React = require('react');
|
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
const KEY_TAB = 9;
|
|
|
|
const KEY_SHIFT = 16;
|
|
|
|
const KEY_WINDOWS = 91;
|
|
|
|
|
2015-11-26 18:16:50 +03:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'EditableText',
|
2016-04-15 19:55:00 +03:00
|
|
|
|
2015-07-15 15:52:27 +03:00
|
|
|
propTypes: {
|
|
|
|
onValueChanged: React.PropTypes.func,
|
2015-09-16 16:18:25 +03:00
|
|
|
initialValue: React.PropTypes.string,
|
|
|
|
label: React.PropTypes.string,
|
2016-01-10 15:56:45 +03:00
|
|
|
placeholder: React.PropTypes.string,
|
|
|
|
className: React.PropTypes.string,
|
|
|
|
labelClassName: React.PropTypes.string,
|
|
|
|
placeholderClassName: React.PropTypes.string,
|
2017-03-02 20:29:06 +03:00
|
|
|
// Overrides blurToSubmit if true
|
2016-01-10 15:56:45 +03:00
|
|
|
blurToCancel: React.PropTypes.bool,
|
2017-03-02 20:29:06 +03:00
|
|
|
// Will cause onValueChanged(value, true) to fire on blur
|
|
|
|
blurToSubmit: React.PropTypes.bool,
|
2016-01-13 16:15:13 +03:00
|
|
|
editable: React.PropTypes.bool,
|
2015-07-15 15:52:27 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
Phases: {
|
|
|
|
Display: "display",
|
|
|
|
Edit: "edit",
|
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
onValueChanged: function() {},
|
2015-09-16 16:18:25 +03:00
|
|
|
initialValue: '',
|
2016-01-10 15:56:45 +03:00
|
|
|
label: '',
|
2015-09-16 16:18:25 +03:00
|
|
|
placeholder: '',
|
2016-01-13 16:15:13 +03:00
|
|
|
editable: true,
|
2016-07-29 19:35:48 +03:00
|
|
|
className: "mx_EditableText",
|
|
|
|
placeholderClassName: "mx_EditableText_placeholder",
|
2017-03-02 20:29:06 +03:00
|
|
|
blurToSubmit: false,
|
2015-07-15 15:52:27 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
phase: this.Phases.Display,
|
2017-01-20 17:22:27 +03:00
|
|
|
};
|
2015-07-15 15:52:27 +03:00
|
|
|
},
|
|
|
|
|
2015-09-16 16:18:25 +03:00
|
|
|
componentWillReceiveProps: function(nextProps) {
|
2016-01-17 06:59:31 +03:00
|
|
|
if (nextProps.initialValue !== this.props.initialValue) {
|
|
|
|
this.value = nextProps.initialValue;
|
|
|
|
if (this.refs.editable_div) {
|
|
|
|
this.showPlaceholder(!this.value);
|
|
|
|
}
|
|
|
|
}
|
2015-09-16 16:18:25 +03:00
|
|
|
},
|
|
|
|
|
2016-01-18 17:00:47 +03:00
|
|
|
componentWillMount: function() {
|
|
|
|
// we track value as an JS object field rather than in React state
|
|
|
|
// as React doesn't play nice with contentEditable.
|
|
|
|
this.value = '';
|
|
|
|
this.placeholder = false;
|
|
|
|
},
|
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
componentDidMount: function() {
|
|
|
|
this.value = this.props.initialValue;
|
|
|
|
if (this.refs.editable_div) {
|
|
|
|
this.showPlaceholder(!this.value);
|
|
|
|
}
|
2015-07-15 15:52:27 +03:00
|
|
|
},
|
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
showPlaceholder: function(show) {
|
|
|
|
if (show) {
|
|
|
|
this.refs.editable_div.textContent = this.props.placeholder;
|
|
|
|
this.refs.editable_div.setAttribute("class", this.props.className + " " + this.props.placeholderClassName);
|
|
|
|
this.placeholder = true;
|
|
|
|
this.value = '';
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.refs.editable_div.textContent = this.value;
|
|
|
|
this.refs.editable_div.setAttribute("class", this.props.className);
|
|
|
|
this.placeholder = false;
|
2016-07-29 19:35:48 +03:00
|
|
|
}
|
2016-01-10 15:56:45 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getValue: function() {
|
|
|
|
return this.value;
|
2015-09-16 16:18:25 +03:00
|
|
|
},
|
2015-07-15 15:52:27 +03:00
|
|
|
|
2016-01-17 05:48:55 +03:00
|
|
|
setValue: function(value) {
|
|
|
|
this.value = value;
|
2016-07-29 19:35:48 +03:00
|
|
|
this.showPlaceholder(!this.value);
|
2016-01-17 05:48:55 +03:00
|
|
|
},
|
|
|
|
|
2015-09-16 16:18:25 +03:00
|
|
|
edit: function() {
|
|
|
|
this.setState({
|
|
|
|
phase: this.Phases.Edit,
|
|
|
|
});
|
2015-07-15 15:52:27 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
cancelEdit: function() {
|
|
|
|
this.setState({
|
|
|
|
phase: this.Phases.Display,
|
|
|
|
});
|
2016-01-17 05:48:55 +03:00
|
|
|
this.value = this.props.initialValue;
|
|
|
|
this.showPlaceholder(!this.value);
|
2015-09-16 16:18:25 +03:00
|
|
|
this.onValueChanged(false);
|
2015-07-15 15:52:27 +03:00
|
|
|
},
|
|
|
|
|
2015-09-16 16:18:25 +03:00
|
|
|
onValueChanged: function(shouldSubmit) {
|
2016-01-10 15:56:45 +03:00
|
|
|
this.props.onValueChanged(this.value, shouldSubmit);
|
|
|
|
},
|
|
|
|
|
|
|
|
onKeyDown: function(ev) {
|
|
|
|
// console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
2016-07-29 19:35:48 +03:00
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
if (this.placeholder) {
|
2016-01-17 05:48:55 +03:00
|
|
|
this.showPlaceholder(false);
|
2016-01-10 15:56:45 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (ev.key == "Enter") {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
// console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
2015-07-15 15:52:27 +03:00
|
|
|
},
|
2015-11-26 18:16:50 +03:00
|
|
|
|
|
|
|
onKeyUp: function(ev) {
|
2016-01-10 15:56:45 +03:00
|
|
|
// console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
|
|
|
|
|
|
|
if (!ev.target.textContent) {
|
|
|
|
this.showPlaceholder(true);
|
|
|
|
}
|
|
|
|
else if (!this.placeholder) {
|
|
|
|
this.value = ev.target.textContent;
|
|
|
|
}
|
|
|
|
|
2015-11-26 18:16:50 +03:00
|
|
|
if (ev.key == "Enter") {
|
|
|
|
this.onFinish(ev);
|
|
|
|
} else if (ev.key == "Escape") {
|
|
|
|
this.cancelEdit();
|
|
|
|
}
|
2016-01-10 15:56:45 +03:00
|
|
|
|
|
|
|
// console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
|
2015-11-26 18:16:50 +03:00
|
|
|
},
|
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
onClickDiv: function(ev) {
|
2016-01-13 16:15:13 +03:00
|
|
|
if (!this.props.editable) return;
|
|
|
|
|
2015-11-26 18:16:50 +03:00
|
|
|
this.setState({
|
|
|
|
phase: this.Phases.Edit,
|
2017-01-20 17:22:27 +03:00
|
|
|
});
|
2015-11-26 18:16:50 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onFocus: function(ev) {
|
2016-01-10 15:56:45 +03:00
|
|
|
//ev.target.setSelectionRange(0, ev.target.textContent.length);
|
2016-01-10 16:14:12 +03:00
|
|
|
|
|
|
|
var node = ev.target.childNodes[0];
|
2016-01-15 15:34:53 +03:00
|
|
|
if (node) {
|
|
|
|
var range = document.createRange();
|
|
|
|
range.setStart(node, 0);
|
|
|
|
range.setEnd(node, node.length);
|
2016-07-29 19:35:48 +03:00
|
|
|
|
2016-01-15 15:34:53 +03:00
|
|
|
var sel = window.getSelection();
|
|
|
|
sel.removeAllRanges();
|
|
|
|
sel.addRange(range);
|
|
|
|
}
|
2015-11-26 18:16:50 +03:00
|
|
|
},
|
|
|
|
|
2017-03-02 20:29:06 +03:00
|
|
|
onFinish: function(ev, shouldSubmit) {
|
2016-01-10 15:56:45 +03:00
|
|
|
var self = this;
|
2017-03-02 20:29:06 +03:00
|
|
|
var submit = (ev.key === "Enter") || shouldSubmit;
|
2016-01-10 15:56:45 +03:00
|
|
|
this.setState({
|
|
|
|
phase: this.Phases.Display,
|
|
|
|
}, function() {
|
2016-01-15 15:34:53 +03:00
|
|
|
self.onValueChanged(submit);
|
2016-01-10 15:56:45 +03:00
|
|
|
});
|
2015-11-26 18:16:50 +03:00
|
|
|
},
|
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
onBlur: function(ev) {
|
2016-01-14 20:24:52 +03:00
|
|
|
var sel = window.getSelection();
|
|
|
|
sel.removeAllRanges();
|
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
if (this.props.blurToCancel)
|
2017-01-20 17:22:27 +03:00
|
|
|
{this.cancelEdit();}
|
2016-01-10 15:56:45 +03:00
|
|
|
else
|
2017-03-02 20:29:06 +03:00
|
|
|
{this.onFinish(ev, this.props.blurToSubmit);}
|
2016-01-17 05:48:55 +03:00
|
|
|
|
|
|
|
this.showPlaceholder(!this.value);
|
2015-12-23 19:02:18 +03:00
|
|
|
},
|
|
|
|
|
2015-11-26 18:16:50 +03:00
|
|
|
render: function() {
|
|
|
|
var editable_el;
|
|
|
|
|
2016-01-13 16:15:13 +03:00
|
|
|
if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) {
|
2016-01-10 15:56:45 +03:00
|
|
|
// show the label
|
2016-01-13 16:15:13 +03:00
|
|
|
editable_el = <div className={this.props.className + " " + this.props.labelClassName} onClick={this.onClickDiv}>{ this.props.label || this.props.initialValue }</div>;
|
2016-01-10 15:56:45 +03:00
|
|
|
} else {
|
|
|
|
// 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}
|
|
|
|
onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onBlur}></div>;
|
2015-11-26 18:16:50 +03:00
|
|
|
}
|
|
|
|
|
2016-01-10 15:56:45 +03:00
|
|
|
return editable_el;
|
2015-11-26 18:16:50 +03:00
|
|
|
}
|
2015-11-26 18:17:34 +03:00
|
|
|
});
|