Add InlineInput widget

Author: dapi

src/components/Lane/LaneHeader.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import EditableLabel from 'components/widgets/EditableLabel'
-
+import InlineInput from 'components/widgets/InlineInput'
 import {Title, LaneHeader, RightContent } from 'styles/Base'
 import LaneMenu from './LaneHeader/LaneMenu'
 
@@ -13,7 +12,7 @@ const LaneHeaderComponent = ({
     <LaneHeader onDoubleClick={onDoubleClick}>
       <Title style={titleStyle}>
       {editLaneTitle ?
-        <EditableLabel value={title} border inline placeholder={t('placeholder.title')} onChange={updateTitle} /> :
+        <InlineInput value={title} border placeholder={t('placeholder.title')} onChange={updateTitle} /> :
         title
       }
       </Title>

src/components/widgets/InlineInput.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {InlineInput} from 'styles/Base'
+
+class InlineInputController extends React.Component {
+	onFocus = (e) => e.target.select()
+
+	// This is the way to select all text if mouse clicked
+	onMouseDown = (e) => {
+		if (document.activeElement != e.target) {
+			e.preventDefault()
+			this.refInput.focus()
+		}
+	}
+
+	onBlur = () => {
+		this.updateValue()
+	}
+
+	onKeyDown = (e) => {
+		if(e.keyCode == 13) {
+			this.refInput.blur()
+			e.preventDefault()
+		}
+		if(e.keyCode == 27) {
+			this.refInput.blur()
+			e.preventDefault()
+		}
+	}
+
+	getValue = () => this.refInput.value
+
+	updateValue = () => {
+		if (this.getValue() != this.props.value) {
+			this.props.onChange(this.getValue())
+		}
+	}
+
+	render() {
+		const {autoFocus, value, placeholder} = this.props
+
+		return <InlineInput
+			ref={ref => (this.refInput = ref)}
+			onMouseDown={this.onMouseDown}
+			onFocus={this.onFocus}
+			onBlur={this.onBlur}
+			onKeyDown={this.onKeyDown}
+			placeholder={value.length == 0 ? false : placeholder}
+			defaultValue={value}
+		/>
+}
+	}
+
+	InlineInputController.defaultProps = {
+		onChange: () => {},
+			placeholder: '',
+		value: '',
+	}
+
+	InlineInputController.propTypes = {
+		onChange: PropTypes.func,
+		placeholder: PropTypes.string,
+		value: PropTypes.string
+	}
+
+	export default InlineInputController

src/styles/Base.js

@@ -257,3 +257,22 @@ export const NewLaneButtons = styled.div`
 export const CardForm = styled.div`
   background-color: #e3e3e3;
 `
+
+export const InlineInput = styled.textarea`
+  overflow: hidden;
+  word-wrap: break-word;
+  resize: none;
+  width: 100%;
+  height: 28px;
+  line-height: 20px;
+  background-color: transparent;
+  box-shadow: none;
+  border-radius: 3px;
+  border: 0;
+  padding: 4px 8px;
+  outline: 0;
+  &:focus {
+    background-color: white;
+    box-shadow: inset 0 0 0 2px #0079bf;
+  }
+`