feat(): Updated README and added stories for event handling

rcdexta · Feb 4, 2017 · a1e97d4 · a1e97d4
1 parent 51f11a4
commit a1e97d4
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -65,8 +65,8 @@ Each lane in the board is modeled after this component
 | key         | string   | Unique key for the lane. Passed as param in callback functions |
 | rightHeader | node     | Element to be rendered on the top-right corner |
 | cards       | array    | List of Card components as a json array. Each json element should contain `id`,`key`,`title` and optional`description` |
-| onScroll    | function | Pagination callback function called when lane scrolled to bottom `onScroll(lastCardId, laneId)` |
-| children    | nodes    | Pass Card component as children if not passed as `cards` prop |
+| onScroll    | function | Pagination callback function called when lane scrolled to bottom `onScroll(requestedPageNumber, laneId)` |
+| children    | nodes    | Pass Card component(s) as children if not passed as `cards` prop |
 
 ###  Card
 

diff --git a/dist/index.js b/dist/index.js
@@ -18,7 +18,6 @@ var _Card = require('./lib/Card');
 
 var _Card2 = _interopRequireDefault(_Card);
 
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.Board = _Board2.default;
@@ -236,29 +235,28 @@ var Lane = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Lane.__proto__ || Object.getPrototypeOf(Lane)).call.apply(_ref, [this].concat(args))), _this), _this.state = { cards: _this.props.cards, loading: false }, _this.handleScroll = function (evt) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Lane.__proto__ || Object.getPrototypeOf(Lane)).call.apply(_ref, [this].concat(args))), _this), _this.state = { cards: _this.props.cards, loading: false, currentPage: 1 }, _this.handleScroll = function (evt) {
       var node = evt.target;
       var elemScrolPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
       var onScroll = _this.props.onScroll;
 
-      if (elemScrolPosition <= 0 && onScroll) {
+      if (elemScrolPosition <= 0 && onScroll && !_this.state.loading) {
         (function () {
-          var cards = _this.state.cards;
+          var _this$state = _this.state,
+              currentPage = _this$state.currentPage,
+              cards = _this$state.cards;
 
           _this.setState({ loading: true });
-          onScroll(_this.lastCardId(), _this.props.id).then(function (moreCards) {
-            _this.setState({ cards: [].concat(_toConsumableArray(cards), _toConsumableArray(moreCards)), loading: false });
+          var nextPage = currentPage + 1;
+          onScroll(nextPage, _this.props.id).then(function (moreCards) {
+            _this.setState({ cards: [].concat(_toConsumableArray(cards), _toConsumableArray(moreCards)), loading: false, currentPage: nextPage });
           });
         })();
       }
     }, _this.laneDidMount = function (node) {
       if (node) {
         node.addEventListener('scroll', _this.handleScroll);
       }
-    }, _this.lastCardId = function () {
-      var cards = _this.state.cards;
-
-      return cards[cards.length - 1].key;
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
@@ -276,7 +274,8 @@ var Lane = function (_Component) {
           title = _props.title,
           rightHeader = _props.rightHeader,
           cards = _props.cards,
-          otherProps = _objectWithoutProperties(_props, ['title', 'rightHeader', 'cards']);
+          onScroll = _props.onScroll,
+          otherProps = _objectWithoutProperties(_props, ['title', 'rightHeader', 'cards', 'onScroll']);
 
       return _react2.default.createElement(
         _Base.Section,
@@ -359,11 +358,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Detail = exports.CardRightContent = exports.CardTitle = exports.CardHeader = exports.CardWrapper = exports.DraggableList = exports.RightContent = exports.Title = exports.Header = exports.Section = exports.BoardDiv = undefined;
 
 var _templateObject = _taggedTemplateLiteral(['\n  background-color: #23719F;\n  overflow-y: hidden;\n  padding: 5px;\n  font: 14px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;\n  color: #393939;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  height: 100vh;\n'], ['\n  background-color: #23719F;\n  overflow-y: hidden;\n  padding: 5px;\n  font: 14px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;\n  color: #393939;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  height: 100vh;\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  background-color: #E3E3E3;\n  border-radius: 3px;\n  margin: 5px 5px;\n  padding: 10px;\n  min-width: 250px;\n  height: 92%;\n  overflow-y: auto;\n'], ['\n  background-color: #E3E3E3;\n  border-radius: 3px;\n  margin: 5px 5px;\n  padding: 10px;\n  min-width: 250px;\n  height: 92%;\n  overflow-y: auto;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  background-color: #E3E3E3;\n  border-radius: 3px;\n  margin: 5px 5px;\n  padding: 10px;\n  min-width: 250px;\n  height: auto;\n  max-height: 95%;\n  overflow-y: auto;\n'], ['\n  background-color: #E3E3E3;\n  border-radius: 3px;\n  margin: 5px 5px;\n  padding: 10px;\n  min-width: 250px;\n  height: auto;\n  max-height: 95%;\n  overflow-y: auto;\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  margin-bottom: 10px;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n'], ['\n  margin-bottom: 10px;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n']),
     _templateObject4 = _taggedTemplateLiteral(['\n  font-weight: bold;\n  font-size: 15px;\n  line-height: 18px;\n  cursor: grab;\n  width: 80%;\n'], ['\n  font-weight: bold;\n  font-size: 15px;\n  line-height: 18px;\n  cursor: grab;\n  width: 80%;\n']),
     _templateObject5 = _taggedTemplateLiteral(['\n  width: 30%;\n  text-align: right;\n  font-size: 13px;\n'], ['\n  width: 30%;\n  text-align: right;\n  font-size: 13px;\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  min-height: 100px;\n '], ['\n  min-height: 100px;\n ']),
+    _templateObject6 = _taggedTemplateLiteral(['\n  min-height: 100px;\n'], ['\n  min-height: 100px;\n']),
     _templateObject7 = _taggedTemplateLiteral(['\n  border-radius: 3px;\n  margin: 10px 0px;  \n  border-bottom: 1px solid #CCC;\n  padding: 6px 8px;\n  cursor: pointer;\n  transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);;\n  background-color: #FFF;\n  \n  &:hover {\n    background-color: #F0F0F0;\n  }\n  \n  &.is-moving {\n    background-color: rgba(black, 0.8);\n  }\n'], ['\n  border-radius: 3px;\n  margin: 10px 0px;  \n  border-bottom: 1px solid #CCC;\n  padding: 6px 8px;\n  cursor: pointer;\n  transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);;\n  background-color: #FFF;\n  \n  &:hover {\n    background-color: #F0F0F0;\n  }\n  \n  &.is-moving {\n    background-color: rgba(black, 0.8);\n  }\n']),
     _templateObject8 = _taggedTemplateLiteral(['\n  border-bottom: 1px solid #eee;\n  padding-bottom: 6px;\n'], ['\n  border-bottom: 1px solid #eee;\n  padding-bottom: 6px;\n']),
     _templateObject9 = _taggedTemplateLiteral(['\n font-size: 14px;\n'], ['\n font-size: 14px;\n']),

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -20,7 +20,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.d18852688f25f5448d5f.bundle.js"></script>
+        <script src="static/preview.83b547cd86633492605f.bundle.js"></script>
       </body>
     </html>
 
diff --git a/docs/index.html b/docs/index.html
@@ -38,7 +38,7 @@
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="static/manager.2775fabf56bf88eb0835.bundle.js"></script>
+        <script src="static/manager.55fdf1eed614ac8af910.bundle.js"></script>
       </body>
     </html>
 
diff --git a/docs/static/manager.2775fabf56bf88eb0835.bundle.js b/docs/static/manager.2775fabf56bf88eb0835.bundle.js
diff --git a/docs/static/manager.2775fabf56bf88eb0835.bundle.js.map b/docs/static/manager.2775fabf56bf88eb0835.bundle.js.map
diff --git a/docs/static/manager.55fdf1eed614ac8af910.bundle.js b/docs/static/manager.55fdf1eed614ac8af910.bundle.js
diff --git a/docs/static/manager.55fdf1eed614ac8af910.bundle.js.map b/docs/static/manager.55fdf1eed614ac8af910.bundle.js.map
diff --git a/docs/static/preview.83b547cd86633492605f.bundle.js b/docs/static/preview.83b547cd86633492605f.bundle.js
diff --git a/docs/static/preview.83b547cd86633492605f.bundle.js.map b/docs/static/preview.83b547cd86633492605f.bundle.js.map
diff --git a/docs/static/preview.d18852688f25f5448d5f.bundle.js b/docs/static/preview.d18852688f25f5448d5f.bundle.js
diff --git a/docs/static/preview.d18852688f25f5448d5f.bundle.js.map b/docs/static/preview.d18852688f25f5448d5f.bundle.js.map
diff --git a/stories/Interactions.story.js b/stories/Interactions.story.js
@@ -7,17 +7,22 @@ const data = require('./data.json');
 
 storiesOf('react-trello', module)
 
-  .addWithInfo('Events',
-    'Adding event handlers to the card',
+  .addWithInfo('Event Handling',
+    'Adding event handlers to each card',
     () => (
       <div>
-        <button onClick={addOneCard}>Add Card</button>
         <Board>
-          {lanes.map((lane) => (
-            <Lane key={lane.title}
-                  title={lane.title}
-                  cards={lane.cards} />
-          ))}
+          <Lane key='Lane1'
+                title='Planned Tasks'>
+            <Card key='Card1'
+                  title='Board and Lane'
+                  description='Trello board and Lane as components'
+                  onClick={() => alert('You chose wisely!')}/>
+            <Card key='Card2'
+                  title='Card as component'
+                  description='Model a simple card component'
+                  onClick={() => alert('Continue creating additional dialogues?')}/>
+          </Lane>
         </Board>
       </div>
     ))

diff --git a/stories/index.js b/stories/index.js
@@ -1,2 +1,3 @@
 import './Base.story'
-import './Pagination.story'
+import './Interactions.story'
+import './Pagination.story'