react-legato-dnd - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.esm.js

@@ -6,13 +6,7 @@ import { jsx } from 'react/jsx-runtime';
 
-const DragContainer = forwardRef(function ({ className, 
-// vertical = false,
-children, items, onOrderChange, onDragStart, onDragEnd, onDragCross, style, ...args }, ref) {
+const DragContainer = forwardRef(function ({ className, children, style, onEnterViewportEdge, onLeaveViewportEdge, onEnterContainerEdge, onLeaveContainerEdge, onProgrammingScrollStart, onProgrammingScrollEnd, onProgrammingScroll, onProgrammingScrollError, onBeforeDragStart, onDragStart, onDragOver, onDragCross, onBeforeDrop, onDrop, onDragEnd, onOrderChange, ...args }, ref) {
     // const ref = useRef(null)
     const [dragDrop, setDragDrop] = useState(null);
-    const itemsRef = useRef(items);
     const divRef = useRef(null);
     useEffect(() => {
-        itemsRef.current = items;
-    });
-    useEffect(() => {
         if (dragDrop && args.groups) {
@@ -30,32 +24,25 @@ dragDrop.setGroups(args.groups);
         });
-        d.on('orderChange', ({ order, from, to }) => {
-            const oldItems = itemsRef.current || [];
-            if (onOrderChange) {
-                let newItems = oldItems || [];
-                if (oldItems && oldItems.length === order.length) {
-                    newItems = oldItems.map((t, i) => oldItems[order[i]]);
-                }
-                onOrderChange({ order, from, to, items: newItems });
+        const entries = [
+            ['enterViewportEdge', onEnterViewportEdge],
+            ['leaveViewportEdge', onLeaveViewportEdge],
+            ['enterContainerEdge', onEnterContainerEdge],
+            ['leaveContainerEdge', onLeaveContainerEdge],
+            ['programmingScrollStart', onProgrammingScrollStart],
+            ['programmingScrollEnd', onProgrammingScrollEnd],
+            ['programmingScroll', onProgrammingScroll],
+            ['programmingScrollError', onProgrammingScrollError],
+            ['beforeDragStart', onBeforeDragStart],
+            ['dragStart', onDragStart],
+            ['dragOver', onDragOver],
+            ['dragCross', onDragCross],
+            ['beforeDrop', onBeforeDrop],
+            ['drop', onDrop],
+            ['dragEnd', onDragEnd],
+            ['orderChange', onOrderChange],
+        ];
+        entries.forEach(([name, handler]) => {
+            if (handler) {
+                d.on(name, handler);
             }
         });
-        d.on('dragCross', ({ order, from, current, oldCurrent }) => {
-            const oldItems = itemsRef.current || [];
-            if (onDragCross) {
-                let newItems = oldItems || [];
-                if (oldItems && oldItems.length === order.length) {
-                    newItems = oldItems.map((t, i) => oldItems[order[i]]);
-                }
-                onDragCross({ order, from, current, items: newItems, oldCurrent });
-            }
-        });
-        d.on('dragStart', ({ index }) => {
-            if (onDragStart) {
-                onDragStart({ index });
-            }
-        });
-        d.on('dragEnd', () => {
-            if (onDragEnd) {
-                onDragEnd();
-            }
-        });
         setDragDrop(d);
@@ -62,0 +49,0 @@ }, [ref]);

dist/index.js

@@ -11,13 +11,7 @@ (function (global, factory) {
 
-    const DragContainer = react.forwardRef(function ({ className, 
-    // vertical = false,
-    children, items, onOrderChange, onDragStart, onDragEnd, onDragCross, style, ...args }, ref) {
+    const DragContainer = react.forwardRef(function ({ className, children, style, onEnterViewportEdge, onLeaveViewportEdge, onEnterContainerEdge, onLeaveContainerEdge, onProgrammingScrollStart, onProgrammingScrollEnd, onProgrammingScroll, onProgrammingScrollError, onBeforeDragStart, onDragStart, onDragOver, onDragCross, onBeforeDrop, onDrop, onDragEnd, onOrderChange, ...args }, ref) {
         // const ref = useRef(null)
         const [dragDrop, setDragDrop] = react.useState(null);
-        const itemsRef = react.useRef(items);
         const divRef = react.useRef(null);
         react.useEffect(() => {
-            itemsRef.current = items;
-        });
-        react.useEffect(() => {
             if (dragDrop && args.groups) {
@@ -35,32 +29,25 @@ dragDrop.setGroups(args.groups);
             });
-            d.on('orderChange', ({ order, from, to }) => {
-                const oldItems = itemsRef.current || [];
-                if (onOrderChange) {
-                    let newItems = oldItems || [];
-                    if (oldItems && oldItems.length === order.length) {
-                        newItems = oldItems.map((t, i) => oldItems[order[i]]);
-                    }
-                    onOrderChange({ order, from, to, items: newItems });
+            const entries = [
+                ['enterViewportEdge', onEnterViewportEdge],
+                ['leaveViewportEdge', onLeaveViewportEdge],
+                ['enterContainerEdge', onEnterContainerEdge],
+                ['leaveContainerEdge', onLeaveContainerEdge],
+                ['programmingScrollStart', onProgrammingScrollStart],
+                ['programmingScrollEnd', onProgrammingScrollEnd],
+                ['programmingScroll', onProgrammingScroll],
+                ['programmingScrollError', onProgrammingScrollError],
+                ['beforeDragStart', onBeforeDragStart],
+                ['dragStart', onDragStart],
+                ['dragOver', onDragOver],
+                ['dragCross', onDragCross],
+                ['beforeDrop', onBeforeDrop],
+                ['drop', onDrop],
+                ['dragEnd', onDragEnd],
+                ['orderChange', onOrderChange],
+            ];
+            entries.forEach(([name, handler]) => {
+                if (handler) {
+                    d.on(name, handler);
                 }
             });
-            d.on('dragCross', ({ order, from, current, oldCurrent }) => {
-                const oldItems = itemsRef.current || [];
-                if (onDragCross) {
-                    let newItems = oldItems || [];
-                    if (oldItems && oldItems.length === order.length) {
-                        newItems = oldItems.map((t, i) => oldItems[order[i]]);
-                    }
-                    onDragCross({ order, from, current, items: newItems, oldCurrent });
-                }
-            });
-            d.on('dragStart', ({ index }) => {
-                if (onDragStart) {
-                    onDragStart({ index });
-                }
-            });
-            d.on('dragEnd', () => {
-                if (onDragEnd) {
-                    onDragEnd();
-                }
-            });
             setDragDrop(d);
@@ -67,0 +54,0 @@ }, [ref]);

dist/index.min.js

@@ -1,1 +0,1 @@
-(function(e,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("react/jsx-runtime"),require("react"),require("legato-dnd"),require("react-merge-refs")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","legato-dnd","react-merge-refs"],s):(e=typeof globalThis!="undefined"?globalThis:e||self,s(e.Legato={},e.jsxRuntime,e.React,e.Legato,e.mergeRefs))})(this,function(e,s,i,m,D){"use strict";function S(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var E=S(D);const C=i.forwardRef(function({className:t,children:l,items:f,onOrderChange:c,onDragStart:o,onDragEnd:d,onDragCross:L,style:w,...p},y){const[_,x]=i.useState(null),g=i.useRef(f),h=i.useRef(null);return i.useEffect(()=>{g.current=f}),i.useEffect(()=>{_&&p.groups&&_.setGroups(p.groups)},[p.groups]),i.useEffect(()=>{if(h.current==null)return;const a=new m.DragDrop({container:h.current,...p});a.on("orderChange",({order:n,from:R,to:j})=>{const u=g.current||[];if(c){let r=u||[];u&&u.length===n.length&&(r=u.map((v,A)=>u[n[A]])),c({order:n,from:R,to:j,items:r})}}),a.on("dragCross",({order:n,from:R,current:j,oldCurrent:u})=>{const r=g.current||[];if(L){let v=r||[];r&&r.length===n.length&&(v=r.map((A,H)=>r[n[H]])),L({order:n,from:R,current:j,items:v,oldCurrent:u})}}),a.on("dragStart",({index:n})=>{o&&o({index:n})}),a.on("dragEnd",()=>{d&&d()}),x(a)},[y]),s.jsx("div",{ref:E.default([y,h]),className:t,style:w,children:l},void 0)});function N({style:t,children:l,className:f="",handler:c=!0}){const o=[m.DRAGGABLE_CLASS,c&&m.HANDLER_CLASS,f].filter(d=>!!d).join(" ");return s.jsx("div",{style:t,className:o,children:l},void 0)}function q({children:t,style:l,className:f="",handler:c=!0}){const o=[c&&m.HANDLER_CLASS,f].filter(d=>!!d).join(" ");return s.jsx("div",{style:l,className:o,children:t},void 0)}e.DragContainer=C,e.Draggable=N,e.Handler=q,Object.defineProperty(e,"__esModule",{value:!0})});
+(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react/jsx-runtime"),require("react"),require("legato-dnd"),require("react-merge-refs")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","legato-dnd","react-merge-refs"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.Legato={},e.jsxRuntime,e.React,e.Legato,e.mergeRefs))})(this,function(e,t,n,d,S){"use strict";function E(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var v=E(S);const D=n.forwardRef(function({className:r,children:o,style:i,onEnterViewportEdge:s,onLeaveViewportEdge:a,onEnterContainerEdge:u,onLeaveContainerEdge:L,onProgrammingScrollStart:y,onProgrammingScrollEnd:R,onProgrammingScroll:_,onProgrammingScrollError:h,onBeforeDragStart:A,onDragStart:N,onDragOver:q,onDragCross:w,onBeforeDrop:x,onDrop:H,onDragEnd:b,onOrderChange:G,...f},l){const[g,O]=n.useState(null),c=n.useRef(null);return n.useEffect(()=>{g&&f.groups&&g.setGroups(f.groups)},[f.groups]),n.useEffect(()=>{if(c.current==null)return;const p=new d.DragDrop({container:c.current,...f});[["enterViewportEdge",s],["leaveViewportEdge",a],["enterContainerEdge",u],["leaveContainerEdge",L],["programmingScrollStart",y],["programmingScrollEnd",R],["programmingScroll",_],["programmingScrollError",h],["beforeDragStart",A],["dragStart",N],["dragOver",q],["dragCross",w],["beforeDrop",x],["drop",H],["dragEnd",b],["orderChange",G]].forEach(([T,m])=>{m&&p.on(T,m)}),O(p)},[l]),t.jsx("div",{ref:v.default([l,c]),className:r,style:i,children:o},void 0)});function j({style:r,children:o,className:i="",handler:s=!0}){const a=[d.DRAGGABLE_CLASS,s&&d.HANDLER_CLASS,i].filter(u=>!!u).join(" ");return t.jsx("div",{style:r,className:a,children:o},void 0)}function C({children:r,style:o,className:i="",handler:s=!0}){const a=[s&&d.HANDLER_CLASS,i].filter(u=>!!u).join(" ");return t.jsx("div",{style:o,className:a,children:r},void 0)}e.DragContainer=D,e.Draggable=j,e.Handler=C,Object.defineProperty(e,"__esModule",{value:!0})});

dist/src/Container.d.ts

 import { ReactNode, CSSProperties } from 'react';
-import { DragDropProps } from 'legato-dnd';
-export interface DragStartHandlerProps {
-    index: number;
-}
-export interface DragCrossHandlerProps {
-    order: number[];
-    from: number;
-    current: number;
-    oldCurrent: number;
-    items: any[];
-}
-export interface OrderChangeHandlerProps<T> {
-    order: number[];
-    from: number;
-    to: number;
-    items: T[];
-}
+import { BeforeDragStartEvent, BeforeDropEvent, DragCrossEvent, DragDropProps, DragEndEvent, DragOverEvent, DragStartEvent, DropEvent, EnterContainerEdgeEvent, EnterViewportEdgeEvent, LeaveContainerEdgeEvent, LeaveViewportEdgeEvent, OrderChangeEvent, ProgrammingScrollEndEvent, ProgrammingScrollErrorEvent, ProgrammingScrollEvent, ProgrammingScrollStartEvent } from 'legato-dnd';
+export declare type Handler<Event> = (event: Event) => void;
 export interface ContainerComponentProps {
     style?: CSSProperties;
     className?: string;
-    children: ReactNode;
-    items?: any[];
-    onOrderChange?: (props: OrderChangeHandlerProps<any>) => void;
-    onDragStart?: (props: DragStartHandlerProps) => void;
-    onDragEnd?: () => void;
-    onDragCross?: (props: DragCrossHandlerProps) => void;
+    children?: ReactNode;
+    onEnterViewportEdge?: Handler<EnterViewportEdgeEvent>;
+    onLeaveViewportEdge?: Handler<LeaveViewportEdgeEvent>;
+    onEnterContainerEdge?: Handler<EnterContainerEdgeEvent>;
+    onLeaveContainerEdge?: Handler<LeaveContainerEdgeEvent>;
+    onProgrammingScrollStart?: Handler<ProgrammingScrollStartEvent>;
+    onProgrammingScrollEnd?: Handler<ProgrammingScrollEndEvent>;
+    onProgrammingScroll?: Handler<ProgrammingScrollEvent>;
+    onProgrammingScrollError?: Handler<ProgrammingScrollErrorEvent>;
+    onBeforeDragStart?: Handler<BeforeDragStartEvent>;
+    onDragStart?: Handler<DragStartEvent>;
+    onDragOver?: Handler<DragOverEvent>;
+    onDragCross?: Handler<DragCrossEvent>;
+    onBeforeDrop?: Handler<BeforeDropEvent>;
+    onDrop?: Handler<DropEvent>;
+    onDragEnd?: Handler<DragEndEvent>;
+    onOrderChange?: Handler<OrderChangeEvent>;
 }
@@ -29,0 +25,0 @@ export declare type ContainerPropTypes = ContainerComponentProps & Omit<DragDropProps, 'container'>;

package.json

 {
   "name": "react-legato-dnd",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "author": "Lai Zhi",
-  "homepage": "https://github.com/LazyLZ/legato-dnd",
+  "homepage": "https://github.com/LazyLZ/react-legato-dnd",
   "repository": {
     "type": "git",
-    "url": "https://github.com/LazyLZ/legato-dnd"
+    "url": "https://github.com/LazyLZ/react-legato-dnd"
   },
@@ -37,3 +37,3 @@ "keywords": [
   "dependencies": {
-    "legato-dnd": "^0.3.3",
+    "legato-dnd": "^0.3.5",
     "react": "^17.0.2",
@@ -40,0 +40,0 @@ "react-dom": "^17.0.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14255

increased by15.64%

Number of downloads

10

increased byInfinity%

Number of package files

9

increased by12.5%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

58

increased byInfinity%

Worsened metrics

Lines of code

196

decreased by-12.11%

Dependency changes

• Updatedlegato-dnd@^0.3.5