@hydroperx/drag4react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.d.ts

+import React from "react";
+export default function Draggable(options: DraggableOptions): import("react/jsx-runtime").JSX.Element;
+export type DraggableOptions = {
+    nodeRef: React.MutableRefObject<HTMLElement>;
+    limit?: HTMLElement;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    rem?: number;
+    dragStart?: (data: DraggableData) => void;
+    dragMove?: (data: DraggableData) => void;
+    dragStop?: (data: DraggableData) => void;
+};
+export type DraggableData = {
+    element: HTMLElement;
+    x: number;
+    y: number;
+};

dist/index.js

+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import BaseDraggable from "@hydroperx/draggable";
+const at_browser = typeof window !== "undefined";
+let pointerMoveHandlers = [];
+function window_onPointerMove(e) {
+    for (const handler of pointerMoveHandlers) {
+        handler(e);
+    }
+}
+window.addEventListener("pointermove", window_onPointerMove);
+let pointerUpHandlers = [];
+function window_onPointerUp(e) {
+    for (const handler of pointerUpHandlers) {
+        handler(e);
+    }
+}
+window.addEventListener("pointerup", window_onPointerUp);
+window.addEventListener("pointercancel", window_onPointerUp);
+export default function Draggable(options) {
+    let { dragStart: drag_start, dragMove: drag_move, dragStop: drag_stop, limit, nodeRef: el_ref, children, disabled, } = options;
+    let draggable = null;
+    function createDraggable() {
+        draggable = new BaseDraggable(el_ref.current, {
+            limit,
+            onDragStart(element, x, y, event) {
+                drag_start?.({ element: element, x, y });
+            },
+            onDrag(element, x, y, event) {
+                drag_move?.({ element: element, x, y });
+            },
+            onDragEnd(element, x, y, event) {
+                /*
+                if (finish_parent)
+                {
+                    if (finish === "translate")
+                    {
+                        const offsets = utils.getElementRelativeOffset(element, finish_parent);
+                        console.log(offsets)
+                        const inset_offsets = utils.extractInsetOffsets(element);
+                        const lefttop_offsets = utils.extractLeftTopOffsets(element);
+                        let x = (offsets.left + inset_offsets.left + lefttop_offsets.left) + "px";
+                        let y = (offsets.top + inset_offsets.top + lefttop_offsets.top) + "px";
+                        if (rem !== undefined)
+                        {
+                            x = ((offsets.left + inset_offsets.left + lefttop_offsets.left) / rem) + "rem";
+                            y = ((offsets.top + inset_offsets.top + lefttop_offsets.top) / rem) + "rem";
+                        }
+                        (element as HTMLElement).style.translate = `${x} ${y}`;
+                        (element as HTMLElement).style.inset = "";
+                    }
+                }
+                */
+                drag_stop?.({ element: element, x, y });
+            },
+        });
+    }
+    useEffect(() => {
+        if (!disabled) {
+            if (draggable)
+                draggable.destroy();
+            createDraggable();
+        }
+        // Cleanup
+        return () => {
+            if (draggable)
+                draggable.destroy(), draggable = null;
+        };
+    }, [disabled, limit]);
+    useEffect(() => {
+        // Cleanup
+        return () => {
+            if (draggable)
+                draggable.destroy(), draggable = null;
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: children }));
+}
+const utils = {
+    extractInsetOffsets(element) {
+        const e = element;
+        const { inset } = e.style;
+        if (!inset)
+            return { left: 0, top: 0 };
+        const m = inset.match(/-?(?:\d*\.\d+|\d+)/g);
+        if (!m)
+            return { left: 0, top: 0 };
+        return {
+            left: parseFloat(m[1]),
+            top: parseFloat(m[0]),
+        };
+    },
+    extractLeftTopOffsets(element) {
+        const e = element;
+        const { left, top } = e.style;
+        const m_top = top ? top.match(/-?(?:\d*\.\d+|\d+)/) : "0";
+        const m_left = left ? left.match(/-?(?:\d*\.\d+|\d+)/) : "0";
+        return {
+            left: parseFloat(m_left ? m_left[0] : "0"),
+            top: parseFloat(m_top ? m_top[0] : "0"),
+        };
+    },
+};

package.json

 {
   "name": "@hydroperx/drag4react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
-  "scripts": {},
-  "main": "src/index.tsx",
+  "files": ["/dist"],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "dependencies": {
-    "@types/assert": "^1.5.11",
-    "@types/clone": "^2.1.4",
-    "@types/extend": "^3.0.4",
-    "@types/react": "^18.3.1",
-    "assert": "^2.1.0",
-    "clone": "^2.1.2",
-    "@hydroperx/draggable": "^1.0.0",
-    "extend": "^3.0.2"
+    "@hydroperx/draggable": "^1.0.0"
   },
@@ -32,4 +34,5 @@ "repository": {
   "devDependencies": {
+    "@types/react": "^18.3.1",
     "typescript": "~5.6.2"
   }
 }

README.md

@@ -26,2 +26,2 @@ # Drag for React
 
-The library as part of the `draggable` dependency uses `inset` for moving elements.
+The library as part of the `draggable` dependency uses `inset`/`left`/`top` for moving elements.

src/index.tsx

-import React, { useEffect } from "react";
-import BaseDraggable from "@hydroperx/draggable";
-
-const at_browser = typeof window !== "undefined";
-
-let pointerMoveHandlers = [];
-function window_onPointerMove(e: PointerEvent): void
-{
-    for (const handler of pointerMoveHandlers)
-    {
-        handler(e);
-    }
-}
-window.addEventListener("pointermove", window_onPointerMove);
-
-let pointerUpHandlers = [];
-function window_onPointerUp(e: PointerEvent): void
-{
-    for (const handler of pointerUpHandlers)
-    {
-        handler(e);
-    }
-}
-window.addEventListener("pointerup", window_onPointerUp);
-window.addEventListener("pointercancel", window_onPointerUp);
-
-export default function Draggable(options: DraggableOptions)
-{
-    let {
-        dragStart: drag_start,
-        dragMove: drag_move,
-        dragStop: drag_stop,
-        limit,
-        nodeRef: el_ref,
-        children,
-        disabled,
-    } = options;
-
-    let draggable: BaseDraggable | null = null;
-
-    function createDraggable()
-    {
-        draggable = new BaseDraggable(el_ref.current!, {
-            limit,
-
-            onDragStart(element, x, y, event) {
-                drag_start?.({ element: element as HTMLElement, x, y });
-            },
-
-            onDrag(element, x, y, event) {
-                drag_move?.({ element: element as HTMLElement, x, y });
-            },
-
-            onDragEnd(element, x, y, event) {
-                /*
-                if (finish_parent)
-                {
-                    if (finish === "translate")
-                    {
-                        const offsets = utils.getElementRelativeOffset(element, finish_parent);
-                        console.log(offsets)
-                        const inset_offsets = utils.extractInsetOffsets(element);
-                        const lefttop_offsets = utils.extractLeftTopOffsets(element);
-                        let x = (offsets.left + inset_offsets.left + lefttop_offsets.left) + "px";
-                        let y = (offsets.top + inset_offsets.top + lefttop_offsets.top) + "px";
-                        if (rem !== undefined)
-                        {
-                            x = ((offsets.left + inset_offsets.left + lefttop_offsets.left) / rem) + "rem";
-                            y = ((offsets.top + inset_offsets.top + lefttop_offsets.top) / rem) + "rem";
-                        }
-                        (element as HTMLElement).style.translate = `${x} ${y}`;
-                        (element as HTMLElement).style.inset = "";
-                    }
-                }
-                */
-                drag_stop?.({ element: element as HTMLElement, x, y });
-            },
-        });
-    }
-
-    useEffect(() => {
-        if (!disabled)
-        {
-            if (draggable) draggable.destroy();
-            createDraggable();
-        }
-
-        // Cleanup
-        return () => {
-            if (draggable) draggable.destroy(), draggable = null;
-        };
-    }, [disabled, limit]);
-
-    useEffect(() => {
-        // Cleanup
-        return () => {
-            if (draggable) draggable.destroy(), draggable = null;
-        };
-    }, []);
-
-    return (<>
-        {children}
-    </>);
-}
-
-export type DraggableOptions = {
-    nodeRef: React.MutableRefObject<HTMLElement>,
-    limit?: HTMLElement,
-    children?: React.ReactNode,
-    disabled?: boolean,
-    rem?: number,
-
-    dragStart?: (data: DraggableData) => void,
-    dragMove?: (data: DraggableData) => void,
-    dragStop?: (data: DraggableData) => void,
-};
-
-export type DraggableData = {
-    element: HTMLElement,
-    x: number,
-    y: number,
-};
-
-const utils = {
-    extractInsetOffsets(element: Element): { left: number, top: number }
-    {
-        const e = element as HTMLElement;
-        const { inset } = e.style;
-        if (!inset) return { left: 0, top: 0 };
-        const m = inset.match(/-?(?:\d*\.\d+|\d+)/g);
-        if (!m) return { left: 0, top: 0 };
-        return {
-            left: parseFloat(m[1]),
-            top: parseFloat(m[0]),
-        }
-    },
-
-    extractLeftTopOffsets(element: Element): { left: number, top: number }
-    {
-        const e = element as HTMLElement;
-        const { left, top } = e.style;
-        const m_top = top ? top.match(/-?(?:\d*\.\d+|\d+)/) : "0";
-        const m_left = left ? left.match(/-?(?:\d*\.\d+|\d+)/) : "0";
-        return {
-            left: parseFloat(m_left ? m_left[0] : "0"),
-            top: parseFloat(m_top ? m_top[0] : "0"),
-        }
-    },
-};

tsconfig.json

-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

-77.78%

Worsened metrics

Total package byte prevSize

17208

-3.97%

Dev dependency count

2

100%

Lines of code

120

-20%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  @types/assert@^1.5.11

• - Removed

  @types/clone@^2.1.4

• - Removed

  @types/extend@^3.0.4

• - Removed

  @types/react@^18.3.1

• - Removed

  assert@^2.1.0

• - Removed

  clone@^2.1.2

• - Removed

  extend@^3.0.2

• - Removed

  @types/assert@1.5.11
  (transitive)

• - Removed

  @types/clone@2.1.4
  (transitive)

• - Removed

  @types/extend@3.0.4
  (transitive)

• - Removed

  @types/prop-types@15.7.15
  (transitive)

• - Removed

  @types/react@18.3.31
  (transitive)

• - Removed

  assert@2.1.0
  (transitive)

• - Removed

  async-function@1.0.0
  (transitive)

• - Removed

  async-generator-function@1.0.0
  (transitive)

• - Removed

  available-typed-arrays@1.0.7
  (transitive)

• - Removed

  call-bind@1.0.9
  (transitive)

• - Removed

  call-bind-apply-helpers@1.0.2
  (transitive)

• - Removed

  call-bound@1.0.4
  (transitive)

• - Removed

  clone@2.1.2
  (transitive)

• - Removed

  csstype@3.2.3
  (transitive)

• - Removed

  define-data-property@1.1.4
  (transitive)

• - Removed

  define-properties@1.2.1
  (transitive)

• - Removed

  dunder-proto@1.0.1
  (transitive)

• - Removed

  es-define-property@1.0.1
  (transitive)

• - Removed

  es-errors@1.3.0
  (transitive)

• - Removed

  es-object-atoms@1.1.2
  (transitive)

• - Removed

  extend@3.0.2
  (transitive)

• - Removed

  for-each@0.3.5
  (transitive)

• - Removed

  function-bind@1.1.2
  (transitive)

• - Removed

  generator-function@2.0.1
  (transitive)

• - Removed

  get-intrinsic@1.3.1
  (transitive)

• - Removed

  get-proto@1.0.1
  (transitive)

• - Removed

  gopd@1.2.0
  (transitive)

• - Removed

  has-property-descriptors@1.0.2
  (transitive)

• - Removed

  has-symbols@1.1.0
  (transitive)

• - Removed

  has-tostringtag@1.0.2
  (transitive)

• - Removed

  hasown@2.0.4
  (transitive)

• - Removed

  inherits@2.0.4
  (transitive)

• - Removed

  is-arguments@1.2.0
  (transitive)

• - Removed

  is-callable@1.2.7
  (transitive)

• - Removed

  is-generator-function@1.1.2
  (transitive)

• - Removed

  is-nan@1.3.2
  (transitive)

• - Removed

  is-regex@1.2.1
  (transitive)

• - Removed

  is-typed-array@1.1.15
  (transitive)

• - Removed

  math-intrinsics@1.1.0
  (transitive)

• - Removed

  object-is@1.1.6
  (transitive)

• - Removed

  object-keys@1.1.1
  (transitive)

• - Removed

  object.assign@4.1.7
  (transitive)

• - Removed

  possible-typed-array-names@1.1.0
  (transitive)

• - Removed

  safe-regex-test@1.1.0
  (transitive)

• - Removed

  set-function-length@1.2.2
  (transitive)

• - Removed

  util@0.12.5
  (transitive)

• - Removed

  which-typed-array@1.1.22
  (transitive)