@reactuses/core 1.0.1 → 1.0.3

package/index.mjs

@@ -2144,4 +2144,154 @@ function useActiveElement() {
   return active;
 }
 
-export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDropZone, useElementSize, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList };
+function useDraggable(target, options = {}) {
+  var _a, _b;
+  const draggingElement = getTargetElement(options.draggingElement, window);
+  const draggingHandle = getTargetElement((_a = options.handle) != null ? _a : target);
+  const [position, setPositon] = useState(
+    (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
+  );
+  const [pressedDelta, setPressedDelta] = useState();
+  const filterEvent = (e) => {
+    if (options.pointerTypes) {
+      return options.pointerTypes.includes(e.pointerType);
+    }
+    return true;
+  };
+  const handleEvent = (e) => {
+    if (options.preventDefault) {
+      e.preventDefault();
+    }
+    if (options.stopPropagation) {
+      e.stopPropagation();
+    }
+  };
+  const start = (e) => {
+    var _a2;
+    const element = getTargetElement(target);
+    if (!filterEvent(e) || !element) {
+      return;
+    }
+    if (options.exact && e.target !== element) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    const pos = {
+      x: e.pageX - rect.left,
+      y: e.pageY - rect.top
+    };
+    if (((_a2 = options.onStart) == null ? void 0 : _a2.call(options, pos, e)) === false) {
+      return;
+    }
+    setPressedDelta(pos);
+    handleEvent(e);
+  };
+  const move = (e) => {
+    var _a2;
+    if (!filterEvent(e)) {
+      return;
+    }
+    if (!pressedDelta) {
+      return;
+    }
+    setPositon({
+      x: e.pageX - pressedDelta.x,
+      y: e.pageY - pressedDelta.y
+    });
+    (_a2 = options.onMove) == null ? void 0 : _a2.call(options, position, e);
+    handleEvent(e);
+  };
+  const end = (e) => {
+    var _a2;
+    if (!filterEvent(e)) {
+      return;
+    }
+    if (!pressedDelta) {
+      return;
+    }
+    setPressedDelta(void 0);
+    (_a2 = options.onEnd) == null ? void 0 : _a2.call(options, position, e);
+    handleEvent(e);
+  };
+  useEventListener("pointerdown", start, draggingHandle, true);
+  useEventListener("pointermove", move, draggingElement, true);
+  useEventListener("pointerup", end, draggingElement, true);
+  return [position.x, position.y, !!pressedDelta];
+}
+
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const [height, setHeight] = useState(0);
+  const [bottom, setBottom] = useState(0);
+  const [left, setLeft] = useState(0);
+  const [right, setRight] = useState(0);
+  const [top, setTop] = useState(0);
+  const [width, setWidth] = useState(0);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const update = useEvent(() => {
+    const element = getTargetElement(target);
+    if (!element) {
+      if (reset) {
+        setHeight(0);
+        setBottom(0);
+        setLeft(0);
+        setRight(0);
+        setTop(0);
+        setWidth(0);
+        setX(0);
+        setY(0);
+      }
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    setHeight(rect.height);
+    setBottom(rect.bottom);
+    setLeft(rect.left);
+    setRight(rect.right);
+    setTop(rect.top);
+    setWidth(rect.width);
+    setX(rect.x);
+    setY(rect.y);
+  });
+  useResizeObserver(target, update);
+  useEffect(() => {
+    if (immediate) {
+      update();
+    }
+  }, [immediate, update]);
+  useEffect(() => {
+    if (windowScroll) {
+      window.addEventListener("scroll", update, { passive: true });
+    }
+    if (windowResize) {
+      window.addEventListener("resize", update, { passive: true });
+    }
+    return () => {
+      if (windowScroll) {
+        window.removeEventListener("scroll", update);
+      }
+      if (windowResize) {
+        window.removeEventListener("resize", update);
+      }
+    };
+  }, [update, windowResize, windowScroll]);
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+
+export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementSize, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, useFps$1 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, useMediaDevices$1 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useResizeObserver, useScriptTag, useScroll, useScrollLock, useSessionStorage, useTextDirection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useVirtualList };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@reactuses/core",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts",
   "sideEffects": false,
   "license": "Unlicense",
-  "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/metadata#readme",
+  "homepage": "https://www.reactuse.com/",
   "repository": {
     "type": "git",
     "url": "https://github.com/childrentime/reactuse",