diff options
author | Dan Finlay <somniac@me.com> | 2016-12-15 08:46:36 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-12-15 08:46:36 +0800 |
commit | e6c01abba4b66c6ef98a9d8155439be002dea5cd (patch) | |
tree | 221def76735c59e00fc7a511e260f835210a9057 /ui/app/components/editable-label.js | |
parent | 9e3fa3cfba20299413df87d18158180c7798d2ac (diff) | |
parent | 3969526403c487eb45f8a34774b3267ab126cdda (diff) | |
download | tangerine-wallet-browser-e6c01abba4b66c6ef98a9d8155439be002dea5cd.tar.gz tangerine-wallet-browser-e6c01abba4b66c6ef98a9d8155439be002dea5cd.tar.zst tangerine-wallet-browser-e6c01abba4b66c6ef98a9d8155439be002dea5cd.zip |
Merge pull request #920 from luisivan/dev
Interface enhancements
Diffstat (limited to 'ui/app/components/editable-label.js')
-rw-r--r-- | ui/app/components/editable-label.js | 40 |
1 files changed, 9 insertions, 31 deletions
diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js index 41936f5e0..14c0294a2 100644 --- a/ui/app/components/editable-label.js +++ b/ui/app/components/editable-label.js @@ -11,40 +11,18 @@ function EditableLabel () { } EditableLabel.prototype.render = function () { - const props = this.props - const state = this.state - - if (state && state.isEditingLabel) { - return h('div.editable-label', [ - h('input.sizing-input', { - defaultValue: props.textValue, - maxLength: '20', - onKeyPress: (event) => { - this.saveIfEnter(event) - }, - }), - h('button.editable-button', { - onClick: () => this.saveText(), - }, 'Save'), - ]) - } else { - return h('div.name-label', { - onClick: (event) => { - this.setState({ isEditingLabel: true }) - }, - }, this.props.children) - } -} - -EditableLabel.prototype.saveIfEnter = function (event) { - if (event.key === 'Enter') { - this.saveText() - } + return h('div.name-label', { + contentEditable: true, + style: { + outline: 'none', + marginTop: '0.5rem', + }, + onInput: (event) => this.saveText(), + }, this.props.children) } EditableLabel.prototype.saveText = function () { - var container = findDOMNode(this) - var text = container.querySelector('.editable-label input').value + var text = findDOMNode(this).textContent.trim() var truncatedText = text.substring(0, 20) this.props.saveText(truncatedText) this.setState({ isEditingLabel: false, textLabel: truncatedText }) |