fix: Hide delete icon based on prop hideCardDeleteIcon

The user might add his own delete action button and this fix will introduce the ability to hide the
default delete icon

#62

Author: rcdexta

README.md

@@ -70,27 +70,28 @@ Also please refer to this sample project that uses react-trello for usage: https
 
 This is the container component that encapsulates the lanes and cards
 
-| Name             | Type     | Description                              |
-| ---------------- | -------- | ---------------------------------------- |
-| draggable        | boolean  | Makes all cards in the lanes draggable. Default: false |
-| editable         | boolean  | Makes the entire board editable. Allow cards to be added or deleted Default: false |
-| handleDragStart  | function | Callback function triggered when card drag is started: `handleDragStart(cardId, laneId)` |
-| handleDragEnd    | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position)` |
-| onLaneScroll     | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
-| onCardClick      | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId) ` |
-| onCardAdd        | function | Called when a new card is added: `onCardAdd(card, laneId) ` |
-| addCardLink      | node     | Pass custom element to replace the `Add Card` link at the end of the lane (when board is editable) |
-| newCardTemplate  | node     | Pass a custom new card template to add new cards to a lane (when board is editable) |
-| onCardDelete     | function | Called when a card is deleted: `onCardDelete(cardId, laneId) ` |
-| onLaneClick      | function | Called when a lane is clicked: `onLaneClick(laneId) `. Card clicks are not propagated to lane click event |
-| laneSortFunction | function | Used to specify the logic to sort cards on a lane: `laneSortFunction(card1, card2)` |
-| eventBusHandle   | function | This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section |
-| onDataChange     | function | Called everytime the data changes due to user interaction or event bus: `onDataChange(newData)` |
-| style            | object   | Pass css style props to board container  |
-| customCardLayout | function | Boolean to indicate a custom card template will be specified. Add the card component as child to Board |
-| customLaneHeader | element  | Pass custom lane header as react component to modify appearance |
-| data             | object   | Actual board data in the form of json    |
-| tagStyle         | object   | If cards have tags, use this prop to modify their style |
+    | Name                  | Type     | Description                              |
+    | --------------------- | -------- | ---------------------------------------- |
+    | draggable             | boolean  | Makes all cards in the lanes draggable. Default: false |
+    | editable              | boolean  | Makes the entire board editable. Allow cards to be added or deleted Default: false |
+    | handleDragStart       | function | Callback function triggered when card drag is started: `handleDragStart(cardId, laneId)` |
+    | handleDragEnd         | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position)` |
+    | onLaneScroll          | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
+    | onCardClick           | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId) ` |
+    | onCardAdd             | function | Called when a new card is added: `onCardAdd(card, laneId) ` |
+    | addCardLink           | node     | Pass custom element to replace the `Add Card` link at the end of the lane (when board is editable) |
+    | newCardTemplate       | node     | Pass a custom new card template to add new cards to a lane (when board is editable) |
+    | hideCardDeleteIcon    | boolean  | Disable showing the delete icon to the top right corner of the card (when board is editable) |
+    | onCardDelete          | function | Called when a card is deleted: `onCardDelete(cardId, laneId) ` |
+    | onLaneClick           | function | Called when a lane is clicked: `onLaneClick(laneId) `. Card clicks are not propagated to lane click event |
+    | laneSortFunction      | function | Used to specify the logic to sort cards on a lane: `laneSortFunction(card1, card2)` |
+    | eventBusHandle        | function | This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section |
+    | onDataChange          | function | Called everytime the data changes due to user interaction or event bus: `onDataChange(newData)` |
+    | style                 | object   | Pass css style props to board container  |
+    | customCardLayout      | function | Boolean to indicate a custom card template will be specified. Add the card component as child to Board |
+    | customLaneHeader      | element  | Pass custom lane header as react component to modify appearance |
+    | data                  | object   | Actual board data in the form of json    |
+    | tagStyle              | object   | If cards have tags, use this prop to modify their style |
 
 Refer to `stories` folder for examples on many more options for customization.
 

src/components/BoardContainer.js

@@ -81,6 +81,7 @@ class BoardContainer extends Component {
       'laneSortFunction',
       'draggable',
       'editable',
+      'hideCardDeleteIcon',
       'customCardLayout',
       'newCardTemplate',
       'customLaneHeader',
@@ -125,6 +126,7 @@ BoardContainer.propTypes = {
   laneSortFunction: PropTypes.func,
   draggable: PropTypes.bool,
   editable: PropTypes.bool,
+	hideCardDeleteIcon: PropTypes.bool,
   handleDragStart: PropTypes.func,
   handleDragEnd: PropTypes.func,
   customCardLayout: PropTypes.bool,
@@ -139,6 +141,7 @@ BoardContainer.defaultProps = {
 	handleDragStart: () => {},
 	handleDragEnd: () => {},
   editable: false,
+	hideCardDeleteIcon: false,
   draggable: false
 }
 

src/components/Card.js

@@ -35,11 +35,11 @@ class Card extends Component {
   getItemStyle = (isDragging, draggableStyle) => ({
     backgroundColor: isDragging ? '#fbfbbc' : '#fff',
     ...draggableStyle,
-    margin: '0px 0px 5px 0px',
+    margin: '0px 0px 7px 0px',
   })
 
   render() {
-    const {id, index, cardStyle, draggable, editable, customCardLayout, ...otherProps} = this.props
+    const {id, index, cardStyle, draggable, editable, hideCardDeleteIcon, customCardLayout, ...otherProps} = this.props
     const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
     const isDragDisabled = !draggable
     return (
@@ -61,7 +61,7 @@ class Card extends Component {
                 }}
                 {...otherProps}>
                 {this.renderBody()}
-                {editable && <DeleteButton onClick={this.removeCard} />}
+                {editable && !hideCardDeleteIcon && <DeleteButton onClick={this.removeCard} />}
               </MovableCardWrapper>
               {dragProvided.placeholder}
             </Fragment>

src/components/Lane.js

@@ -146,7 +146,7 @@ class Lane extends Component {
   }
 
   renderDragContainer = (isDraggingOver) => {
-    const {laneSortFunction, editable, tagStyle, cardStyle, draggable} = this.props
+    const {laneSortFunction, editable, hideCardDeleteIcon, tagStyle, cardStyle, draggable} = this.props
     const {addCardMode} = this.state
 
     const cardList = this.sortCards(this.state.cards, laneSortFunction).map((card, idx) => (
@@ -164,6 +164,7 @@ class Lane extends Component {
         onDelete={this.props.onCardDelete}
         draggable={draggable}
         editable={editable}
+				hideCardDeleteIcon={hideCardDeleteIcon}
         {...card}
       />
     ))

src/styles/Base.js

@@ -87,7 +87,7 @@ export const CardWrapper = styled.article`
   padding: 10px;
   cursor: pointer;
   max-width: 250px;
-  margin-bottom: 5px;
+  margin-bottom: 7px;
   min-width: 230px;
 `
 

src/styles/Elements.js

@@ -11,8 +11,8 @@ export const DeleteWrapper = styled.div`
 export const DeleteIcon = styled.span`
   position: relative;
   display: inline-block;
-  width: 6px;
-  height: 6px;
+  width: 4px;
+  height: 4px;
   opacity: 0;
   overflow: hidden;
   border: 1px solid #83bd42;

stories/EditableBoard.story.js

@@ -15,17 +15,17 @@ class NewCard extends Component {
     this.props.onAdd(this.state)
   }
 
-  render () {
+  render() {
     const {onCancel} = this.props
     return (
       <div style={{background: 'white', borderRadius: 3, border: '1px solid #eee', borderBottom: '1px solid #ccc'}}>
         <div style={{padding: 5, margin: 5}}>
           <div>
             <div style={{marginBottom: 5}}>
-              <input type='text' onChange={evt => this.updateField('title', evt)} placeholder='Title' />
+              <input type="text" onChange={evt => this.updateField('title', evt)} placeholder="Title" />
             </div>
             <div style={{marginBottom: 5}}>
-              <input type='text' onChange={evt => this.updateField('description', evt)} placeholder='Description' />
+              <input type="text" onChange={evt => this.updateField('description', evt)} placeholder="Description" />
             </div>
           </div>
           <button onClick={this.handleAdd}>Add</button>
@@ -58,7 +58,7 @@ storiesOf('Editable Board', module)
         <Board
           data={data}
           draggable
-          id='EditableBoard1'
+          id="EditableBoard1"
           onDataChange={shouldReceiveNewData}
           onCardDelete={handleCardDelete}
           onCardAdd={handleCardAdd}
@@ -71,7 +71,7 @@ storiesOf('Editable Board', module)
   .add(
     'Custom Buttons',
     withInfo('Allow editable elements on the board to be customized')(() => {
-      return <Board data={data} editable addCardLink={<button>New Card</button>} />
+      return <Board data={data} editable hideCardDeleteIcon addCardLink={<button>New Card</button>} />
     })
   )
   .add(