react-timeroller - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/time-roller.js

@@ -69,3 +69,2 @@ 'use strict';
     var ulElement = ulRef.current;
-    //Calculates distance scrolled and therefore the value selected using roller
     var handleScroll = function handleScroll() {
@@ -75,13 +74,16 @@ var scrollTop = ulElement.scrollTop,
         clientHeight = ulElement.clientHeight;
-      var scrolled = scrollTop / (scrollHeight - clientHeight) * 100;
-      setSelectedValue(range[Math.round(scrolled * range.length / 100) - 1]);
+      var scrolled = scrollTop / (scrollHeight - clientHeight);
+      var index = Math.round(scrolled * (range.length - 1));
+      setSelectedValue(range[index]);
     };
     ulElement.addEventListener("scroll", handleScroll);
-  }, [selectedValue, range]);
+    return function () {
+      ulElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [range, setSelectedValue]);
   React.useEffect(function () {
-    // Set initial scroll position to show a particular value
     var ulElement = ulRef.current;
     var index = range.indexOf(selectedValue);
     if (index !== -1) {
-      var scrollTo = (index + 1) * ulElement.clientHeight / range.length;
+      var scrollTo = index / (range.length - 1) * (ulElement.scrollHeight - ulElement.clientHeight);
       ulElement.scrollTop = scrollTo;
@@ -104,12 +106,15 @@ }
       width: "100%",
+      border: "1px solid black",
+      height: "3rem",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      fontSize: "14pt"
+      fontSize: "14pt",
+      margin: 0,
+      padding: 0
     },
     scrollList: {
       scrollSnapType: "y mandatory",
-      height: "36rem",
+      height: "3rem",
       overflowY: "scroll",
-      paddingTop: "3rem",
       width: "66.666%",
@@ -120,6 +125,7 @@ scrollbarWidth: "none"
       height: "3rem",
-      scrollSnapAlign: "start"
+      scrollSnapAlign: "start",
+      listStyleType: "none"
     },
     scrollLi2: {
-      height: "3rem",
+      height: "100%",
       scrollSnapAlign: "start",
@@ -142,5 +148,3 @@ display: "flex",
     ref: ulRef
-  }, /*#__PURE__*/React__default["default"].createElement("style", null, styles.webkitScrollbar), /*#__PURE__*/React__default["default"].createElement("li", {
-    style: styles.scrollLi
-  }), range.map(function (value) {
+  }, /*#__PURE__*/React__default["default"].createElement("style", null, styles.webkitScrollbar), range.map(function (value) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -150,4 +154,2 @@ key: value,
     }, value);
-  }), /*#__PURE__*/React__default["default"].createElement("li", {
-    style: styles.scrollLi
   })), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -154,0 +156,0 @@ style: styles.unit

package.json

 {
   "name": "react-timeroller",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React Component that allows you to implement a 'briefcase-like' number picker wheel in your project",
@@ -5,0 +5,0 @@ "main": "dist/time-roller.js",

src/TimeRoller.js

@@ -5,20 +5,25 @@ import React, { useEffect, useRef } from "react";
   const ulRef = useRef(null);
-
   useEffect(() => {
     const ulElement = ulRef.current;
-    //Calculates distance scrolled and therefore the value selected using roller
+
     const handleScroll = () => {
       const { scrollTop, scrollHeight, clientHeight } = ulElement;
-      const scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;
-      setSelectedValue(range[Math.round((scrolled * range.length) / 100) - 1]);
+      const scrolled = scrollTop / (scrollHeight - clientHeight);
+      const index = Math.round(scrolled * (range.length - 1));
+      setSelectedValue(range[index]);
     };
+
     ulElement.addEventListener("scroll", handleScroll);
-  }, [selectedValue, range]);
+    return () => {
+      ulElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [range, setSelectedValue]);
 
   useEffect(() => {
-    // Set initial scroll position to show a particular value
     const ulElement = ulRef.current;
     const index = range.indexOf(selectedValue);
     if (index !== -1) {
-      const scrollTo = ((index + 1) * ulElement.clientHeight) / range.length;
+      const scrollTo =
+        (index / (range.length - 1)) *
+        (ulElement.scrollHeight - ulElement.clientHeight);
       ulElement.scrollTop = scrollTo;
@@ -41,2 +46,4 @@ }
       width: "100%",
+      border: "1px solid black",
+      height: "3rem",
       display: "flex",
@@ -46,2 +53,4 @@ alignItems: "center",
       fontSize: "14pt",
+      margin: 0,
+      padding: 0,
     },
@@ -51,5 +60,4 @@
       scrollSnapType: "y mandatory",
-      height: "36rem",
+      height: "3rem",
       overflowY: "scroll",
-      paddingTop: "3rem",
       width: "66.666%",
@@ -61,5 +69,6 @@ scrollbarWidth: "none",
       scrollSnapAlign: "start",
+      listStyleType: "none",
     },
     scrollLi2: {
-      height: "3rem",
+      height: "100%",
       scrollSnapAlign: "start",
@@ -86,3 +95,2 @@ display: "flex",
         <style>{styles.webkitScrollbar}</style>
-        <li style={styles.scrollLi}></li>
         {range.map((value) => {
@@ -102,3 +110,2 @@ return (
         })}
-        <li style={styles.scrollLi}></li>
       </ul>
@@ -105,0 +112,0 @@ <p style={styles.unit}>{unit}</p>

No alert changes

Improved metrics

Lines of code

270

3.05%

Worsened metrics

Total package byte prevSize

9126

-0.89%

No dependency changes