react-scrubber - npm Package Compare versions

Comparing version 0.2.8 to 0.3.0

lib/index.d.ts

@@ -9,2 +9,3 @@ import React, { Component } from 'react';
     bufferPosition?: number;
+    vertical?: boolean;
     onScrubStart?: (value: number) => void;
@@ -19,4 +20,6 @@ onScrubEnd?: (value: number) => void;
     mouseX: Nullable<number>;
+    mouseY: Nullable<number>;
     touchId: Nullable<number>;
     touchX: Nullable<number>;
+    touchY: Nullable<number>;
     hover: boolean;
@@ -30,2 +33,4 @@ };
     getPositionFromMouseX: () => number;
+    getPositionFromMouseY: () => number;
+    getPositionFromCursor: () => number;
     handleMouseMove: (e: MouseEvent) => void;
@@ -32,0 +37,0 @@ handleTouchMove: (e: TouchEvent) => void;

lib/index.js

@@ -55,4 +55,6 @@ "use strict";
             mouseX: null,
+            mouseY: null,
             touchId: null,
             touchX: null,
+            touchY: null,
             hover: false,
@@ -68,11 +70,28 @@ };
             var _c = barDomNode.getBoundingClientRect(), left = _c.left, width = _c.width;
-            var cursorX = typeof touchX === 'number' ? touchX : mouseX || 0;
-            var clampedX = clamp(left, left + width, cursorX);
-            var decimal = round((clampedX - left) / width, 7);
+            var cursor = typeof touchX === 'number' ? touchX : mouseX || 0;
+            var clamped = clamp(left, left + width, cursor);
+            var decimal = round((clamped - left) / width, 7);
             return round((max - min) * decimal, 7);
         };
+        _this.getPositionFromMouseY = function () {
+            var barDomNode = _this.barRef.current;
+            if (!barDomNode) {
+                return 0;
+            }
+            var _a = _this.props, min = _a.min, max = _a.max;
+            var _b = _this.state, mouseY = _b.mouseY, touchY = _b.touchY;
+            var _c = barDomNode.getBoundingClientRect(), bottom = _c.bottom, height = _c.height;
+            var cursor = typeof touchY === 'number' ? touchY : mouseY || 0;
+            var clamped = clamp(bottom - height, bottom, cursor);
+            var decimal = round((bottom - clamped) / height, 7);
+            return round((max - min) * decimal, 7);
+        };
+        _this.getPositionFromCursor = function () {
+            var vertical = _this.props.vertical;
+            return vertical ? _this.getPositionFromMouseY() : _this.getPositionFromCursor();
+        };
         _this.handleMouseMove = function (e) {
-            _this.setState({ mouseX: e.pageX }, function () {
+            _this.setState({ mouseX: e.pageX, mouseY: e.pageY }, function () {
                 if (_this.state.seeking && _this.props.onScrubChange) {
-                    _this.props.onScrubChange(_this.getPositionFromMouseX());
+                    _this.props.onScrubChange(_this.getPositionFromCursor());
                 }
@@ -87,5 +106,5 @@ });
             if (touch) {
-                _this.setState({ touchX: touch.pageX }, function () {
+                _this.setState({ touchX: touch.pageX, touchY: touch.pageY }, function () {
                     if (_this.state.seeking && _this.props.onScrubChange) {
-                        _this.props.onScrubChange(_this.getPositionFromMouseX());
+                        _this.props.onScrubChange(_this.getPositionFromCursor());
                     }
@@ -96,5 +115,5 @@ });
         _this.handleSeekStart = function (e) {
-            _this.setState({ seeking: true, mouseX: e.pageX }, function () {
+            _this.setState({ seeking: true, mouseX: e.pageX, mouseY: e.pageY }, function () {
                 if (_this.props.onScrubStart) {
-                    _this.props.onScrubStart(_this.getPositionFromMouseX());
+                    _this.props.onScrubStart(_this.getPositionFromCursor());
                 }
@@ -105,5 +124,5 @@ });
             var touch = e.changedTouches[0];
-            _this.setState({ hover: true, seeking: true, touchId: touch.identifier, touchX: touch.pageX }, function () {
+            _this.setState({ hover: true, seeking: true, touchId: touch.identifier, touchX: touch.pageX, touchY: touch.pageY }, function () {
                 if (_this.props.onScrubStart) {
-                    _this.props.onScrubStart(_this.getPositionFromMouseX());
+                    _this.props.onScrubStart(_this.getPositionFromCursor());
                 }
@@ -115,5 +134,5 @@ });
                 if (_this.props.onScrubEnd) {
-                    _this.props.onScrubEnd(_this.getPositionFromMouseX());
+                    _this.props.onScrubEnd(_this.getPositionFromCursor());
                 }
-                _this.setState({ seeking: false, mouseX: null });
+                _this.setState({ seeking: false, mouseX: null, mouseY: null });
             }
@@ -125,5 +144,5 @@ };
                 if (_this.props.onScrubEnd) {
-                    _this.props.onScrubEnd(_this.getPositionFromMouseX());
+                    _this.props.onScrubEnd(_this.getPositionFromCursor());
                 }
-                _this.setState({ hover: false, seeking: false, touchX: null, touchId: null });
+                _this.setState({ hover: false, seeking: false, touchX: null, touchY: null, touchId: null });
             }
@@ -146,7 +165,8 @@ };
     Scrubber.prototype.render = function () {
+        var _a, _b, _c;
         var _this = this;
-        var _a = this.props, className = _a.className, value = _a.value, min = _a.min, max = _a.max, _b = _a.bufferPosition, bufferPosition = _b === void 0 ? 0 : _b;
+        var _d = this.props, className = _d.className, value = _d.value, min = _d.min, max = _d.max, _e = _d.bufferPosition, bufferPosition = _e === void 0 ? 0 : _e, vertical = _d.vertical;
         var valuePercent = ((clamp(min, max, value) / (max - min)) * 100).toFixed(5);
         var bufferPercent = bufferPosition && ((clamp(min, max, bufferPosition) / (max - min)) * 100).toFixed(5);
-        var classes = ['scrubber'];
+        var classes = ['scrubber', vertical ? 'vertical' : 'horizontal'];
         if (this.state.hover)
@@ -164,2 +184,3 @@ classes.push('hover');
             'bufferPosition',
+            'vertical',
             'onScrubStart',
@@ -172,5 +193,5 @@ 'onScrubEnd',
             react_1.default.createElement("div", { className: "bar", ref: this.barRef },
-                react_1.default.createElement("div", { className: "bar__buffer", style: { width: bufferPercent + "%" } }),
-                react_1.default.createElement("div", { className: "bar__progress", style: { width: valuePercent + "%" } }),
-                react_1.default.createElement("div", { className: "bar__thumb", style: { left: valuePercent + "%" } }))));
+                react_1.default.createElement("div", { className: "bar__buffer", style: (_a = {}, _a[vertical ? 'height' : 'width'] = bufferPercent + "%", _a) }),
+                react_1.default.createElement("div", { className: "bar__progress", style: (_b = {}, _b[vertical ? 'height' : 'width'] = valuePercent + "%", _b) }),
+                react_1.default.createElement("div", { className: "bar__thumb", style: (_c = {}, _c[vertical ? 'bottom' : 'left'] = valuePercent + "%", _c) }))));
     };
@@ -177,0 +198,0 @@ return Scrubber;

package.json

 {
     "name": "react-scrubber",
-    "version": "0.2.8",
+    "version": "0.3.0",
     "description": "React scrubber component with touch controls, styling, and lots event handlers",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -59,2 +59,3 @@ # [react-scrubber](https://nick-michael.github.io/react-scrubber/)
 | bufferPosition | number | No | Some number higher than the value, used to render a 'buffer' indicator
+| vertical | boolean | No | The scrubber will render vertically
 | onScrubStart | function | No | Called on mouse down or touch down
@@ -61,0 +62,0 @@ | onScrubEnd | function | No | Called on mouse up or touch up while scrubbing

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32674

increased by17.15%

Lines of code

547

increased by21.02%

Number of lines in readme file

64

increased by1.59%

No dependency changes