react-dnd - npm Package Compare versions

Comparing version 8.0.3 to 9.0.0

lib/common/DndContext.d.ts

@@ -6,4 +6,4 @@ import * as React from 'react';
  */
-export interface DndContext<BC> {
-    dragDropManager: DragDropManager<BC> | undefined;
+export interface DndContext {
+    dragDropManager: DragDropManager | undefined;
 }
@@ -13,3 +13,3 @@ /**
  */
-export declare const DndContext: React.Context<DndContext<any>>;
+export declare const DndContext: React.Context<DndContext>;
 /**
@@ -20,4 +20,4 @@ * Creates the context object we're providing
  */
-export declare function createDndContext<BackendContext>(backend: BackendFactory, context?: BackendContext, debugMode?: boolean): {
-    dragDropManager: DragDropManager<BackendContext | undefined>;
+export declare function createDndContext<BackendContext, BackendOptions>(backend: BackendFactory, context?: BackendContext, options?: BackendOptions, debugMode?: boolean): {
+    dragDropManager: DragDropManager;
 };

lib/common/DndContext.js

@@ -14,6 +14,6 @@ import * as React from 'react';
  */
-export function createDndContext(backend, context, debugMode) {
+export function createDndContext(backend, context, options, debugMode) {
     return {
-        dragDropManager: createDragDropManager(backend, context, debugMode),
+        dragDropManager: createDragDropManager(backend, context, options, debugMode),
     };
 }

lib/common/DndProvider.d.ts

 import * as React from 'react';
-import { DragDropManager, BackendFactory } from 'dnd-core';
-export declare type DndProviderProps<BackendContext> = {
-    manager: DragDropManager<BackendContext>;
+import { BackendFactory, DragDropManager } from 'dnd-core';
+export declare type DndProviderProps<BackendContext, BackendOptions> = {
+    manager: DragDropManager;
 } | {
     backend: BackendFactory;
     context?: BackendContext;
+    options?: BackendOptions;
     debugMode?: boolean;
@@ -13,2 +14,2 @@ };
  */
-export declare const DndProvider: React.FC<DndProviderProps<any>>;
+export declare const DndProvider: React.FC<DndProviderProps<any, any>>;

lib/common/DndProvider.js

@@ -10,10 +10,10 @@ import * as React from 'react';
         ? { dragDropManager: props.manager }
-        : createSingletonDndContext(props.backend, props.context, props.debugMode);
+        : createSingletonDndContext(props.backend, props.context, props.options, props.debugMode);
     return React.createElement(DndContext.Provider, { value: context }, children);
 });
 const instanceSymbol = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
-function createSingletonDndContext(backend, context = getGlobalContext(), debugMode) {
+function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) {
     const ctx = context;
     if (!ctx[instanceSymbol]) {
-        ctx[instanceSymbol] = createDndContext(backend, context, debugMode);
+        ctx[instanceSymbol] = createDndContext(backend, context, options, debugMode);
     }
@@ -20,0 +20,0 @@ return ctx[instanceSymbol];

lib/common/DragSourceMonitorImpl.d.ts

@@ -6,3 +6,3 @@ import { DragDropManager, Unsubscribe, Listener, Identifier } from 'dnd-core';
     private sourceId;
-    constructor(manager: DragDropManager<any>);
+    constructor(manager: DragDropManager);
     receiveHandlerId(sourceId: Identifier | null): void;
@@ -9,0 +9,0 @@ getHandlerId(): Identifier | null;

lib/common/DropTargetMonitorImpl.d.ts

@@ -6,3 +6,3 @@ import { DragDropManager, Unsubscribe, Listener, Identifier } from 'dnd-core';
     private targetId;
-    constructor(manager: DragDropManager<any>);
+    constructor(manager: DragDropManager);
     receiveHandlerId(targetId: Identifier | null): void;
@@ -9,0 +9,0 @@ getHandlerId(): Identifier | null;

lib/common/registration.d.ts

 import { DragDropManager, DropTarget, Unsubscribe, Identifier, TargetType, SourceType, DragSource } from 'dnd-core';
-export declare function registerTarget<Context>(type: TargetType, target: DropTarget, manager: DragDropManager<Context>): [Identifier, Unsubscribe];
-export declare function registerSource<Context>(type: SourceType, source: DragSource, manager: DragDropManager<Context>): [Identifier, Unsubscribe];
+export declare function registerTarget(type: TargetType, target: DropTarget, manager: DragDropManager): [Identifier, Unsubscribe];
+export declare function registerSource(type: SourceType, source: DragSource, manager: DragDropManager): [Identifier, Unsubscribe];

lib/decorators/decorateHandler.d.ts

@@ -6,3 +6,3 @@ import * as React from 'react';
     DecoratedComponent: any;
-    createMonitor: (manager: DragDropManager<any>) => HandlerReceiver;
+    createMonitor: (manager: DragDropManager) => HandlerReceiver;
     createHandler: (monitor: HandlerReceiver, ref: React.RefObject<any>) => Handler<Props>;
@@ -9,0 +9,0 @@ createConnector: any;

lib/decorators/index.d.ts

 export * from './DragSource';
 export * from './DropTarget';
 export * from './DragLayer';
-export * from './DragDropContext';
 export * from './interfaces';

lib/decorators/index.js

 export * from './DragSource';
 export * from './DropTarget';
 export * from './DragLayer';
-export * from './DragDropContext';

lib/decorators/interfaces.d.ts

@@ -10,3 +10,3 @@ import * as React from 'react';
     getDecoratedComponentInstance(): React.Component<Props>;
-    getManager(): DragDropManager<any>;
+    getManager(): DragDropManager;
 }
@@ -13,0 +13,0 @@ /**

lib/hooks/internal/drag.js

@@ -1,2 +0,2 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo, useLayoutEffect } from 'react';
 import invariant from 'invariant';
@@ -54,3 +54,3 @@ import { registerSource } from '../../common/registration';
     }, []);
-    useEffect(function registerHandler() {
+    useLayoutEffect(function registerHandler() {
         const [handlerId, unregister] = registerSource(spec.current.item.type, handler, manager);
@@ -57,0 +57,0 @@ monitor.receiveHandlerId(handlerId);

lib/hooks/internal/drop.js

@@ -1,2 +0,2 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo, useLayoutEffect } from 'react';
 import { registerTarget } from '../../common/registration';
@@ -36,3 +36,3 @@ import { useDragDropManager } from './useDragDropManager';
     }, [monitor]);
-    useEffect(function registerHandler() {
+    useLayoutEffect(function registerHandler() {
         const [handlerId, unregister] = registerTarget(spec.current.accept, handler, manager);
@@ -39,0 +39,0 @@ monitor.receiveHandlerId(handlerId);

lib/hooks/internal/useCollector.d.ts

 /**
  *
- * @param monitor The monitor to colelct state from
+ * @param monitor The monitor to collect state from
  * @param collect The collecting function
@@ -5,0 +5,0 @@ * @param onUpdate A method to invoke when updates occur

lib/hooks/internal/useCollector.js

 import shallowEqual from 'shallowequal';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useLayoutEffect } from 'react';
 /**
  *
- * @param monitor The monitor to colelct state from
+ * @param monitor The monitor to collect state from
  * @param collect The collecting function
@@ -20,3 +20,6 @@ * @param onUpdate A method to invoke when updates occur
     }, [collected, monitor, onUpdate]);
+    // update the collected properties after the first render
+    // and the components are attached to dnd-core
+    useLayoutEffect(updateCollected, []);
     return [collected, updateCollected];
 }

lib/hooks/internal/useDragDropManager.d.ts

@@ -5,2 +5,2 @@ import { DragDropManager } from 'dnd-core';
  */
-export declare function useDragDropManager<Context>(): DragDropManager<Context>;
+export declare function useDragDropManager(): DragDropManager;

lib/hooks/internal/useMonitorOutput.js

@@ -1,6 +0,6 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { useCollector } from './useCollector';
 export function useMonitorOutput(monitor, collect, onCollect) {
     const [collected, updateCollected] = useCollector(monitor, collect, onCollect);
-    useEffect(function subscribeToMonitorStateChange() {
+    useLayoutEffect(function subscribeToMonitorStateChange() {
         const handlerId = monitor.getHandlerId();
@@ -7,0 +7,0 @@ if (handlerId == null) {

lib/hooks/useDrag.js

@@ -1,2 +0,2 @@
-import { useEffect, useRef, useMemo } from 'react';
+import { useRef, useMemo, useLayoutEffect } from 'react';
 import invariant from 'invariant';
@@ -24,7 +24,7 @@ import { useMonitorOutput } from './internal/useMonitorOutput';
     ]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         connector.dragSourceOptions = specRef.current.options || null;
         connector.reconnect();
     }, [connector]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         connector.dragPreviewOptions = specRef.current.previewOptions || null;
@@ -31,0 +31,0 @@ connector.reconnect();

lib/hooks/useDrop.js

@@ -1,2 +0,2 @@
-import { useEffect, useRef, useMemo } from 'react';
+import { useRef, useMemo, useLayoutEffect } from 'react';
 import invariant from 'invariant';
@@ -19,3 +19,3 @@ import { useMonitorOutput } from './internal/useMonitorOutput';
     ]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         connector.dropTargetOptions = spec.options || null;
@@ -22,0 +22,0 @@ connector.reconnect();

lib/utils/isRef.js

 export function isRef(obj) {
-    return (obj !== null && typeof obj === 'object' && obj.hasOwnProperty('current'));
+    return (
+    // eslint-disable-next-line no-prototype-builtins
+    obj !== null && typeof obj === 'object' && obj.hasOwnProperty('current'));
 }

package.json

 {
 	"name": "react-dnd",
-	"version": "8.0.3",
+	"version": "9.0.0",
 	"description": "Drag and Drop for React",
@@ -22,3 +22,3 @@ "main": "lib/index.js",
 		"@types/shallowequal": "^1.1.1",
-		"dnd-core": "^8.0.3",
+		"dnd-core": "^9.0.0",
 		"hoist-non-react-statics": "^3.3.0",
@@ -31,3 +31,3 @@ "shallowequal": "^1.1.0"
 		"@babel/preset-env": "^7.4.5",
-		"@types/react": "^16.8.19",
+		"@types/react": "^16.8.23",
 		"@types/react-dom": "^16.8.4",
@@ -40,3 +40,2 @@ "babel-jest": "^24.8.0",
 		"rimraf": "^2.6.3",
-		"ts-loader": "^6.0.2",
 		"typescript": "^3.5.2"
@@ -47,3 +46,4 @@ },
 		"react-dom": ">= 16.8"
-	}
+	},
+	"gitHead": "f591828f0ccaf70aa712785a8601017da2df4b45"
 }

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

Improved metrics

Dev dependency count

12

decreased by-7.69%

Worsened metrics

Total package byte prevSize

309153

decreased by-1.31%

Number of package files

82

decreased by-2.38%

Lines of code

2322

decreased by-2.07%

Dependency changes

• + Addeddnd-core@9.5.1(transitive)

• - Removeddnd-core@8.0.3(transitive)

• Updateddnd-core@^9.0.0