fix(Slider): can swipe vertical & width 100% invertical

alibaba-fusion · Jan 16, 2019 · 3998ec2 · 3998ec2
1 parent 6b28cee
commit 3998ec2
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 4 deletions.
diff --git a/src/slider/index.jsx b/src/slider/index.jsx
@@ -3,7 +3,7 @@ import Slider from './slider';
 
 export default ConfigProvider.config(Slider, {
     exportNames: ['resize'],
-    transform: (props, deprecated) => {
+    transform: /* istanbul ignore next */(props, deprecated) => {
         if ('fade' in props) {
             deprecated('fade', 'animation', 'Slider');
 

diff --git a/src/slider/main.scss b/src/slider/main.scss
@@ -110,7 +110,6 @@
     &-dots {
         display: block;
         position: absolute;
-        z-index: 100;
         margin: 0;
         padding: 0;
 

diff --git a/src/slider/slick/inner-slider.jsx b/src/slider/slick/inner-slider.jsx
@@ -40,6 +40,7 @@ class InnerSlider extends React.Component {
         slidesToScroll: PropTypes.number,
         variableWidth: PropTypes.bool,
         vertical: PropTypes.bool,
+        verticalSwiping: PropTypes.bool,
         prevArrow: PropTypes.element,
         nextArrow: PropTypes.element,
         dotsRender: PropTypes.func,
@@ -212,7 +213,7 @@ class InnerSlider extends React.Component {
             prefix, animation, arrows, arrowSize, arrowPosition, arrowDirection,
             dots, dotsClass, cssEase, speed, infinite, centerMode, centerPadding,
             lazyLoad, dotsDirection, rtl, slidesToShow, slidesToScroll,
-            variableWidth, vertical, focusOnSelect, children, dotsRender, triggerType
+            variableWidth, vertical, verticalSwiping, focusOnSelect, children, dotsRender, triggerType
         } = this.props;
 
         const {
@@ -242,6 +243,7 @@ class InnerSlider extends React.Component {
             trackStyle,
             variableWidth,
             vertical,
+            verticalSwiping,
             triggerType
             // clickHandler: this.changeSlide, unused
         };

diff --git a/src/slider/slick/mixins/event-handlers.js b/src/slider/slick/mixins/event-handlers.js
@@ -91,7 +91,12 @@ const EventHandlers = {
         touchObject.curY = (e.touches) ? e.touches[0].pageY : e.clientY;
         touchObject.swipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2)));
 
-        const positionOffset = (this.props.rtl === false ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);
+        let positionOffset = (this.props.rtl === false ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);
+
+        if (this.props.verticalSwiping === true) {
+            touchObject.swipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2)));
+            positionOffset = touchObject.curY > touchObject.startY ? 1 : -1;
+        }
 
         const currentSlide = this.state.currentSlide;
         const dotCount = Math.ceil(this.state.slideCount / this.props.slidesToScroll);

diff --git a/src/slider/slick/track.jsx b/src/slider/slick/track.jsx
@@ -60,6 +60,10 @@ const getSlideStyle = function(specProps) {
         }
     }
 
+    if (specProps.vertical) {
+        style.width = '100%';
+    }
+
     return style;
 };
 

diff --git a/src/slider/slider.jsx b/src/slider/slider.jsx
@@ -155,6 +155,7 @@ export default class Slider extends Component {
         arrowSize: 'medium',
         arrowPosition: 'inner',
         vertical: false,
+        verticalSwiping: true,
         dots: true,
         dotsDirection: 'hoz',
         arrows: true,
@@ -225,6 +226,7 @@ export default class Slider extends Component {
         if (slideDirection === 'ver') {
             // 向下传递时使用 vertical 属性
             sliderProps.vertical = true;
+            sliderProps.verticalSwiping = true;
         }
 
         return (

diff --git a/test/slider/index-spec.js b/test/slider/index-spec.js
@@ -27,6 +27,11 @@ describe('slider', function() {
             }
         });
 
+        it('should not show render', () => {
+            const wrapper = shallow(<Slider></Slider>);
+            assert(wrapper.find('.next-slick').length === 0);
+        });
+
         it('should basic render', () => {
             const wrapper = shallow(<Slider>{slides}</Slider>);
             assert(wrapper.props().arrowSize === 'medium');
@@ -268,4 +273,100 @@ describe('slider', function() {
             wrapper.find('.next-slick-arrow.next-slick-next').simulate('click');
         });
     });
+
+    describe('action rtl', () => {
+        let wrapper;
+        const slides = [1, 2, 3, 4].map((item, index) => <div key={index} className="custom-slick-item" style={{ width: '500px' }}><h3>{item}</h3></div>);
+
+        afterEach(() => {
+            const prevWrapper = wrapper;
+            if (prevWrapper) {
+                setTimeout(() => prevWrapper.unmount());
+                wrapper = null;
+            }
+        });
+
+        it('should click next/prev arrow', () => {
+            return co(function* () {
+                wrapper = mount(<Slider rtl infinite={false}>{slides}</Slider>);
+                yield delay(100);
+                const len = wrapper.find('.next-slick-slide').length;
+
+                assert(wrapper.find('.next-slick-slide').at(len-1).hasClass('next-slick-active'));
+                wrapper.find('.next-slick-arrow.next-slick-prev').simulate('click');
+                yield delay(300);
+                assert(wrapper.find('.next-slick-slide').at(len-2).hasClass('next-slick-active'));
+                wrapper.find('.next-slick-prev').simulate('click');
+            });
+        });
+
+        it('should hover next/prev arrow', () => {
+            return co(function* () {
+                wrapper = mount(<Slider rtl infinite={false}>{slides}</Slider>);
+
+                const len = wrapper.find('.next-slick-slide').length;
+                wrapper.find('.next-slick-arrow.next-slick-prev').simulate('mouseEnter');
+                yield delay(300);
+                wrapper.find('.next-slick-arrow.next-slick-prev').simulate('mouseLeave');
+
+                wrapper.find('.next-slick-arrow.next-slick-next').simulate('mouseEnter');
+                yield delay(300);
+                wrapper.find('.next-slick-arrow.next-slick-next').simulate('mouseLeave');
+
+                assert(wrapper.find('.next-slick-slide').at(len-1).hasClass('next-slick-active'));
+            });
+        });
+
+        it('should click dots', () => {
+            return co(function* () {
+                wrapper = mount(<Slider infinite={false}>{slides}</Slider>);
+                assert(wrapper.find('.next-slick-slide').at(0).hasClass('next-slick-active'));
+                wrapper.find('.next-slick-dots-item button').at(2).simulate('click');
+                yield delay(300);
+                assert(wrapper.find('.next-slick-dots-item').at(2).hasClass('active'));
+                assert(wrapper.find('.next-slick-slide').at(2).hasClass('next-slick-active'));
+            });
+        });
+
+        it('should call onChange hook', () => {
+            const settings = {
+                infinite: false,
+                onChange: (index) => {
+                    assert(index === 1);
+                }
+            }
+
+            wrapper = mount(<Slider rtl {...settings}>{slides}</Slider>);
+            wrapper.find('.next-slick-arrow.next-slick-next').simulate('click');
+        });
+
+        it('should autoplay', () => {
+            return co(function* () {
+                wrapper = mount(<Slider rtl autoplay infinite={false} autoplaySpeed={200}>{slides}</Slider>);
+                yield delay(300);
+                wrapper.update();
+                const len = wrapper.find('.next-slick-slide').length;
+                assert(wrapper.find('.next-slick-slide').at(len-2).hasClass('next-slick-active'));
+            });
+        });
+
+        it('should render with lazyLoad', () => {
+            const wrapper = mount(<Slider rtl lazyLoad infinite={false}>{slides}</Slider>);
+            assert(wrapper.find('.custom-slick-item').length === 1);
+        })
+
+        it('too more slidesToShow ', () => {
+            return co(function* () {
+                const settings = {
+                    rtl: true,
+                    slidesToShow: 2,
+                    slidesToScroll: 10,
+                    autoplaySpeed: 200,
+                }
+                wrapper = mount(<Slider {...settings}>{slides}</Slider>);
+                yield delay(2000);
+                assert(wrapper.find('.next-slick').length === 1);
+            });
+        });
+    });
 });