fix: more resizing fixes

smashercosmo · Nov 22, 2019 · 8e5b897 · 8e5b897
1 parent 31131fa
commit 8e5b897
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 88 deletions.
diff --git a/example/src/app.tsx b/example/src/app.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import useResponsiveValue from 'use-responsivevalue'
 
 import { Controls } from './controls'
@@ -9,68 +9,71 @@ function App() {
     '(min-width: 480px) 3, (min-width: 720px) 4, (min-width: 1024px) 6, 2',
   )
 
-  const itemStyles = {
+  const itemStyles: CSSProperties = {
     height: 'auto',
     width: '100%',
     display: 'block',
+    borderRight: '1px solid red',
+    borderLeft: '1px solid red',
+    boxSizing: 'border-box',
   }
 
   return (
     <div style={{ position: 'relative' }}>
       <SnapSlider columns={Number(columns)} controls={Controls}>
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=One"
+          src="https://via.placeholder.com/110x300?text=One"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Two"
+          src="https://via.placeholder.com/110x300?text=Two"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Three"
+          src="https://via.placeholder.com/110x300?text=Three"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Four"
+          src="https://via.placeholder.com/110x300?text=Four"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Five"
+          src="https://via.placeholder.com/110x300?text=Five"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Six"
+          src="https://via.placeholder.com/110x300?text=Six"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Seven"
+          src="https://via.placeholder.com/110x300?text=Seven"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Eight"
+          src="https://via.placeholder.com/110x300?text=Eight"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Nine"
+          src="https://via.placeholder.com/110x300?text=Nine"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Ten"
+          src="https://via.placeholder.com/110x300?text=Ten"
           alt=""
         />
         <img
           style={itemStyles}
-          src="https://via.placeholder.com/100x300?text=Eleven"
+          src="https://via.placeholder.com/110x300?text=Eleven"
           alt=""
         />
       </SnapSlider>

diff --git a/example/src/controls.tsx b/example/src/controls.tsx
@@ -1,4 +1,54 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
+
+const paginationStyles: CSSProperties = {
+  width: '100%',
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+}
+
+const dotStyles: CSSProperties = {
+  flex: 'none',
+  height: 24,
+  width: 24,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+const dotInnerStyles: CSSProperties = {
+  width: 16,
+  height: 16,
+  border: '2px solid black',
+  borderRadius: '50%',
+}
+
+const buttonStyles: CSSProperties = {
+  padding: 0,
+  border: 'none',
+  background: 'none',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+}
+
+const prevStyles: CSSProperties = {
+  position: 'absolute',
+  display: 'flex',
+  alignContent: 'center',
+  top: 0,
+  bottom: 0,
+}
+
+const nextStyles: CSSProperties = { ...prevStyles, right: 0 }
+
+const arrowStyles: CSSProperties = {
+  width: 0,
+  height: 0,
+  fontSize: 0,
+  display: 'block',
+  borderTop: '20px solid transparent',
+  borderBottom: '20px solid transparent',
+}
 
 function Controls(props: {
   total: number
@@ -11,44 +61,21 @@ function Controls(props: {
 
   return (
     <div>
-      <nav
-        style={{
-          width: '100%',
-          display: 'flex',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-        }}>
+      <nav style={paginationStyles}>
         {Array.from<undefined, number>({ length: total }, (v, i) => i).map(
           page => {
             return (
               <button
                 key={page}
-                style={{
-                  padding: 0,
-                  border: 'none',
-                  background: 'none',
-                  WebkitAppearance: 'none',
-                  appearance: 'none',
-                }}
+                style={buttonStyles}
                 type="button"
                 aria-current={page === current ? 'page' : undefined}
                 aria-label={`Show slide ${page + 1}`}
                 onClick={() => scrollTo(page)}>
-                <span
-                  style={{
-                    flex: 'none',
-                    height: 24,
-                    width: 24,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}>
+                <span style={dotStyles}>
                   <span
                     style={{
-                      width: 16,
-                      height: 16,
-                      border: '2px solid black',
-                      borderRadius: '50%',
+                      ...dotInnerStyles,
                       backgroundColor:
                         page === current ? 'black' : 'transparent',
                     }}
@@ -61,22 +88,9 @@ function Controls(props: {
       </nav>
       {total > 1 && (
         <>
-          <div
-            style={{
-              position: 'absolute',
-              display: 'flex',
-              alignContent: 'center',
-              top: 0,
-              bottom: 0,
-            }}>
+          <div style={prevStyles}>
             <button
-              style={{
-                padding: 0,
-                border: 'none',
-                background: 'none',
-                WebkitAppearance: 'none',
-                appearance: 'none',
-              }}
+              style={buttonStyles}
               type="button"
               aria-disabled={current === 0}
               aria-label="Show previous slide"
@@ -85,35 +99,16 @@ function Controls(props: {
               }}>
               <span
                 style={{
-                  width: 0,
-                  height: 0,
-                  fontSize: 0,
-                  display: 'block',
-                  borderTop: '20px solid transparent',
-                  borderBottom: '20px solid transparent',
+                  ...arrowStyles,
                   borderRight: '20px solid currentColor',
                   color: current === 0 ? 'hsl(0, 0%, 50%)' : 'black',
                 }}
               />
             </button>
           </div>
-          <div
-            style={{
-              position: 'absolute',
-              display: 'flex',
-              alignContent: 'center',
-              top: 0,
-              bottom: 0,
-              right: 0,
-            }}>
+          <div style={nextStyles}>
             <button
-              style={{
-                padding: 0,
-                border: 'none',
-                background: 'none',
-                WebkitAppearance: 'none',
-                appearance: 'none',
-              }}
+              style={buttonStyles}
               type="button"
               aria-disabled={current === total - 1}
               aria-label="Show next slide"
@@ -122,12 +117,7 @@ function Controls(props: {
               }}>
               <span
                 style={{
-                  width: 0,
-                  height: 0,
-                  fontSize: 0,
-                  display: 'block',
-                  borderTop: '20px solid transparent',
-                  borderBottom: '20px solid transparent',
+                  ...arrowStyles,
                   borderLeft: '20px solid currentColor',
                   color: current === total - 1 ? 'hsl(0, 0%, 50%)' : 'black',
                 }}

diff --git a/src/index.tsx b/src/index.tsx
@@ -49,6 +49,13 @@ function SnapSlider(props: SnapSliderProps) {
       let isBeingResized = false
       let isBeingManuallyScrolled = false
 
+      function getCurrentPage() {
+        if (!scrollerNode) return undefined
+        const scrollLeft = scrollerNode.scrollLeft
+        const scrollWidth = scrollerNode.scrollWidth
+        return Math.round((scrollLeft / scrollWidth) * pages)
+      }
+
       function onResizeEnd() {
         isBeingResized = false
       }
@@ -62,12 +69,11 @@ function SnapSlider(props: SnapSliderProps) {
       }
 
       function onScroll() {
-        if (!scrollerNode || isBeingResized) return
-        const scrollLeft = scrollerNode.scrollLeft
-        const scrollWidth = scrollerNode.scrollWidth
+        if (isBeingResized) return
 
         if (isBeingManuallyScrolled) {
-          setScrolledPage(Math.round((scrollLeft / scrollWidth) * pages))
+          const currentPage = getCurrentPage()
+          if (typeof currentPage === 'number') setScrolledPage(currentPage)
         }
 
         if (scrollTimeout) window.clearTimeout(scrollTimeout)
@@ -112,6 +118,9 @@ function SnapSlider(props: SnapSliderProps) {
           onTouchMove,
           supportsPassiveOption ? { passive: true } : false,
         )
+
+        const currentPage = getCurrentPage()
+        if (typeof currentPage === 'number') setScrolledPage(currentPage)
       }
 
       window.addEventListener(