@uiw/react-drag-event-interactive
Advanced tools
Comparing version 1.1.0 to 1.1.1
"use strict"; | ||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; | ||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"]; | ||
Object.defineProperty(exports, "__esModule", { | ||
@@ -12,13 +10,7 @@ value: true | ||
exports["default"] = void 0; | ||
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _utils = require("./utils"); | ||
Object.keys(_utils).forEach(function (key) { | ||
@@ -35,26 +27,22 @@ if (key === "default" || key === "__esModule") return; | ||
}); | ||
var _jsxRuntime = require("react/jsx-runtime"); | ||
var _excluded = ["prefixCls", "className", "onMove", "onDown"]; | ||
var Interactive = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) { | ||
var _props$prefixCls = props.prefixCls, | ||
prefixCls = _props$prefixCls === void 0 ? 'w-color-interactive' : _props$prefixCls, | ||
className = props.className, | ||
onMove = props.onMove, | ||
onDown = props.onDown, | ||
reset = (0, _objectWithoutProperties2["default"])(props, _excluded); | ||
prefixCls = _props$prefixCls === void 0 ? 'w-color-interactive' : _props$prefixCls, | ||
className = props.className, | ||
onMove = props.onMove, | ||
onDown = props.onDown, | ||
reset = (0, _objectWithoutProperties2["default"])(props, _excluded); | ||
var container = (0, _react.useRef)(null); | ||
var hasTouched = (0, _react.useRef)(false); | ||
var _useState = (0, _react.useState)(false), | ||
_useState2 = (0, _slicedToArray2["default"])(_useState, 2), | ||
isDragging = _useState2[0], | ||
setDragging = _useState2[1]; | ||
_useState2 = (0, _slicedToArray2["default"])(_useState, 2), | ||
isDragging = _useState2[0], | ||
setDragging = _useState2[1]; | ||
var onMoveCallback = (0, _utils.useEventCallback)(onMove); | ||
var onKeyCallback = (0, _utils.useEventCallback)(onDown); | ||
var onMoveCallback = (0, _utils.useEventCallback)(onMove); | ||
var onKeyCallback = (0, _utils.useEventCallback)(onDown); // Prevent mobile browsers from handling mouse events (conflicting with touch ones). | ||
// Prevent mobile browsers from handling mouse events (conflicting with touch ones). | ||
// If we detected a touch interaction before, we prefer reacting to touch events only. | ||
var isValid = function isValid(event) { | ||
@@ -65,5 +53,5 @@ if (hasTouched.current && !(0, _utils.isTouch)(event)) return false; | ||
}; | ||
var handleMove = (0, _react.useCallback)(function (event) { | ||
(0, _utils.preventDefaultMove)(event); // If user moves the pointer outside of the window or iframe bounds and release it there, | ||
(0, _utils.preventDefaultMove)(event); | ||
// If user moves the pointer outside of the window or iframe bounds and release it there, | ||
// `mouseup`/`touchend` won't be fired. In order to stop the picker from following the cursor | ||
@@ -73,5 +61,3 @@ // after the user has moved the mouse/finger back to the document, we check `event.buttons` | ||
// without pressing it down | ||
var isDown = (0, _utils.isTouch)(event) ? event.touches.length > 0 : event.buttons > 0; | ||
if (isDown && container.current) { | ||
@@ -114,3 +100,2 @@ onMoveCallback && onMoveCallback((0, _utils.getRelativePosition)(container.current, event), event); | ||
}); | ||
Interactive.displayName = 'Interactive'; | ||
@@ -117,0 +102,0 @@ var _default = Interactive; |
@@ -8,5 +8,3 @@ "use strict"; | ||
exports.useEventCallback = useEventCallback; | ||
var _react = require("react"); | ||
// Saves incoming handler to the ref in order to avoid "useCallback hell" | ||
@@ -21,23 +19,20 @@ function useEventCallback(handler) { | ||
}, []); | ||
} // Check if an event was triggered by touch | ||
} | ||
// Check if an event was triggered by touch | ||
var isTouch = function isTouch(event) { | ||
return 'touches' in event; | ||
}; // Browsers introduced an intervention, making touch events passive by default. | ||
}; | ||
// Browsers introduced an intervention, making touch events passive by default. | ||
// This workaround removes `preventDefault` call from the touch handlers. | ||
// https://github.com/facebook/react/issues/19651 | ||
exports.isTouch = isTouch; | ||
var preventDefaultMove = function preventDefaultMove(event) { | ||
!isTouch(event) && event.preventDefault && event.preventDefault(); | ||
}; // Clamps a value between an upper and lower bound. | ||
}; | ||
// Clamps a value between an upper and lower bound. | ||
// We use ternary operators because it makes the minified code | ||
// 2 times shorter then `Math.min(Math.max(a,b),c)` | ||
exports.preventDefaultMove = preventDefaultMove; | ||
var clamp = function clamp(number) { | ||
@@ -48,9 +43,8 @@ var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; | ||
}; | ||
exports.clamp = clamp; | ||
// Returns a relative position of the pointer inside the node's bounding box | ||
var getRelativePosition = function getRelativePosition(node, event) { | ||
var rect = node.getBoundingClientRect(); // Get user's pointer position from `touches` array if it's a `TouchEvent` | ||
var rect = node.getBoundingClientRect(); | ||
// Get user's pointer position from `touches` array if it's a `TouchEvent` | ||
var pointer = isTouch(event) ? event.touches[0] : event; | ||
@@ -66,4 +60,3 @@ return { | ||
}; | ||
exports.getRelativePosition = getRelativePosition; | ||
//# sourceMappingURL=utils.js.map |
@@ -10,9 +10,8 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
var { | ||
prefixCls = 'w-color-interactive', | ||
className, | ||
onMove, | ||
onDown | ||
} = props, | ||
reset = _objectWithoutPropertiesLoose(props, _excluded); | ||
prefixCls = 'w-color-interactive', | ||
className, | ||
onMove, | ||
onDown | ||
} = props, | ||
reset = _objectWithoutPropertiesLoose(props, _excluded); | ||
var container = useRef(null); | ||
@@ -22,5 +21,6 @@ var hasTouched = useRef(false); | ||
var onMoveCallback = useEventCallback(onMove); | ||
var onKeyCallback = useEventCallback(onDown); // Prevent mobile browsers from handling mouse events (conflicting with touch ones). | ||
var onKeyCallback = useEventCallback(onDown); | ||
// Prevent mobile browsers from handling mouse events (conflicting with touch ones). | ||
// If we detected a touch interaction before, we prefer reacting to touch events only. | ||
var isValid = event => { | ||
@@ -31,5 +31,5 @@ if (hasTouched.current && !isTouch(event)) return false; | ||
}; | ||
var handleMove = useCallback(event => { | ||
preventDefaultMove(event); // If user moves the pointer outside of the window or iframe bounds and release it there, | ||
preventDefaultMove(event); | ||
// If user moves the pointer outside of the window or iframe bounds and release it there, | ||
// `mouseup`/`touchend` won't be fired. In order to stop the picker from following the cursor | ||
@@ -39,5 +39,3 @@ // after the user has moved the mouse/finger back to the document, we check `event.buttons` | ||
// without pressing it down | ||
var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0; | ||
if (isDown && container.current) { | ||
@@ -44,0 +42,0 @@ onMoveCallback && onMoveCallback(getRelativePosition(container.current, event), event); |
@@ -1,3 +0,4 @@ | ||
import { useRef, useEffect, useCallback } from 'react'; // Saves incoming handler to the ref in order to avoid "useCallback hell" | ||
import { useRef, useEffect, useCallback } from 'react'; | ||
// Saves incoming handler to the ref in order to avoid "useCallback hell" | ||
export function useEventCallback(handler) { | ||
@@ -9,14 +10,16 @@ var callbackRef = useRef(handler); | ||
return useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []); | ||
} // Check if an event was triggered by touch | ||
} | ||
export var isTouch = event => 'touches' in event; // Browsers introduced an intervention, making touch events passive by default. | ||
// Check if an event was triggered by touch | ||
export var isTouch = event => 'touches' in event; | ||
// Browsers introduced an intervention, making touch events passive by default. | ||
// This workaround removes `preventDefault` call from the touch handlers. | ||
// https://github.com/facebook/react/issues/19651 | ||
export var preventDefaultMove = event => { | ||
!isTouch(event) && event.preventDefault && event.preventDefault(); | ||
}; // Clamps a value between an upper and lower bound. | ||
}; | ||
// Clamps a value between an upper and lower bound. | ||
// We use ternary operators because it makes the minified code | ||
// 2 times shorter then `Math.min(Math.max(a,b),c)` | ||
export var clamp = function clamp(number, min, max) { | ||
@@ -26,7 +29,5 @@ if (min === void 0) { | ||
} | ||
if (max === void 0) { | ||
max = 1; | ||
} | ||
return number > max ? max : number < min ? min : number; | ||
@@ -36,4 +37,5 @@ }; | ||
export var getRelativePosition = (node, event) => { | ||
var rect = node.getBoundingClientRect(); // Get user's pointer position from `touches` array if it's a `TouchEvent` | ||
var rect = node.getBoundingClientRect(); | ||
// Get user's pointer position from `touches` array if it's a `TouchEvent` | ||
var pointer = isTouch(event) ? event.touches[0] : event; | ||
@@ -40,0 +42,0 @@ return { |
{ | ||
"name": "@uiw/react-drag-event-interactive", | ||
"version": "1.1.0", | ||
"version": "1.1.1", | ||
"description": "react drag event interactive", | ||
@@ -36,4 +36,4 @@ "homepage": "https://uiwjs.github.io/react-color/#/drag-event-interactive", | ||
"dependencies": { | ||
"@babel/runtime": "~7.18.0" | ||
"@babel/runtime": "~7.19.0" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
432
45433
13
+ Added@babel/runtime@7.19.4(transitive)
- Removed@babel/runtime@7.18.9(transitive)
Updated@babel/runtime@~7.19.0