@devexpress/dx-react-core - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

dist/dx-react-core.es.js

 /**
  * Bundle of @devexpress/dx-react-core
- * Generated: 2017-05-26
- * Version: 1.0.0-alpha.1
+ * Generated: 2017-06-09
+ * Version: 1.0.0-alpha.2
  * License: https://js.devexpress.com/Licensing
@@ -10,3 +10,3 @@ */
 import PropTypes from 'prop-types';
-import { PluginHost } from '@devexpress/dx-core';
+import { EventEmitter, PluginHost } from '@devexpress/dx-core';
 
@@ -697,9 +697,9 @@ function shallowEqual(objA, objB) {
       var _template = this.template,
-          templateChildren = _template.children,
+          template = _template.children,
           connectGetters = _template.connectGetters,
           connectActions = _template.connectActions;
-      var children = this.props.children;
+      var placeholder = this.props.children;
 
 
-      var templateChildrenUnwrapped = children ? children(templateChildren()) : templateChildren();
+      var content = placeholder ? placeholder(template()) : template();
 
@@ -710,3 +710,3 @@ return React.createElement(TemplateConnector, {
         mapActions: connectActions,
-        content: templateChildrenUnwrapped
+        content: content
       });
@@ -874,3 +874,400 @@ }
 
-export { PluginHost$1 as PluginHost, PluginContainer, Action, Getter, Watcher, Template, TemplatePlaceholder, combineTemplates };
+var DragDropContextCore = function () {
+  function DragDropContextCore() {
+    classCallCheck(this, DragDropContextCore);
+
+    this.payload = null;
+    this.dragEmitter = new EventEmitter();
+  }
+
+  createClass(DragDropContextCore, [{
+    key: 'start',
+    value: function start(payload, clientOffset) {
+      this.payload = payload;
+      this.dragEmitter.emit({ payload: this.payload, clientOffset: clientOffset });
+    }
+  }, {
+    key: 'update',
+    value: function update(clientOffset) {
+      this.dragEmitter.emit({ payload: this.payload, clientOffset: clientOffset });
+    }
+  }, {
+    key: 'end',
+    value: function end(clientOffset) {
+      this.dragEmitter.emit({ payload: this.payload, clientOffset: clientOffset, end: true });
+      this.payload = null;
+    }
+  }]);
+  return DragDropContextCore;
+}();
+
+var DragDropContext = function (_React$Component) {
+  inherits(DragDropContext, _React$Component);
+
+  function DragDropContext(props) {
+    classCallCheck(this, DragDropContext);
+
+    var _this = possibleConstructorReturn(this, (DragDropContext.__proto__ || Object.getPrototypeOf(DragDropContext)).call(this, props));
+
+    _this.dragDropContext = new DragDropContextCore();
+
+    _this.dragDropContext.dragEmitter.subscribe(function (_ref) {
+      var payload = _ref.payload,
+          clientOffset = _ref.clientOffset,
+          end = _ref.end;
+
+      _this.props.onChange({
+        payload: end ? null : payload,
+        clientOffset: end ? null : clientOffset
+      });
+    });
+    return _this;
+  }
+
+  createClass(DragDropContext, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        dragDropContext: this.dragDropContext
+      };
+    }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+  return DragDropContext;
+}(React.Component);
+
+DragDropContext.childContextTypes = {
+  dragDropContext: PropTypes.shape().isRequired
+};
+
+DragDropContext.propTypes = {
+  children: PropTypes.node.isRequired,
+  onChange: PropTypes.func
+};
+
+DragDropContext.defaultProps = {
+  onChange: function onChange() {}
+};
+
+/* globals window:true */
+
+var BOUNDARY = 1;
+var clamp = function clamp(value, min, max) {
+  return Math.max(Math.min(value, max), min);
+};
+
+var Draggable = function (_React$Component) {
+  inherits(Draggable, _React$Component);
+
+  function Draggable(props, context) {
+    classCallCheck(this, Draggable);
+
+    var _this = possibleConstructorReturn(this, (Draggable.__proto__ || Object.getPrototypeOf(Draggable)).call(this, props, context));
+
+    _this.initialOffset = null;
+    _this.offset = null;
+
+    _this.isBoundExceeded = function (_ref) {
+      var x = _ref.x,
+          y = _ref.y;
+      return clamp(x, _this.initialOffset.x - BOUNDARY, _this.initialOffset.x + BOUNDARY) !== x || clamp(y, _this.initialOffset.y - BOUNDARY, _this.initialOffset.y + BOUNDARY) !== y;
+    };
+    _this.onStart = function (_ref2) {
+      var x = _ref2.x,
+          y = _ref2.y;
+
+      _this.initialOffset = { x: x, y: y };
+      _this.installListeners();
+    };
+    _this.onMove = function (_ref3) {
+      var x = _ref3.x,
+          y = _ref3.y,
+          prevent = _ref3.prevent;
+
+      if (_this.initialOffset && _this.isBoundExceeded({ x: x, y: y })) {
+        var offset = { x: x, y: y };
+        if (!_this.offset) {
+          _this.props.onStart(_this.initialOffset);
+        } else {
+          _this.props.onUpdate(offset);
+        }
+        _this.offset = offset;
+        prevent();
+      }
+    };
+    _this.onEnd = function (_ref4) {
+      var x = _ref4.x,
+          y = _ref4.y,
+          prevent = _ref4.prevent;
+
+      if (_this.offset) {
+        prevent();
+        _this.props.onEnd({ x: x, y: y });
+      }
+      _this.initialOffset = null;
+      _this.offset = null;
+      _this.removeListeners();
+    };
+
+    _this.listeners = [['mousemove', function (e) {
+      var clientX = e.clientX,
+          clientY = e.clientY;
+
+      _this.onMove({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }], ['mouseup', function (e) {
+      var clientX = e.clientX,
+          clientY = e.clientY;
+
+      _this.onEnd({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }], ['touchmove', function (e) {
+      var _e$touches$ = e.touches[0],
+          clientX = _e$touches$.clientX,
+          clientY = _e$touches$.clientY;
+
+      _this.onMove({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }, { passive: false }], ['touchend', function (e) {
+      var _e$changedTouches$ = e.changedTouches[0],
+          clientX = _e$changedTouches$.clientX,
+          clientY = _e$changedTouches$.clientY;
+
+      _this.onEnd({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }]];
+    return _this;
+  }
+
+  createClass(Draggable, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'installListeners',
+    value: function installListeners() {
+      this.listeners.forEach(function (args) {
+        var _window;
+
+        return (_window = window).addEventListener.apply(_window, toConsumableArray(args));
+      });
+    }
+  }, {
+    key: 'removeListeners',
+    value: function removeListeners() {
+      this.listeners.forEach(function (args) {
+        var _window2;
+
+        return (_window2 = window).removeEventListener.apply(_window2, toConsumableArray(args));
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      return React.cloneElement(React.Children.only(this.props.children), {
+        onMouseDown: function onMouseDown(e) {
+          var clientX = e.clientX,
+              clientY = e.clientY,
+              currentTarget = e.currentTarget;
+
+          _this2.onStart({ target: currentTarget, x: clientX, y: clientY });
+        },
+        onTouchStart: function onTouchStart(e) {
+          var currentTarget = e.currentTarget;
+          var _e$touches$2 = e.touches[0],
+              clientX = _e$touches$2.clientX,
+              clientY = _e$touches$2.clientY;
+
+          _this2.onStart({ target: currentTarget, x: clientX, y: clientY });
+        }
+      });
+    }
+  }]);
+  return Draggable;
+}(React.Component);
+
+Draggable.propTypes = {
+  children: PropTypes.node.isRequired,
+  onStart: PropTypes.func,
+  onUpdate: PropTypes.func,
+  onEnd: PropTypes.func
+};
+
+Draggable.defaultProps = {
+  onStart: function onStart() {},
+  onUpdate: function onUpdate() {},
+  onEnd: function onEnd() {}
+};
+
+var DragSource = function (_React$Component) {
+  inherits(DragSource, _React$Component);
+
+  function DragSource() {
+    classCallCheck(this, DragSource);
+    return possibleConstructorReturn(this, (DragSource.__proto__ || Object.getPrototypeOf(DragSource)).apply(this, arguments));
+  }
+
+  createClass(DragSource, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var dragDropContext = this.context.dragDropContext;
+
+      return React.createElement(
+        Draggable,
+        {
+          onStart: function onStart(_ref) {
+            var x = _ref.x,
+                y = _ref.y;
+            return dragDropContext.start(_this2.props.getPayload(), { x: x, y: y });
+          },
+          onUpdate: function onUpdate(_ref2) {
+            var x = _ref2.x,
+                y = _ref2.y;
+            return dragDropContext.update({ x: x, y: y });
+          },
+          onEnd: function onEnd(_ref3) {
+            var x = _ref3.x,
+                y = _ref3.y;
+            return dragDropContext.end({ x: x, y: y });
+          }
+        },
+        this.props.children
+      );
+    }
+  }]);
+  return DragSource;
+}(React.Component);
+
+DragSource.contextTypes = {
+  dragDropContext: PropTypes.shape().isRequired
+};
+
+DragSource.propTypes = {
+  children: PropTypes.node.isRequired,
+  getPayload: PropTypes.func.isRequired
+};
+
+DragSource.defaultProps = {};
+
+var clamp$1 = function clamp(value, min, max) {
+  return Math.max(Math.min(value, max), min);
+};
+
+var DropTarget = function (_React$Component) {
+  inherits(DropTarget, _React$Component);
+
+  function DropTarget(props, context) {
+    classCallCheck(this, DropTarget);
+
+    var _this = possibleConstructorReturn(this, (DropTarget.__proto__ || Object.getPrototypeOf(DropTarget)).call(this, props, context));
+
+    _this.node = null;
+    _this.isOver = false;
+
+    _this.handleDrag = _this.handleDrag.bind(_this);
+    return _this;
+  }
+
+  createClass(DropTarget, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      var dragEmitter = this.context.dragDropContext.dragEmitter;
+
+      dragEmitter.subscribe(this.handleDrag);
+    }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      var dragEmitter = this.context.dragDropContext.dragEmitter;
+
+      dragEmitter.unsubscribe(this.handleDrag);
+    }
+  }, {
+    key: 'handleDrag',
+    value: function handleDrag(_ref) {
+      var payload = _ref.payload,
+          clientOffset = _ref.clientOffset,
+          end = _ref.end;
+
+      var _node$getBoundingClie = this.node.getBoundingClientRect(),
+          left = _node$getBoundingClie.left,
+          top = _node$getBoundingClie.top,
+          right = _node$getBoundingClie.right,
+          bottom = _node$getBoundingClie.bottom;
+
+      var isOver = clientOffset && clamp$1(clientOffset.x, left, right) === clientOffset.x && clamp$1(clientOffset.y, top, bottom) === clientOffset.y;
+
+      if (!this.isOver && isOver) this.props.onEnter({ payload: payload, clientOffset: clientOffset });
+      if (this.isOver && isOver) this.props.onOver({ payload: payload, clientOffset: clientOffset });
+      if (this.isOver && !isOver) this.props.onLeave({ payload: payload, clientOffset: clientOffset });
+      if (isOver && end) this.props.onDrop({ payload: payload, clientOffset: clientOffset });
+
+      this.isOver = isOver && !end;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var children = this.props.children;
+
+      return React.cloneElement(React.Children.only(children), {
+        ref: function ref(node) {
+          if (node) _this2.node = node;
+          if (typeof children.ref === 'function') children.ref(node);
+        }
+      });
+    }
+  }]);
+  return DropTarget;
+}(React.Component);
+
+DropTarget.contextTypes = {
+  dragDropContext: PropTypes.shape().isRequired
+};
+
+DropTarget.propTypes = {
+  children: PropTypes.node.isRequired,
+  onEnter: PropTypes.func,
+  onOver: PropTypes.func,
+  onLeave: PropTypes.func,
+  onDrop: PropTypes.func
+};
+
+DropTarget.defaultProps = {
+  onEnter: function onEnter() {},
+  onOver: function onOver() {},
+  onLeave: function onLeave() {},
+  onDrop: function onDrop() {}
+};
+
+export { PluginHost$1 as PluginHost, PluginContainer, Action, Getter, Watcher, Template, TemplatePlaceholder, combineTemplates, DragDropContext, DragSource, DropTarget };
 //# sourceMappingURL=dx-react-core.es.js.map

dist/dx-react-core.umd.js

 /**
  * Bundle of @devexpress/dx-react-core
- * Generated: 2017-05-26
- * Version: 1.0.0-alpha.1
+ * Generated: 2017-06-09
+ * Version: 1.0.0-alpha.2
  * License: https://js.devexpress.com/Licensing
@@ -701,9 +701,9 @@ */
       var _template = this.template,
-          templateChildren = _template.children,
+          template = _template.children,
           connectGetters = _template.connectGetters,
           connectActions = _template.connectActions;
-      var children = this.props.children;
+      var placeholder = this.props.children;
 
 
-      var templateChildrenUnwrapped = children ? children(templateChildren()) : templateChildren();
+      var content = placeholder ? placeholder(template()) : template();
 
@@ -714,3 +714,3 @@ return React.createElement(TemplateConnector, {
         mapActions: connectActions,
-        content: templateChildrenUnwrapped
+        content: content
       });
@@ -878,2 +878,399 @@ }
 
+var DragDropContextCore = function () {
+  function DragDropContextCore() {
+    classCallCheck(this, DragDropContextCore);
+
+    this.payload = null;
+    this.dragEmitter = new _devexpress_dxCore.EventEmitter();
+  }
+
+  createClass(DragDropContextCore, [{
+    key: 'start',
+    value: function start(payload, clientOffset) {
+      this.payload = payload;
+      this.dragEmitter.emit({ payload: this.payload, clientOffset: clientOffset });
+    }
+  }, {
+    key: 'update',
+    value: function update(clientOffset) {
+      this.dragEmitter.emit({ payload: this.payload, clientOffset: clientOffset });
+    }
+  }, {
+    key: 'end',
+    value: function end(clientOffset) {
+      this.dragEmitter.emit({ payload: this.payload, clientOffset: clientOffset, end: true });
+      this.payload = null;
+    }
+  }]);
+  return DragDropContextCore;
+}();
+
+var DragDropContext = function (_React$Component) {
+  inherits(DragDropContext, _React$Component);
+
+  function DragDropContext(props) {
+    classCallCheck(this, DragDropContext);
+
+    var _this = possibleConstructorReturn(this, (DragDropContext.__proto__ || Object.getPrototypeOf(DragDropContext)).call(this, props));
+
+    _this.dragDropContext = new DragDropContextCore();
+
+    _this.dragDropContext.dragEmitter.subscribe(function (_ref) {
+      var payload = _ref.payload,
+          clientOffset = _ref.clientOffset,
+          end = _ref.end;
+
+      _this.props.onChange({
+        payload: end ? null : payload,
+        clientOffset: end ? null : clientOffset
+      });
+    });
+    return _this;
+  }
+
+  createClass(DragDropContext, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        dragDropContext: this.dragDropContext
+      };
+    }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+  return DragDropContext;
+}(React.Component);
+
+DragDropContext.childContextTypes = {
+  dragDropContext: PropTypes.shape().isRequired
+};
+
+DragDropContext.propTypes = {
+  children: PropTypes.node.isRequired,
+  onChange: PropTypes.func
+};
+
+DragDropContext.defaultProps = {
+  onChange: function onChange() {}
+};
+
+/* globals window:true */
+
+var BOUNDARY = 1;
+var clamp = function clamp(value, min, max) {
+  return Math.max(Math.min(value, max), min);
+};
+
+var Draggable = function (_React$Component) {
+  inherits(Draggable, _React$Component);
+
+  function Draggable(props, context) {
+    classCallCheck(this, Draggable);
+
+    var _this = possibleConstructorReturn(this, (Draggable.__proto__ || Object.getPrototypeOf(Draggable)).call(this, props, context));
+
+    _this.initialOffset = null;
+    _this.offset = null;
+
+    _this.isBoundExceeded = function (_ref) {
+      var x = _ref.x,
+          y = _ref.y;
+      return clamp(x, _this.initialOffset.x - BOUNDARY, _this.initialOffset.x + BOUNDARY) !== x || clamp(y, _this.initialOffset.y - BOUNDARY, _this.initialOffset.y + BOUNDARY) !== y;
+    };
+    _this.onStart = function (_ref2) {
+      var x = _ref2.x,
+          y = _ref2.y;
+
+      _this.initialOffset = { x: x, y: y };
+      _this.installListeners();
+    };
+    _this.onMove = function (_ref3) {
+      var x = _ref3.x,
+          y = _ref3.y,
+          prevent = _ref3.prevent;
+
+      if (_this.initialOffset && _this.isBoundExceeded({ x: x, y: y })) {
+        var offset = { x: x, y: y };
+        if (!_this.offset) {
+          _this.props.onStart(_this.initialOffset);
+        } else {
+          _this.props.onUpdate(offset);
+        }
+        _this.offset = offset;
+        prevent();
+      }
+    };
+    _this.onEnd = function (_ref4) {
+      var x = _ref4.x,
+          y = _ref4.y,
+          prevent = _ref4.prevent;
+
+      if (_this.offset) {
+        prevent();
+        _this.props.onEnd({ x: x, y: y });
+      }
+      _this.initialOffset = null;
+      _this.offset = null;
+      _this.removeListeners();
+    };
+
+    _this.listeners = [['mousemove', function (e) {
+      var clientX = e.clientX,
+          clientY = e.clientY;
+
+      _this.onMove({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }], ['mouseup', function (e) {
+      var clientX = e.clientX,
+          clientY = e.clientY;
+
+      _this.onEnd({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }], ['touchmove', function (e) {
+      var _e$touches$ = e.touches[0],
+          clientX = _e$touches$.clientX,
+          clientY = _e$touches$.clientY;
+
+      _this.onMove({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }, { passive: false }], ['touchend', function (e) {
+      var _e$changedTouches$ = e.changedTouches[0],
+          clientX = _e$changedTouches$.clientX,
+          clientY = _e$changedTouches$.clientY;
+
+      _this.onEnd({ x: clientX, y: clientY, prevent: function prevent() {
+          return e.preventDefault();
+        } });
+    }]];
+    return _this;
+  }
+
+  createClass(Draggable, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'installListeners',
+    value: function installListeners() {
+      this.listeners.forEach(function (args) {
+        var _window;
+
+        return (_window = window).addEventListener.apply(_window, toConsumableArray(args));
+      });
+    }
+  }, {
+    key: 'removeListeners',
+    value: function removeListeners() {
+      this.listeners.forEach(function (args) {
+        var _window2;
+
+        return (_window2 = window).removeEventListener.apply(_window2, toConsumableArray(args));
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      return React.cloneElement(React.Children.only(this.props.children), {
+        onMouseDown: function onMouseDown(e) {
+          var clientX = e.clientX,
+              clientY = e.clientY,
+              currentTarget = e.currentTarget;
+
+          _this2.onStart({ target: currentTarget, x: clientX, y: clientY });
+        },
+        onTouchStart: function onTouchStart(e) {
+          var currentTarget = e.currentTarget;
+          var _e$touches$2 = e.touches[0],
+              clientX = _e$touches$2.clientX,
+              clientY = _e$touches$2.clientY;
+
+          _this2.onStart({ target: currentTarget, x: clientX, y: clientY });
+        }
+      });
+    }
+  }]);
+  return Draggable;
+}(React.Component);
+
+Draggable.propTypes = {
+  children: PropTypes.node.isRequired,
+  onStart: PropTypes.func,
+  onUpdate: PropTypes.func,
+  onEnd: PropTypes.func
+};
+
+Draggable.defaultProps = {
+  onStart: function onStart() {},
+  onUpdate: function onUpdate() {},
+  onEnd: function onEnd() {}
+};
+
+var DragSource = function (_React$Component) {
+  inherits(DragSource, _React$Component);
+
+  function DragSource() {
+    classCallCheck(this, DragSource);
+    return possibleConstructorReturn(this, (DragSource.__proto__ || Object.getPrototypeOf(DragSource)).apply(this, arguments));
+  }
+
+  createClass(DragSource, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var dragDropContext = this.context.dragDropContext;
+
+      return React.createElement(
+        Draggable,
+        {
+          onStart: function onStart(_ref) {
+            var x = _ref.x,
+                y = _ref.y;
+            return dragDropContext.start(_this2.props.getPayload(), { x: x, y: y });
+          },
+          onUpdate: function onUpdate(_ref2) {
+            var x = _ref2.x,
+                y = _ref2.y;
+            return dragDropContext.update({ x: x, y: y });
+          },
+          onEnd: function onEnd(_ref3) {
+            var x = _ref3.x,
+                y = _ref3.y;
+            return dragDropContext.end({ x: x, y: y });
+          }
+        },
+        this.props.children
+      );
+    }
+  }]);
+  return DragSource;
+}(React.Component);
+
+DragSource.contextTypes = {
+  dragDropContext: PropTypes.shape().isRequired
+};
+
+DragSource.propTypes = {
+  children: PropTypes.node.isRequired,
+  getPayload: PropTypes.func.isRequired
+};
+
+DragSource.defaultProps = {};
+
+var clamp$1 = function clamp(value, min, max) {
+  return Math.max(Math.min(value, max), min);
+};
+
+var DropTarget = function (_React$Component) {
+  inherits(DropTarget, _React$Component);
+
+  function DropTarget(props, context) {
+    classCallCheck(this, DropTarget);
+
+    var _this = possibleConstructorReturn(this, (DropTarget.__proto__ || Object.getPrototypeOf(DropTarget)).call(this, props, context));
+
+    _this.node = null;
+    _this.isOver = false;
+
+    _this.handleDrag = _this.handleDrag.bind(_this);
+    return _this;
+  }
+
+  createClass(DropTarget, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      var dragEmitter = this.context.dragDropContext.dragEmitter;
+
+      dragEmitter.subscribe(this.handleDrag);
+    }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return nextProps.children !== this.props.children;
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      var dragEmitter = this.context.dragDropContext.dragEmitter;
+
+      dragEmitter.unsubscribe(this.handleDrag);
+    }
+  }, {
+    key: 'handleDrag',
+    value: function handleDrag(_ref) {
+      var payload = _ref.payload,
+          clientOffset = _ref.clientOffset,
+          end = _ref.end;
+
+      var _node$getBoundingClie = this.node.getBoundingClientRect(),
+          left = _node$getBoundingClie.left,
+          top = _node$getBoundingClie.top,
+          right = _node$getBoundingClie.right,
+          bottom = _node$getBoundingClie.bottom;
+
+      var isOver = clientOffset && clamp$1(clientOffset.x, left, right) === clientOffset.x && clamp$1(clientOffset.y, top, bottom) === clientOffset.y;
+
+      if (!this.isOver && isOver) this.props.onEnter({ payload: payload, clientOffset: clientOffset });
+      if (this.isOver && isOver) this.props.onOver({ payload: payload, clientOffset: clientOffset });
+      if (this.isOver && !isOver) this.props.onLeave({ payload: payload, clientOffset: clientOffset });
+      if (isOver && end) this.props.onDrop({ payload: payload, clientOffset: clientOffset });
+
+      this.isOver = isOver && !end;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var children = this.props.children;
+
+      return React.cloneElement(React.Children.only(children), {
+        ref: function ref(node) {
+          if (node) _this2.node = node;
+          if (typeof children.ref === 'function') children.ref(node);
+        }
+      });
+    }
+  }]);
+  return DropTarget;
+}(React.Component);
+
+DropTarget.contextTypes = {
+  dragDropContext: PropTypes.shape().isRequired
+};
+
+DropTarget.propTypes = {
+  children: PropTypes.node.isRequired,
+  onEnter: PropTypes.func,
+  onOver: PropTypes.func,
+  onLeave: PropTypes.func,
+  onDrop: PropTypes.func
+};
+
+DropTarget.defaultProps = {
+  onEnter: function onEnter() {},
+  onOver: function onOver() {},
+  onLeave: function onLeave() {},
+  onDrop: function onDrop() {}
+};
+
 exports.PluginHost = PluginHost$1;
@@ -887,2 +1284,5 @@ exports.PluginContainer = PluginContainer;
 exports.combineTemplates = combineTemplates;
+exports.DragDropContext = DragDropContext;
+exports.DragSource = DragSource;
+exports.DropTarget = DropTarget;
 
@@ -889,0 +1289,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "@devexpress/dx-react-core",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Core library for DevExtreme React Components",
@@ -79,3 +79,3 @@ "author": {
   "dependencies": {
-    "@devexpress/dx-core": "1.0.0-alpha.1",
+    "@devexpress/dx-core": "^1.0.0-alpha.3",
     "prop-types": "^15.5.8",
@@ -82,0 +82,0 @@ "react": "^15.5.4"

No alert changes

Improved metrics

Total package byte prevSize

160310

50.31%

Lines of code

2104

47.03%

Dependency changes

• + Added

  @devexpress/dx-core@1.11.2
  (transitive)

• - Removed

  @devexpress/dx-core@1.0.0-alpha.1
  (transitive)

• Updated

  @devexpress/dx-core@^1.0.0-alpha.3