Refactor InlintInput

Author: dapi

src/components/Lane/LaneHeader.js

@@ -12,7 +12,7 @@ const LaneHeaderComponent = ({
     <LaneHeader onDoubleClick={onDoubleClick}>
       <Title style={titleStyle}>
       {editLaneTitle ?
-        <InlineInput value={title} border placeholder={t('placeholder.title')} onChange={updateTitle} /> :
+        <InlineInput value={title} border placeholder={t('placeholder.title')} onSave={updateTitle} /> :
         title
       }
       </Title>

src/components/widgets/InlineInput.js

@@ -1,66 +1,101 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {InlineInput} from 'styles/Base'
+import autosize from 'autosize'
 
 class InlineInputController extends React.Component {
-	onFocus = (e) => e.target.select()
+  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()
-		}
-	}
+  // 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()
-	}
+  onBlur = () => {
+    this.updateValue()
+  }
 
-	onKeyDown = (e) => {
-		if(e.keyCode == 13) {
-			this.refInput.blur()
-			e.preventDefault()
-		}
-		if(e.keyCode == 27) {
-			this.refInput.blur()
-			e.preventDefault()
-		}
-	}
+  onKeyDown = (e) => {
+    if(e.keyCode == 13) {
+      this.refInput.blur()
+      e.preventDefault()
+    }
+    if(e.keyCode == 27) {
+      this.setValue(this.props.value)
+      this.refInput.blur()
+      e.preventDefault()
+    }
+    if(e.keyCode == 9) {
+      if (this.getValue().length == 0) {
+        this.props.onCancel()
+      }
+      this.refInput.blur()
+      e.preventDefault()
+    }
+  }
 
-	getValue = () => this.refInput.value
+  getValue = () => this.refInput.value
+  setValue = (value) => this.refInput.value=value
 
-	updateValue = () => {
-		if (this.getValue() != this.props.value) {
-			this.props.onChange(this.getValue())
-		}
-	}
+  updateValue = () => {
+    if (this.getValue() != this.props.value) {
+      this.props.onSave(this.getValue())
+    }
+  }
 
-	render() {
-		const {autoFocus, value, placeholder} = this.props
+  setRef = (ref) => {
+    this.refInput = ref
+    if (this.props.resize != 'none') {
+      autosize(this.refInput)
+    }
+  }
 
-		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}
-		/>
+  componentWillReceiveProps(nextProps) {
+    this.setValue(nextProps.value)
+  }
+
+  render() {
+    const {autoFocus, border, value, placeholder} = this.props
+
+    return <InlineInput
+      ref={this.setRef}
+      border={border}
+      onMouseDown={this.onMouseDown}
+      onFocus={this.onFocus}
+      onBlur={this.onBlur}
+      onKeyDown={this.onKeyDown}
+      placeholder={value.length == 0 ? undefined : placeholder}
+      defaultValue={value}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck="false"
+      dataGramm="false"
+      rows={1}
+      autoFocus={autoFocus}
+    />
+  }
 }
-	}
 
-	InlineInputController.defaultProps = {
-		onChange: () => {},
-			placeholder: '',
-		value: '',
-	}
+InlineInputController.propTypes = {
+  onSave: PropTypes.func,
+  border: PropTypes.bool,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  resize: PropTypes.oneOf(['none', 'vertical', 'horizontal']),
+}
 
-	InlineInputController.propTypes = {
-		onChange: PropTypes.func,
-		placeholder: PropTypes.string,
-		value: PropTypes.string
-	}
+InlineInputController.defaultProps = {
+  onSave: () => {},
+  placeholder: '',
+  value: '',
+  border: false,
+  autoFocus: false,
+  resize: 'none'
+}
 
-	export default InlineInputController
+export default InlineInputController

src/controllers/BoardContainer.js

@@ -121,6 +121,7 @@ class BoardContainer extends Component {
       onLaneClick,
       onLaneAdd,
       onLaneDelete,
+      onLaneUpdate,
       editable,
       canAddLanes,
       laneStyle,

src/controllers/Lane.js

@@ -278,6 +278,7 @@ Lane.propTypes = {
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
   canAddLanes: PropTypes.bool,
+  onLaneUpdate: PropTypes.func,
   t: PropTypes.func.isRequired
 }
 
@@ -287,6 +288,7 @@ Lane.defaultProps = {
   labelStyle: {},
   label: undefined,
   editable: false,
+  onLaneUpdate: () => {},
   onCardAdd: () => {},
 }
 

src/styles/Base.js

@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle } from 'styled-components'
+import styled, { css, createGlobalStyle } from 'styled-components'
 
 export const GlobalStyle = createGlobalStyle`
 
@@ -259,20 +259,29 @@ export const CardForm = styled.div`
 `
 
 export const InlineInput = styled.textarea`
-  overflow: hidden;
+  overflow-x: hidden; /* for Firefox (issue #5) */
   word-wrap: break-word;
+  min-height: 28px;
+  max-height: 112px; /* optional, but recommended */
   resize: none;
   width: 100%;
   height: 28px;
+  font-size: 15px;
   line-height: 20px;
   background-color: transparent;
   box-shadow: none;
+  box-sizing: border-box;
   border-radius: 3px;
   border: 0;
   padding: 4px 8px;
   outline: 0;
+  ${props => props.border && css`
+    &:focus {
+      box-shadow: inset 0 0 0 2px #0079bf;
+    }
+    `
+  }
   &:focus {
     background-color: white;
-    box-shadow: inset 0 0 0 2px #0079bf;
   }
 `