@uiw/react-color-wheel - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

cjs/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,42 +8,32 @@ value: true
 exports["default"] = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _colorConvert = require("@uiw/color-convert");
-
 var _reactDragEventInteractive = _interopRequireDefault(require("@uiw/react-drag-event-interactive"));
-
 var _Pointer = require("./Pointer");
-
 var _utils = require("./utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["prefixCls", "radius", "pointer", "className", "style", "width", "height", "direction", "angle", "color", "onChange"];
 var HUE_GRADIENT_CLOCKWISE = 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)';
 var HUE_GRADIENT_ANTICLOCKWISE = 'conic-gradient(red, magenta, blue, aqua, lime, yellow, red)';
-
 var Wheel = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var _props$prefixCls = props.prefixCls,
-      prefixCls = _props$prefixCls === void 0 ? 'w-color-wheel' : _props$prefixCls,
-      _props$radius = props.radius,
-      radius = _props$radius === void 0 ? 0 : _props$radius,
-      pointer = props.pointer,
-      className = props.className,
-      style = props.style,
-      _props$width = props.width,
-      width = _props$width === void 0 ? 200 : _props$width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 200 : _props$height,
-      _props$direction = props.direction,
-      direction = _props$direction === void 0 ? 'anticlockwise' : _props$direction,
-      _props$angle = props.angle,
-      angle = _props$angle === void 0 ? 180 : _props$angle,
-      color = props.color,
-      onChange = props.onChange,
-      other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    prefixCls = _props$prefixCls === void 0 ? 'w-color-wheel' : _props$prefixCls,
+    _props$radius = props.radius,
+    radius = _props$radius === void 0 ? 0 : _props$radius,
+    pointer = props.pointer,
+    className = props.className,
+    style = props.style,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 200 : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 200 : _props$height,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'anticlockwise' : _props$direction,
+    _props$angle = props.angle,
+    angle = _props$angle === void 0 ? 180 : _props$angle,
+    color = props.color,
+    onChange = props.onChange,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var hsva = typeof color === 'string' && (0, _colorConvert.validHex)(color) ? (0, _colorConvert.hexToHsva)(color) : color || {};
@@ -60,3 +49,2 @@ var hex = color ? (0, _colorConvert.hsvaToHex)(hsva) : '';
   };
-
   var handleChange = function handleChange(interaction, event) {
@@ -74,3 +62,2 @@ var result = (0, _utils.getWheelValueFromInput)({
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactDragEventInteractive["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -119,3 +106,2 @@ className: [prefixCls, className || ''].filter(Boolean).join(' ')
 });
-
 Wheel.displayName = 'Wheel';
@@ -122,0 +108,0 @@ var _default = Wheel;

cjs/Pointer.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,18 +8,13 @@ value: true
 exports.Pointer = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-var _react = _interopRequireWildcard(require("react"));
-
+var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
-
 var BOXSHADOW = 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px';
-
 var Pointer = function Pointer(_ref) {
   var className = _ref.className,
-      color = _ref.color,
-      left = _ref.left,
-      top = _ref.top,
-      style = _ref.style,
-      prefixCls = _ref.prefixCls;
+    color = _ref.color,
+    left = _ref.left,
+    top = _ref.top,
+    style = _ref.style,
+    prefixCls = _ref.prefixCls;
   var styleWarp = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
@@ -33,30 +25,28 @@ position: 'absolute',
   });
-  return (0, _react.useMemo)(function () {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixCls, "-pointer ").concat(className || ''),
-      style: styleWarp,
+  var cls = "".concat(prefixCls, "-pointer ").concat(className || '');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    style: styleWarp,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixCls, "-fill"),
+      style: {
+        width: 10,
+        height: 10,
+        transform: 'translate(-5px, -5px)',
+        boxShadow: BOXSHADOW,
+        borderRadius: '50%',
+        backgroundColor: '#fff'
+      },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "".concat(prefixCls, "-fill"),
         style: {
-          width: 10,
-          height: 10,
-          transform: 'translate(-5px, -5px)',
-          boxShadow: BOXSHADOW,
+          inset: 0,
           borderRadius: '50%',
-          backgroundColor: '#fff'
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            inset: 0,
-            borderRadius: '50%',
-            position: 'absolute',
-            backgroundColor: color
-          }
-        })
+          position: 'absolute',
+          backgroundColor: color
+        }
       })
-    });
-  }, [top, left, color, className, prefixCls]);
+    })
+  });
 };
-
 exports.Pointer = Pointer;
 //# sourceMappingURL=Pointer.js.map

cjs/utils.js

@@ -14,2 +14,3 @@ "use strict";
 var TAU = Math.PI * 2;
+
 /**
@@ -19,22 +20,18 @@ * javascript's modulo operator doesn't produce positive numbers with negative input
  */
-
 var mod = function mod(a, n) {
   return (a % n + n) % n;
 };
+
 /** distance between points (x, y) and (0, 0) */
-
-
 exports.mod = mod;
-
 var dist = function dist(x, y) {
   return Math.sqrt(x * x + y * y);
 };
+
 /**
  * Get the point as the center of the wheel
  */
-
-
 function getWheelDimensions(_ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 0 : _ref$width;
+    width = _ref$width === void 0 ? 0 : _ref$width;
   var r = width / 2;
@@ -48,26 +45,22 @@ return {
 }
+
 /**
  * Returns true if point (x, y) lands inside the wheel
  */
-
-
 function isInputInsideWheel(props, x, y) {
   var _getWheelDimensions = getWheelDimensions(props),
-      cx = _getWheelDimensions.cx,
-      cy = _getWheelDimensions.cy,
-      width = _getWheelDimensions.width;
-
+    cx = _getWheelDimensions.cx,
+    cy = _getWheelDimensions.cy,
+    width = _getWheelDimensions.width;
   var r = width / 2;
   return dist(cx - x, cy - y) < r;
 }
+
 /**
  * Get the current handle position for a given color
  */
-
-
 function getWheelHandlePosition(props, hsv) {
   var _getWheelDimensions2 = getWheelDimensions(props),
-      cx = _getWheelDimensions2.cx,
-      cy = _getWheelDimensions2.cy;
-
+    cx = _getWheelDimensions2.cx,
+    cy = _getWheelDimensions2.cy;
   var handleRange = getHandleRange(props);
@@ -82,27 +75,29 @@ var handleAngle = (180 + translateWheelAngle(props, hsv.h, true)) * (TAU / 360);
 }
+
 /**
  * Get Range
  */
-
-
 function getHandleRange(_ref2) {
   var _ref2$width = _ref2.width,
-      width = _ref2$width === void 0 ? 0 : _ref2$width;
+    width = _ref2$width === void 0 ? 0 : _ref2$width;
   return width / 2;
 }
+
 /**
  * Translate an angle according to wheelAngle and wheelDirection
  */
-
-
 function translateWheelAngle(props, angle, invert) {
   var wheelAngle = props.angle || 0;
-  var direction = props.direction; // inverted and clockwisee
-
-  if (invert && direction === 'clockwise') angle = wheelAngle + angle; // clockwise (input handling)
-  else if (direction === 'clockwise') angle = 360 - wheelAngle + angle; // inverted and anticlockwise
-  else if (invert && direction === 'anticlockwise') angle = wheelAngle + 180 - angle; // anticlockwise (input handling)
+  var direction = props.direction;
+  // inverted and clockwisee
+  if (invert && direction === 'clockwise') angle = wheelAngle + angle;
+  // clockwise (input handling)
+  else if (direction === 'clockwise') angle = 360 - wheelAngle + angle;
+  // inverted and anticlockwise
+  else if (invert && direction === 'anticlockwise') angle = wheelAngle + 180 - angle;
+  // anticlockwise (input handling)
   else if (direction === 'anticlockwise') angle = wheelAngle - angle;
   return mod(angle, 360);
 }
+
 /**
@@ -114,16 +109,13 @@ * Get the current wheel value from user input
  */
-
-
 function getWheelValueFromInput(props, x, y) {
   var _getWheelDimensions3 = getWheelDimensions(props),
-      cx = _getWheelDimensions3.cx,
-      cy = _getWheelDimensions3.cy;
-
+    cx = _getWheelDimensions3.cx,
+    cy = _getWheelDimensions3.cy;
   var handleRange = getHandleRange(props);
   x = cx - x;
-  y = cy - y; // Calculate the hue by converting the angle to radians
-
-  var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (360 / TAU)); // Find the point's distance from the center of the wheel
+  y = cy - y;
+  // Calculate the hue by converting the angle to radians
+  var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (360 / TAU));
+  // Find the point's distance from the center of the wheel
   // This is used to show the saturation level
-
   var handleDist = Math.min(dist(x, y), handleRange);
@@ -130,0 +122,0 @@ return {

esm/index.js

@@ -15,16 +15,15 @@ import _extends from "@babel/runtime/helpers/extends";
   var {
-    prefixCls = 'w-color-wheel',
-    radius = 0,
-    pointer,
-    className,
-    style,
-    width = 200,
-    height = 200,
-    direction = 'anticlockwise',
-    angle = 180,
-    color,
-    onChange
-  } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      prefixCls = 'w-color-wheel',
+      radius = 0,
+      pointer,
+      className,
+      style,
+      width = 200,
+      height = 200,
+      direction = 'anticlockwise',
+      angle = 180,
+      color,
+      onChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   var hsva = typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {};
@@ -40,3 +39,2 @@ var hex = color ? hsvaToHex(hsva) : '';
   };
-
   var handleChange = (interaction, event) => {
@@ -54,3 +52,2 @@ var result = getWheelValueFromInput({
   };
-
   return /*#__PURE__*/_jsxs(Interactive, _extends({
@@ -57,0 +54,0 @@ className: [prefixCls, className || ''].filter(Boolean).join(' ')

esm/Pointer.js

 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,3 +14,2 @@ var BOXSHADOW = 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px';
   } = _ref;
-
   var styleWarp = _extends({}, style, {
@@ -22,5 +20,5 @@ position: 'absolute',
   });
-
-  return useMemo(() => /*#__PURE__*/_jsx("div", {
-    className: prefixCls + "-pointer " + (className || ''),
+  var cls = prefixCls + "-pointer " + (className || '');
+  return /*#__PURE__*/_jsx("div", {
+    className: cls,
     style: styleWarp,
@@ -46,4 +44,4 @@ children: /*#__PURE__*/_jsx("div", {
     })
-  }), [top, left, color, className, prefixCls]);
+  });
 };
 //# sourceMappingURL=Pointer.js.map

esm/utils.js

 var TAU = Math.PI * 2;
+
 /**
@@ -6,12 +7,10 @@ * javascript's modulo operator doesn't produce positive numbers with negative input
  */
+export var mod = (a, n) => (a % n + n) % n;
 
-export var mod = (a, n) => (a % n + n) % n;
 /** distance between points (x, y) and (0, 0) */
+var dist = (x, y) => Math.sqrt(x * x + y * y);
 
-var dist = (x, y) => Math.sqrt(x * x + y * y);
 /**
  * Get the point as the center of the wheel
  */
-
-
 export function getWheelDimensions(_ref) {
@@ -29,6 +28,6 @@ var {
 }
+
 /**
  * Returns true if point (x, y) lands inside the wheel
  */
-
 export function isInputInsideWheel(props, x, y) {
@@ -43,6 +42,6 @@ var {
 }
+
 /**
  * Get the current handle position for a given color
  */
-
 export function getWheelHandlePosition(props, hsv) {
@@ -62,6 +61,6 @@ var {
 }
+
 /**
  * Get Range
  */
-
 export function getHandleRange(_ref2) {
@@ -73,16 +72,20 @@ var {
 }
+
 /**
  * Translate an angle according to wheelAngle and wheelDirection
  */
-
 export function translateWheelAngle(props, angle, invert) {
   var wheelAngle = props.angle || 0;
-  var direction = props.direction; // inverted and clockwisee
-
-  if (invert && direction === 'clockwise') angle = wheelAngle + angle; // clockwise (input handling)
-  else if (direction === 'clockwise') angle = 360 - wheelAngle + angle; // inverted and anticlockwise
-  else if (invert && direction === 'anticlockwise') angle = wheelAngle + 180 - angle; // anticlockwise (input handling)
+  var direction = props.direction;
+  // inverted and clockwisee
+  if (invert && direction === 'clockwise') angle = wheelAngle + angle;
+  // clockwise (input handling)
+  else if (direction === 'clockwise') angle = 360 - wheelAngle + angle;
+  // inverted and anticlockwise
+  else if (invert && direction === 'anticlockwise') angle = wheelAngle + 180 - angle;
+  // anticlockwise (input handling)
   else if (direction === 'anticlockwise') angle = wheelAngle - angle;
   return mod(angle, 360);
 }
+
 /**
@@ -94,3 +97,2 @@ * Get the current wheel value from user input
  */
-
 export function getWheelValueFromInput(props, x, y) {
@@ -103,7 +105,7 @@ var {
   x = cx - x;
-  y = cy - y; // Calculate the hue by converting the angle to radians
-
-  var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (360 / TAU)); // Find the point's distance from the center of the wheel
+  y = cy - y;
+  // Calculate the hue by converting the angle to radians
+  var hue = translateWheelAngle(props, Math.atan2(-y, -x) * (360 / TAU));
+  // Find the point's distance from the center of the wheel
   // This is used to show the saturation level
-
   var handleDist = Math.min(dist(x, y), handleRange);
@@ -110,0 +112,0 @@ return {

package.json

 {
   "name": "@uiw/react-color-wheel",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Color wheel",
@@ -37,6 +37,6 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@babel/runtime": "~7.18.0",
-    "@uiw/color-convert": "1.1.0",
-    "@uiw/react-drag-event-interactive": "1.1.0"
+    "@babel/runtime": "~7.19.0",
+    "@uiw/color-convert": "1.1.1",
+    "@uiw/react-drag-event-interactive": "1.1.1"
   }
 }

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

Lines of code

880

increased by0.92%

Worsened metrics

Total package byte prevSize

65113

decreased by-1.73%

Dependency changes

• + Added@babel/runtime@7.19.4(transitive)

• + Added@uiw/color-convert@1.1.1(transitive)

• + Added@uiw/react-drag-event-interactive@1.1.1(transitive)

• - Removed@babel/runtime@7.18.9(transitive)

• - Removed@uiw/color-convert@1.1.0(transitive)

• - Removed@uiw/react-drag-event-interactive@1.1.0(transitive)

• Updated@babel/runtime@~7.19.0

• Updated@uiw/color-convert@1.1.1

• Updated@uiw/react-drag-event-interactive@1.1.1