Merge pull request #283 from rcdexta/feature/inline-lane-title

[#278 #263] Feature/inline lane title [testing]

Author: dapi

CHANGELOG.md

@@ -1,10 +1,18 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Unreleased
+## [Unreleased]
+
+## [2.3.0-alpha.1] - 2019-07-15
+
+### Added
+
+* Add `editLaneTitle` and `onLaneUpdate` props (availability to inline edit lane
+  title)
 
 ## [2.2.0-alpha.1] - 2019-07-01
 

README.md

@@ -111,6 +111,7 @@ This is the container component that encapsulates the lanes and cards
 | editable            | boolean  | Makes the entire board editable. Allow cards to be added or deleted Default: false                                             |
 | canAddLanes         | boolean  | Allows new lanes to be added to the board.                          Default: false                                             |
 | hideCardDeleteIcon  | boolean  | Disable showing the delete icon to the top right corner of the card (when board is editable)                                   |
+| editLaneTitle     | boolean  | Allow inline lane title edit                                        Default: false                                             |
 
 
 ### Callbacks and handlers
@@ -128,7 +129,8 @@ This is the container component that encapsulates the lanes and cards
 | onCardMoveAcrossLanes        | function | Called when a card is moved across lanes `onCardMoveAcrossLanes(fromLaneId, toLaneId, cardId, index)`                                                                  |
 | onLaneAdd           | function | Called when a new lane is added: `onLaneAdd(params)`                                                                     |
 | onLaneDelete        | function | Called when a lane is deleted `onLaneDelete(laneId)`                                                                     |
-| onLaneClick         | function | Called when a lane is clicked: `onLaneClick(laneId)`. Card clicks are not propagated to lane click event                       |
+| onLaneUpdate        | function | Called when a lane attributes are updated `onLaneUpdate(laneId, data)`                                                                     |
+| onLaneClick         | function | Called when a lane is clicked `onLaneClick(laneId)`. Card clicks are not propagated to lane click event                       |
 | onLaneScroll        | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)`                                               |
 
 ### Other functions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-trello",
-  "version": "2.2.0-alpha.1",
+  "version": "2.3.0-alpha.2",
   "description": "Pluggable components to add a trello like kanban board to your application",
   "main": "dist/index.js",
   "jsnext:main": "components/index.js",
@@ -42,6 +42,7 @@
   "homepage": "https://github.com/rcdexta/react-trello",
   "dependencies": {
     "@terebentina/react-popover": "^2.0.0",
+    "autosize": "^4.0.2",
     "classnames": "^2.2.6",
     "immutability-helper": "^2.8.1",
     "lodash": "^4.17.11",

src/actions/LaneActions.js

@@ -5,6 +5,7 @@ export const removeCard = createAction('REMOVE_CARD')
 export const moveCardAcrossLanes = createAction('MOVE_CARD')
 export const updateCards = createAction('UPDATE_CARDS')
 export const updateLanes = createAction('UPDATE_LANES')
+export const updateLane = createAction('UPDATE_LANE')
 export const paginateLane = createAction('PAGINATE_LANE')
 export const moveLane = createAction('MOVE_LANE')
 export const removeLane = createAction('REMOVE_LANE')

src/components/Lane/LaneHeader.js

@@ -1,46 +1,46 @@
 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'
 
 const LaneHeaderComponent = ({
-  updateTitle, canAddLanes, onDelete, onDoubleClick, inlineEditTitle, label, title, titleStyle, labelStyle, t
+  updateTitle, canAddLanes, onDelete, onDoubleClick, editLaneTitle, label, title, titleStyle, labelStyle, t
 }) => {
 
   return (
-    <LaneHeader onDoubleClick={onDoubleClick}>
+    <LaneHeader onDoubleClick={onDoubleClick} editLaneTitle={editLaneTitle}>
       <Title style={titleStyle}>
-        {inlineEditTitle ?
-          <EditableLabel value={title} border placeholder={t('placeholder.title')} onSave={updateTitle} /> :
-          title
-        }
+      {editLaneTitle ?
+        <InlineInput value={title} border placeholder={t('placeholder.title')} onSave={updateTitle} /> :
+        title
+      }
       </Title>
       {label && (
         <RightContent>
           <span style={labelStyle}>{label}</span>
-          </RightContent>
-      )}
+        </RightContent>
+       )}
       {canAddLanes && <LaneMenu t={t} onDelete={onDelete}/>}
     </LaneHeader>
   )
 }
 
 LaneHeaderComponent.propTypes = {
   updateTitle: PropTypes.func,
-  inlineEditTitle: PropTypes.bool,
+  editLaneTitle: PropTypes.bool,
   canAddLanes: PropTypes.bool,
   label: PropTypes.string,
   title: PropTypes.string,
   onDelete: PropTypes.func,
   onDoubleClick: PropTypes.func,
+  editLaneTitle: PropTypes.bool,
   t: PropTypes.func.isRequired
 }
 
 LaneHeaderComponent.defaultProps = {
   updateTitle: () => {},
-  inlineEditTitle: false,
+  editLaneTitle: false,
   canAddLanes: false
 }
 

src/components/widgets/EditableLabel.js

@@ -2,15 +2,18 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 class EditableLabel extends React.Component {
-  state = {text: ''}
+  constructor({value}) {
+    super()
+    this.state = { value: value }
+  }
 
   getText = el => {
     return el.innerText
   }
 
   onTextChange = ev => {
-    const text = this.getText(ev.target)
-    this.setState({text: text})
+    const value = this.getText(ev.target)
+    this.setState({value: value})
   }
 
   componentDidMount() {
@@ -20,20 +23,35 @@ class EditableLabel extends React.Component {
   }
 
   onBlur = () => {
-    this.props.onChange(this.state.text)
+    this.props.onChange(this.state.value)
   }
 
   onPaste = ev => {
     ev.preventDefault()
-    const text = ev.clipboardData.getData('text')
-    document.execCommand('insertText', false, text)
+    const value = ev.clipboardData.getData('text')
+    document.execCommand('insertText', false, value)
   }
 
   getClassName = () => {
-    const placeholder = this.state.text === '' ? 'comPlainTextContentEditable--has-placeholder' : ''
+    const placeholder = this.state.value === '' ? 'comPlainTextContentEditable--has-placeholder' : ''
     return `comPlainTextContentEditable ${placeholder}`
   }
 
+  onKeyDown = (e) => {
+    if(e.keyCode === 13) {
+      this.props.onChange(this.state.value)
+      this.refDiv.blur()
+      e.preventDefault()
+    }
+    if(e.keyCode === 27) {
+      this.refDiv.value = this.props.value
+      this.setState({value: this.props.value})
+      // this.refDiv.blur()
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
+
   render() {
     return (
       <div
@@ -43,21 +61,26 @@ class EditableLabel extends React.Component {
         onPaste={this.onPaste}
         onBlur={this.onBlur}
         onInput={this.onTextChange}
-        placeholder={this.props.placeholder}
-      />
+        onKeyDown={this.onKeyDown}
+        placeholder={this.props.value.length == 0 ? false : this.props.placeholder}
+        >{this.props.value}</div>
     )
   }
 }
 
-EditableLabel.defaultProps = {
-  onChange: () => {},
-  placeholder: '',
-  autoFocus: false
-}
 EditableLabel.propTypes = {
   onChange: PropTypes.func,
   placeholder: PropTypes.string,
-  autoFocus: PropTypes.bool
+  autoFocus: PropTypes.bool,
+  inline: PropTypes.bool,
+  value: PropTypes.string,
 }
 
+EditableLabel.defaultProps = {
+  onChange: () => {},
+  placeholder: '',
+  autoFocus: false,
+  inline: false,
+  value: ''
+}
 export default EditableLabel

src/components/widgets/InlineInput.js

@@ -0,0 +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()
+
+  // 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.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
+  setValue = (value) => this.refInput.value=value
+
+  updateValue = () => {
+    if (this.getValue() != this.props.value) {
+      this.props.onSave(this.getValue())
+    }
+  }
+
+  setRef = (ref) => {
+    this.refInput = ref
+    if (this.props.resize != 'none') {
+      autosize(this.refInput)
+    }
+  }
+
+  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.propTypes = {
+  onSave: PropTypes.func,
+  border: PropTypes.bool,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  resize: PropTypes.oneOf(['none', 'vertical', 'horizontal']),
+}
+
+InlineInputController.defaultProps = {
+  onSave: () => {},
+  placeholder: '',
+  value: '',
+  border: false,
+  autoFocus: false,
+  resize: 'none'
+}
+
+export default InlineInputController

src/controllers/BoardContainer.js

@@ -76,6 +76,8 @@ class BoardContainer extends Component {
             })
           case 'UPDATE_LANES':
             return actions.updateLanes(event.lanes)
+          case 'UPDATE_LANE':
+            return actions.updateLane(event.lane)
         }
       }
     }
@@ -119,9 +121,11 @@ class BoardContainer extends Component {
       onLaneClick,
       onLaneAdd,
       onLaneDelete,
+      onLaneUpdate,
       editable,
       canAddLanes,
       laneStyle,
+      onCardMoveAcrossLanes,
       t,
       ...otherProps
     } = this.props
@@ -132,6 +136,7 @@ class BoardContainer extends Component {
       'onCardMoveAcrossLanes',
       'onLaneScroll',
       'onLaneDelete',
+      'onLaneUpdate',
       'onCardClick',
       'onCardDelete',
       'onCardAdd',
@@ -146,6 +151,7 @@ class BoardContainer extends Component {
       'handleDragStart',
       'handleDragEnd',
       'cardDragClass',
+      'editLaneTitle',
       't'
     ])
 
@@ -211,6 +217,7 @@ BoardContainer.propTypes = {
   onLaneAdd: PropTypes.func,
   onLaneDelete: PropTypes.func,
   onLaneClick: PropTypes.func,
+  onLaneUpdate: PropTypes.func,
   laneSortFunction: PropTypes.func,
   draggable: PropTypes.bool,
   collapsibleLanes: PropTypes.bool,
@@ -241,6 +248,7 @@ BoardContainer.defaultProps = {
   onLaneAdd: () => {},
   onLaneDelete: () => {},
   onCardMoveAcrossLanes: () => {},
+  onLaneUpdate: () => {},
   editable: false,
   canAddLanes: false,
   hideCardDeleteIcon: false,