react-ui-animate 2.0.0-rc.1 → 2.0.0-rc.2

package/src/hooks/useMeasure.ts

@@ -1,133 +1,133 @@
-import * as React from "react";
-
-type MeasurementValue = number | Array<number>;
-
-type MeasurementType = {
-  left: MeasurementValue;
-  top: MeasurementValue;
-  width: MeasurementValue;
-  height: MeasurementValue;
-  vLeft: MeasurementValue;
-  vTop: MeasurementValue;
-};
-
-export function useMeasure(
-  callback: (event: MeasurementType) => void,
-  deps?: React.DependencyList
-) {
-  const ref = React.useRef(null);
-  const elementRefs = React.useRef([]);
-  const callbackRef = React.useRef<(event: MeasurementType) => void>(callback);
-
-  // Reinitiate callback when dependency change
-  React.useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  React.useEffect(() => {
-    const _refElement = ref.current || document.documentElement;
-    const _refElementsMultiple = elementRefs.current;
-
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      const { left, top, width, height } = entry.target.getBoundingClientRect();
-      const { pageXOffset, pageYOffset } = window;
-
-      if (callbackRef) {
-        if (_refElement === document.documentElement) {
-          return; // no-op for document
-        } else {
-          callbackRef.current({
-            left: left + pageXOffset,
-            top: top + pageYOffset,
-            width,
-            height,
-            vLeft: left,
-            vTop: top,
-          });
-        }
-      }
-    });
-
-    const resizeObserverMultiple = new ResizeObserver((entries) => {
-      const left: Array<number> = [];
-      const top: Array<number> = [];
-      const width: Array<number> = [];
-      const height: Array<number> = [];
-      const vLeft: Array<number> = [];
-      const vTop: Array<number> = [];
-
-      entries.forEach((entry) => {
-        const {
-          left: _left,
-          top: _top,
-          width: _width,
-          height: _height,
-        } = entry.target.getBoundingClientRect();
-        const { pageXOffset, pageYOffset } = window;
-        const _pageLeft = _left + pageXOffset;
-        const _pageTop = _top + pageYOffset;
-
-        left.push(_pageLeft);
-        top.push(_pageTop);
-        width.push(_width);
-        height.push(_height);
-        vLeft.push(_left);
-        vTop.push(_top);
-      });
-
-      if (callbackRef) {
-        callbackRef.current({
-          left,
-          top,
-          width,
-          height,
-          vLeft,
-          vTop,
-        });
-      }
-    });
-
-    if (_refElement) {
-      if (
-        _refElement === document.documentElement &&
-        _refElementsMultiple.length > 0
-      ) {
-        _refElementsMultiple.forEach((element: any) => {
-          resizeObserverMultiple.observe(element.current);
-        });
-      } else {
-        resizeObserver.observe(_refElement);
-      }
-    }
-
-    return () => {
-      if (_refElement) {
-        if (
-          _refElement === document.documentElement &&
-          _refElementsMultiple.length > 0
-        ) {
-          _refElementsMultiple.forEach((element: any) => {
-            resizeObserverMultiple.unobserve(element.current);
-          });
-        } else {
-          resizeObserver.unobserve(_refElement);
-        }
-      }
-    };
-  }, []);
-
-  return (index?: number) => {
-    if (index === null || index === undefined) {
-      return { ref };
-    } else {
-      elementRefs.current[index] =
-        elementRefs.current[index] || React.createRef();
-
-      return { ref: elementRefs.current[index] };
-    }
-  }; // ...bind() or ...bind(index) for multiple
-}
+import * as React from "react";
+
+type MeasurementValue = number | Array<number>;
+
+type MeasurementType = {
+  left: MeasurementValue;
+  top: MeasurementValue;
+  width: MeasurementValue;
+  height: MeasurementValue;
+  vLeft: MeasurementValue;
+  vTop: MeasurementValue;
+};
+
+export function useMeasure(
+  callback: (event: MeasurementType) => void,
+  deps?: React.DependencyList
+) {
+  const ref = React.useRef(null);
+  const elementRefs = React.useRef([]);
+  const callbackRef = React.useRef<(event: MeasurementType) => void>(callback);
+
+  // Reinitiate callback when dependency change
+  React.useEffect(() => {
+    callbackRef.current = callback;
+
+    return () => {
+      callbackRef.current = () => false;
+    };
+  }, deps);
+
+  React.useEffect(() => {
+    const _refElement = ref.current || document.documentElement;
+    const _refElementsMultiple = elementRefs.current;
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      const { left, top, width, height } = entry.target.getBoundingClientRect();
+      const { pageXOffset, pageYOffset } = window;
+
+      if (callbackRef) {
+        if (_refElement === document.documentElement) {
+          return; // no-op for document
+        } else {
+          callbackRef.current({
+            left: left + pageXOffset,
+            top: top + pageYOffset,
+            width,
+            height,
+            vLeft: left,
+            vTop: top,
+          });
+        }
+      }
+    });
+
+    const resizeObserverMultiple = new ResizeObserver((entries) => {
+      const left: Array<number> = [];
+      const top: Array<number> = [];
+      const width: Array<number> = [];
+      const height: Array<number> = [];
+      const vLeft: Array<number> = [];
+      const vTop: Array<number> = [];
+
+      entries.forEach((entry) => {
+        const {
+          left: _left,
+          top: _top,
+          width: _width,
+          height: _height,
+        } = entry.target.getBoundingClientRect();
+        const { pageXOffset, pageYOffset } = window;
+        const _pageLeft = _left + pageXOffset;
+        const _pageTop = _top + pageYOffset;
+
+        left.push(_pageLeft);
+        top.push(_pageTop);
+        width.push(_width);
+        height.push(_height);
+        vLeft.push(_left);
+        vTop.push(_top);
+      });
+
+      if (callbackRef) {
+        callbackRef.current({
+          left,
+          top,
+          width,
+          height,
+          vLeft,
+          vTop,
+        });
+      }
+    });
+
+    if (_refElement) {
+      if (
+        _refElement === document.documentElement &&
+        _refElementsMultiple.length > 0
+      ) {
+        _refElementsMultiple.forEach((element: any) => {
+          resizeObserverMultiple.observe(element.current);
+        });
+      } else {
+        resizeObserver.observe(_refElement);
+      }
+    }
+
+    return () => {
+      if (_refElement) {
+        if (
+          _refElement === document.documentElement &&
+          _refElementsMultiple.length > 0
+        ) {
+          _refElementsMultiple.forEach((element: any) => {
+            resizeObserverMultiple.unobserve(element.current);
+          });
+        } else {
+          resizeObserver.unobserve(_refElement);
+        }
+      }
+    };
+  }, []);
+
+  return (index?: number) => {
+    if (index === null || index === undefined) {
+      return { ref };
+    } else {
+      elementRefs.current[index] =
+        elementRefs.current[index] || React.createRef();
+
+      return { ref: elementRefs.current[index] };
+    }
+  }; // ...bind() or ...bind(index) for multiple
+}

package/src/hooks/useOutsideClick.ts

@@ -1,36 +1,36 @@
-import * as React from "react";
-
-import { attachEvents } from "../gestures/eventAttacher";
-
-export function useOutsideClick(
-  elementRef: React.RefObject<HTMLElement>,
-  callback: (event: MouseEvent) => void,
-  deps?: React.DependencyList
-) {
-  const callbackRef = React.useRef<(event: MouseEvent) => void>();
-
-  if (!callbackRef.current) {
-    callbackRef.current = callback;
-  }
-
-  // Reinitiate callback when dependency change
-  React.useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  React.useEffect(() => {
-    const handleOutsideClick = (e: MouseEvent) => {
-      if (!elementRef?.current?.contains(e.target as Element)) {
-        callbackRef.current && callbackRef.current(e);
-      }
-    };
-
-    const subscribe = attachEvents([document], [["click", handleOutsideClick]]);
-
-    return () => subscribe && subscribe();
-  }, []);
-}
+import * as React from "react";
+
+import { attachEvents } from "../gestures/eventAttacher";
+
+export function useOutsideClick(
+  elementRef: React.RefObject<HTMLElement>,
+  callback: (event: MouseEvent) => void,
+  deps?: React.DependencyList
+) {
+  const callbackRef = React.useRef<(event: MouseEvent) => void>();
+
+  if (!callbackRef.current) {
+    callbackRef.current = callback;
+  }
+
+  // Reinitiate callback when dependency change
+  React.useEffect(() => {
+    callbackRef.current = callback;
+
+    return () => {
+      callbackRef.current = () => false;
+    };
+  }, deps);
+
+  React.useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (!elementRef?.current?.contains(e.target as Element)) {
+        callbackRef.current && callbackRef.current(e);
+      }
+    };
+
+    const subscribe = attachEvents([document], [["click", handleOutsideClick]]);
+
+    return () => subscribe && subscribe();
+  }, []);
+}

package/src/hooks/useWindowDimension.ts

@@ -1,59 +1,59 @@
-import * as React from "react";
-
-type WindowDimensionType = {
-  width: number;
-  height: number;
-  innerWidth: number;
-  innerHeight: number;
-};
-
-export function useWindowDimension(
-  callback: (event: WindowDimensionType) => void,
-  deps?: React.DependencyList
-) {
-  const windowDimensionsRef = React.useRef<WindowDimensionType>({
-    width: 0,
-    height: 0,
-    innerWidth: 0,
-    innerHeight: 0,
-  });
-  const callbackRef =
-    React.useRef<(event: WindowDimensionType) => void>(callback);
-
-  const handleCallback: () => void = () => {
-    if (callbackRef) {
-      callbackRef.current({
-        ...windowDimensionsRef.current,
-      });
-    }
-  };
-
-  // Reinitiate callback when dependency change
-  React.useEffect(() => {
-    callbackRef.current = callback;
-
-    return () => {
-      callbackRef.current = () => false;
-    };
-  }, deps);
-
-  React.useEffect(() => {
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      const { clientWidth, clientHeight } = entry.target;
-      const { innerWidth, innerHeight } = window;
-
-      windowDimensionsRef.current = {
-        width: clientWidth,
-        height: clientHeight,
-        innerWidth,
-        innerHeight,
-      };
-
-      handleCallback();
-    });
-
-    resizeObserver.observe(document.documentElement);
-
-    return () => resizeObserver.unobserve(document.documentElement);
-  }, []);
-}
+import * as React from "react";
+
+type WindowDimensionType = {
+  width: number;
+  height: number;
+  innerWidth: number;
+  innerHeight: number;
+};
+
+export function useWindowDimension(
+  callback: (event: WindowDimensionType) => void,
+  deps?: React.DependencyList
+) {
+  const windowDimensionsRef = React.useRef<WindowDimensionType>({
+    width: 0,
+    height: 0,
+    innerWidth: 0,
+    innerHeight: 0,
+  });
+  const callbackRef =
+    React.useRef<(event: WindowDimensionType) => void>(callback);
+
+  const handleCallback: () => void = () => {
+    if (callbackRef) {
+      callbackRef.current({
+        ...windowDimensionsRef.current,
+      });
+    }
+  };
+
+  // Reinitiate callback when dependency change
+  React.useEffect(() => {
+    callbackRef.current = callback;
+
+    return () => {
+      callbackRef.current = () => false;
+    };
+  }, deps);
+
+  React.useEffect(() => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      const { clientWidth, clientHeight } = entry.target;
+      const { innerWidth, innerHeight } = window;
+
+      windowDimensionsRef.current = {
+        width: clientWidth,
+        height: clientHeight,
+        innerWidth,
+        innerHeight,
+      };
+
+      handleCallback();
+    });
+
+    resizeObserver.observe(document.documentElement);
+
+    return () => resizeObserver.unobserve(document.documentElement);
+  }, []);
+}

package/src/index.ts

@@ -1,4 +1,5 @@
-export { Easing } from "@raidipesh78/re-motion";
-export * from "./animation";
-export * from "./gestures";
-export * from "./hooks";
+export { Easing } from '@raidipesh78/re-motion';
+export { delay } from './utils';
+export * from './animation';
+export * from './gestures';
+export * from './hooks';

package/src/utils/delay.ts

@@ -1,9 +1,9 @@
-/**
- * @param { number } ms - number of milliseconds to delay code execution
- * @returns Promise
- */
-export function delay(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(null), ms);
-  });
-}
+/**
+ * @param { number } ms - number of milliseconds to delay code execution
+ * @returns Promise
+ */
+export function delay(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(null), ms);
+  });
+}

package/src/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './isDefined';
-export * from './delay';
+export * from './isDefined';
+export * from './delay';

package/src/utils/isDefined.ts

@@ -1,4 +1,4 @@
-// check undefined or null
-export const isDefined = <T>(value: T): boolean => {
-  return value !== undefined && value !== null;
-};
+// check undefined or null
+export const isDefined = <T>(value: T): boolean => {
+  return value !== undefined && value !== null;
+};

package/tsconfig.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "esnext",
-    "target": "es5",
-    "lib": ["es6", "dom", "es2016", "es2017", "es2019"],
-    "downlevelIteration": true,
-    "sourceMap": true,
-    "allowJs": false,
-    "jsx": "react",
-    "declaration": true,
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "types": ["resize-observer-browser", "node"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "example", "rollup.config.js"]
-}
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom", "es2016", "es2017", "es2019"],
+    "downlevelIteration": true,
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
+    "declaration": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "types": ["resize-observer-browser", "node"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "example", "rollup.config.js"]
+}