From 6561e75aa2fb03c77544da3c090ad6ea2883d29a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 14 Nov 2017 12:34:23 -0330 Subject: Add old-ui directory --- old-ui/app/components/editable-label.js | 57 +++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 old-ui/app/components/editable-label.js (limited to 'old-ui/app/components/editable-label.js') diff --git a/old-ui/app/components/editable-label.js b/old-ui/app/components/editable-label.js new file mode 100644 index 000000000..8a5c8954f --- /dev/null +++ b/old-ui/app/components/editable-label.js @@ -0,0 +1,57 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const findDOMNode = require('react-dom').findDOMNode + +module.exports = EditableLabel + +inherits(EditableLabel, Component) +function EditableLabel () { + Component.call(this) +} + +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) => { + const nameAttribute = event.target.getAttribute('name') + // checks for class to handle smaller CTA above the account name + const classAttribute = event.target.getAttribute('class') + if (nameAttribute === 'edit' || classAttribute === 'edit-text') { + this.setState({ isEditingLabel: true }) + } + }, + }, this.props.children) + } +} + +EditableLabel.prototype.saveIfEnter = function (event) { + if (event.key === 'Enter') { + this.saveText() + } +} + +EditableLabel.prototype.saveText = function () { + // eslint-disable-next-line react/no-find-dom-node + 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 }) +} -- cgit v1.2.3 From 70557e0448a89f5d04be15b7f8152bd398273dbe Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 14:49:59 -0330 Subject: Flex account-data-subsection --- old-ui/app/components/editable-label.js | 1 + 1 file changed, 1 insertion(+) (limited to 'old-ui/app/components/editable-label.js') diff --git a/old-ui/app/components/editable-label.js b/old-ui/app/components/editable-label.js index 8a5c8954f..88993d837 100644 --- a/old-ui/app/components/editable-label.js +++ b/old-ui/app/components/editable-label.js @@ -29,6 +29,7 @@ EditableLabel.prototype.render = function () { ]) } else { return h('div.name-label', { + style: props.nameLabelStyle, onClick: (event) => { const nameAttribute = event.target.getAttribute('name') // checks for class to handle smaller CTA above the account name -- cgit v1.2.3 From 68ef52e183c8564de83e7d8d41d90c5790f2c1be Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 12 Dec 2017 17:01:15 -0330 Subject: Remove inline style. --- old-ui/app/components/editable-label.js | 1 - 1 file changed, 1 deletion(-) (limited to 'old-ui/app/components/editable-label.js') diff --git a/old-ui/app/components/editable-label.js b/old-ui/app/components/editable-label.js index 88993d837..8a5c8954f 100644 --- a/old-ui/app/components/editable-label.js +++ b/old-ui/app/components/editable-label.js @@ -29,7 +29,6 @@ EditableLabel.prototype.render = function () { ]) } else { return h('div.name-label', { - style: props.nameLabelStyle, onClick: (event) => { const nameAttribute = event.target.getAttribute('name') // checks for class to handle smaller CTA above the account name -- cgit v1.2.3