@visx/drag - npm Package Compare versions

Comparing version 1.0.0 to 1.2.0

esm/Drag.js

 import _pt from "prop-types";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+/* eslint-disable react/jsx-handler-names */
 import React from 'react';
-import { localPoint } from '@visx/event';
-
-var Drag = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Drag, _React$Component);
-
-  function Drag() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      x: undefined,
-      y: undefined,
-      dx: 0,
-      dy: 0,
-      isDragging: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (event) {
-      var _this$props = _this.props,
-          onDragStart = _this$props.onDragStart,
-          resetOnStart = _this$props.resetOnStart;
-      event.persist();
-
-      _this.setState(function (_ref) {
-        var dx = _ref.dx,
-            dy = _ref.dy;
-        var point = localPoint(event) || {
-          x: 0,
-          y: 0
-        };
-        return {
-          isDragging: true,
-          dx: resetOnStart ? 0 : dx,
-          dy: resetOnStart ? 0 : dy,
-          x: resetOnStart ? point.x : point.x - dx,
-          y: resetOnStart ? point.y : point.y - dy
-        };
-      }, onDragStart && function () {
-        onDragStart(_extends({}, _this.state, {
-          event: event
-        }));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragMove", function (event) {
-      var onDragMove = _this.props.onDragMove;
-      event.persist();
-
-      _this.setState(function (_ref2) {
-        var x = _ref2.x,
-            y = _ref2.y,
-            isDragging = _ref2.isDragging;
-        var point = localPoint(event) || {
-          x: 0,
-          y: 0
-        };
-        return isDragging ? {
-          isDragging: true,
-          dx: point.x - (x || 0),
-          dy: point.y - (y || 0)
-        } : null;
-      }, onDragMove && function () {
-        if (_this.state.isDragging) onDragMove(_extends({}, _this.state, {
-          event: event
-        }));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragEnd", function (event) {
-      var onDragEnd = _this.props.onDragEnd;
-      event.persist();
-
-      _this.setState({
-        isDragging: false
-      }, onDragEnd && function () {
-        onDragEnd(_extends({}, _this.state, {
-          event: event
-        }));
-      });
-    });
-
-    return _this;
-  }
-
-  var _proto = Drag.prototype;
-
-  _proto.render = function render() {
-    var _this$state = this.state,
-        x = _this$state.x,
-        y = _this$state.y,
-        dx = _this$state.dx,
-        dy = _this$state.dy,
-        isDragging = _this$state.isDragging;
-    var _this$props2 = this.props,
-        children = _this$props2.children,
-        width = _this$props2.width,
-        height = _this$props2.height,
-        captureDragArea = _this$props2.captureDragArea;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isDragging && captureDragArea && /*#__PURE__*/React.createElement("rect", {
-      width: width,
-      height: height,
-      onMouseMove: this.handleDragMove,
-      onMouseUp: this.handleDragEnd,
-      fill: "transparent"
-    }), children({
-      x: x,
-      y: y,
-      dx: dx,
-      dy: dy,
-      isDragging: isDragging,
-      dragEnd: this.handleDragEnd,
-      dragMove: this.handleDragMove,
-      dragStart: this.handleDragStart
-    }));
-  };
-
-  return Drag;
-}(React.Component);
-
-_defineProperty(Drag, "propTypes", {
+import useDrag from './useDrag';
+export default function Drag(_ref) {
+  var _ref$captureDragArea = _ref.captureDragArea,
+      captureDragArea = _ref$captureDragArea === void 0 ? true : _ref$captureDragArea,
+      children = _ref.children,
+      dx = _ref.dx,
+      dy = _ref.dy,
+      height = _ref.height,
+      onDragEnd = _ref.onDragEnd,
+      onDragMove = _ref.onDragMove,
+      onDragStart = _ref.onDragStart,
+      resetOnStart = _ref.resetOnStart,
+      width = _ref.width,
+      x = _ref.x,
+      y = _ref.y;
+  var drag = useDrag({
+    resetOnStart: resetOnStart,
+    onDragEnd: onDragEnd,
+    onDragMove: onDragMove,
+    onDragStart: onDragStart,
+    x: x,
+    y: y,
+    dx: dx,
+    dy: dy
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, drag.isDragging && captureDragArea && /*#__PURE__*/React.createElement("rect", {
+    width: width,
+    height: height,
+    onMouseMove: drag.dragMove,
+    onMouseUp: drag.dragEnd,
+    fill: "transparent"
+  }), children(drag));
+}
+Drag.propTypes = {
   children: _pt.func.isRequired,
   width: _pt.number.isRequired,
   height: _pt.number.isRequired,
-  captureDragArea: _pt.bool,
-  resetOnStart: _pt.bool,
-  onDragEnd: _pt.func,
-  onDragMove: _pt.func,
-  onDragStart: _pt.func
-});
-
-_defineProperty(Drag, "defaultProps", {
-  captureDragArea: true,
-  resetOnStart: false
-});
-
-export { Drag as default };
+  captureDragArea: _pt.bool
+};

esm/index.js

 export { default as Drag } from './Drag';
+export { default as useDrag } from './useDrag';
 export { default as raise } from './util/raise';

lib/Drag.d.ts

 import React from 'react';
-declare type MouseOrTouchEvent = React.MouseEvent | React.TouchEvent;
-export declare type DragProps = {
+import { UseDrag, UseDragOptions, HandlerArgs as HandlerArgsType } from './useDrag';
+export declare type HandlerArgs = HandlerArgsType;
+export declare type DragProps = UseDragOptions & {
     /** Children render function which is passed the state of dragging and callbacks for drag start/end/move. */
-    children: (args: ChildrenArgs) => React.ReactNode;
+    children: (args: UseDrag) => React.ReactNode;
     /** Width of the drag container. */
@@ -12,44 +13,4 @@ width: number;
     captureDragArea?: boolean;
-    /** Whether to reset drag state upon the start of a new drag. */
-    resetOnStart?: boolean;
-    /** Optional callback invoked upon drag end. */
-    onDragEnd?: (args: HandlerArgs) => void;
-    /** Optional callback invoked upon drag movement. */
-    onDragMove?: (args: HandlerArgs) => void;
-    /** Optional callback invoked upon drag start. */
-    onDragStart?: (args: HandlerArgs) => void;
 };
-export declare type DragState = {
-    x: number | undefined;
-    y: number | undefined;
-    dx: number;
-    dy: number;
-    isDragging: boolean;
-};
-export declare type HandlerArgs = DragState & {
-    event: MouseOrTouchEvent;
-};
-declare type ChildrenArgs = DragState & {
-    dragEnd: (event: MouseOrTouchEvent) => void;
-    dragMove: (event: MouseOrTouchEvent) => void;
-    dragStart: (event: MouseOrTouchEvent) => void;
-};
-export default class Drag extends React.Component<DragProps, DragState> {
-    static defaultProps: {
-        captureDragArea: boolean;
-        resetOnStart: boolean;
-    };
-    state: {
-        x: undefined;
-        y: undefined;
-        dx: number;
-        dy: number;
-        isDragging: boolean;
-    };
-    handleDragStart: (event: MouseOrTouchEvent) => void;
-    handleDragMove: (event: MouseOrTouchEvent) => void;
-    handleDragEnd: (event: MouseOrTouchEvent) => void;
-    render(): JSX.Element;
-}
-export {};
+export default function Drag({ captureDragArea, children, dx, dy, height, onDragEnd, onDragMove, onDragStart, resetOnStart, width, x, y, }: DragProps): JSX.Element;
 //# sourceMappingURL=Drag.d.ts.map

lib/Drag.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = Drag;
 
@@ -10,152 +10,45 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _event = require("@visx/event");
+var _useDrag = _interopRequireDefault(require("./useDrag"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* eslint-disable react/jsx-handler-names */
+function Drag(_ref) {
+  var _ref$captureDragArea = _ref.captureDragArea,
+      captureDragArea = _ref$captureDragArea === void 0 ? true : _ref$captureDragArea,
+      children = _ref.children,
+      dx = _ref.dx,
+      dy = _ref.dy,
+      height = _ref.height,
+      onDragEnd = _ref.onDragEnd,
+      onDragMove = _ref.onDragMove,
+      onDragStart = _ref.onDragStart,
+      resetOnStart = _ref.resetOnStart,
+      width = _ref.width,
+      x = _ref.x,
+      y = _ref.y;
+  var drag = (0, _useDrag.default)({
+    resetOnStart: resetOnStart,
+    onDragEnd: onDragEnd,
+    onDragMove: onDragMove,
+    onDragStart: onDragStart,
+    x: x,
+    y: y,
+    dx: dx,
+    dy: dy
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, drag.isDragging && captureDragArea && /*#__PURE__*/_react.default.createElement("rect", {
+    width: width,
+    height: height,
+    onMouseMove: drag.dragMove,
+    onMouseUp: drag.dragEnd,
+    fill: "transparent"
+  }), children(drag));
+}
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var Drag = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Drag, _React$Component);
-
-  function Drag() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      x: undefined,
-      y: undefined,
-      dx: 0,
-      dy: 0,
-      isDragging: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (event) {
-      var _this$props = _this.props,
-          onDragStart = _this$props.onDragStart,
-          resetOnStart = _this$props.resetOnStart;
-      event.persist();
-
-      _this.setState(function (_ref) {
-        var dx = _ref.dx,
-            dy = _ref.dy;
-        var point = (0, _event.localPoint)(event) || {
-          x: 0,
-          y: 0
-        };
-        return {
-          isDragging: true,
-          dx: resetOnStart ? 0 : dx,
-          dy: resetOnStart ? 0 : dy,
-          x: resetOnStart ? point.x : point.x - dx,
-          y: resetOnStart ? point.y : point.y - dy
-        };
-      }, onDragStart && function () {
-        onDragStart(_extends({}, _this.state, {
-          event: event
-        }));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragMove", function (event) {
-      var onDragMove = _this.props.onDragMove;
-      event.persist();
-
-      _this.setState(function (_ref2) {
-        var x = _ref2.x,
-            y = _ref2.y,
-            isDragging = _ref2.isDragging;
-        var point = (0, _event.localPoint)(event) || {
-          x: 0,
-          y: 0
-        };
-        return isDragging ? {
-          isDragging: true,
-          dx: point.x - (x || 0),
-          dy: point.y - (y || 0)
-        } : null;
-      }, onDragMove && function () {
-        if (_this.state.isDragging) onDragMove(_extends({}, _this.state, {
-          event: event
-        }));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragEnd", function (event) {
-      var onDragEnd = _this.props.onDragEnd;
-      event.persist();
-
-      _this.setState({
-        isDragging: false
-      }, onDragEnd && function () {
-        onDragEnd(_extends({}, _this.state, {
-          event: event
-        }));
-      });
-    });
-
-    return _this;
-  }
-
-  var _proto = Drag.prototype;
-
-  _proto.render = function render() {
-    var _this$state = this.state,
-        x = _this$state.x,
-        y = _this$state.y,
-        dx = _this$state.dx,
-        dy = _this$state.dy,
-        isDragging = _this$state.isDragging;
-    var _this$props2 = this.props,
-        children = _this$props2.children,
-        width = _this$props2.width,
-        height = _this$props2.height,
-        captureDragArea = _this$props2.captureDragArea;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragging && captureDragArea && /*#__PURE__*/_react.default.createElement("rect", {
-      width: width,
-      height: height,
-      onMouseMove: this.handleDragMove,
-      onMouseUp: this.handleDragEnd,
-      fill: "transparent"
-    }), children({
-      x: x,
-      y: y,
-      dx: dx,
-      dy: dy,
-      isDragging: isDragging,
-      dragEnd: this.handleDragEnd,
-      dragMove: this.handleDragMove,
-      dragStart: this.handleDragStart
-    }));
-  };
-
-  return Drag;
-}(_react.default.Component);
-
-exports.default = Drag;
-
-_defineProperty(Drag, "propTypes", {
+Drag.propTypes = {
   children: _propTypes.default.func.isRequired,
   width: _propTypes.default.number.isRequired,
   height: _propTypes.default.number.isRequired,
-  captureDragArea: _propTypes.default.bool,
-  resetOnStart: _propTypes.default.bool,
-  onDragEnd: _propTypes.default.func,
-  onDragMove: _propTypes.default.func,
-  onDragStart: _propTypes.default.func
-});
-
-_defineProperty(Drag, "defaultProps", {
-  captureDragArea: true,
-  resetOnStart: false
-});
+  captureDragArea: _propTypes.default.bool
+};

lib/index.d.ts

 export { default as Drag } from './Drag';
+export { default as useDrag } from './useDrag';
 export { default as raise } from './util/raise';
 //# sourceMappingURL=index.d.ts.map

lib/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.raise = exports.Drag = void 0;
+exports.raise = exports.useDrag = exports.Drag = void 0;
 
@@ -10,2 +10,6 @@ var _Drag = _interopRequireDefault(require("./Drag"));
 
+var _useDrag = _interopRequireDefault(require("./useDrag"));
+
+exports.useDrag = _useDrag.default;
+
 var _raise = _interopRequireDefault(require("./util/raise"));
@@ -12,0 +16,0 @@

package.json

 {
   "name": "@visx/drag",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "visx drag",
@@ -34,3 +34,3 @@ "sideEffects": false,
   "peerDependencies": {
-    "react": "^16.3.0-0"
+    "react": "^16.8.0-0"
   },
@@ -42,3 +42,3 @@ "dependencies": {
   },
-  "gitHead": "598445514c93f22b1b7c399efa894b0778fd6ca6"
+  "gitHead": "e2bbccba2f642cfc7e840f669704b19f2379e75f"
 }

Readme.md

@@ -7,3 +7,3 @@ # @visx/drag
 
-`@visx/drag` provides `react` components for making items within an interface (or chart) draggable.
+`@visx/drag` provides `react` components and hooks for making items within an interface (or chart) draggable.
 
@@ -10,0 +10,0 @@ ## Installation

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

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

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

Total package byte prevSize

23645

increased by35.52%

Number of package files

23

increased by53.33%

Lines of code

447

increased by29.19%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes