react-dnd - npm Package Compare versions

Comparing version 3.0.2 to 4.0.0

lib/createSourceConnector.js

@@ -7,3 +7,3 @@ "use strict";
 var wrapConnectorHooks_1 = __importDefault(require("./wrapConnectorHooks"));
-var shallowEqual = require('shallowequal');
+var shallowequal_1 = __importDefault(require("shallowequal"));
 function createSourceConnector(backend) {
@@ -46,3 +46,3 @@ var currentHandlerId;
             if (node === currentDragSourceNode &&
-                shallowEqual(options, currentDragSourceOptions)) {
+                shallowequal_1.default(options, currentDragSourceOptions)) {
                 return;
@@ -56,3 +56,3 @@ }
             if (node === currentDragPreviewNode &&
-                shallowEqual(options, currentDragPreviewOptions)) {
+                shallowequal_1.default(options, currentDragPreviewOptions)) {
                 return;
@@ -59,0 +59,0 @@ }

lib/createSourceFactory.js

@@ -28,2 +28,4 @@ "use strict";
             this.monitor = monitor;
+            this.receiveComponent = this.receiveComponent.bind(this);
+            this.beginDrag = this.beginDrag.bind(this);
         }
@@ -30,0 +32,0 @@ SourceImpl.prototype.receiveProps = function (props) {

lib/createTargetConnector.js

@@ -7,3 +7,3 @@ "use strict";
 var wrapConnectorHooks_1 = __importDefault(require("./wrapConnectorHooks"));
-var shallowEqual = require('shallowequal');
+var shallowequal_1 = __importDefault(require("shallowequal"));
 function createTargetConnector(backend) {
@@ -33,3 +33,3 @@ var currentHandlerId;
             if (node === currentDropTargetNode &&
-                shallowEqual(options, currentDropTargetOptions)) {
+                shallowequal_1.default(options, currentDropTargetOptions)) {
                 return;
@@ -36,0 +36,0 @@ }

lib/decorateHandler.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 import { DndComponentClass } from './interfaces';
-export interface DecorateHandlerArgs<P, ComponentClass extends React.ComponentClass<P>> {
+export interface DecorateHandlerArgs<P, ComponentClass extends React.ComponentClass<P>, ItemIdType> {
     DecoratedComponent: ComponentClass;
@@ -11,6 +11,6 @@ createHandler: any;
     containerDisplayName: string;
-    getType: any;
+    getType: (props: P) => ItemIdType;
     collect: any;
     options: any;
 }
-export default function decorateHandler<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, TargetClass extends React.ComponentClass<P>>({DecoratedComponent, createHandler, createMonitor, createConnector, registerHandler, containerDisplayName, getType, collect, options}: DecorateHandlerArgs<P, TargetClass>): TargetClass & DndComponentClass<P, S, TargetComponent, TargetClass>;
+export default function decorateHandler<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, TargetClass extends React.ComponentClass<P>, ItemIdType>({DecoratedComponent, createHandler, createMonitor, createConnector, registerHandler, containerDisplayName, getType, collect, options}: DecorateHandlerArgs<P, TargetClass, ItemIdType>): TargetClass & DndComponentClass<P, TargetComponent, TargetClass>;

lib/decorateHandler.js

@@ -32,32 +32,21 @@ "use strict";
 var React = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
 var invariant_1 = __importDefault(require("invariant"));
 var hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics"));
-var shallowEqual = require('shallowequal');
-var _a = require('disposables'), Disposable = _a.Disposable, CompositeDisposable = _a.CompositeDisposable, SerialDisposable = _a.SerialDisposable;
-var isClassComponent = function (Comp) {
-    return (!!Comp && !!Comp.prototype && typeof Comp.prototype.render === 'function');
-};
+var DragDropContext_1 = require("./DragDropContext");
+var shallowequal_1 = __importDefault(require("shallowequal"));
+var disposables_1 = require("./utils/disposables");
 function decorateHandler(_a) {
     var DecoratedComponent = _a.DecoratedComponent, createHandler = _a.createHandler, createMonitor = _a.createMonitor, createConnector = _a.createConnector, registerHandler = _a.registerHandler, containerDisplayName = _a.containerDisplayName, getType = _a.getType, collect = _a.collect, options = _a.options;
-    var _b = options.arePropsEqual, arePropsEqual = _b === void 0 ? shallowEqual : _b;
+    var _b = options.arePropsEqual, arePropsEqual = _b === void 0 ? shallowequal_1.default : _b;
     var displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
     var DragDropContainer = /** @class */ (function (_super) {
         __extends(DragDropContainer, _super);
-        function DragDropContainer(props, context) {
-            var _this = _super.call(this, props, context) || this;
+        function DragDropContainer(props) {
+            var _this = _super.call(this, props) || this;
             _this.isCurrentlyMounted = false;
             _this.handleChange = _this.handleChange.bind(_this);
             _this.handleChildRef = _this.handleChildRef.bind(_this);
-            invariant_1.default(typeof _this.context.dragDropManager === 'object', 'Could not find the drag and drop manager in the context of %s. ' +
-                'Make sure to wrap the top-level component of your app with DragDropContext. ' +
-                'Read more: http://react-dnd.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context', displayName, displayName);
-            _this.manager = _this.context.dragDropManager;
-            _this.handlerMonitor = createMonitor(_this.manager);
-            _this.handlerConnector = createConnector(_this.manager.getBackend());
-            _this.handler = createHandler(_this.handlerMonitor);
-            _this.disposable = new SerialDisposable();
+            _this.disposable = new disposables_1.SerialDisposable();
             _this.receiveProps(props);
-            _this.state = _this.getCurrentState();
             _this.dispose();
@@ -74,7 +63,7 @@ return _this;
             return (!arePropsEqual(nextProps, this.props) ||
-                !shallowEqual(nextState, this.state));
+                !shallowequal_1.default(nextState, this.state));
         };
         DragDropContainer.prototype.componentDidMount = function () {
             this.isCurrentlyMounted = true;
-            this.disposable = new SerialDisposable();
+            this.disposable = new disposables_1.SerialDisposable();
             this.currentType = undefined;
@@ -84,5 +73,5 @@ this.receiveProps(this.props);
         };
-        DragDropContainer.prototype.componentWillReceiveProps = function (nextProps) {
-            if (!arePropsEqual(nextProps, this.props)) {
-                this.receiveProps(nextProps);
+        DragDropContainer.prototype.componentDidUpdate = function (prevProps) {
+            if (!arePropsEqual(this.props, prevProps)) {
+                this.receiveProps(this.props);
                 this.handleChange();
@@ -96,2 +85,5 @@ }
         DragDropContainer.prototype.receiveProps = function (props) {
+            if (!this.handler) {
+                return;
+            }
             this.handler.receiveProps(props);
@@ -101,2 +93,5 @@ this.receiveType(getType(props));
         DragDropContainer.prototype.receiveType = function (type) {
+            if (!this.handlerMonitor || !this.manager || !this.handlerConnector) {
+                return;
+            }
             if (type === this.currentType) {
@@ -112,3 +107,3 @@ return;
             var unsubscribe = globalMonitor.subscribeToStateChange(this.handleChange, { handlerIds: [handlerId] });
-            this.disposable.setDisposable(new CompositeDisposable(new Disposable(unsubscribe), new Disposable(unregister)));
+            this.disposable.setDisposable(new disposables_1.CompositeDisposable(new disposables_1.Disposable(unsubscribe), new disposables_1.Disposable(unregister)));
         };
@@ -120,3 +115,3 @@ DragDropContainer.prototype.handleChange = function () {
             var nextState = this.getCurrentState();
-            if (!shallowEqual(nextState, this.state)) {
+            if (!shallowequal_1.default(nextState, this.state)) {
                 this.setState(nextState);
@@ -127,5 +122,10 @@ }
             this.disposable.dispose();
-            this.handlerConnector.receiveHandlerId(null);
+            if (this.handlerConnector) {
+                this.handlerConnector.receiveHandlerId(null);
+            }
         };
         DragDropContainer.prototype.handleChildRef = function (component) {
+            if (!this.handler) {
+                return;
+            }
             this.decoratedComponentInstance = component;
@@ -135,2 +135,5 @@ this.handler.receiveComponent(component);
         DragDropContainer.prototype.getCurrentState = function () {
+            if (!this.handlerConnector) {
+                return {};
+            }
             var nextState = collect(this.handlerConnector.hooks, this.handlerMonitor);
@@ -145,9 +148,30 @@ if (process.env.NODE_ENV !== 'production') {
         DragDropContainer.prototype.render = function () {
-            return (React.createElement(DecoratedComponent, __assign({}, this.props, this.state, { ref: isClassComponent(DecoratedComponent) ? this.handleChildRef : null })));
+            var _this = this;
+            return (React.createElement(DragDropContext_1.Consumer, null, function (_a) {
+                var dragDropManager = _a.dragDropManager;
+                if (dragDropManager === undefined) {
+                    return null;
+                }
+                _this.receiveDragDropManager(dragDropManager);
+                // Let componentDidMount fire to initialize the collected state
+                if (!_this.isCurrentlyMounted) {
+                    return null;
+                }
+                return (React.createElement(DecoratedComponent, __assign({}, _this.props, _this.state, { ref: _this.handleChildRef })));
+            }));
         };
+        DragDropContainer.prototype.receiveDragDropManager = function (dragDropManager) {
+            if (this.manager !== undefined) {
+                return;
+            }
+            this.manager = dragDropManager;
+            invariant_1.default(typeof dragDropManager === 'object', 'Could not find the drag and drop manager in the context of %s. ' +
+                'Make sure to wrap the top-level component of your app with DragDropContext. ' +
+                'Read more: http://react-dnd.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context', displayName, displayName);
+            this.handlerMonitor = createMonitor(dragDropManager);
+            this.handlerConnector = createConnector(dragDropManager.getBackend());
+            this.handler = createHandler(this.handlerMonitor);
+        };
         DragDropContainer.DecoratedComponent = DecoratedComponent;
         DragDropContainer.displayName = containerDisplayName + "(" + displayName + ")";
-        DragDropContainer.contextTypes = {
-            dragDropManager: prop_types_1.default.object.isRequired,
-        };
         return DragDropContainer;
@@ -154,0 +178,0 @@ }(React.Component));

lib/DragDropContext.d.ts

 /// <reference types="react" />
 import React from 'react';
-import PropTypes from 'prop-types';
 import { DragDropManager, BackendFactory } from 'dnd-core';
 import { ContextComponent } from './interfaces';
-export declare const CHILD_CONTEXT_TYPES: {
-    dragDropManager: PropTypes.Validator<any>;
+/**
+ * The React context type
+ */
+export interface DragDropContext<BC> {
+    dragDropManager: DragDropManager<BC> | undefined;
+}
+/**
+ * Create the React Context
+ */
+export declare const Consumer: React.ComponentType<React.ConsumerProps<DragDropContext<any>>>, Provider: React.ComponentType<React.ProviderProps<DragDropContext<any>>>;
+/**
+ * Creates the context object we're providing
+ * @param backend
+ * @param context
+ */
+export declare function createChildContext<BackendContext>(backend: BackendFactory, context?: BackendContext): {
+    dragDropManager: DragDropManager<BackendContext | undefined>;
 };
-export declare function createChildContext<Context>(backend: BackendFactory, context?: Context): {
-    dragDropManager: DragDropManager<Context | undefined>;
-};
-export default function DragDropContext<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>>(backendFactory: BackendFactory, context?: any): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & ContextComponent<P, S, TargetComponent>;
+export interface DragDropContextProviderProps<BackendContext> {
+    backend: BackendFactory;
+    context?: BackendContext;
+}
+/**
+ * A React component that provides the React-DnD context
+ */
+export declare const DragDropContextProvider: React.SFC<DragDropContextProviderProps<any>>;
+/**
+ * Wrap the root component of your application with DragDropContext decorator to set up React DnD.
+ * This lets you specify the backend, and sets up the shared DnD state behind the scenes.
+ * @param backendFactory The DnD backend factory
+ * @param backendContext The backend context
+ */
+export declare function DragDropContext<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>>(backendFactory: BackendFactory, backendContext?: any): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & ContextComponent<P, S, TargetComponent>;

lib/DragDropContext.js

@@ -25,3 +25,2 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var dnd_core_1 = require("dnd-core");
@@ -31,5 +30,11 @@ var invariant_1 = __importDefault(require("invariant"));
 var checkDecoratorArguments_1 = __importDefault(require("./utils/checkDecoratorArguments"));
-exports.CHILD_CONTEXT_TYPES = {
-    dragDropManager: prop_types_1.default.object.isRequired,
-};
+/**
+ * Create the React Context
+ */
+exports.Consumer = (_a = react_1.default.createContext({ dragDropManager: undefined }), _a.Consumer), exports.Provider = _a.Provider;
+/**
+ * Creates the context object we're providing
+ * @param backend
+ * @param context
+ */
 function createChildContext(backend, context) {
@@ -41,5 +46,19 @@ return {
 exports.createChildContext = createChildContext;
-function DragDropContext(backendFactory, context) {
-    checkDecoratorArguments_1.default('DragDropContext', 'backend', backendFactory); // eslint-disable-line prefer-rest-params
-    var childContext = createChildContext(backendFactory, context);
+/**
+ * A React component that provides the React-DnD context
+ */
+exports.DragDropContextProvider = function (_a) {
+    var backend = _a.backend, context = _a.context, children = _a.children;
+    var contextValue = createChildContext(backend, context);
+    return react_1.default.createElement(exports.Provider, { value: contextValue }, children);
+};
+/**
+ * Wrap the root component of your application with DragDropContext decorator to set up React DnD.
+ * This lets you specify the backend, and sets up the shared DnD state behind the scenes.
+ * @param backendFactory The DnD backend factory
+ * @param backendContext The backend context
+ */
+function DragDropContext(backendFactory, backendContext) {
+    checkDecoratorArguments_1.default('DragDropContext', 'backend', backendFactory);
+    var childContext = createChildContext(backendFactory, backendContext);
     return function decorateContext(DecoratedComponent) {
@@ -59,12 +78,9 @@ var displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
             };
-            DragDropContextContainer.prototype.getChildContext = function () {
-                return childContext;
-            };
             DragDropContextContainer.prototype.render = function () {
                 var _this = this;
-                return (react_1.default.createElement(DecoratedComponent, __assign({}, this.props, { ref: function (child) { return (_this.child = child); } })));
+                return (react_1.default.createElement(exports.Provider, { value: childContext },
+                    react_1.default.createElement(DecoratedComponent, __assign({}, this.props, { ref: function (child) { return (_this.child = child); } }))));
             };
             DragDropContextContainer.DecoratedComponent = DecoratedComponent;
             DragDropContextContainer.displayName = "DragDropContext(" + displayName + ")";
-            DragDropContextContainer.childContextTypes = exports.CHILD_CONTEXT_TYPES;
             return DragDropContextContainer;
@@ -75,3 +91,4 @@ }(react_1.default.Component));
 }
-exports.default = DragDropContext;
+exports.DragDropContext = DragDropContext;
+var _a;
 //# sourceMappingURL=DragDropContext.js.map

lib/DragLayer.d.ts

 /// <reference types="react" />
 import React from 'react';
 import { DragLayerCollector, DndOptions, DndComponentClass } from './interfaces';
-export default function DragLayer<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, CollectedProps>(collect: DragLayerCollector<P, CollectedProps>, options?: DndOptions<P>): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & DndComponentClass<P, S, TargetComponent, TargetClass>;
+export default function DragLayer<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, CollectedProps>(collect: DragLayerCollector<P, CollectedProps>, options?: DndOptions<P>): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & DndComponentClass<P, TargetComponent, TargetClass>;

lib/DragLayer.js

@@ -25,3 +25,2 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics"));
@@ -31,6 +30,7 @@ var isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
 var checkDecoratorArguments_1 = __importDefault(require("./utils/checkDecoratorArguments"));
-var shallowEqual = require('shallowequal');
+var DragDropContext_1 = require("./DragDropContext");
+var shallowequal_1 = __importDefault(require("shallowequal"));
 function DragLayer(collect, options) {
     if (options === void 0) { options = {}; }
-    checkDecoratorArguments_1.default('DragLayer', 'collect[, options]', collect, options); // eslint-disable-line prefer-rest-params
+    checkDecoratorArguments_1.default('DragLayer', 'collect[, options]', collect, options);
     invariant_1.default(typeof collect === 'function', 'Expected "collect" provided as the first argument to DragLayer to be a function that collects props to inject into the component. ', 'Instead, received %s. Read more: http://react-dnd.github.io/react-dnd/docs-drag-layer.html', collect);
@@ -40,15 +40,10 @@ invariant_1.default(isPlainObject_1.default(options), 'Expected "options" provided as the second argument to DragLayer to be a plain object when specified. ' +
     return function decorateLayer(DecoratedComponent) {
-        var _a = options.arePropsEqual, arePropsEqual = _a === void 0 ? shallowEqual : _a;
+        var _a = options.arePropsEqual, arePropsEqual = _a === void 0 ? shallowequal_1.default : _a;
         var displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
         var DragLayerContainer = /** @class */ (function (_super) {
             __extends(DragLayerContainer, _super);
-            function DragLayerContainer(props, context) {
+            function DragLayerContainer(props) {
                 var _this = _super.call(this, props) || this;
                 _this.isCurrentlyMounted = false;
                 _this.handleChange = _this.handleChange.bind(_this);
-                _this.manager = context.dragDropManager;
-                invariant_1.default(typeof _this.manager === 'object', 'Could not find the drag and drop manager in the context of %s. ' +
-                    'Make sure to wrap the top-level component of your app with DragDropContext. ' +
-                    'Read more: http://react-dnd.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context', displayName, displayName);
-                _this.state = _this.getCurrentState();
                 return _this;
@@ -69,9 +64,6 @@ }
                 return (!arePropsEqual(nextProps, this.props) ||
-                    !shallowEqual(nextState, this.state));
+                    !shallowequal_1.default(nextState, this.state));
             };
             DragLayerContainer.prototype.componentDidMount = function () {
                 this.isCurrentlyMounted = true;
-                var monitor = this.manager.getMonitor();
-                this.unsubscribeFromOffsetChange = monitor.subscribeToOffsetChange(this.handleChange);
-                this.unsubscribeFromStateChange = monitor.subscribeToStateChange(this.handleChange);
                 this.handleChange();
@@ -92,6 +84,29 @@ };
                 var _this = this;
-                return (react_1.default.createElement(DecoratedComponent, __assign({}, this.props, this.state, { ref: function (child) {
-                        _this.child = child;
-                    } })));
+                return (react_1.default.createElement(DragDropContext_1.Consumer, null, function (_a) {
+                    var dragDropManager = _a.dragDropManager;
+                    if (dragDropManager === undefined) {
+                        return null;
+                    }
+                    _this.receiveDragDropManager(dragDropManager);
+                    // Let componentDidMount fire to initialize the collected state
+                    if (!_this.isCurrentlyMounted) {
+                        return null;
+                    }
+                    return (react_1.default.createElement(DecoratedComponent, __assign({}, _this.props, _this.state, { ref: function (child) {
+                            _this.child = child;
+                        } })));
+                }));
             };
+            DragLayerContainer.prototype.receiveDragDropManager = function (dragDropManager) {
+                if (this.manager !== undefined) {
+                    return;
+                }
+                this.manager = dragDropManager;
+                invariant_1.default(typeof dragDropManager === 'object', 'Could not find the drag and drop manager in the context of %s. ' +
+                    'Make sure to wrap the top-level component of your app with DragDropContext. ' +
+                    'Read more: http://react-dnd.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context', displayName, displayName);
+                var monitor = this.manager.getMonitor();
+                this.unsubscribeFromOffsetChange = monitor.subscribeToOffsetChange(this.handleChange);
+                this.unsubscribeFromStateChange = monitor.subscribeToStateChange(this.handleChange);
+            };
             DragLayerContainer.prototype.handleChange = function () {
@@ -102,3 +117,3 @@ if (!this.isCurrentlyMounted) {
                 var nextState = this.getCurrentState();
-                if (!shallowEqual(nextState, this.state)) {
+                if (!shallowequal_1.default(nextState, this.state)) {
                     this.setState(nextState);
@@ -108,2 +123,5 @@ }
             DragLayerContainer.prototype.getCurrentState = function () {
+                if (!this.manager) {
+                    return {};
+                }
                 var monitor = this.manager.getMonitor();
@@ -113,5 +131,2 @@ return collect(monitor, this.props);
             DragLayerContainer.displayName = "DragLayer(" + displayName + ")";
-            DragLayerContainer.contextTypes = {
-                dragDropManager: prop_types_1.default.object.isRequired,
-            };
             return DragLayerContainer;
@@ -118,0 +133,0 @@ }(react_1.default.Component));

lib/DragSource.d.ts

@@ -12,2 +12,2 @@ /// <reference types="react" />
  */
-export default function DragSource<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, CollectedProps, DragObject>(type: SourceType | ((props: P) => SourceType), spec: DragSourceSpec<P, S, TargetComponent, DragObject>, collect: DragSourceCollector<CollectedProps>, options?: DndOptions<P>): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & DndComponentClass<P, S, TargetComponent, TargetClass>;
+export default function DragSource<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, CollectedProps, DragObject>(type: SourceType | ((props: P) => SourceType), spec: DragSourceSpec<P, S, TargetComponent, DragObject>, collect: DragSourceCollector<CollectedProps>, options?: DndOptions<P>): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & DndComponentClass<P, TargetComponent, TargetClass>;

lib/DropTarget.d.ts

@@ -5,2 +5,2 @@ /// <reference types="react" />
 import { DropTargetSpec, DndOptions, DropTargetCollector, DndComponentClass } from './interfaces';
-export default function DropTarget<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, CollectedProps>(type: TargetType | ((props: P) => TargetType), spec: DropTargetSpec<P, S, TargetComponent>, collect: DropTargetCollector<CollectedProps>, options?: DndOptions<P>): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & DndComponentClass<P, S, TargetComponent, TargetClass>;
+export default function DropTarget<P, S, TargetComponent extends React.Component<P, S> | React.StatelessComponent<P>, CollectedProps>(type: TargetType | ((props: P) => TargetType), spec: DropTargetSpec<P, S, TargetComponent>, collect: DropTargetCollector<CollectedProps>, options?: DndOptions<P>): <TargetClass extends React.ComponentClass<P>>(DecoratedComponent: TargetClass) => TargetClass & DndComponentClass<P, TargetComponent, TargetClass>;

lib/index.d.ts

@@ -1,3 +0,2 @@
-export { default as DragDropContext } from './DragDropContext';
-export { default as DragDropContextProvider } from './DragDropContextProvider';
+export { DragDropContext, DragDropContextProvider, DragDropContextProviderProps } from './DragDropContext';
 export { default as DragLayer } from './DragLayer';
@@ -4,0 +3,0 @@ export { default as DragSource } from './DragSource';

lib/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var DragDropContext_1 = require("./DragDropContext");
-exports.DragDropContext = DragDropContext_1.default;
-var DragDropContextProvider_1 = require("./DragDropContextProvider");
-exports.DragDropContextProvider = DragDropContextProvider_1.default;
+exports.DragDropContext = DragDropContext_1.DragDropContext;
+exports.DragDropContextProvider = DragDropContext_1.DragDropContextProvider;
 var DragLayer_1 = require("./DragLayer");
@@ -8,0 +7,0 @@ exports.DragLayer = DragLayer_1.default;

lib/interfaces.d.ts

@@ -15,3 +15,3 @@ /// <reference types="react" />
  */
-export interface DndComponent<P, S, C extends React.Component<P, S> | React.StatelessComponent<P>> extends React.Component<P, S> {
+export interface DndComponent<P, C extends React.Component<P, any> | React.StatelessComponent<P>> extends React.Component<P> {
     getDecoratedComponentInstance(): C;
@@ -30,5 +30,5 @@ getHandlerId(): Identifier;
  */
-export interface DndComponentClass<P, S, C extends React.Component<P, S> | React.StatelessComponent<P>, ComponentClass extends React.ComponentClass<P>> extends React.ComponentClass<P> {
+export interface DndComponentClass<P, C extends React.Component<P, any> | React.StatelessComponent<P>, ComponentClass extends React.ComponentClass<P>> extends React.ComponentClass<P> {
     DecoratedComponent: ComponentClass;
-    new (props?: P, context?: any): DndComponent<P, S, C>;
+    new (props?: P, context?: any): DndComponent<P, C>;
 }
@@ -35,0 +35,0 @@ export interface DragSourceMonitor extends DragDropMonitor {

package.json

 {
 	"name": "react-dnd",
-	"version": "3.0.2",
+	"version": "4.0.0",
 	"description": "Drag and Drop for React",
@@ -18,18 +18,22 @@ "main": "lib/index.js",
 		"build": "run-p bundle:* transpile",
-		"test": "run-s clean build"
+		"test": "run-s clean build",
+		"watch": "tsc -w",
+		"start": "npm run watch"
 	},
 	"dependencies": {
-		"disposables": "^1.0.1",
-		"dnd-core": "^3.0.2",
+		"@types/invariant": "^2.2.29",
+		"@types/lodash": "^4.14.109",
+		"@types/node": "^10.3.0",
+		"@types/prop-types": "^15.5.3",
+		"@types/react": "^16.3.14",
+		"@types/react-dom": "^16.0.5",
+		"@types/shallowequal": "^0.2.2",
+		"dnd-core": "^4.0.0",
 		"hoist-non-react-statics": "^2.5.0",
 		"invariant": "^2.1.0",
-		"lodash": "^4.2.0",
-		"prop-types": "^15.5.10",
+		"lodash": "^4.17.10",
+		"prop-types": "^15.6.1",
 		"shallowequal": "^1.0.2"
 	},
 	"devDependencies": {
-		"@types/lodash": "^4.14.108",
-		"@types/prop-types": "^15.5.2",
-		"@types/react": "^16.3.14",
-		"@types/react-dom": "^16.0.5",
 		"babel-cli": "^6.26.0",
@@ -46,4 +50,4 @@ "babel-loader": "^7.1.1",
 	"peerDependencies": {
-		"react": "*"
+		"react": ">= 16.3"
 	}
 }

README.md

 [![npm version](https://img.shields.io/npm/v/react-dnd.svg?style=flat-square)](https://www.npmjs.com/package/react-dnd)
 [![npm downloads](https://img.shields.io/npm/dm/react-dnd.svg?style=flat-square)](https://www.npmjs.com/package/react-dnd)
 [![Build Status](https://travis-ci.org/react-dnd/react-dnd.svg?branch=master)](https://travis-ci.org/react-dnd/react-dnd)
-[![bitHound Overall Score](https://www.bithound.io/github/react-dnd/react-dnd/badges/score.svg)](https://www.bithound.io/github/react-dnd/react-dnd)
-[![bitHound Code](https://www.bithound.io/github/react-dnd/react-dnd/badges/code.svg)](https://www.bithound.io/github/react-dnd/react-dnd)
-[![bitHound Dependencies](https://www.bithound.io/github/react-dnd/react-dnd/badges/dependencies.svg)](https://www.bithound.io/github/react-dnd/react-dnd/master/dependencies/npm)
-[![bitHound Dev Dependencies](https://www.bithound.io/github/react-dnd/react-dnd/badges/devDependencies.svg)](https://www.bithound.io/github/react-dnd/react-dnd/master/dependencies/npm)
 
@@ -9,0 +5,0 @@ # React _DnD_

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

476687

increased by0.99%

Dev dependency count

9

decreased by-30.77%

Number of package files

75

increased by13.64%

Lines of code

3894

increased by5.16%

Number of low supply chain risk alerts

61

decreased by-4.69%

Number of medium supply chain risk alerts

155

decreased by-3.12%

Worsened metrics

Dependency count

14

increased by75%

Number of lines in readme file

18

decreased by-18.18%

Dependency changes

• + Added@types/invariant@^2.2.29

• + Added@types/lodash@^4.14.109

• + Added@types/node@^10.3.0

• + Added@types/prop-types@^15.5.3

• + Added@types/react@^16.3.14

• + Added@types/react-dom@^16.0.5

• + Added@types/shallowequal@^0.2.2

• + Added@types/node@10.17.60(transitive)

• + Added@types/prop-types@15.7.14(transitive)

• + Added@types/react@16.14.62(transitive)

• + Added@types/react-dom@16.9.25(transitive)

• + Added@types/scheduler@0.16.8(transitive)

• + Added@types/shallowequal@0.2.7(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddnd-core@4.0.5(transitive)

• - Removeddisposables@^1.0.1

• - Removed@types/node@8.10.66(transitive)

• - Removed@types/redux@3.6.31(transitive)

• - Removeddisposables@1.0.2(transitive)

• - Removeddnd-core@3.0.2(transitive)

• Updateddnd-core@^4.0.0

• Updatedlodash@^4.17.10

• Updatedprop-types@^15.6.1