simple-slider-react - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/index.d.ts

@@ -11,3 +11,3 @@ /// <reference types="react" />
 };
-export default function Slider({ min, max, divs, inValue, onUpdate, onDrag, debug }: prop): JSX.Element;
+export default function Slider({ min, max, divs, inValue, onUpdate, onDrag, debug, }: prop): JSX.Element;
 export {};

dist/index.js

@@ -26,14 +26,15 @@ 'use strict';
 
-function Slider({ min, max, divs, inValue, onUpdate, onDrag, debug }) {
-    let [active, setActive] = React.useState(false);
-    let [value, setValue] = React.useState(50);
-    let [posPerc, setPosPerc] = React.useState(50);
-    let [handlePos, setHandlePos] = React.useState(0);
-    let [initialX, setInitialX] = React.useState(0);
-    let [sliderWidth, setSliderWidth] = React.useState(0);
+let sliderWidth = 0;
+let pxMax = 0;
+let pxMin = 0;
+let initialX = 0;
+let active = false;
+let dragValue = 0;
+let mainValue = 0;
+let handlePos = 0;
+let handleWidth = 0;
+function Slider({ min, max, divs, inValue, onUpdate, onDrag, debug, }) {
+    const [posPerc, setPosPerc] = React.useState(50); //center of the handle
     const divMain = React.useRef(null);
     const divHandle = React.useRef(null);
-    let pxMax = React.useRef(0);
-    let pxMin = React.useRef(0);
-    let handleWidth = React.useRef(0);
     React.useLayoutEffect(() => {
@@ -45,13 +46,8 @@ function handleResize() {
             const rectH = (_b = divHandle.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            handleWidth.current = rectH ? rectH.width : 0;
-            pxMin.current = handleWidth.current / 2;
-            pxMax.current = divMainWidth - pxMin.current;
-            const midRange = (min + max) / 2;
-            setSliderWidth(divMainWidth);
-            const v = inValue || midRange;
-            const p = handleWidth.current / 2 + ((v - min) / (max - min)) * divMainWidth;
-            setHandlePos(p);
-            setPosPerc((100 * p) / divMainWidth);
-            setValue(v);
-            //console.log("am here 😁");
+            handleWidth = rectH ? rectH.width : 0;
+            pxMin = handleWidth / 2;
+            pxMax = divMainWidth - pxMin;
+            sliderWidth = pxMax - pxMin;
+            const p = pxMin + ((mainValue - min) / (max - min)) * sliderWidth;
+            newHandle(p);
         }
@@ -65,14 +61,12 @@ handleResize();
     React.useLayoutEffect(() => {
-        const v = inValue || (min + max) / 2;
-        const p = handleWidth.current / 2 + ((v - min) / (max - min)) * sliderWidth;
-        setHandlePos(p);
-        setPosPerc((100 * p) / sliderWidth);
-        setValue(v);
-        onDrag(v);
-        onUpdate(v);
-    }, [inValue, sliderWidth]);
+        const v = inValue == undefined ? (min + max) / 2 : inValue;
+        const p = pxMin + ((v - min) / (max - min)) * sliderWidth;
+        newHandle(p);
+        //console.log("😁", p);
+        mainValue = v;
+    }, [inValue]);
     const dragStart = (e) => {
         e.preventDefault();
-        setInitialX(e.clientX - handlePos - handleWidth.current / 2);
-        setActive(true);
+        initialX = e.clientX - handlePos - handleWidth / 2;
+        active = true;
     };
@@ -82,15 +76,14 @@ const dragMove = (e) => {
         translate(e.clientX - initialX);
-        onDrag(value);
+        onDrag(dragValue);
     };
     const dragEnd = (e) => {
         e.preventDefault();
-        setActive(false);
-        if (debug) {
-            console.log("value is:", value, " handlePos=", posPerc);
-        }
-        onUpdate(value);
+        active = false;
+        //console.log(handlePos);
+        onUpdate(dragValue);
+        //console.log("pxMax", pxMax);
     };
     const translate = (xPos) => {
         if (active) {
-            const newPos = xPos - handleWidth.current / 2;
+            const newPos = xPos - handleWidth / 2;
             newHandle(checkPos(newPos));
@@ -101,3 +94,3 @@ }
         const divsd = divs || 0;
-        const vRelative = (pos - pxMin.current) / (pxMax.current - pxMin.current);
+        const vRelative = (pos - pxMin) / sliderWidth;
         let val = vRelative * (max - min) + min;
@@ -108,18 +101,18 @@ let p = pos;
             const step = (max - min) / (divsd - 1);
-            val = Math.round(val / step) * step;
-            p = handleWidth.current / 2 + ((val - min) / (max - min)) * sliderWidth;
+            val = Math.round(val / step) * step; //????????????????
+            p = pxMin + ((val - min) / (max - min)) * sliderWidth;
         }
         const pck = checkPos(p);
-        setHandlePos(pck);
-        setPosPerc((100 * pck) / sliderWidth);
-        setValue(val);
-        //console.log(val);
+        handlePos = pck;
+        setPosPerc((100 * pck) / (handleWidth + sliderWidth));
+        dragValue = val;
+        //console.log("🍔", dragValue);
     };
     const checkPos = (pos) => {
         switch (true) {
-            case pos < pxMin.current: {
-                return pxMin.current;
+            case pos < pxMin: {
+                return pxMin;
             }
-            case pos > pxMax.current: {
-                return pxMax.current;
+            case pos > pxMax: {
+                return pxMax;
             }
@@ -134,4 +127,4 @@ default: {
         const x = e.touches[0].clientX;
-        setInitialX(x - handlePos - handleWidth.current / 2);
-        setActive(true);
+        initialX = x - handlePos - handleWidth / 2;
+        active = true;
     };
@@ -142,12 +135,12 @@ const touchMove = (e) => {
         translate(x - initialX);
-        onDrag(value);
+        onDrag(dragValue);
     };
     const touchEnd = (e) => {
         e.preventDefault();
-        setActive(false);
-        onUpdate(value);
+        active = false;
+        onUpdate(mainValue);
     };
     const styleL = {
-        left: `${100 * (handleWidth.current / (2 * sliderWidth))}%`,
-        width: `${posPerc - 100 * (handleWidth.current / (2 * sliderWidth))}%`,
+        left: `${100 * (handleWidth / (2 * sliderWidth))}%`,
+        width: `${Math.abs(posPerc - 100 * (handleWidth / (2 * sliderWidth)))}%`,
         height: "20%",
@@ -157,3 +150,2 @@ backgroundColor: "lightskyblue",
         position: "absolute",
-        //top: "0px",
         zIndex: 1,
@@ -163,4 +155,4 @@ cursor: "pointer",
     const styleR = {
-        left: `${posPerc - 100 * (handleWidth.current / (2 * sliderWidth))}%`,
-        width: `${100 - posPerc - 100 * (handleWidth.current / (2 * sliderWidth))}%`,
+        left: `${posPerc}%`,
+        width: `${Math.abs(100 - posPerc - 100 * (handleWidth / (2 * sliderWidth)))}%`,
         height: "20%",
@@ -170,3 +162,2 @@ backgroundColor: "lightgray",
         position: "absolute",
-        //top: "0px",
         zIndex: 0,
@@ -176,3 +167,3 @@ cursor: "pointer",
     const styleHandle = {
-        left: `${posPerc - 100 * (handleWidth.current / (2 * sliderWidth))}%`,
+        left: `${posPerc - 100 * (handleWidth / (2 * sliderWidth))}%`,
         width: "2em",
@@ -204,8 +195,4 @@ zIndex: debug || false ? 0 : 2,
     };
-    return (React__default.createElement("div", { 
-        //className="simple-slider"
-        style: styleMainDiv, ref: divMain, onMouseUp: dragEnd, onMouseLeave: dragEnd, onMouseMove: dragMove, onTouchMove: touchMove, onTouchEnd: touchEnd },
-        React__default.createElement("div", { 
-            //className="simple-slider-handle"
-            ref: divHandle, style: styleHandle, onMouseDown: dragStart, onTouchStart: touchStart }),
+    return (React__default.createElement("div", { style: styleMainDiv, ref: divMain, onMouseUp: dragEnd, onMouseLeave: dragEnd, onMouseMove: dragMove, onTouchMove: touchMove, onTouchEnd: touchEnd },
+        React__default.createElement("div", { ref: divHandle, style: styleHandle, onMouseDown: dragStart, onTouchStart: touchStart }),
         React__default.createElement("div", { style: styleL }),
@@ -212,0 +199,0 @@ React__default.createElement("div", { style: styleR })));

package.json

 {
   "name": "simple-slider-react",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "",
@@ -18,3 +18,7 @@ "main": "./dist/index.js",
     "@types/react-dom": "^16.9.7",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
     "babel-preset-react": "^6.24.1",
+    "eslint": "^7.0.0",
+    "eslint-plugin-react": "^7.19.0",
     "nollup": "^0.11.0",
@@ -24,3 +28,3 @@ "react": "^16.13.1",
     "react-scripts": "^3.4.1",
-    "rollup": "^2.7.6",
+    "rollup": "^2.8.2",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -27,0 +31,0 @@ "rollup-plugin-node-resolve": "^5.2.0",

No alert changes

Improved metrics

Number of package files

15

increased by15.38%

Lines of code

569

increased by2.15%

Worsened metrics

Total package byte prevSize

547875

decreased by-0.3%

Dev dependency count

21

increased by23.53%

No dependency changes