fix(Fix the delete button and console errors):

#177

Author: rcdexta

.babelrc

@@ -13,7 +13,6 @@
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-async-to-generator",
-    "@babel/plugin-transform-runtime",
-    "@babel/plugin-transform-template-literals"
+    "@babel/plugin-transform-runtime"
   ]
 }

.storybook/config.js

@@ -9,7 +9,8 @@ addDecorator(
     goFullScreen: false,
     showStoriesPanel: true,
     showSearchBox: false,
-    addonPanelInRight: false
+    addonPanelInRight: false,
+    showAddonPanel: false
   })
 )
 

src/components/BoardContainer.js

@@ -117,8 +117,7 @@ class BoardContainer extends Component {
   }
 
   render() {
-    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
-    const {addLaneMode} = this.state
+    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, onDataChange, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
     // Stick to whitelisting attributes to segregate board and lane props
     const passthroughProps = pick(this.props, [
       'onLaneScroll',

src/components/Card.js

@@ -25,14 +25,20 @@ class Card extends Component {
             <CardRightContent>{label}</CardRightContent>
           </CardHeader>
           <Detail>{description}</Detail>
-          {tags && <Footer>{tags.map(tag => <Tag key={tag.title} {...tag} tagStyle={this.props.tagStyle} />)}</Footer>}
+          {tags && (
+            <Footer>
+              {tags.map(tag => (
+                <Tag key={tag.title} {...tag} tagStyle={this.props.tagStyle} />
+              ))}
+            </Footer>
+          )}
         </span>
       )
     }
   }
 
   render() {
-    const {id, cardStyle, editable, hideCardDeleteIcon, customCardLayout, dragStyle, ...otherProps} = this.props
+    const {id, cardStyle, editable, hideCardDeleteIcon, customCardLayout, dragStyle, onDelete, ...otherProps} = this.props
     const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
     return (
       <MovableCardWrapper

src/components/Lane.js

@@ -116,7 +116,7 @@ class Lane extends Component {
       })
       return <span>{newCardWithProps}</span>
     } else {
-      return <NewCard onCancel={this.hideEditableCard} onAdd={this.addNewCard}/>
+      return <NewCard onCancel={this.hideEditableCard} onAdd={this.addNewCard} />
     }
   }
 
@@ -129,7 +129,7 @@ class Lane extends Component {
     return this.props.droppable && sourceContainerOptions.groupName === this.groupName
   }
 
-  get groupName()  {
+  get groupName() {
     const {boardId} = this.props
     return `TrelloBoard${boardId}Lane`
   }
@@ -149,18 +149,7 @@ class Lane extends Component {
   }
 
   renderDragContainer = isDraggingOver => {
-    const {
-      laneSortFunction,
-      editable,
-      hideCardDeleteIcon,
-      tagStyle,
-      cardStyle,
-      draggable,
-      cardDraggable,
-      cards,
-      cardDragClass,
-      id
-    } = this.props
+    const {laneSortFunction, editable, hideCardDeleteIcon, tagStyle, cardStyle, draggable, cardDraggable, cards, cardDragClass, id} = this.props
     const {addCardMode, collapsed} = this.state
 
     const showableCards = collapsed ? [] : cards
@@ -182,15 +171,11 @@ class Lane extends Component {
           {...card}
         />
       )
-      return draggable && cardDraggable ? (
-        <Draggable key={card.id}>{cardToRender}</Draggable>
-      ) : (
-        <span key={card.id}>{cardToRender}</span>
-      )
+      return draggable && cardDraggable ? <Draggable key={card.id}>{cardToRender}</Draggable> : <span key={card.id}>{cardToRender}</span>
     })
 
     return (
-      <ScrollableLane innerRef={this.laneDidMount} isDraggingOver={isDraggingOver}>
+      <ScrollableLane ref={this.laneDidMount} isDraggingOver={isDraggingOver}>
         <Container
           orientation="vertical"
           groupName={this.groupName}
@@ -243,7 +228,7 @@ class Lane extends Component {
 
   render() {
     const {loading, isDraggingOver} = this.state
-    const {id, onLaneClick, ...otherProps} = this.props
+    const {id, onLaneClick, onCardAdd, ...otherProps} = this.props
     return (
       <Section {...otherProps} key={id} onClick={() => onLaneClick && onLaneClick(id)} draggable={false} className="react-trello-lane">
         {this.renderHeader()}
@@ -302,4 +287,7 @@ const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators(laneActions, dispatch)
 })
 
-export default connect(null, mapDispatchToProps)(Lane)
+export default connect(
+  null,
+  mapDispatchToProps
+)(Lane)

src/components/widgets/DeleteButton.js

@@ -1,10 +1,10 @@
 import React from 'react'
-import {DeleteWrapper, DeleteIcon} from '../../styles/Elements'
+import {DeleteWrapper, DelButton} from '../../styles/Elements'
 
 const DeleteButton = props => {
   return (
     <DeleteWrapper {...props}>
-      <DeleteIcon />
+      <DelButton>x</DelButton>
     </DeleteWrapper>
   )
 }

src/styles/Base.js

@@ -18,8 +18,7 @@ export const GlobalStyle = createGlobalStyle`
   
   .react_trello_dragLaneClass {
     transform: rotate(3deg);
-  }
-  
+  }  
 `
 
 export const BoardDiv = styled.div`

src/styles/Elements.js

@@ -1,19 +1,39 @@
 import styled from 'styled-components'
-import {CardWrapper} from './Base'
+import {CardWrapper, MovableCardWrapper} from './Base'
 
 export const DeleteWrapper = styled.div`
   text-align: center;
   position: absolute;
-  top: -6px;
-  right: -1px;
+  top: -1px;
+  right: 2px;
+`
+
+export const DelButton = styled.button`
+  font-weight: bold;
+  border: none;
+  display: inline-block;
+  font-size: 8px;
+  opacity: 0;
+  height: 15px;
+  line-height: 1px;
+  margin: 0 0 8px;
+  padding: 0;
+  text-align: center;
+  width: 15px;
+  background: inherit;
+  cursor: pointer;
+  
+  ${MovableCardWrapper}:hover & {
+    opacity: 1;
+  }
 `
 
 export const DeleteIcon = styled.span`
   position: relative;
   display: inline-block;
   width: 4px;
   height: 4px;
-  opacity: 0;
+  opacity: 1;
   overflow: hidden;
   border: 1px solid #83bd42;
   border-radius: 50%;
@@ -62,7 +82,6 @@ export const ExpandCollapseBase = styled.span`
   font-size: 14px;
   position: relative;
   cursor: pointer;
-
 `
 
 export const CollapseBtn = styled(ExpandCollapseBase)`
@@ -140,15 +159,15 @@ export const CancelButton = styled.button`
   margin-bottom: 0;
 `
 export const NewLaneButton = styled.button`
-  background: #2B6AA3;
-  border: none; 
+  background: #2b6aa3;
+  border: none;
   color: #fff;
   transition: background 0.3s ease;
   min-height: 32px;
   padding: 4px 16px;
   vertical-align: top;
-  margin-top: 0; 
-  margin-right: 0px; 
+  margin-top: 0;
+  margin-right: 0px;
   border-radius: 4px;
   font-size: 13px;
   cursor: pointer;