react-uicomp - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

dist/animated/Hooks.d.ts

 interface UseAnimatedValueConfig {
     onAnimationEnd?: (value: number) => void;
-    onAnimationListener?: (value: number) => void;
+    listener?: (value: number) => void;
     animationType?: "ease" | "elastic";
@@ -43,2 +43,10 @@ duration?: number;
 };
+export declare const useDrag: () => {
+    handler: {
+        ref: React.RefObject<any>;
+    };
+    mouseX: number;
+    mouseY: number;
+    isDragging: boolean;
+};
 export {};

dist/index.js

@@ -700,2 +700,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+  var _prevValue = React.useRef(_initialValue);
+
   var _ref = config !== undefined && config,
@@ -705,4 +707,4 @@ onAnimationEnd = _ref.onAnimationEnd,
       animationType = _ref$animationType === void 0 ? "ease" : _ref$animationType,
-      onAnimationListener = _ref.onAnimationListener,
-      restConfig = _objectWithoutPropertiesLoose(_ref, ["onAnimationEnd", "animationType", "onAnimationListener"]);
+      listener = _ref.listener,
+      restConfig = _objectWithoutPropertiesLoose(_ref, ["onAnimationEnd", "animationType", "listener"]);
 
@@ -721,3 +723,3 @@ var _config = animationType === "ease" ? reactSpring.config["default"] : {
         var value = _ref2.value;
-        onAnimationListener && onAnimationListener(value);
+        listener && listener(value);
       }
@@ -739,2 +741,9 @@ };
 
+  React.useEffect(function () {
+    if (initialValue !== _prevValue.current) {
+      _update(_initialValue);
+
+      _prevValue.current = _initialValue;
+    }
+  }, [initialValue]);
   var _targetObject = {
@@ -948,3 +957,91 @@ value: props.value
 };
+var useDrag = function useDrag() {
+  var ref = React.useRef();
 
+  var _useState8 = React.useState({
+    x: 0,
+    y: 0
+  }),
+      position = _useState8[0],
+      setPosition = _useState8[1];
+
+  var _isDragging = React.useRef(false);
+
+  var _useState9 = React.useState(false),
+      isDragging = _useState9[0],
+      setIsDragging = _useState9[1];
+
+  var prevPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+  var newPosition = React.useRef({
+    x: 0,
+    y: 0
+  });
+
+  var _elementOffset = React.useRef({
+    x: 0,
+    y: 0
+  });
+
+  React.useEffect(function () {
+    var _element = ref.current;
+
+    var _mouseUpHandler = function _mouseUpHandler() {
+      _isDragging.current = false;
+      prevPosition.current.x = 0;
+      prevPosition.current.y = 0;
+      newPosition.current.x = 0;
+      newPosition.current.y = 0;
+      setIsDragging(false);
+    };
+
+    var _mouseMoveHandler = function _mouseMoveHandler(event) {
+      if (_isDragging.current) {
+        newPosition.current.x = newPosition.current.x + (event.clientX - prevPosition.current.x);
+        newPosition.current.y = prevPosition.current.y + (event.clientY - prevPosition.current.y);
+        prevPosition.current.x = newPosition.current.x;
+        prevPosition.current.y = newPosition.current.y;
+        setPosition({
+          x: newPosition.current.x - _elementOffset.current.x,
+          y: newPosition.current.y - _elementOffset.current.y
+        });
+      }
+    };
+
+    var _mouseDownHandlerElement = function _mouseDownHandlerElement(event) {
+      _isDragging.current = true;
+
+      var _newOffsetX = event.pageX - _element.offsetLeft;
+
+      var _newOffsetY = event.pageY - _element.offsetTop;
+
+      _elementOffset.current.x = _newOffsetX;
+      _elementOffset.current.y = _newOffsetY;
+      setIsDragging(true);
+    };
+
+    document.addEventListener("mouseup", _mouseUpHandler);
+    document.addEventListener("mousemove", _mouseMoveHandler);
+
+    if (_element) {
+      _element.addEventListener("mousedown", _mouseDownHandlerElement);
+    }
+
+    return function () {
+      document.removeEventListener("mouseup", _mouseUpHandler);
+      document.removeEventListener("mousemove", _mouseMoveHandler);
+    };
+  }, []);
+  return {
+    handler: {
+      ref: ref
+    },
+    mouseX: position.x,
+    mouseY: position.y,
+    isDragging: isDragging
+  };
+};
+
 var AnimatedBlock = React__default.forwardRef(function (_ref, ref) {
@@ -1048,2 +1145,3 @@ var children = _ref.children,
 exports.useAuth = useAuth;
+exports.useDrag = useDrag;
 exports.useMeasure = useMeasure;
@@ -1050,0 +1148,0 @@ exports.useMouseMove = useMouseMove;

dist/index.modern.js

@@ -1,2 +0,2 @@
-import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
+import React, { useContext, useMemo, useRef, useEffect, useState } from 'react';
 import { Route, Redirect, HashRouter, BrowserRouter, Switch, NavLink, useHistory, useLocation, useParams } from 'react-router-dom';
@@ -697,2 +697,4 @@ import { useTransition, animated, interpolate as interpolate$1, useSpring, config } from 'react-spring';
 
+  var _prevValue = useRef(_initialValue);
+
   var _ref = config$1 !== undefined && config$1,
@@ -702,4 +704,4 @@ onAnimationEnd = _ref.onAnimationEnd,
       animationType = _ref$animationType === void 0 ? "ease" : _ref$animationType,
-      onAnimationListener = _ref.onAnimationListener,
-      restConfig = _objectWithoutPropertiesLoose(_ref, ["onAnimationEnd", "animationType", "onAnimationListener"]);
+      listener = _ref.listener,
+      restConfig = _objectWithoutPropertiesLoose(_ref, ["onAnimationEnd", "animationType", "listener"]);
 
@@ -718,3 +720,3 @@ var _config = animationType === "ease" ? config["default"] : {
         var value = _ref2.value;
-        onAnimationListener && onAnimationListener(value);
+        listener && listener(value);
       }
@@ -736,2 +738,9 @@ };
 
+  useEffect(function () {
+    if (initialValue !== _prevValue.current) {
+      _update(_initialValue);
+
+      _prevValue.current = _initialValue;
+    }
+  }, [initialValue]);
   var _targetObject = {
@@ -946,3 +955,91 @@ value: props.value
 };
+var useDrag = function useDrag() {
+  var ref = useRef();
 
+  var _useState8 = useState({
+    x: 0,
+    y: 0
+  }),
+      position = _useState8[0],
+      setPosition = _useState8[1];
+
+  var _isDragging = useRef(false);
+
+  var _useState9 = useState(false),
+      isDragging = _useState9[0],
+      setIsDragging = _useState9[1];
+
+  var prevPosition = useRef({
+    x: 0,
+    y: 0
+  });
+  var newPosition = useRef({
+    x: 0,
+    y: 0
+  });
+
+  var _elementOffset = useRef({
+    x: 0,
+    y: 0
+  });
+
+  useEffect(function () {
+    var _element = ref.current;
+
+    var _mouseUpHandler = function _mouseUpHandler() {
+      _isDragging.current = false;
+      prevPosition.current.x = 0;
+      prevPosition.current.y = 0;
+      newPosition.current.x = 0;
+      newPosition.current.y = 0;
+      setIsDragging(false);
+    };
+
+    var _mouseMoveHandler = function _mouseMoveHandler(event) {
+      if (_isDragging.current) {
+        newPosition.current.x = newPosition.current.x + (event.clientX - prevPosition.current.x);
+        newPosition.current.y = prevPosition.current.y + (event.clientY - prevPosition.current.y);
+        prevPosition.current.x = newPosition.current.x;
+        prevPosition.current.y = newPosition.current.y;
+        setPosition({
+          x: newPosition.current.x - _elementOffset.current.x,
+          y: newPosition.current.y - _elementOffset.current.y
+        });
+      }
+    };
+
+    var _mouseDownHandlerElement = function _mouseDownHandlerElement(event) {
+      _isDragging.current = true;
+
+      var _newOffsetX = event.pageX - _element.offsetLeft;
+
+      var _newOffsetY = event.pageY - _element.offsetTop;
+
+      _elementOffset.current.x = _newOffsetX;
+      _elementOffset.current.y = _newOffsetY;
+      setIsDragging(true);
+    };
+
+    document.addEventListener("mouseup", _mouseUpHandler);
+    document.addEventListener("mousemove", _mouseMoveHandler);
+
+    if (_element) {
+      _element.addEventListener("mousedown", _mouseDownHandlerElement);
+    }
+
+    return function () {
+      document.removeEventListener("mouseup", _mouseUpHandler);
+      document.removeEventListener("mousemove", _mouseMoveHandler);
+    };
+  }, []);
+  return {
+    handler: {
+      ref: ref
+    },
+    mouseX: position.x,
+    mouseY: position.y,
+    isDragging: isDragging
+  };
+};
+
 var AnimatedBlock = React.forwardRef(function (_ref, ref) {
@@ -1031,3 +1128,3 @@ var children = _ref.children,
 
-export { ActiveLink, AnimatedBlock, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, ScrollState, Theme, DefaultThemeConfig as ThemeConfig, binaryInterpolate, interpolate, useAnimatedValue, useAuth, useMeasure, useMouseMove, useNavigation, useOutsideClick, useScroll, useTheme, useWindowDimension };
+export { ActiveLink, AnimatedBlock, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, ScrollState, Theme, DefaultThemeConfig as ThemeConfig, binaryInterpolate, interpolate, useAnimatedValue, useAuth, useDrag, useMeasure, useMouseMove, useNavigation, useOutsideClick, useScroll, useTheme, useWindowDimension };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-uicomp",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Utility library for creating complex routing with beautiful animated ui components.",
@@ -5,0 +5,0 @@ "author": "dipeshrai123",

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

222538

increased by8.35%

Lines of code

2253

increased by8.11%

No dependency changes