refactor: using ref as a callback instead of string to fix react ref …

…error
leandrowd · Oct 28, 2017 · 8a276f9 · 8a276f9
1 parent fee17aa
commit 8a276f9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 29 deletions.
diff --git a/lib/components/Carousel.js b/lib/components/Carousel.js
@@ -221,9 +221,8 @@ var Carousel = function (_Component) {
         };
 
         _this.setPosition = function (position) {
-            var list = _reactDom2.default.findDOMNode(_this.refs.itemList);
             ['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
-                list.style[prop] = (0, _CSSTranslate2.default)(position, _this.props.axis);
+                _this.list.style[prop] = (0, _CSSTranslate2.default)(position, _this.props.axis);
             });
         };
 
@@ -518,6 +517,8 @@ var Carousel = function (_Component) {
     }, {
         key: 'render',
         value: function render() {
+            var _this4 = this;
+
             if (!this.props.children || this.props.children.length === 0) {
                 return null;
             }
@@ -569,8 +570,7 @@ var Carousel = function (_Component) {
                 onSwipeStart: this.onSwipeStart,
                 onSwipeEnd: this.onSwipeEnd,
                 style: itemListStyles,
-                tolerance: this.props.swipeScrollTolerance,
-                ref: 'itemList'
+                tolerance: this.props.swipeScrollTolerance
             };
 
             var containerStyles = {};
@@ -601,9 +601,24 @@ var Carousel = function (_Component) {
                     _react2.default.createElement(
                         'div',
                         { className: _cssClasses2.default.WRAPPER(true, this.props.axis), style: containerStyles, ref: 'itemsWrapper' },
-                        _react2.default.createElement(
+                        this.props.swipeable ? _react2.default.createElement(
                             _reactEasySwipe2.default,
-                            _extends({ tagName: 'ul' }, swiperProps, { allowMouseEvents: this.props.emulateTouch }),
+                            _extends({
+                                tagName: 'ul',
+                                ref: function ref(c) {
+                                    return _this4.list = c;
+                                }
+                            }, swiperProps, {
+                                allowMouseEvents: this.props.emulateTouch }),
+                            this.renderItems()
+                        ) : _react2.default.createElement(
+                            'ul',
+                            {
+                                ref: function ref(c) {
+                                    return _this4.list = c;
+                                },
+                                className: _cssClasses2.default.SLIDER(true, this.state.swiping),
+                                style: itemListStyles },
                             this.renderItems()
                         )
                     ),
@@ -641,6 +656,7 @@ Carousel.propTypes = {
     interval: _propTypes2.default.number,
     transitionTime: _propTypes2.default.number,
     swipeScrollTolerance: _propTypes2.default.number,
+    swipeable: _propTypes2.default.bool,
     dynamicHeight: _propTypes2.default.bool,
     emulateTouch: _propTypes2.default.bool,
     statusFormatter: _propTypes2.default.func.isRequired,
@@ -662,6 +678,7 @@ Carousel.defaultProps = {
     interval: 3000,
     transitionTime: 350,
     swipeScrollTolerance: 5,
+    swipeable: true,
     dynamicHeight: false,
     emulateTouch: false,
     onClickItem: noop,

diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -360,7 +360,6 @@ class Carousel extends Component {
     }
 
     setPosition = (position) => {
-        const list = ReactDOM.findDOMNode(this.refs.itemList);
         [
             'WebkitTransform',
             'MozTransform',
@@ -369,7 +368,7 @@ class Carousel extends Component {
             'transform',
             'msTransform'
         ].forEach((prop) => {
-            list.style[prop] = CSSTranslate(position, this.props.axis);
+            this.list.style[prop] = CSSTranslate(position, this.props.axis);
         });
     }
 
@@ -558,8 +557,7 @@ class Carousel extends Component {
             onSwipeStart: this.onSwipeStart,
             onSwipeEnd: this.onSwipeEnd,
             style: itemListStyles,
-            tolerance: this.props.swipeScrollTolerance,
-            ref: 'itemList'
+            tolerance: this.props.swipeScrollTolerance
         };
 
         const containerStyles = {};
@@ -581,30 +579,26 @@ class Carousel extends Component {
             containerStyles.height = this.state.itemSize;
         }
 
-        let slide = null;
-        if (this.props.swipeable) {
-            slide = (
-                <Swipe tagName="ul" {...swiperProps} allowMouseEvents={this.props.emulateTouch}>
-                  { this.renderItems() }
-                </Swipe>
-            )
-        } else {
-            slide = (
-                <ul
-                  className={klass.SLIDER(true, this.state.swiping)}
-                  style={itemListStyles}
-                  ref="itemList">
-                  { this.renderItems() }
-                </ul>
-            )
-        }
-
         return (
             <div className={this.props.className} ref="carouselWrapper">
                 <div className={klass.CAROUSEL(true)} style={{width: this.props.width}}>
                     <button type="button" className={klass.ARROW_PREV(!hasPrev)} onClick={this.decrement} />
                     <div className={klass.WRAPPER(true, this.props.axis)} style={containerStyles} ref="itemsWrapper">
-                        {slide}
+                        { this.props.swipeable ?
+                            <Swipe
+                                tagName="ul"
+                                ref={c => this.list = c}
+                                {...swiperProps}
+                                allowMouseEvents={this.props.emulateTouch}>
+                              { this.renderItems() }
+                            </Swipe> :
+                            <ul
+                                ref={c => this.list = c}
+                                className={klass.SLIDER(true, this.state.swiping)}
+                                style={itemListStyles}>
+                                { this.renderItems() }
+                            </ul>
+                        }
                     </div>
                     <button type="button" className={klass.ARROW_NEXT(!hasNext)} onClick={this.increment} />