diff options
author | Dan Finlay <somniac@me.com> | 2016-12-17 02:04:57 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-12-17 02:04:57 +0800 |
commit | 6d13ef691f4162caad6b8742a21d0b75f8baccca (patch) | |
tree | 74790ae54c78ea0dfb71329118397dde116ebe44 /ui/app/components/editable-label.js | |
parent | e6c01abba4b66c6ef98a9d8155439be002dea5cd (diff) | |
download | tangerine-wallet-browser-6d13ef691f4162caad6b8742a21d0b75f8baccca.tar.gz tangerine-wallet-browser-6d13ef691f4162caad6b8742a21d0b75f8baccca.tar.zst tangerine-wallet-browser-6d13ef691f4162caad6b8742a21d0b75f8baccca.zip |
Revert "Interface enhancements"
Diffstat (limited to 'ui/app/components/editable-label.js')
-rw-r--r-- | ui/app/components/editable-label.js | 40 |
1 files changed, 31 insertions, 9 deletions
diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js index 14c0294a2..41936f5e0 100644 --- a/ui/app/components/editable-label.js +++ b/ui/app/components/editable-label.js @@ -11,18 +11,40 @@ function EditableLabel () { } EditableLabel.prototype.render = function () { - return h('div.name-label', { - contentEditable: true, - style: { - outline: 'none', - marginTop: '0.5rem', - }, - onInput: (event) => this.saveText(), - }, this.props.children) + 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() + } } EditableLabel.prototype.saveText = function () { - var text = findDOMNode(this).textContent.trim() + var container = findDOMNode(this) + var text = container.querySelector('.editable-label input').value var truncatedText = text.substring(0, 20) this.props.saveText(truncatedText) this.setState({ isEditingLabel: false, textLabel: truncatedText }) |