[3004] Fix warning because of props transfer to children

Bug: eclipse-sirius/sirius-web#3004
Signed-off-by: Florian Barbin <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ObeoNetwork/react-trello",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "Pluggable components to add a trello like kanban board to your application",
   "main": "dist/index.js",
   "files": [

src/components/Lane/LaneHeader.js

@@ -1,27 +1,43 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
+import {LaneHeader, RightContent, Title} from 'rt/styles/Base'
 import InlineInput from 'rt/widgets/InlineInput'
-import {Title, LaneHeader, RightContent } from 'rt/styles/Base'
 import LaneMenu from './LaneHeader/LaneMenu'
 
 const LaneHeaderComponent = ({
-  updateTitle, canAddLanes, onDelete, onDoubleClick, editLaneTitle, label, title, titleStyle, labelStyle, t, laneDraggable
+  updateTitle,
+  canAddLanes,
+  onDelete,
+  onDoubleClick,
+  editLaneTitle,
+  label,
+  title,
+  titleStyle,
+  labelStyle,
+  t,
+  laneDraggable
 }) => {
-
   return (
-    <LaneHeader onDoubleClick={onDoubleClick} editLaneTitle={editLaneTitle}>
+    <LaneHeader onDoubleClick={onDoubleClick} editlanetitle={editLaneTitle ? editLaneTitle.toString() : undefined}>
       <Title draggable={laneDraggable} style={titleStyle}>
-      {editLaneTitle ?
-        <InlineInput value={title} border placeholder={t('placeholder.title')} resize='vertical' onSave={updateTitle} /> :
-        title
-      }
+        {editLaneTitle ? (
+          <InlineInput
+            value={title}
+            border
+            placeholder={t('placeholder.title')}
+            resize="vertical"
+            onSave={updateTitle}
+          />
+        ) : (
+          title
+        )}
       </Title>
       {label && (
         <RightContent>
           <span style={labelStyle}>{label}</span>
         </RightContent>
-       )}
-      {canAddLanes && <LaneMenu t={t} onDelete={onDelete}/>}
+      )}
+      {canAddLanes && <LaneMenu t={t} onDelete={onDelete} />}
     </LaneHeader>
   )
 }
@@ -44,4 +60,4 @@ LaneHeaderComponent.defaultProps = {
   canAddLanes: false
 }
 
-export default LaneHeaderComponent;
+export default LaneHeaderComponent

src/components/NewLaneSection.js

@@ -4,6 +4,6 @@ import {AddLaneLink} from 'rt/styles/Elements'
 
 export default ({t, onClick}) => (
   <NewLaneSection>
-    <AddLaneLink t={t} onClick={onClick}>{t('Add another lane')}</AddLaneLink>
+    <AddLaneLink onClick={onClick}>{t('Add another lane')}</AddLaneLink>
   </NewLaneSection>
 )

src/controllers/BoardContainer.js

@@ -1,13 +1,13 @@
+import isEqual from 'lodash/isEqual'
+import pick from 'lodash/pick'
+import PropTypes from 'prop-types'
 import React, {Component} from 'react'
-import {bindActionCreators} from 'redux'
+import {PopoverWrapper} from 'react-popopo'
 import {connect} from 'react-redux'
+import {bindActionCreators} from 'redux'
 import Container from 'rt/dnd/Container'
 import Draggable from 'rt/dnd/Draggable'
-import PropTypes from 'prop-types'
-import pick from 'lodash/pick'
-import isEqual from 'lodash/isEqual'
 import Lane from './Lane'
-import { PopoverWrapper } from 'react-popopo'
 
 import * as boardActions from 'rt/actions/BoardActions'
 import * as laneActions from 'rt/actions/LaneActions'
@@ -136,6 +136,15 @@ class BoardContainer extends Component {
       laneStyle,
       onCardMoveAcrossLanes,
       t,
+      handleLaneDragEnd,
+      handleDragStart,
+      handleDragEnd,
+      hideCardDeleteIcon,
+      collapsibleLanes,
+      cardDraggable,
+      cardDragClass,
+      editLaneTitle,
+      handleLaneDragStart,
       ...otherProps
     } = this.props
 
@@ -204,8 +213,10 @@ class BoardContainer extends Component {
         </PopoverWrapper>
         {canAddLanes && (
           <Container orientation="horizontal">
-            {editable && !addLaneMode ? <components.NewLaneSection t={t} onClick={this.showEditableLane} /> : (
-              addLaneMode && <components.NewLaneForm onCancel={this.hideEditableLane} onAdd={this.addNewLane} t={t}/>
+            {editable && !addLaneMode ? (
+              <components.NewLaneSection t={t} onClick={this.showEditableLane} />
+            ) : (
+              addLaneMode && <components.NewLaneForm onCancel={this.hideEditableLane} onAdd={this.addNewLane} t={t} />
             )}
           </Container>
         )}
@@ -250,11 +261,11 @@ BoardContainer.propTypes = {
   laneDragClass: PropTypes.string,
   laneDropClass: PropTypes.string,
   onCardMoveAcrossLanes: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 }
 
 BoardContainer.defaultProps = {
-  t: v=>v,
+  t: v => v,
   onDataChange: () => {},
   handleDragStart: () => {},
   handleDragEnd: () => {},

src/controllers/Lane.js

@@ -1,11 +1,10 @@
-import React, {Component} from 'react'
 import classNames from 'classnames'
+import cloneDeep from 'lodash/cloneDeep'
+import isEqual from 'lodash/isEqual'
 import PropTypes from 'prop-types'
-import {bindActionCreators} from 'redux'
+import React, {Component} from 'react'
 import {connect} from 'react-redux'
-import isEqual from 'lodash/isEqual'
-import cloneDeep from 'lodash/cloneDeep'
-import pick from 'lodash/pick'
+import {bindActionCreators} from 'redux'
 import uuidv1 from 'uuid/v1'
 
 import Container from 'rt/dnd/Container'
@@ -47,7 +46,7 @@ class Lane extends Component {
   sortCards(cards, sortFunction) {
     if (!cards) return []
     if (!sortFunction) return cards
-    return cards.concat().sort(function (card1, card2) {
+    return cards.concat().sort(function(card1, card2) {
       return sortFunction(card1, card2)
     })
   }
@@ -190,7 +189,7 @@ class Lane extends Component {
     })
 
     return (
-      <components.ScrollableLane ref={this.laneDidMount} isDraggingOver={isDraggingOver}>
+      <components.ScrollableLane ref={this.laneDidMount}>
         <Container
           orientation="vertical"
           groupName={this.groupName}
@@ -256,18 +255,34 @@ class Lane extends Component {
       onLaneUpdate,
       onCardUpdate,
       onCardMoveAcrossLanes,
+      handleDragStart,
+      handleDragEnd,
+      hideCardDeleteIcon,
+      cardDraggable,
+      cardDragClass,
+      boardId,
+      getCardDetails,
+      labelStyle,
+      currentPage,
+      laneDraggable,
+      canAddLanes,
+      titleStyle,
+      t,
+      droppable,
+      editable,
       ...otherProps
     } = this.props
     const allClassNames = classNames('react-trello-lane', this.props.className || '')
     const showFooter = collapsibleLanes && cards.length > 0
     return (
       <components.Section
         {...otherProps}
+        droppable={droppable ? 'true' : undefined}
         key={id}
         onClick={() => onLaneClick && onLaneClick(id)}
         draggable={false}
         className={allClassNames}>
-        {this.renderHeader({id, cards, ...otherProps})}
+        {this.renderHeader({id, cards, labelStyle, titleStyle, canAddLanes, laneDraggable, t, ...otherProps})}
         {this.renderDragContainer(isDraggingOver)}
         {loading && <components.Loader />}
         {showFooter && <components.LaneFooter onClick={this.toggleLaneCollapsed} collapsed={collapsed} />}
@@ -328,4 +343,7 @@ const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators(laneActions, dispatch)
 })
 
-export default connect(null, mapDispatchToProps)(Lane)
+export default connect(
+  null,
+  mapDispatchToProps
+)(Lane)

src/styles/Base.js

@@ -112,12 +112,12 @@ export const Section = styled.section`
 export const LaneHeader = styled(Header)`
   margin-bottom: 0px;
   ${props =>
-    props.editLaneTitle &&
+    props.editlanetitle &&
     css`
       padding: 0px;
       line-height: 30px;
     `} ${props =>
-    !props.editLaneTitle &&
+    !props.editlanetitle &&
     css`
       padding: 0px 5px;
     `};