Merge 2ccfc7c into b65c68c

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Better handling of `Float` values in `next` and `prev` function calls in the Slider component.
+
 ## [0.6.0] - 2019-08-02
 
 ### Added

manifest.json

@@ -8,8 +8,11 @@
   "scripts": {
     "postreleasy": "vtex publish --verbose"
   },
+  "dependencies": {
+    "vtex.device-detector": "0.x"
+  },
   "builders": {
     "react": "3.x"
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
-}
+}

react/__mocks__/vtex.device-detector.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const withDevice = Component => {
+  const ExtendedComponent = props => <Component isMobile {...props} />
+
+  ExtendedComponent.displayName = Component.displayName
+
+  return ExtendedComponent
+}

react/__tests__/SliderContainer.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@vtex/test-tools/react'
+import { render } from '@vtex/test-tools/react'
 
 import Slider from '../components/Slider.js'
 import Slide from '../components/Slide.js'

react/__tests__/__snapshots__/Dots.test.js.snap

@@ -4,7 +4,6 @@ exports[`<Dots /> component should match snapshot 1`] = `
 <DocumentFragment>
   <ul
     class="dotsContainer absolute ma0 pa0 dib list"
-    resizedebounce="250"
   >
     <li
       class="dib "

react/__tests__/__snapshots__/Slider.test.js.snap

@@ -17,7 +17,7 @@ exports[`<Slider /> component should match snapshot 1`] = `
   >
     <ul
       class="sliderFrame list pa0 h-100 ma0 flex"
-      style="width: 400%; transform: translate3d(0, 0, 0); transition: all 0ms ease-out; cursor: default;"
+      style="width: 400%; transform: translate3d(-18.75%, 0, 0); transition: all 0ms ease-out; cursor: default;"
     >
       <li
         class="inline-flex h-100 relative overflow-hidden"

react/__tests__/__snapshots__/SliderContainer.test.js.snap

@@ -13,7 +13,7 @@ exports[`<SliderContainer /> component should match snapshot 1`] = `
     >
       <ul
         class="sliderFrame list pa0 h-100 ma0 flex"
-        style="width: 200%; transform: translate3d(0, 0, 0); transition: all 0ms ease-out; cursor: default;"
+        style="width: 200%; transform: translate3d(-37.5%, 0, 0); transition: all 0ms ease-out; cursor: default;"
       >
         <li
           class="inline-flex h-100 relative overflow-hidden"
@@ -54,7 +54,7 @@ exports[`<SliderContainer /> component should match snapshot with another tag 1`
     >
       <ul
         class="sliderFrame list pa0 h-100 ma0 flex"
-        style="width: 200%; transform: translate3d(0, 0, 0); transition: all 0ms ease-out; cursor: default;"
+        style="width: 200%; transform: translate3d(-37.5%, 0, 0); transition: all 0ms ease-out; cursor: default;"
       >
         <li
           class="inline-flex h-100 relative overflow-hidden"

react/components/Dots.js

@@ -111,7 +111,6 @@ class Dots extends PureComponent {
       perPage,
       totalSlides,
       dotSize,
-      ...otherProps
     } = this.props
 
     const classes = {
@@ -134,7 +133,6 @@ class Dots extends PureComponent {
           classes.root,
           'absolute ma0 pa0 dib list'
         )}
-        {...otherProps}
       >
         <EventListener target="window" onResize={this.handleResize} />
         {this.slideIndeces.map(i => {

react/components/Slider.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import EventListener from 'react-event-listener'
 import styles from './styles.css'
 import resolveSlidesNumber from '../utils/resolveSlidesNumber'
-import { withRuntimeContext } from 'vtex.render-runtime'
+import { withDevice } from 'vtex.device-detector'
 
 import {
   getStylingTransition,
@@ -68,8 +68,8 @@ class Slider extends PureComponent {
     threshold: PropTypes.number,
     /** If should scroll by page or one item at a time */
     scrollByPage: PropTypes.bool,
-    /** Render runtime context */
-    runtime: PropTypes.object,
+    /** Check if on mobile using vtex.device-detector */
+    isMobile: PropTypes.bool,
     draggable: PropTypes.bool,
   }
 
@@ -110,7 +110,7 @@ class Slider extends PureComponent {
       const perPage = resolveSlidesNumber(
         nextProps.minPerPage,
         nextProps.perPage,
-        nextProps.runtime
+        nextProps.isMobile
       )
       const currentSlideIsClone =
         currentSlide < perPage ||
@@ -143,7 +143,7 @@ class Slider extends PureComponent {
     this.perPage = resolveSlidesNumber(
       props.minPerPage,
       props.perPage,
-      props.runtime
+      props.isMobile
     )
 
     this.state = {
@@ -206,7 +206,7 @@ class Slider extends PureComponent {
     this.perPage = resolveSlidesNumber(
       this.props.minPerPage,
       this.props.perPage,
-      this.props.runtime
+      this.props.isMobile
     )
     this._sliderFrameWidth = this._sliderFrame.current.getBoundingClientRect().width
   }
@@ -229,7 +229,7 @@ class Slider extends PureComponent {
 
   fit = () => {
     const { minPerPage, perPage, currentSlide, onChangeSlide } = this.props
-    this.perPage = resolveSlidesNumber(minPerPage, perPage, this.props.runtime)
+    this.perPage = resolveSlidesNumber(minPerPage, perPage, this.props.isMobile)
     const newCurrentSlide =
       Math.floor(currentSlide / this.perPage) * this.perPage
 
@@ -272,8 +272,9 @@ class Slider extends PureComponent {
   }
 
   prev = (howManySlides = 1, dragDistance = 0) => {
+    const howManyInt = Number.parseInt(howManySlides)
     const { onChangeSlide, currentSlide, loop } = this.props
-    let newCurrentSlide = currentSlide
+    let newCurrentSlide = Number.parseInt(currentSlide)
     let stateCurrentSlide
     let enableTransition = true
 
@@ -282,16 +283,16 @@ class Slider extends PureComponent {
     }
 
     if (loop) {
-      if (this.isNegativeClone(currentSlide - howManySlides)) {
+      if (this.isNegativeClone(currentSlide - howManyInt)) {
         newCurrentSlide = this.getPositiveClone(currentSlide)
         enableTransition = false
-        stateCurrentSlide = newCurrentSlide - howManySlides
+        stateCurrentSlide = newCurrentSlide - howManyInt
       } else {
-        newCurrentSlide = currentSlide - howManySlides
+        newCurrentSlide = currentSlide - howManyInt
         stateCurrentSlide = newCurrentSlide
       }
     } else {
-      newCurrentSlide = Math.max(currentSlide - howManySlides, 0)
+      newCurrentSlide = Math.max(currentSlide - howManyInt, 0)
       stateCurrentSlide = newCurrentSlide
     }
 
@@ -306,8 +307,9 @@ class Slider extends PureComponent {
   }
 
   next = (howManySlides = 1, dragDistance = 0) => {
+    const howManyInt = Number.parseInt(howManySlides)
     const { onChangeSlide, currentSlide, loop } = this.props
-    let newCurrentSlide = currentSlide
+    let newCurrentSlide = Number.parseInt(currentSlide)
     let stateCurrentSlide
     let enableTransition = true
 
@@ -316,17 +318,17 @@ class Slider extends PureComponent {
     }
 
     if (loop) {
-      if (this.isPositiveClone(currentSlide + howManySlides)) {
+      if (this.isPositiveClone(currentSlide + howManyInt)) {
         newCurrentSlide = this.getNegativeClone(currentSlide)
         enableTransition = false
-        stateCurrentSlide = newCurrentSlide + howManySlides
+        stateCurrentSlide = newCurrentSlide + howManyInt
       } else {
-        newCurrentSlide = currentSlide + howManySlides
+        newCurrentSlide = currentSlide + howManyInt
         stateCurrentSlide = newCurrentSlide
       }
     } else {
       newCurrentSlide = Math.min(
-        currentSlide + howManySlides,
+        currentSlide + howManyInt,
         this.totalSlides - this.perPage
       )
       stateCurrentSlide = newCurrentSlide
@@ -546,8 +548,13 @@ class Slider extends PureComponent {
       easing,
       duration,
       cursor,
+      isMobile,
+      minPerPage,
     } = this.props
     const { enableTransition, dragDistance, firstRender } = this.state
+    const shouldCenterSlideOnMobile = !Number.isInteger(minPerPage)
+    const CURRENT_SLIDE_CENTER_SHIFT =
+      isMobile && shouldCenterSlideOnMobile ? 0.75 : 0
 
     const classes = {
       ...Slider.defaultProps.classes,
@@ -563,7 +570,9 @@ class Slider extends PureComponent {
       width: `${sliderFrameWidth}%`,
       ...(this.isMultiPage &&
         getTranslateProperty(
-          (currentSlide / this.totalSlides) * -100 + dragDistance
+          ((currentSlide + CURRENT_SLIDE_CENTER_SHIFT) / this.totalSlides) *
+            -100 +
+            dragDistance
         )),
       ...getStylingTransition(easing, enableTransition ? duration : 0),
       ...(this.isMultiPage && { cursor }),
@@ -615,4 +624,4 @@ class Slider extends PureComponent {
   }
 }
 
-export default withRuntimeContext(Slider)
+export default withDevice(Slider)

react/utils/resolveSlidesNumber.js

@@ -14,12 +14,11 @@
  * @param {number|object} perPage
  * @param {number|undefined} minPerPage
  */
-function resolveSlidesNumber(minPerPage, perPage, runtime) {
+function resolveSlidesNumber(minPerPage, perPage, isMobile) {
   let result = minPerPage || 1
   if (typeof perPage === 'number') {
     result = perPage
   } else if (typeof perPage === 'object') {
-    const isMobile = runtime && runtime.hints && runtime.hints.mobile
     const innerWidth = window && window.innerWidth
 
     /** If it's on SSR, use placeholder screen sizes to get an approximate