feat(Add and Delete Lanes): Ability to delete lanes when canAddLanes prop is set to true

#163

Author: rcdexta

package.json

@@ -39,6 +39,7 @@
   },
   "homepage": "https://github.com/rcdexta/react-trello",
   "dependencies": {
+    "@terebentina/react-popover": "^2.0.0",
     "immutability-helper": "^2.8.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",

src/actions/LaneActions.js

@@ -7,3 +7,4 @@ export const updateCards = createAction('UPDATE_CARDS')
 export const updateLanes = createAction('UPDATE_LANES')
 export const paginateLane = createAction('PAGINATE_LANE')
 export const moveLane = createAction('MOVE_LANE')
+export const removeLane = createAction('REMOVE_LANE')

src/components/BoardContainer.js

@@ -10,6 +10,7 @@ import {BoardDiv, LaneSection} from '../styles/Base'
 import {NewLaneButton} from '../styles/Elements'
 import Lane from './Lane'
 import NewLane from './NewLane'
+import { PopoverWrapper } from '@terebentina/react-popover'
 
 import * as boardActions from '../actions/BoardActions'
 import * as laneActions from '../actions/LaneActions'
@@ -150,6 +151,7 @@ class BoardContainer extends Component {
 
     return (
       <BoardDiv style={style} {...otherProps} draggable={false}>
+        <PopoverWrapper>
         <Container
           orientation="horizontal"
           onDragStart={this.onDragStart}
@@ -176,6 +178,7 @@ class BoardContainer extends Component {
             return draggable && laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : <span key={lane.id}>{laneToRender}</span>
           })}
         </Container>
+        </PopoverWrapper>
         {canAddLanes && (
           <Container orientation="horizontal">
             {editable && !addLaneMode ? (

src/components/Lane.js

@@ -6,14 +6,25 @@ import isEqual from 'lodash/isEqual'
 import Container from '../dnd/Container'
 import Draggable from '../dnd/Draggable'
 import uuidv1 from 'uuid/v1'
+import Popover from '@terebentina/react-popover'
 
 import Loader from './Loader'
 import Card from './Card'
 import NewCard from './NewCard'
 import {AddCardLink, LaneFooter, LaneHeader, RightContent, ScrollableLane, Section, Title} from '../styles/Base'
 
 import * as laneActions from '../actions/LaneActions'
-import {CollapseBtn, ExpandBtn} from '../styles/Elements'
+import {
+  CollapseBtn,
+  DeleteWrapper,
+  ExpandBtn,
+  GenDelButton,
+  LaneMenuContent,
+  LaneMenuHeader,
+  LaneMenuItem,
+  LaneMenuTitle,
+  MenuButton
+} from '../styles/Elements'
 
 class Lane extends Component {
   state = {
@@ -195,8 +206,29 @@ class Lane extends Component {
     )
   }
 
+  removeLane = () => {
+    const {id} = this.props
+    this.props.actions.removeLane({laneId: id})
+  }
+
+  laneMenu = () => {
+    return (
+      <Popover className="menu" position="bottom" trigger={<MenuButton>⋮</MenuButton>}>
+        <LaneMenuHeader>
+          <LaneMenuTitle>Lane actions</LaneMenuTitle>
+          <DeleteWrapper>
+            <GenDelButton>&#10006;</GenDelButton>
+          </DeleteWrapper>
+        </LaneMenuHeader>
+        <LaneMenuContent>
+          <LaneMenuItem onClick={this.removeLane}>Delete Lane...</LaneMenuItem>
+        </LaneMenuContent>
+      </Popover>
+    )
+  }
+
   renderHeader = () => {
-    const {customLaneHeader} = this.props
+    const {customLaneHeader, canAddLanes} = this.props
     if (customLaneHeader) {
       const customLaneElement = React.cloneElement(customLaneHeader, {...this.props})
       return <span>{customLaneElement}</span>
@@ -210,6 +242,7 @@ class Lane extends Component {
               <span style={labelStyle}>{label}</span>
             </RightContent>
           )}
+          {canAddLanes && this.laneMenu()}
         </LaneHeader>
       )
     }
@@ -272,7 +305,8 @@ Lane.propTypes = {
   addCardTitle: PropTypes.string,
   editable: PropTypes.bool,
   cardDraggable: PropTypes.bool,
-  cardDragClass: PropTypes.string
+  cardDragClass: PropTypes.string,
+  canAddLanes: PropTypes.bool
 }
 
 Lane.defaultProps = {

src/components/widgets/DeleteButton.js

@@ -4,7 +4,7 @@ import {DeleteWrapper, DelButton} from '../../styles/Elements'
 const DeleteButton = props => {
   return (
     <DeleteWrapper {...props}>
-      <DelButton>x</DelButton>
+      <DelButton>&#10006;</DelButton>
     </DeleteWrapper>
   )
 }

src/helpers/LaneHelper.js

@@ -92,6 +92,11 @@ const LaneHelper = {
     const laneToMove = state.lanes[oldIndex]
     const tempState = update(state, {lanes: {$splice: [[oldIndex, 1]]}});
     return update(tempState, {lanes: {$splice: [[newIndex, 0, laneToMove]]}})
+  },
+
+  removeLane: (state, {laneId}) => {
+    const updatedLanes = state.lanes.filter(lane => lane.id !== laneId)
+    return update(state, {lanes: {$set: updatedLanes}})
   }
 }
 

src/reducers/BoardReducer.js

@@ -19,6 +19,8 @@ const boardReducer = (state = {lanes: []}, action) => {
       return Lh.paginateLane(state, payload)
     case 'MOVE_LANE':
       return Lh.moveLane(state, payload)
+    case 'REMOVE_LANE':
+      return Lh.removeLane(state, payload)
     case 'ADD_LANE':
       return Lh.addLane(state, payload)
     default:

src/styles/Base.js

@@ -1,6 +1,57 @@
 import styled, {createGlobalStyle} from 'styled-components'
 
 export const GlobalStyle = createGlobalStyle`
+
+  .popover {
+  position: absolute;
+    right: 10px;
+   }
+  .popover .popover__content {
+    visibility: hidden;
+    margin-top: -5px;
+    opacity: 0;
+    position: absolute;
+    z-index: 10;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease 0ms;
+    border-radius: 3px;
+    min-width: 7em;
+    flex-flow: column nowrap;
+    background-color: #fff;
+    color: #000;
+    padding: 5px; }
+    .popover .popover__content::before {
+      content: "";
+      position: absolute;
+      background: transparent none repeat scroll 0 0;
+      border: 6px solid transparent;
+      transition: all 0.3s ease 0ms; }
+        left: 50%; }
+  .popover.popover--bottom {
+    flex-flow: column nowrap; }
+    .popover.popover--bottom .popover__content {
+      left: 50%;
+      transform: translateX(-50%); }      
+  
+  .popover.popover--active .popover__content {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 100ms; }
+  .popover[class*="menu"] .popover__content {
+    border-radius: 3px;
+    min-width: 7em;
+    flex-flow: column nowrap;    
+    color: #000; }
+    .popover[class*="menu"] .popover__content a {
+      color: rgba(255, 255, 255, 0.56);
+      padding: .5em 1em;
+      margin: 0;
+      text-decoration: none; }
+      .popover[class*="menu"] .popover__content a:hover {
+        background-color: #00bcd4 !important;
+        color: #37474F; }
+
+		
   .comPlainTextContentEditable {
     -webkit-user-modify: read-write-plaintext-only;
   }
@@ -19,6 +70,19 @@ export const GlobalStyle = createGlobalStyle`
   .react_trello_dragLaneClass {
     transform: rotate(3deg);
   }  
+  
+  .icon-overflow-menu-horizontal:before {
+    content: "\\E91F";
+  }
+  .icon-lg, .icon-sm {
+    color: #798d99;
+  }
+  .icon-lg {
+    height: 32px;
+    font-size: 16px;
+    line-height: 32px;
+    width: 32px;
+  }
 `
 
 export const BoardDiv = styled.div`

src/styles/Elements.js

@@ -6,14 +6,28 @@ export const DeleteWrapper = styled.div`
   position: absolute;
   top: -1px;
   right: 2px;
+  cursor: pointer;
 `
 
-export const DelButton = styled.button`
-  font-weight: bold;
+export const GenDelButton = styled.button`
+  transition: all 0.5s ease;
+  display: inline-block;
   border: none;
+  font-size: 15px;
+  height: 15px;
+  padding: 0;
+  margin-top: 5px;
+  text-align: center;
+  width: 15px;
+  background: inherit;
+  cursor: pointer;
+`
+
+export const DelButton = styled.button`
+  transition: all 0.5s ease;
   display: inline-block;
+  border: none;
   font-size: 8px;
-  opacity: 0;
   height: 15px;
   line-height: 1px;
   margin: 0 0 8px;
@@ -22,12 +36,71 @@ export const DelButton = styled.button`
   width: 15px;
   background: inherit;
   cursor: pointer;
-  
+  opacity: 0;
   ${MovableCardWrapper}:hover & {
     opacity: 1;
   }
 `
 
+export const MenuButton = styled.button`
+  transition: all 0.5s ease;
+  display: inline-block;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  font-weight: bold;
+  height: 15px;
+  line-height: 1px;
+  margin: 0 0 8px;
+  padding: 0;
+  text-align: center;
+  width: 15px;
+  background: inherit;
+  cursor: pointer;
+`
+
+export const LaneMenuHeader = styled.div`
+    position: relative;
+    margin-bottom: 4px;
+    text-align: center;
+`
+
+export const LaneMenuContent = styled.div`
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0 12px 12px;
+`
+
+export const LaneMenuItem = styled.div`
+    cursor: pointer;
+    display: block;
+    font-weight: 700;
+    padding: 6px 12px;
+    position: relative;
+    margin: 0 -12px;
+    text-decoration: none;
+    
+    &:hover {
+      background-color: #3179BA;
+      color: #fff;
+    }
+`
+
+export const LaneMenuTitle = styled.span`
+    box-sizing: border-box;
+    color: #6b808c;
+    display: block;
+    line-height: 30px;
+    border-bottom: 1px solid rgba(9,45,66,.13);
+    margin: 0 6px;
+    overflow: hidden;
+    padding: 0 32px;
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 1;
+`
+
 export const DeleteIcon = styled.span`
   position: relative;
   display: inline-block;