[#281] Improve new lane title editor (#297)

* [#281] Add improved new lane title editor

* Add react-click-outside

Author: dapi

package.json

@@ -45,6 +45,7 @@
     "immutability-helper": "^2.8.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
+    "react-click-outside": "tj/react-click-outside",
     "react-popopo": "^2.1.9",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",

src/components/NewLaneForm.js

@@ -1,39 +1,57 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import {LaneTitle, NewLaneButtons, Section} from 'rt/styles/Base'
-import {AddButton, CancelButton} from 'rt/styles/Elements'
-import EditableLabel from 'rt/widgets/EditableLabel'
+import { LaneTitle, NewLaneButtons, Section } from 'rt/styles/Base'
+import { AddButton, CancelButton } from 'rt/styles/Elements'
+import NewLaneTitleEditor from 'rt/widgets/NewLaneTitleEditor'
+import ClickOutside from 'react-click-outside'
 
-class NewLaneForm extends Component {
-  updateField = (field, value) => {
-    this.setState({[field]: value})
+class NewLane extends Component {
+  handleSubmit = () => {
+    this.props.onAdd({ title: this.getValue() })
   }
 
-  handleAdd = () => {
-    this.props.onAdd(this.state)
+  getValue = () => this.refInput.getValue()
+
+  onClickOutside = (a,b,c) => {
+    if (this.getValue().length > 0) {
+      this.handleSubmit()
+    } else {
+      this.props.onCancel()
+    }
   }
 
   render() {
-    const {onCancel, t} = this.props
+    const { onCancel, t } = this.props
     return (
+      <ClickOutside onClickOutside={this.onClickOutside}>
         <Section>
           <LaneTitle>
-            <EditableLabel placeholder={t('placeholder.title')} onChange={val => this.updateField('title', val)} autoFocus/>
+            <NewLaneTitleEditor
+              ref={ref => (this.refInput = ref)}
+              placeholder={t('placeholder.title')}
+              onCancel={this.props.onCancel}
+              onSave={this.handleSubmit}
+              resize='vertical'
+              border
+              autoFocus
+            />
           </LaneTitle>
           <NewLaneButtons>
-            <AddButton onClick={this.handleAdd}>{t('button.Add lane')}</AddButton>
+             <AddButton onClick={this.handleSubmit}>{t('button.Add lane')}</AddButton>
             <CancelButton onClick={onCancel}>{t('button.Cancel')}</CancelButton>
           </NewLaneButtons>
         </Section>
+      </ClickOutside>
     )
   }
 }
 
-NewLaneForm.propTypes = {
+NewLane.propTypes = {
   onCancel: PropTypes.func.isRequired,
   onAdd: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
 }
-NewLaneForm.defaultProps = {}
 
-export default NewLaneForm
+NewLane.defaultProps = {}
+
+export default NewLane

src/widgets/NewLaneTitleEditor.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {InlineInput} from 'rt/styles/Base'
+import autosize from 'autosize'
+
+class NewLaneTitleEditor extends React.Component {
+  onKeyDown = (e) => {
+    if(e.keyCode == 13) {
+      this.refInput.blur()
+      this.props.onSave()
+      e.preventDefault()
+    }
+    if(e.keyCode == 27) {
+      this.cancel()
+      e.preventDefault()
+    }
+
+    if(e.keyCode == 9) {
+      if (this.getValue().length == 0) {
+        this.cancel()
+      } else {
+        this.props.onSave()
+      }
+      e.preventDefault()
+    }
+  }
+
+  cancel = () => {
+    this.setValue('')
+    this.props.onCancel()
+    this.refInput.blur()
+  }
+
+  getValue = () => this.refInput.value
+  setValue = (value) => this.refInput.value = value
+
+  saveValue = () => {
+    if (this.getValue() != this.props.value) {
+      this.props.onSave(this.getValue())
+    }
+  }
+
+  focus = () => this.refInput.focus()
+
+  setRef = (ref) => {
+    this.refInput = ref
+    if (this.props.resize != 'none') {
+      autosize(this.refInput)
+    }
+  }
+
+  render() {
+    const {autoFocus, resize, border, autoResize, value, placeholder} = this.props
+
+    return <InlineInput
+      style={{resize: resize}}
+      ref={this.setRef}
+      border={border}
+      onKeyDown={this.onKeyDown}
+      placeholder={value.length == 0 ? undefined : placeholder}
+      defaultValue={value}
+      rows={3}
+      autoResize={autoResize}
+      autoFocus={autoFocus}
+    />
+  }
+}
+
+NewLaneTitleEditor.propTypes = {
+  onSave: PropTypes.func,
+  onCancel: PropTypes.func,
+  border: PropTypes.bool,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  autoResize: PropTypes.bool,
+  resize: PropTypes.oneOf(['none', 'vertical', 'horizontal']),
+}
+
+NewLaneTitleEditor.defaultProps = {
+  inputRef: () => {},
+  onSave: () => {},
+  onCancel: () => {},
+  placeholder: '',
+  value: '',
+  border: false,
+  autoFocus: false,
+  autoResize: false,
+  resize: 'none'
+}
+
+export default NewLaneTitleEditor

yarn.lock

@@ -11708,6 +11708,10 @@ react-addons-create-fragment@^15.5.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.0"
 
+react-click-outside@tj/react-click-outside:
+  version "1.1.1"
+  resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"
+
 react-dev-utils@^6.1.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-6.1.1.tgz#a07e3e8923c4609d9f27e5af5207e3ca20724895"