Merge pull request #4 from webcom-components/stackParameters

Florian Bernard · web-flow · commit 248e09efefca · 2016-06-10T11:06:25.000+02:00
Allow stack parameters to be changed
diff --git a/README.md b/README.md
@@ -7,9 +7,11 @@ You decide how many cards will be simultaneously visible depending on screen siz
 Visually you have a left stack of cards, visible cards in the middle, and a right stack.
 
 ## New in 2.x
-Using stacks instead of sliding cards out of the screen
-Pass children CSS class as props
-Doesn't use react-motion anymore
+
+**New in 2.1:** expose stacks parameters  
+Using stacks instead of sliding cards out of the screen  
+Pass children CSS class as props  
+Doesn't use react-motion anymore  
 
 ## Installation
 ```bash
@@ -29,12 +31,18 @@ You can know where a card is with the ```getCardOffset``` function in JavaScript
 
 Use default navigation arrows with props ```showArrows={true}```
 
+You can change the default parameters ```visibleStack``` et ```stackSpace```, which determine how many cards of the stacks are shifted on the sides, and by how many pixels.
+
 ## Example demo
 ![react-card-scroll](https://cloud.githubusercontent.com/assets/11945259/15610699/db52c656-2426-11e6-9228-dd622dadfb86.gif)
 
 ## Some (very) basic usage
 ```jsx
-<CardScroll ref="cardScroll" childrenClass="rcs-col-sm-6 rcs-col-md-4">
+<CardScroll 
+    ref="cardScroll" 
+    childrenClass="rcs-col-sm-6 rcs-col-md-4"
+    visibleStack={1}
+    stackSpace={25}>
     <div>
         Hello
     </div>
diff --git a/example/index.js b/example/index.js
@@ -87,7 +87,11 @@ const Example = React.createClass({
             <div>
                 <button onClick={this.addCard}>Add card</button>
                 <button onClick={this.removeCard}>Remove last card</button>
-                <CardScroll ref="cardScroll" childrenClass="col rcs-col-sm-6 rcs-col-md-4 rcs-col-lg-3">
+                <CardScroll
+                    ref="cardScroll"
+                    childrenClass="col rcs-col-sm-6 rcs-col-md-4 rcs-col-lg-3"
+                    visibleStack={1}
+                    stackSpace={25}>
                     {this.state.cards.map((el, index) => React.cloneElement(el, {
                         scrollCards,
                         getCardOffset: getCardOffset(index)
diff --git a/lib/assets/styles.css b/lib/assets/styles.css
@@ -1,5 +1,6 @@
 ._1H7C65wd8WJqBtCRmAfokb {
   position: relative;
+  z-index: 0;
   box-sizing: border-box; }
   ._1H7C65wd8WJqBtCRmAfokb .rcs-center, ._1H7C65wd8WJqBtCRmAfokb .rcs-left-stack, ._1H7C65wd8WJqBtCRmAfokb .rcs-right-stack {
     position: absolute;
diff --git a/lib/index.js b/lib/index.js
@@ -34,11 +34,17 @@ var defaultWidths = {
 
 var CardScroll = _react2.default.createClass({
     displayName: 'CardScroll',
+    getDefaultProps: function getDefaultProps() {
+        return {
+            visibleStack: 3,
+            stackSpace: 5
+        };
+    },
     getInitialState: function getInitialState() {
         return { currentCard: 0 };
     },
     componentWillMount: function componentWillMount() {
-        this.maxOffset = (0, _offset.getMaxOffset)();
+        this.maxOffset = (0, _offset.getMaxOffset)({ visibleStack: this.props.visibleStack, stackSpace: this.props.stackSpace });
         this.widths = defaultWidths;
         this.children = {};
     },
@@ -73,9 +79,9 @@ var CardScroll = _react2.default.createClass({
             return defaultWidths;
         }
         // anticipate the margin that we will add
-        var container = this._container.getBoundingClientRect().width - this.maxOffset * 2;
+        var container = this._container.getBoundingClientRect().width;
         // get first child as all children should be of equal width
-        var card = _reactDom2.default.findDOMNode(this._child).getBoundingClientRect().width * container / this._container.getBoundingClientRect().width;
+        var card = _reactDom2.default.findDOMNode(this._child).getBoundingClientRect().width;
         return {
             card: card,
             container: container
@@ -115,7 +121,13 @@ var CardScroll = _react2.default.createClass({
                     style: { marginLeft: this.maxOffset, marginRight: this.maxOffset },
                     ref: updateContainer },
                 _react2.default.Children.map(this.props.children, function (child, index) {
-                    var offset = (0, _offset.getOffset)({ index: index, firstVisibleIndex: currentCard, lastVisibleIndex: lastCard });
+                    var offset = (0, _offset.getOffset)({
+                        index: index,
+                        firstVisibleIndex: currentCard,
+                        lastVisibleIndex: lastCard,
+                        visibleStack: _this2.props.visibleStack,
+                        stackSpace: _this2.props.stackSpace
+                    });
                     var position = offset;
                     var zIndex = 0;
                     var className = "rcs-left-stack";
@@ -197,7 +209,13 @@ var CardScroll = _react2.default.createClass({
      * return negative number if card is on left stack, 0 if visible, positive number if card is on right stack
      */
     getCardOffset: function getCardOffset(index) {
-        return (0, _offset.getOffset)({ index: index, firstVisibleIndex: this.state.currentCard, lastVisibleIndex: this.lastVisibleCardIndex() });
+        return (0, _offset.getOffset)({
+            index: index,
+            firstVisibleIndex: this.state.currentCard,
+            lastVisibleIndex: this.lastVisibleCardIndex(),
+            visibleStack: this.props.visibleStack,
+            stackSpace: this.props.stackSpace
+        });
     }
 });
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-card-scroll",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "A React component to navigate horizontally between cards of same width",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/index.js b/src/index.js
@@ -10,12 +10,20 @@ const defaultWidths = {
 }
 
 let CardScroll = React.createClass({
+
+    getDefaultProps(){
+        return {
+            visibleStack: 3,
+            stackSpace: 5
+        }
+    },
+
     getInitialState(){
         return {currentCard: 0}
     },
 
     componentWillMount() {
-        this.maxOffset = getMaxOffset()
+        this.maxOffset = getMaxOffset({visibleStack: this.props.visibleStack, stackSpace: this.props.stackSpace})
         this.widths = defaultWidths
         this.children = {}
     },
@@ -53,10 +61,9 @@ let CardScroll = React.createClass({
         if(childrenCount==0){
             return defaultWidths
         }
-        // anticipate the margin that we will add
-        const container = this._container.getBoundingClientRect().width-this.maxOffset*2
+        const container = this._container.getBoundingClientRect().width
         // get first child as all children should be of equal width
-        const card = ReactDOM.findDOMNode(this._child).getBoundingClientRect().width*container/this._container.getBoundingClientRect().width
+        const card = ReactDOM.findDOMNode(this._child).getBoundingClientRect().width
         return {
             card,
             container
@@ -87,7 +94,13 @@ let CardScroll = React.createClass({
                          style={{marginLeft: this.maxOffset, marginRight: this.maxOffset}}
                          ref={updateContainer}>
                         {React.Children.map(this.props.children, (child, index) => {
-                            const offset = getOffset({index, firstVisibleIndex:currentCard, lastVisibleIndex:lastCard})
+                            const offset = getOffset({
+                                index,
+                                firstVisibleIndex:currentCard,
+                                lastVisibleIndex:lastCard,
+                                visibleStack: this.props.visibleStack,
+                                stackSpace: this.props.stackSpace
+                            })
                             let position = offset
                             let zIndex = 0
                             let className = "rcs-left-stack"
@@ -165,7 +178,13 @@ let CardScroll = React.createClass({
      * return negative number if card is on left stack, 0 if visible, positive number if card is on right stack
      */
     getCardOffset(index){
-        return getOffset({index, firstVisibleIndex:this.state.currentCard, lastVisibleIndex:this.lastVisibleCardIndex()})
+        return getOffset({
+            index,
+            firstVisibleIndex:this.state.currentCard,
+            lastVisibleIndex:this.lastVisibleCardIndex(),
+            visibleStack: this.props.visibleStack,
+            stackSpace: this.props.stackSpace
+        })
     }
 })
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-card-scroll",`
`3`		`- "version": "2.0.5",`
	`3`	`+ "version": "2.1.0",`
`4`	`4`	`"description": "A React component to navigate horizontally between cards of same width",`
`5`	`5`	`"main": "lib/index.js",`
`6`	`6`	`"scripts": {`