From b856313ab2378e9ef2a316e33371ddacb734b371 Mon Sep 17 00:00:00 2001 From: Florian Bernard Date: Tue, 31 May 2016 11:40:00 +0200 Subject: [PATCH 1/2] Initiating feature --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f464fb6..072dc0e 100644 --- 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": { From 3eaca653344ff3c24889ede330cd8dbe4b7cfcf2 Mon Sep 17 00:00:00 2001 From: wfbn8821 Date: Fri, 10 Jun 2016 10:58:20 +0200 Subject: [PATCH 2/2] add stack parameters --- README.md | 16 ++++++++++++---- example/index.js | 6 +++++- lib/assets/styles.css | 1 + lib/index.js | 28 +++++++++++++++++++++++----- src/index.js | 31 +++++++++++++++++++++++++------ 5 files changed, 66 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index d2d3abc..ebe7e40 100644 --- 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 - +
Hello
diff --git a/example/index.js b/example/index.js index 02fd17c..a88752d 100644 --- a/example/index.js +++ b/example/index.js @@ -87,7 +87,11 @@ const Example = React.createClass({
- + {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 index b0a4282..98a30ac 100644 --- 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 index 5c9ce9c..bc6a327 100644 --- 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/src/index.js b/src/index.js index f09b4ee..95867fe 100644 --- 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 + }) } })