react-uicomp - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/animated/Hooks.d.ts

 import { SpringConfig } from "react-spring";
-export declare const useValue: <T>(initialValue: T) => T;
 interface UseAnimatedValueConfig extends SpringConfig {
-    onAnimationEnd?: () => void;
+    onAnimationEnd?: (value: number) => void;
 }
@@ -9,10 +8,16 @@ export declare const useAnimatedValue: (initialValue: number, config?: UseAnimatedValueConfig) => {
 };
-interface ConfigParams {
-    inputRange: Array<any>;
-    outputRange: Array<any>;
-    extrapolate?: "identity" | "clamp" | "extend";
-    extrapolateRight?: "identity" | "clamp" | "extend";
-    extrapolateLeft?: "identity" | "clamp" | "extend";
-}
-export declare const interpolate: (animatedValue: any, config: ConfigParams) => any;
+export declare const useScroll: () => {
+    x: number;
+    y: number;
+};
+export declare const useMeasure: () => [{
+    ref: React.RefObject<any>;
+}, {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    vLeft: number;
+    vTop: number;
+}];
 export {};

dist/animated/index.d.ts

 export * from "./Hooks";
 export * from "./Modules";
+export * from "./Interpolation";

dist/animated/Modules.d.ts

@@ -6,3 +6,3 @@ import React from "react";
 }
-export declare const AnimatedBlock: ({ children, ...rest }: AnimatedBlockProps) => JSX.Element;
+export declare const AnimatedBlock: React.ForwardRefExoticComponent<Pick<AnimatedBlockProps, string | number> & React.RefAttributes<HTMLDivElement>>;
 export {};

dist/index.js

@@ -692,14 +692,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var useValue = function useValue(initialValue) {
-  var ref = React.useRef();
-
-  if (ref.current === undefined) {
-    ref.current = initialValue;
-  }
-
-  return ref.current;
-};
 var useAnimatedValue = function useAnimatedValue(initialValue, config) {
-  var _initialValue = useValue(initialValue);
-
   var _ref = config !== undefined && config,
@@ -711,10 +700,3 @@ onAnimationEnd = _ref.onAnimationEnd,
     return {
-      value: _initialValue,
-      onRest: function onRest(_ref2) {
-        var value = _ref2.value;
-
-        if (value !== initialValue) {
-          onAnimationEnd && onAnimationEnd();
-        }
-      },
+      value: initialValue,
       config: _extends({}, reactSpring.config["default"], restConfig)
@@ -728,3 +710,7 @@ };
     set({
-      value: updatedValue
+      value: updatedValue,
+      onRest: function onRest(_ref2) {
+        var value = _ref2.value;
+        onAnimationEnd && onAnimationEnd(value);
+      }
     });
@@ -734,3 +720,3 @@ };
   var _targetObject = {
-    value: _initialValue
+    value: props.value
   };
@@ -758,20 +744,153 @@ return new Proxy(_targetObject, {
 };
-var interpolate = function interpolate(animatedValue, config) {
-  var inputRange = config.inputRange,
-      outputRange = config.outputRange,
-      rest = _objectWithoutPropertiesLoose(config, ["inputRange", "outputRange"]);
+var useScroll = function useScroll() {
+  var _useState = React.useState(0),
+      scrollX = _useState[0],
+      setScrollX = _useState[1];
 
-  return animatedValue.interpolate(_extends({
-    range: inputRange,
-    output: outputRange
-  }, rest));
+  var _useState2 = React.useState(0),
+      scrollY = _useState2[0],
+      setScrollY = _useState2[1];
+
+  var scrollListener = function scrollListener() {
+    var _window = window,
+        pageYOffset = _window.pageYOffset,
+        pageXOffset = _window.pageXOffset;
+    setScrollX(pageXOffset);
+    setScrollY(pageYOffset);
+  };
+
+  React.useEffect(function () {
+    window.addEventListener("scroll", scrollListener);
+    return function () {
+      return window.removeEventListener("scroll", scrollListener);
+    };
+  }, []);
+  return {
+    x: scrollX,
+    y: scrollY
+  };
 };
+var useMeasure = function useMeasure() {
+  var ref = React.useRef(null);
 
-var AnimatedBlock = function AnimatedBlock(_ref) {
+  var _useState3 = React.useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    vLeft: 0,
+    vTop: 0
+  }),
+      measurement = _useState3[0],
+      setMeasurement = _useState3[1];
+
+  React.useEffect(function () {
+    var _refElement = ref.current ? ref.current : document.documentElement;
+
+    var _refElement$getBoundi = _refElement.getBoundingClientRect(),
+        left = _refElement$getBoundi.left,
+        top = _refElement$getBoundi.top,
+        width = _refElement$getBoundi.width,
+        height = _refElement$getBoundi.height;
+
+    var _window2 = window,
+        pageXOffset = _window2.pageXOffset,
+        pageYOffset = _window2.pageYOffset;
+    setMeasurement({
+      left: left + pageXOffset,
+      top: top + pageYOffset,
+      width: width,
+      height: height,
+      vLeft: left,
+      vTop: top
+    });
+  }, []);
+  return [{
+    ref: ref
+  }, measurement];
+};
+
+var AnimatedBlock = React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
-  return React__default.createElement(reactSpring.animated.div, Object.assign({}, rest), children);
+  return React__default.createElement(reactSpring.animated.div, Object.assign({
+    ref: ref
+  }, rest), children);
+});
+
+var binaryInterpolate = function binaryInterpolate(perc, val1, val2) {
+  return val1 * (1 - perc) + val2 * perc;
 };
 
+var _internalInterpolate = function _internalInterpolate(val, arr, type) {
+  var val1 = arr[0],
+      val2 = arr[1],
+      val3 = arr[2],
+      val4 = arr[3];
+  var perc = (val1 - val) / (val1 - val2);
+  var output = binaryInterpolate(perc, val3, val4);
+  var isPositive = val4 >= val3 ? 1 : -1;
+
+  switch (type) {
+    case "clamp":
+      if (isPositive * output < isPositive * val3) {
+        return val3;
+      } else if (isPositive * output > isPositive * val4) {
+        return val4;
+      } else {
+        return output;
+      }
+
+    case "identity":
+      return val;
+
+    case "extend":
+    default:
+      return output;
+  }
+};
+
+var _getNarrowedInputArray = function _getNarrowedInputArray(x, input, output) {
+  var length = input.length;
+  var narrowedInput = [];
+
+  if (x < input[0]) {
+    narrowedInput = [input[0], input[1], output[0], output[1]];
+  } else if (x > input[length - 1]) {
+    narrowedInput = [input[length - 2], input[length - 1], output[length - 2], output[length - 1]];
+  }
+
+  for (var i = 1; i < length; ++i) {
+    if (x <= input[i]) {
+      narrowedInput = [input[i - 1], input[i], output[i - 1], output[i]];
+      break;
+    }
+  }
+
+  return narrowedInput;
+};
+
+var interpolate = function interpolate(value, config) {
+  if (typeof value === "object") {
+    var inputRange = config.inputRange,
+        outputRange = config.outputRange,
+        rest = _objectWithoutPropertiesLoose(config, ["inputRange", "outputRange"]);
+
+    return value.interpolate(_extends({
+      range: inputRange,
+      output: outputRange
+    }, rest));
+  } else {
+    var _inputRange = config.inputRange,
+        _outputRange = config.outputRange,
+        _config$extrapolate = config.extrapolate,
+        extrapolate = _config$extrapolate === void 0 ? "extend" : _config$extrapolate;
+
+    var narrowedInput = _getNarrowedInputArray(value, _inputRange, _outputRange);
+
+    return _internalInterpolate(value, narrowedInput, extrapolate);
+  }
+};
+
 exports.ActiveLink = ActiveLink;
@@ -791,6 +910,7 @@ exports.AnimatedBlock = AnimatedBlock;
 exports.useAuth = useAuth;
+exports.useMeasure = useMeasure;
 exports.useNavigation = useNavigation;
 exports.useOutsideClick = useOutsideClick;
+exports.useScroll = useScroll;
 exports.useTheme = useTheme;
-exports.useValue = useValue;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
 import { Route, Redirect, HashRouter, BrowserRouter, Switch, NavLink, useHistory, useLocation, useParams } from 'react-router-dom';
@@ -689,14 +689,3 @@ import { useTransition, animated, interpolate as interpolate$1, useSpring, config } from 'react-spring';
 
-var useValue = function useValue(initialValue) {
-  var ref = useRef();
-
-  if (ref.current === undefined) {
-    ref.current = initialValue;
-  }
-
-  return ref.current;
-};
 var useAnimatedValue = function useAnimatedValue(initialValue, config$1) {
-  var _initialValue = useValue(initialValue);
-
   var _ref = config$1 !== undefined && config$1,
@@ -708,10 +697,3 @@ onAnimationEnd = _ref.onAnimationEnd,
     return {
-      value: _initialValue,
-      onRest: function onRest(_ref2) {
-        var value = _ref2.value;
-
-        if (value !== initialValue) {
-          onAnimationEnd && onAnimationEnd();
-        }
-      },
+      value: initialValue,
       config: _extends({}, config["default"], restConfig)
@@ -725,3 +707,7 @@ };
     set({
-      value: updatedValue
+      value: updatedValue,
+      onRest: function onRest(_ref2) {
+        var value = _ref2.value;
+        onAnimationEnd && onAnimationEnd(value);
+      }
     });
@@ -731,3 +717,3 @@ };
   var _targetObject = {
-    value: _initialValue
+    value: props.value
   };
@@ -755,21 +741,154 @@ return new Proxy(_targetObject, {
 };
-var interpolate = function interpolate(animatedValue, config) {
-  var inputRange = config.inputRange,
-      outputRange = config.outputRange,
-      rest = _objectWithoutPropertiesLoose(config, ["inputRange", "outputRange"]);
+var useScroll = function useScroll() {
+  var _useState = useState(0),
+      scrollX = _useState[0],
+      setScrollX = _useState[1];
 
-  return animatedValue.interpolate(_extends({
-    range: inputRange,
-    output: outputRange
-  }, rest));
+  var _useState2 = useState(0),
+      scrollY = _useState2[0],
+      setScrollY = _useState2[1];
+
+  var scrollListener = function scrollListener() {
+    var _window = window,
+        pageYOffset = _window.pageYOffset,
+        pageXOffset = _window.pageXOffset;
+    setScrollX(pageXOffset);
+    setScrollY(pageYOffset);
+  };
+
+  useEffect(function () {
+    window.addEventListener("scroll", scrollListener);
+    return function () {
+      return window.removeEventListener("scroll", scrollListener);
+    };
+  }, []);
+  return {
+    x: scrollX,
+    y: scrollY
+  };
 };
+var useMeasure = function useMeasure() {
+  var ref = useRef(null);
 
-var AnimatedBlock = function AnimatedBlock(_ref) {
+  var _useState3 = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    vLeft: 0,
+    vTop: 0
+  }),
+      measurement = _useState3[0],
+      setMeasurement = _useState3[1];
+
+  useEffect(function () {
+    var _refElement = ref.current ? ref.current : document.documentElement;
+
+    var _refElement$getBoundi = _refElement.getBoundingClientRect(),
+        left = _refElement$getBoundi.left,
+        top = _refElement$getBoundi.top,
+        width = _refElement$getBoundi.width,
+        height = _refElement$getBoundi.height;
+
+    var _window2 = window,
+        pageXOffset = _window2.pageXOffset,
+        pageYOffset = _window2.pageYOffset;
+    setMeasurement({
+      left: left + pageXOffset,
+      top: top + pageYOffset,
+      width: width,
+      height: height,
+      vLeft: left,
+      vTop: top
+    });
+  }, []);
+  return [{
+    ref: ref
+  }, measurement];
+};
+
+var AnimatedBlock = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
-  return React.createElement(animated.div, Object.assign({}, rest), children);
+  return React.createElement(animated.div, Object.assign({
+    ref: ref
+  }, rest), children);
+});
+
+var binaryInterpolate = function binaryInterpolate(perc, val1, val2) {
+  return val1 * (1 - perc) + val2 * perc;
 };
 
-export { ActiveLink, AnimatedBlock, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, Theme, DefaultThemeConfig as ThemeConfig, interpolate, useAnimatedValue, useAuth, useNavigation, useOutsideClick, useTheme, useValue };
+var _internalInterpolate = function _internalInterpolate(val, arr, type) {
+  var val1 = arr[0],
+      val2 = arr[1],
+      val3 = arr[2],
+      val4 = arr[3];
+  var perc = (val1 - val) / (val1 - val2);
+  var output = binaryInterpolate(perc, val3, val4);
+  var isPositive = val4 >= val3 ? 1 : -1;
+
+  switch (type) {
+    case "clamp":
+      if (isPositive * output < isPositive * val3) {
+        return val3;
+      } else if (isPositive * output > isPositive * val4) {
+        return val4;
+      } else {
+        return output;
+      }
+
+    case "identity":
+      return val;
+
+    case "extend":
+    default:
+      return output;
+  }
+};
+
+var _getNarrowedInputArray = function _getNarrowedInputArray(x, input, output) {
+  var length = input.length;
+  var narrowedInput = [];
+
+  if (x < input[0]) {
+    narrowedInput = [input[0], input[1], output[0], output[1]];
+  } else if (x > input[length - 1]) {
+    narrowedInput = [input[length - 2], input[length - 1], output[length - 2], output[length - 1]];
+  }
+
+  for (var i = 1; i < length; ++i) {
+    if (x <= input[i]) {
+      narrowedInput = [input[i - 1], input[i], output[i - 1], output[i]];
+      break;
+    }
+  }
+
+  return narrowedInput;
+};
+
+var interpolate = function interpolate(value, config) {
+  if (typeof value === "object") {
+    var inputRange = config.inputRange,
+        outputRange = config.outputRange,
+        rest = _objectWithoutPropertiesLoose(config, ["inputRange", "outputRange"]);
+
+    return value.interpolate(_extends({
+      range: inputRange,
+      output: outputRange
+    }, rest));
+  } else {
+    var _inputRange = config.inputRange,
+        _outputRange = config.outputRange,
+        _config$extrapolate = config.extrapolate,
+        extrapolate = _config$extrapolate === void 0 ? "extend" : _config$extrapolate;
+
+    var narrowedInput = _getNarrowedInputArray(value, _inputRange, _outputRange);
+
+    return _internalInterpolate(value, narrowedInput, extrapolate);
+  }
+};
+
+export { ActiveLink, AnimatedBlock, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, Theme, DefaultThemeConfig as ThemeConfig, interpolate, useAnimatedValue, useAuth, useMeasure, useNavigation, useOutsideClick, useScroll, useTheme };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-uicomp",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React UI component for creating complex routes and beautiful UI",
@@ -77,4 +77,5 @@ "author": "dipeshrai123",
     "react-use-gesture": "^7.0.15",
+    "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^5.1.1"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

181050

increased by13.52%

Number of package files

22

increased by4.76%

Lines of code

1825

increased by13.99%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedresize-observer-polyfill@^1.5.1

• + Addedresize-observer-polyfill@1.5.1(transitive)