start to move to stack layout

Author: wfbn8821

example/index.js

@@ -10,14 +10,14 @@ const ScrollableTitleCard = React.createClass({
         })
     },
     render() {
-        const {title, children} = this.props
+        const {title, children, className, style} = this.props
         return (
-            <div className="col-sm-6 col-md-4">
+            <div className={"col-sm-6 col-md-4 "+className} style={style}>
                 <div className="card">
                     <div ref="title" className="card-header">
                         {title}
                     </div>
-                    <div className="card-body">
+                    <div className="card-block">
                         {children}
                     </div>
                 </div>

lib/assets/styles.css

@@ -1,8 +1,10 @@
 .row._1H7C65wd8WJqBtCRmAfokb {
-  display: flex;
-  flex-wrap: nowrap;
   position: relative; }
 
+._1H7C65wd8WJqBtCRmAfokb ._358enaiolY7BZPuXLuxdRA {
+  position: absolute;
+  transition: left 1s; }
+
 ._22yQcZhJvmCSA52vE9VrUe {
   position: fixed;
   top: 40%;

lib/index.js

@@ -18,13 +18,16 @@ var _reactMotion = require('react-motion');
 
 var _styles = {
     "container": "_1H7C65wd8WJqBtCRmAfokb",
+    "stack": "_358enaiolY7BZPuXLuxdRA",
     "rightArrow": "_22yQcZhJvmCSA52vE9VrUe",
     "arrow": "_1y88-b9gQ_tGRfPBQpxMfo",
     "leftArrow": "_1bIeR72ojeoWY-MxcIhjT-"
 };
 
 var _styles2 = _interopRequireDefault(_styles);
 
+var _offset = require('./offset');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var defaultWidths = {
@@ -35,13 +38,14 @@ var defaultWidths = {
 var CardScroll = _react2.default.createClass({
     displayName: 'CardScroll',
     getInitialState: function getInitialState() {
-        return { currentLeft: 0, currentCard: 0 };
+        return { currentCard: 0 };
     },
     componentWillMount: function componentWillMount() {
         this.widths = defaultWidths;
         this.children = {};
     },
     componentDidMount: function componentDidMount() {
+        this.maxOffset = (0, _offset.getMaxOffset)();
         this.widths = this.computeWidths();
         this.setState(this.getInitialState());
         window.addEventListener('resize', this.handleResize);
@@ -82,14 +86,16 @@ var CardScroll = _react2.default.createClass({
     render: function render() {
         var _this2 = this;
 
-        var currentLeft = this.state.currentLeft;
+        var currentCard = this.state.currentCard;
 
+        var lastCard = this.lastVisibleCardIndex();
         var updateContainer = function updateContainer(c) {
             return c && (_this2._container = c);
         };
         var updateChild = function updateChild(c) {
             return c && (_this2._child = c);
         };
+        var first = true;
         return _react2.default.createElement(
             'div',
             null,
@@ -106,27 +112,35 @@ var CardScroll = _react2.default.createClass({
                 _react2.default.createElement('div', { className: _styles2.default.arrow })
             ) : null,
             _react2.default.createElement(
-                _reactMotion.Motion,
-                { style: { left: (0, _reactMotion.spring)(currentLeft) } },
-                function (value) {
-                    var first = true;
-                    return _react2.default.createElement(
-                        'div',
-                        { className: 'row ' + _styles2.default.container,
-                            style: value,
-                            ref: updateContainer },
-                        _react2.default.Children.map(_this2.props.children, function (child) {
-                            if (first) {
-                                first = false;
-                                return _react2.default.cloneElement(child, {
-                                    ref: updateChild
-                                });
-                            } else {
-                                return child;
-                            }
-                        })
-                    );
-                }
+                'div',
+                { className: 'row ' + _styles2.default.container,
+                    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, cardWidth: _this2.widths.card });
+                    var position = offset;
+                    var zIndex = 0;
+                    if (offset == 0) {
+                        position = (index - currentCard) * _this2.widths.card;
+                        if (index == lastCard) {
+                            zIndex = -1;
+                        }
+                    } else if (offset > 0) {
+                        position = offset + (lastCard - currentCard) * _this2.widths.card;
+                        zIndex = lastCard - index - 1;
+                    }
+                    props.style = { left: position, zIndex: zIndex };
+                    props.className = _styles2.default.stack;
+
+                    return _react2.default.cloneElement(child, props);
+                })
             )
         );
     },

package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-card-scroll",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "A React component to navigate horizontally between cards of same width",
   "main": "lib/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "babel-tape-runner test/**.js",
     "build": "BABEL_DISABLE_CACHE=1 NODE_ENV=LIB babel -d lib/ src",
     "dev": "BABEL_DISABLE_CACHE=1 NODE_ENV=LIB babel -d lib/ src -w",
     "example": "node webpack.example.js",
@@ -31,6 +31,7 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",
+    "babel-tape-runner": "^2.0.1",
     "bootstrap": "^4.0.0-alpha.2",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -40,11 +41,11 @@
     "react-dom": "^15.0.1",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
+    "tape": "^4.5.1",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
-    "lodash": "^4.11.1",
-    "react-motion": "^0.4.2"
+    "lodash": "^4.11.1"
   }
 }

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import {throttle} from 'lodash'
 import {Motion, spring} from 'react-motion'
 import s from './styles.scss'
+import {getOffset, getMaxOffset} from './offset'
 
 const defaultWidths = {
     card: 0,
@@ -11,7 +12,7 @@ const defaultWidths = {
 
 let CardScroll = React.createClass({
     getInitialState(){
-        return {currentLeft: 0, currentCard: 0}
+        return {currentCard: 0}
     },
 
     componentWillMount() {
@@ -20,11 +21,12 @@ let CardScroll = React.createClass({
     },
 
     componentDidMount() {
+        this.maxOffset = getMaxOffset()
         this.widths = this.computeWidths()
         this.setState(this.getInitialState())
         window.addEventListener('resize', this.handleResize);
     },
-
+    
     componentDidUpdate(){
         // case children were removed
         if(this.canScrollLeft() && this.lastVisibleCardIndex()>=React.Children.count(this.props.children)){
@@ -61,9 +63,11 @@ let CardScroll = React.createClass({
     },
 
     render() {
-        const {currentLeft} = this.state
+        const {currentCard} = this.state
+        const lastCard = this.lastVisibleCardIndex()
         const updateContainer = c => c && (this._container = c)
         const updateChild = c => c && (this._child= c)
+        let first = true
         return (
             <div>
                 {this.canScrollLeft()?
@@ -78,27 +82,35 @@ let CardScroll = React.createClass({
                         <div className={s.arrow}></div>
                     </div>
                         :null}
-                <Motion style={{left: spring(currentLeft)}}>
-                    {value => {
-                        let first = true
-                        return (<div className={`row ${s.container}`}
-                             style={value}
-                             ref={updateContainer}>
-                            {React.Children.map(this.props.children, child => {
-                                if(first){
-                                    first = false
-                                    return React.cloneElement(child, {
-                                        ref: updateChild
-                                    });
-                                } else {
-                                    return child
+                    <div className={`row ${s.container}`}
+                         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, cardWidth:this.widths.card})
+                            let position = offset
+                            let zIndex = 0
+                            if(offset==0){
+                                position = (index-currentCard)*this.widths.card
+                                if(index == lastCard){
+                                    zIndex = -1
                                 }
-                                
-                            })}
-
-                        </div>)
-                    }}
-                </Motion>
+                            } else if(offset>0){
+                                position = offset + (lastCard-currentCard)*this.widths.card
+                                zIndex = lastCard-index-1
+                            }
+                            props.style = {left: position, zIndex}
+                            props.className = s.stack
+
+                            return React.cloneElement(child, props);
+                        })}
+                    </div>
             </div>
         )
     },

src/offset.js

@@ -0,0 +1,17 @@
+
+
+export const getOffset = ({index, firstVisibleIndex, lastVisibleIndex, visibleStack=3, stackSpace=5}) => {
+    if(index >= firstVisibleIndex && index <=lastVisibleIndex){
+        return 0
+    }
+    let offset = index - firstVisibleIndex
+    if(offset>0){
+        offset = index - lastVisibleIndex
+    }
+    if(Math.abs(offset) > visibleStack +1){
+        return Math.sign(offset)*((visibleStack+1)*stackSpace+1)
+    }
+    return offset*stackSpace
+}
+
+export const getMaxOffset = ({visibleStack=3, stackSpace=5}={}) => ((visibleStack+1)*stackSpace+1)

src/styles.scss

@@ -1,9 +1,12 @@
 :global(.row).container {
-    display: flex;
-    flex-wrap: nowrap;
     position: relative;
 }
 
+.container .stack{
+    position: absolute;
+    transition: left 1s;
+}
+
 $border-color: #ccc;
 $padding: 4px;
 $outMargin: -15px;

test/index.js

@@ -0,0 +1,54 @@
+import test from 'tape'
+import {getOffset} from '../src/offset'
+
+test('getOffset() all visible', assert => {
+    const msg = "no offset for all cards"
+    const expected = [0, 0, 0]
+    const testGetOffset = index => getOffset({index, firstVisibleIndex:0, lastVisibleIndex:2})
+    const actual = [0,1,2].map((e, i) => testGetOffset(i))
+    assert.deepEqual(actual, expected, msg)
+    assert.end()
+})
+
+test('getOffset() 1 hidden on left', assert => {
+    const msg = "only first card offset of -2"
+    const stackSpace = 2
+    const expected = [-stackSpace, 0, 0, 0]
+    const testGetOffset = index => getOffset({index, firstVisibleIndex:1, lastVisibleIndex:3, stackSpace})
+    const actual = [0,1,2,3].map(i => testGetOffset(i))
+    assert.deepEqual(actual, expected, msg)
+    assert.end()
+})
+
+test('getOffset() 6 hidden on left', assert => {
+    const msg = "two most left are on top of each others"
+    const stackSpace = 2
+    const visibleStack = 3
+    const expected = [-4*stackSpace-1, -4*stackSpace-1,-4*stackSpace,-3*stackSpace,-2*stackSpace,-stackSpace, 0, 0, 0]
+    const testGetOffset = index => getOffset({index, firstVisibleIndex:6, lastVisibleIndex:8, stackSpace, visibleStack})
+    const actual = [0,1,2,3,4,5,6,7,8].map(i => testGetOffset(i))
+    assert.deepEqual(actual, expected, msg)
+    assert.end()
+})
+
+test('getOffset() 1 hidden on each side', assert => {
+    const msg = "first and last card offset"
+    const stackSpace = 2
+    const expected = [-stackSpace, 0, 0, 0, stackSpace]
+    const testGetOffset = index => getOffset({index, firstVisibleIndex:1, lastVisibleIndex:3, stackSpace})
+    const actual = [0,1,2,3,4].map(i => testGetOffset(i))
+    assert.deepEqual(actual, expected, msg)
+    assert.end()
+})
+
+test('getOffset() 6 hidden on each side', assert => {
+    const msg = "offsets"
+    const stackSpace = 2
+    const visibleStack = 3
+    const expected = [-4*stackSpace-1, -4*stackSpace-1,-4*stackSpace,-3*stackSpace,-2*stackSpace,-stackSpace, 0, 0, 0, 
+        stackSpace, 2*stackSpace, 3*stackSpace,4*stackSpace, 4*stackSpace+1, 4*stackSpace+1]
+    const testGetOffset = index => getOffset({index, firstVisibleIndex:6, lastVisibleIndex:8, stackSpace, visibleStack})
+    const actual = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14].map(i => testGetOffset(i))
+    assert.deepEqual(actual, expected, msg)
+    assert.end()
+})