fix override of css classes, rcs class is now a props of cardScroll

Author: wfbn8821

README.md

@@ -8,6 +8,7 @@ Visually you have a left stack of cards, visible cards in the middle, and a righ
 
 ## 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
 
 ## Installation
@@ -19,34 +20,35 @@ npm i -S react-card-scroll
 
 Import css either in sass ```~react-card-scroll/lib/assets/styles.css``` or in javascript with webpack
 
-Use bootstrap style to decide how many cards will be visible (just add ```rcs-```): ```rcs-col-*-*```. You don't have to include bootstrap.
+Use bootstrap style to decide how many cards will be visible at a give screen size (just add ```rcs-```): ```rcs-col-*-*```. You don't have to include bootstrap.
 
 Choose how you want to implement the navigation by using ```scrollCards({toLeft: true/false, number:*})```.For example, you can scroll when you click on a stack or when you wheel your mouse with the pointer on a card title.
-See the example: ```npm run example``` and open localhost:8081. And get inspiration from the source code.
+See the example: ```npm run example``` and open ```localhost:8081```. And get inspiration from the source code.
 
 You can know where a card is with the ```getCardOffset``` function in JavaScript, or with the CSS classes ```rcs-left-stack rcs-center rcs-right-stack```
 
-Use arrows with props ```showArrows={true}```
+Use default navigation arrows with props ```showArrows={true}```
 
 ## 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">
-    <div className="rcs-col-sm-6 rcs-col-md-4">
+<CardScroll ref="cardScroll" childrenClass="rcs-col-sm-6 rcs-col-md-4">
+    <div>
+        Hello
     </div>
 
-    <div className="rcs-col-sm-6 rcs-col-md-4">
+    <div>
+        World
     </div>
 
-    <div className="rcs-col-sm-6 rcs-col-md-4">
+    <div>
+        Foo
     </div>
 
-    <div className="rcs-col-sm-6 rcs-col-md-4">
-    </div>
-    
-    <div className="rcs-col-sm-6 rcs-col-md-4">
+    <div>
+        Bar
     </div>
 </CardScroll>
 ```
@@ -58,15 +60,4 @@ this.refs.cardScroll.scrollCards({toLeft: true, number:1})
 ```
 
 ## TODO
-- [x] Tests
-- [x] Example
-- Features
-    - [x] CSS arrows
-    - [x] Disable arrows if unable to navigate
-    - [ ] ~~Mouse scroll triggers horizontal scroll~~ (it is up to the user, see example)
-    - [x] Stacks
-- Fix
-    - [x] Remove horizontal scroll bar
-- Technical
-    - [x] CSS loader
-    - [x] Improve packaging (babel + css)
+- [ ] Improve margin stack algorithm

example/index.js

@@ -15,7 +15,7 @@ const ScrollableTitleCard = React.createClass({
         })
     },
     render() {
-        const {title, children, className, style} = this.props
+        const {title, children} = this.props
         const onClick = ev => {
             const offset = this.props.getCardOffset()
             if (offset != 0) {
@@ -24,14 +24,12 @@ const ScrollableTitleCard = React.createClass({
             }
         }
         return (
-            <div className={"col rcs-col-sm-6 rcs-col-md-4 rcs-col-lg-3 "+className} style={style}>
-                <div onClick={onClick} className="card">
-                    <div ref="title" className="card-header">
-                        {title}
-                    </div>
-                    <div className="card-block">
-                        {children}
-                    </div>
+            <div onClick={onClick} className="card">
+                <div ref="title" className="card-header">
+                    {title}
+                </div>
+                <div className="card-block">
+                    {children}
                 </div>
             </div>
         )
@@ -89,7 +87,7 @@ const Example = React.createClass({
             <div>
                 <button onClick={this.addCard}>Add card</button>
                 <button onClick={this.removeCard}>Remove last card</button>
-                <CardScroll ref="cardScroll">
+                <CardScroll ref="cardScroll" childrenClass="col rcs-col-sm-6 rcs-col-md-4 rcs-col-lg-3">
                     {this.state.cards.map((el, index) => React.cloneElement(el, {
                         scrollCards,
                         getCardOffset: getCardOffset(index)

lib/index.js

@@ -16,7 +16,6 @@ var _lodash = require('lodash');
 
 var _styles = {
     "container": "_1H7C65wd8WJqBtCRmAfokb",
-    "stack": "_358enaiolY7BZPuXLuxdRA",
     "rightArrow": "_22yQcZhJvmCSA52vE9VrUe",
     "arrow": "_1y88-b9gQ_tGRfPBQpxMfo",
     "leftArrow": "_1bIeR72ojeoWY-MxcIhjT-"
@@ -77,6 +76,7 @@ var CardScroll = _react2.default.createClass({
         var container = this._container.getBoundingClientRect().width - this.maxOffset * 2;
         // 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;
+        console.log({ card: card, container: container });
         return {
             card: card,
             container: container
@@ -86,6 +86,7 @@ var CardScroll = _react2.default.createClass({
         var _this2 = this;
 
         var currentCard = this.state.currentCard;
+        var childrenClass = this.props.childrenClass;
 
         var lastCard = this.lastVisibleCardIndex();
         var updateContainer = function updateContainer(c) {
@@ -94,17 +95,16 @@ var CardScroll = _react2.default.createClass({
         var updateChild = function updateChild(c) {
             return c && (_this2._child = c);
         };
-        var first = true;
         return _react2.default.createElement(
             'div',
             null,
-            this.canScrollLeft() ? _react2.default.createElement(
+            this.showArrows() && this.canScrollLeft() ? _react2.default.createElement(
                 'div',
                 { className: _styles2.default.leftArrow,
                     onClick: this.scrollCardsWrap({ toLeft: true }) },
                 _react2.default.createElement('div', { className: _styles2.default.arrow })
             ) : null,
-            this.canScrollRight() ? _react2.default.createElement(
+            this.showArrows() && this.canScrollRight() ? _react2.default.createElement(
                 'div',
                 { className: _styles2.default.rightArrow,
                     onClick: this.scrollCardsWrap() },
@@ -116,13 +116,6 @@ 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 props = { className: _styles2.default.stack };
-
-                    if (first) {
-                        first = false;
-                        props.ref = updateChild;
-                    }
-
                     var offset = (0, _offset.getOffset)({ index: index, firstVisibleIndex: currentCard, lastVisibleIndex: lastCard });
                     var position = offset;
                     var zIndex = 0;
@@ -138,10 +131,12 @@ var CardScroll = _react2.default.createClass({
                         zIndex = lastCard - index - 1;
                         className = "rcs-right-stack";
                     }
-                    props.style = { left: position, zIndex: zIndex };
-                    props.className = className + ' ' + _styles2.default.stack;
-
-                    return _react2.default.cloneElement(child, props);
+                    var style = { left: position, zIndex: zIndex };
+                    return _react2.default.createElement(
+                        'div',
+                        { className: className + ' ' + childrenClass, style: style, ref: index == 0 && updateChild },
+                        child
+                    );
                 })
             )
         );
@@ -187,10 +182,13 @@ var CardScroll = _react2.default.createClass({
         return this.state.currentCard + this.getVisibleCardCount() - 1;
     },
     canScrollRight: function canScrollRight() {
-        return this.props.showArrows && this.lastVisibleCardIndex() + 1 < _react2.default.Children.count(this.props.children);
+        return this.lastVisibleCardIndex() + 1 < _react2.default.Children.count(this.props.children);
     },
     canScrollLeft: function canScrollLeft() {
-        return this.props.showArrows && this.state.currentCard > 0;
+        return this.state.currentCard > 0;
+    },
+    showArrows: function showArrows() {
+        return this.props.showArrows;
     },
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-card-scroll",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A React component to navigate horizontally between cards of same width",
   "main": "lib/index.js",
   "scripts": {

src/index.js

@@ -57,18 +57,19 @@ let CardScroll = React.createClass({
         const container = this._container.getBoundingClientRect().width-this.maxOffset*2
         // get first child as all children should be of equal width
         const card = ReactDOM.findDOMNode(this._child).getBoundingClientRect().width*container/this._container.getBoundingClientRect().width
+        console.log({card, container})
         return {
             card,
             container
         }
     },
-
+    
     render() {
         const {currentCard} = this.state
+        const {childrenClass} = this.props
         const lastCard = this.lastVisibleCardIndex()
         const updateContainer = c => c && (this._container = c)
         const updateChild = c => c && (this._child= c)
-        let first = true
         return (
             <div>
                 {this.showArrows() && this.canScrollLeft()?
@@ -87,13 +88,6 @@ let CardScroll = React.createClass({
                          style={{marginLeft: this.maxOffset, marginRight: this.maxOffset}}
                          ref={updateContainer}>
                         {React.Children.map(this.props.children, (child, index) => {
-                            let props = {className: s.stack}
-
-                            if(first){
-                                first = false
-                                props.ref= updateChild
-                            }
-
                             const offset = getOffset({index, firstVisibleIndex:currentCard, lastVisibleIndex:lastCard})
                             let position = offset
                             let zIndex = 0
@@ -109,10 +103,12 @@ let CardScroll = React.createClass({
                                 zIndex = lastCard-index-1
                                 className = "rcs-right-stack"
                             }
-                            props.style = {left: position, zIndex}
-                            props.className = `${className} ${s.stack}`
-
-                            return React.cloneElement(child, props);
+                            const style = {left: position, zIndex}
+                            return (
+                                <div className={`${className} ${childrenClass}`} style={style} ref={index == 0 && updateChild}>
+                                    {child}
+                                </div>
+                            );
                         })}
                     </div>
             </div>

src/styles.scss

@@ -1,14 +1,3 @@
-.container {
-    position: relative;
-    box-sizing: border-box;
-}
-
-.container .stack{
-    position: absolute;
-    transition: left 1s cubic-bezier(0,.7,.7,1);
-    box-sizing: border-box;
-}
-
 $border-color: #ccc;
 $padding: 4px;
 $outMargin: -15px;
@@ -27,42 +16,51 @@ $outPadding: $padding - $outMargin;
     transition: margin 0.5s;
 }
 
-.rightArrow {
-    @include arrow;
-    background: linear-gradient(to right, white, #eee);
-    right: 0;
-    border-left: $border-color solid 1px;
-    border-radius: 2px 0 0 2px;
-    margin-right: $outMargin;
-    padding-right: $outPadding;
-    cursor: pointer;
-    .arrow{
-        &::after{
-            content: ">"
-        }
+.container {
+    position: relative;
+    box-sizing: border-box;
+    :global(.rcs-center), :global(.rcs-left-stack), :global(.rcs-right-stack){
+        position: absolute;
+        transition: left 1s cubic-bezier(0,.7,.7,1);
+        box-sizing: border-box;
     }
-    &:hover{
-        background: linear-gradient(to right, #ddd, #ccc);
-        margin-right: 0;
+    .rightArrow {
+        @include arrow;
+        background: linear-gradient(to right, white, #eee);
+        right: 0;
+        border-left: $border-color solid 1px;
+        border-radius: 2px 0 0 2px;
+        margin-right: $outMargin;
+        padding-right: $outPadding;
+        cursor: pointer;
+        .arrow{
+            &::after{
+                content: ">"
+            }
+        }
+        &:hover{
+            background: linear-gradient(to right, #ddd, #ccc);
+            margin-right: 0;
+        }
     }
-}
 
-.leftArrow {
-    @include arrow;
-    background: linear-gradient(to left, white, #eee);
-    left: 0;
-    border-right: $border-color solid 1px;
-    border-radius: 0 2px 2px 0;
-    margin-left: $outMargin;
-    padding-left: $outPadding;
-    .arrow{
-        &::after{
-            content: "<"
+    .leftArrow {
+        @include arrow;
+        background: linear-gradient(to left, white, #eee);
+        left: 0;
+        border-right: $border-color solid 1px;
+        border-radius: 0 2px 2px 0;
+        margin-left: $outMargin;
+        padding-left: $outPadding;
+        .arrow{
+            &::after{
+                content: "<"
+            }
+        }
+        &:hover{
+            background: linear-gradient(to left, #ddd, #ccc);
+            margin-left: 0;
         }
-    }
-    &:hover{
-        background: linear-gradient(to left, #ddd, #ccc);
-        margin-left: 0;
     }
 }