feat: Refine drag-n-drop feature performance by adding finite width a…

…nd height to cards within a lan #63
rcdexta · Feb 4, 2018 · fb3cce5 · fb3cce5
1 parent 4634818
commit fb3cce5
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -83,9 +83,9 @@
     "mocha": "^3.4.2",
     "node-sass": "^4.5.3",
     "prettier": "1.10.2",
-    "react": "^16.0.0",
+    "react": "^16.2.0",
     "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.2.0",
     "react-test-renderer": "^15.4.2",
     "rimraf": "^2.6.1",
     "sass-loader": "^6.0.6",

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import React, {Component, Fragment} from 'react'
 import PropTypes from 'prop-types'
 import {CardHeader, CardRightContent, CardTitle, Detail, Footer, MovableCardWrapper} from '../styles/Base'
 import Tag from './Tag'
@@ -34,36 +34,37 @@ class Card extends Component {
 
   getItemStyle = (isDragging, draggableStyle) => ({
     backgroundColor: isDragging ? '#fbfbbc' : '#fff',
-    ...draggableStyle
+    ...draggableStyle,
+    margin: '0px 0px 5px 0px',
   })
 
   render() {
     const {id, index, cardStyle, draggable, editable, customCardLayout, ...otherProps} = this.props
     const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
     const isDragDisabled = !draggable
     return (
-      <Draggable key={id} draggableId={id} index={index} isDragDisabled={isDragDisabled}>
+      <Draggable key={id} draggableId={id} type="card" index={index} isDragDisabled={isDragDisabled} disableInteractiveElementBlocking={true}>
         {(dragProvided, dragSnapshot) => {
           const draggablePropsStyle = dragProvided.draggableProps && dragProvided.draggableProps.style
           const dragStyle = this.getItemStyle(dragSnapshot.isDragging, draggablePropsStyle)
           return (
-            <div>
+            <Fragment>
               <MovableCardWrapper
                 key={id}
                 data-id={id}
                 innerRef={dragProvided.innerRef}
                 {...dragProvided.draggableProps}
                 {...dragProvided.dragHandleProps}
                 style={{
+									...dragStyle,
                   ...style,
-                  ...dragStyle
                 }}
                 {...otherProps}>
                 {this.renderBody()}
                 {editable && <DeleteButton onClick={this.removeCard} />}
               </MovableCardWrapper>
               {dragProvided.placeholder}
-            </div>
+            </Fragment>
           )
         }}
       </Draggable>

diff --git a/src/components/Lane.js b/src/components/Lane.js
@@ -201,7 +201,7 @@ class Lane extends Component {
     const {id, onLaneClick, index, droppable, ...otherProps} = this.props
     const isDropDisabled = !droppable
     return (
-      <Droppable droppableId={id} type="card" index={index} isDropDisabled={isDropDisabled}>
+      <Droppable droppableId={id} type="card" index={index} isDropDisabled={isDropDisabled} ignoreContainerClipping={false}>
         {(dropProvided, dropSnapshot) => {
           const isDraggingOver = dropSnapshot.isDraggingOver
           return (

diff --git a/src/styles/Base.js b/src/styles/Base.js
@@ -55,10 +55,12 @@ export const ScrollableLane = styled.div`
 	overflow-y: auto;
 	min-width: 250px;
 	overflow-x: hidden;
-	display: inline-flex;
+	align-self: center;
 	height: 100%;
 	padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
 	margin-top: 10px;
+	flex-direction: column;
+	justify-content: space-between;
 `
 
 export const Title = styled.span`
@@ -79,14 +81,13 @@ export const RightContent = styled.span`
 
 export const CardWrapper = styled.article`
   border-radius: 3px;
-  margin: 10px 0;
   border-bottom: 1px solid #ccc;
   background-color: #fff;
   position: relative;
   padding: 10px;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   max-width: 250px;
+  margin-bottom: 5px;
   min-width: 230px;
 `
 

diff --git a/src/styles/Elements.js b/src/styles/Elements.js
@@ -4,7 +4,7 @@ import {CardWrapper} from './Base'
 export const DeleteWrapper = styled.div`
   text-align: center;
   position: absolute;
-  top: -8px;
+  top: -6px;
   right: -1px;
 `
 

diff --git a/stories/data/base.json b/stories/data/base.json
@@ -10,28 +10,24 @@
           "id": "Milk",
           "title": "Buy milk",
           "label": "15 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "2 Gallons of milk at the Deli store"
         },
         {
           "id": "Plan2",
           "title": "Dispose Garbage",
           "label": "10 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Sort out recyclable and waste as needed"
         },
         {
           "id": "Plan3",
           "title": "Write Blog",
           "label": "30 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Can AI make memes?"
         },
         {
           "id": "Plan4",
           "title": "Pay Rent",
           "label": "5 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Transfer to bank account"
         }
       ]
@@ -46,7 +42,6 @@
           "id": "Wip1",
           "title": "Clean House",
           "label": "30 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses"
         }
       ]
@@ -68,14 +63,12 @@
           "id": "Completed1",
           "title": "Practice Meditation",
           "label": "15 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Use Headspace app"
         },
         {
           "id": "Completed2",
           "title": "Maintain Daily Journal",
           "label": "15 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Use Spreadsheet for now"
         }
       ]
@@ -90,7 +83,6 @@
           "id": "Repeat1",
           "title": "Morning Jog",
           "label": "30 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Track using fitbit"
         }
       ]
@@ -105,7 +97,6 @@
           "id": "Archived1",
           "title": "Go Trekking",
           "label": "300 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Completed 10km on cycle"
         }
       ]
@@ -117,10 +108,9 @@
       "label": "1/1",
       "cards": [
         {
-          "id": "Archived1",
-          "title": "Go Trekking",
+          "id": "Archived2",
+          "title": "Go Jogging",
           "label": "300 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Completed 10km on cycle"
         }
       ]
@@ -132,10 +122,9 @@
       "label": "1/1",
       "cards": [
         {
-          "id": "Archived1",
-          "title": "Go Trekking",
+          "id": "Archived3",
+          "title": "Go Cycling",
           "label": "300 mins",
-          "cardStyle": { "width": 270, "maxWidth": 270, "margin": "auto", "marginBottom": 5 },
           "description": "Completed 10km on cycle"
         }
       ]

diff --git a/yarn.lock b/yarn.lock
@@ -346,24 +346,11 @@ airbnb-js-shims@^1.3.0:
     string.prototype.padend "^3.0.0"
     string.prototype.padstart "^3.0.0"
 
-ajv-keywords@^2.0.0:
+ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
 
-ajv-keywords@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
-
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
-  dependencies:
-    co "^4.6.0"
-    fast-deep-equal "^1.0.0"
-    json-schema-traverse "^0.3.0"
-    json-stable-stringify "^1.0.1"
-
-ajv@^5.2.3, ajv@^5.3.0:
+ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -2208,15 +2195,7 @@ [email protected], chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
-  dependencies:
-    ansi-styles "^3.1.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
-
-chalk@^2.0.1, chalk@^2.1.0:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
   dependencies:
@@ -2866,13 +2845,13 @@ dateformat@^1.0.11:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
-debug@2, [email protected], debug@^2.2.0, debug@^2.6.3:
+debug@2, [email protected], debug@^2.1.1, debug@^2.2.0, debug@^2.6.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
     ms "2.0.0"
 
-[email protected], debug@^2.1.1, debug@^2.6.8:
+[email protected], debug@^2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
@@ -3046,14 +3025,7 @@ [email protected]:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
-  dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
-
-doctrine@^2.0.2:
+doctrine@^2.0.0, doctrine@^2.0.2:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   dependencies:
@@ -5259,14 +5231,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-[email protected], js-yaml@^3.4.3, js-yaml@^3.7.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.1.tgz#08775cebdfdd359209f0d2acd383c8f86a6904a0"
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-js-yaml@^3.9.1:
+[email protected], js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
   dependencies:
@@ -7185,9 +7150,9 @@ react-docgen@^2.15.0:
     node-dir "^0.1.10"
     recast "^0.12.6"
 
-react-dom@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
+react-dom@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -7331,9 +7296,9 @@ react-treebeard@^2.0.3:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+react@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"