@reactuses/core 1.0.1 → 1.0.2

package/index.cjs

@@ -2148,6 +2148,81 @@ function useActiveElement() {
   return active;
 }
 
+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] = react.useState(
+    (_b = options.initialValue) != null ? _b : { x: 0, y: 0 }
+  );
+  const [pressedDelta, setPressedDelta] = react.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];
+}
+
 exports.useActiveElement = useActiveElement;
 exports.useCounter = useCounter;
 exports.useCustomCompareEffect = useCustomCompareEffect;
@@ -2156,6 +2231,7 @@ exports.useDebounce = useDebounce;
 exports.useDebounceFn = useDebounceFn;
 exports.useDeepCompareEffect = useDeepCompareEffect;
 exports.useDocumentVisibility = useDocumentVisibility;
+exports.useDraggable = useDraggable;
 exports.useDropZone = useDropZone;
 exports.useElementSize = useElementSize;
 exports.useEvent = useEvent;

package/index.d.ts

@@ -45,6 +45,11 @@ declare function useSessionStorage<T = unknown>(key: string, defaults: null, opt
 
 declare type Fn = (this: any, ...args: any[]) => any;
 declare type Stoppable = [boolean, Fn, Fn];
+declare type PointerType = "mouse" | "touch" | "pen";
+interface Position {
+    x: number;
+    y: number;
+}
 
 declare function useEvent<T extends Fn>(fn: T): T;
 
@@ -585,4 +590,62 @@ declare function usePreferredContrast(defaultState?: Contrast): Contrast;
 
 declare function useActiveElement<T extends Element>(): T | null;
 
-export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDropZone, useElementSize, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, _default as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, _default$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, _default$3 as useUpdateEffect, _default$2 as useUpdateLayoutEffect, useVirtualList };
+interface UseDraggableOptions {
+    /**
+     * Only start the dragging when click on the element directly
+     *
+     * @default false
+     */
+    exact?: boolean;
+    /**
+     * Prevent events defaults
+     *
+     * @default false
+     */
+    preventDefault?: boolean;
+    /**
+     * Prevent events propagation
+     *
+     * @default false
+     */
+    stopPropagation?: boolean;
+    /**
+     * Element to attach `pointermove` and `pointerup` events to.
+     *
+     * @default window
+     */
+    draggingElement?: BasicTarget<HTMLElement | SVGElement | Window | Document>;
+    /**
+     * Handle that triggers the drag event
+     *
+     * @default target
+     */
+    handle?: BasicTarget<HTMLElement | SVGElement>;
+    /**
+     * Pointer types that listen to.
+     *
+     * @default ['mouse', 'touch', 'pen']
+     */
+    pointerTypes?: PointerType[];
+    /**
+     * Initial position of the element.
+     *
+     * @default { x: 0, y: 0 }
+     */
+    initialValue?: Position;
+    /**
+     * Callback when the dragging starts. Return `false` to prevent dragging.
+     */
+    onStart?: (position: Position, event: PointerEvent) => void | false;
+    /**
+     * Callback during dragging.
+     */
+    onMove?: (position: Position, event: PointerEvent) => void;
+    /**
+     * Callback when dragging end.
+     */
+    onEnd?: (position: Position, event: PointerEvent) => void;
+}
+declare function useDraggable(target: BasicTarget<HTMLElement | SVGElement>, options?: UseDraggableOptions): readonly [number, number, boolean];
+
+export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, useDropZone, useElementSize, useEvent, useEventEmitter, useEventListener, useFavicon, useFileDialog, useFirstMountState, _default as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMarkdown, _default$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, _default$3 as useUpdateEffect, _default$2 as useUpdateLayoutEffect, useVirtualList };

package/index.mjs

@@ -2144,4 +2144,79 @@ 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];
+}
+
+export { useActiveElement, useCounter, useCustomCompareEffect, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDraggable, 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 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@reactuses/core",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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",