react-canvas-color-picker - npm Package Compare versions

Comparing version 1.0.20 to 1.0.21

dist/components/Alpha/Alpha.js

@@ -1,7 +0,19 @@
-import * as React from "react";
-import Handle from "../Handle/Handle";
-import { formatColorBySpectrum } from "../../utils";
-import { COLOR_PICKER_CLASSNAME } from "../../constants";
-import styles from "./Alpha.module.css";
-import baseStyles from "../ColorPicker/ColorPicker.module.css";
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const Handle_1 = __importDefault(require("../Handle/Handle"));
+const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
+const Alpha_module_css_1 = __importDefault(require("./Alpha.module.css"));
+const ColorPicker_module_css_1 = __importDefault(require("../ColorPicker/ColorPicker.module.css"));
 function Alpha(props) {
@@ -21,3 +33,3 @@ const { hue, alpha, saturation, lightness, value, spectrum, width: w, height: h, handleClasses, className, } = props;
         }
-        : formatColorBySpectrum({
+        : utils_1.formatColorBySpectrum({
             h: hue,
@@ -42,3 +54,3 @@ s: saturation,
     }, [hue, x, dpi, height, width, gradientColor]);
-    return (React.createElement("div", { id: "alpha", className: `${COLOR_PICKER_CLASSNAME} ${styles.container} ${baseStyles.color_picker} ${className}` },
+    return (React.createElement("div", { id: "alpha", className: `${constants_1.COLOR_PICKER_CLASSNAME} ${Alpha_module_css_1.default.container} ${ColorPicker_module_css_1.default.color_picker} ${className}` },
         React.createElement("canvas", { style: {
@@ -48,4 +60,4 @@ width: `${width / dpi}px`,
             }, width: width, height: height, ref: canvasRef }),
-        React.createElement(Handle, { className: handleClasses, hue: gradientColor.h, alpha: alpha, saturation: gradientColor.s, lightness: gradientColor.l, spectrumFormat: "hsla", x: x, y: height / 2 })));
+        React.createElement(Handle_1.default, { className: handleClasses, hue: gradientColor.h, alpha: alpha, saturation: gradientColor.s, lightness: gradientColor.l, spectrumFormat: "hsla", x: x, y: height / 2 })));
 }
-export default React.memo(Alpha);
+exports.default = React.memo(Alpha);

dist/components/ColorPicker/ColorPicker.js

@@ -1,9 +0,21 @@
-import * as React from "react";
-import Hue from "../Hue/Hue";
-import Spectrum from "../Spectrum/Spectrum";
-import Alpha from "../Alpha/Alpha";
-import usePanClosestElement from "../../hooks/usePanClosestElement";
-import { COLOR_PICKER_CLASSNAME } from "../../constants/index";
-import { formatColorBySpectrum, getColorChanges, getColorFormats, } from "../../utils/index";
-import styles from "./ColorPicker.module.css";
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const Hue_1 = __importDefault(require("../Hue/Hue"));
+const Spectrum_1 = __importDefault(require("../Spectrum/Spectrum"));
+const Alpha_1 = __importDefault(require("../Alpha/Alpha"));
+const usePanClosestElement_1 = __importDefault(require("../../hooks/usePanClosestElement"));
+const index_1 = require("../../constants/index");
+const index_2 = require("../../utils/index");
+const ColorPicker_module_css_1 = __importDefault(require("./ColorPicker.module.css"));
 const defaultFormats = ["rgba"];
@@ -14,3 +26,3 @@ const defaultColor = { r: 255, g: 255, b: 255, a: 1 };
     const [color, setColor] = React.useState(() => {
-        return formatColorBySpectrum(initialColor, spectrum);
+        return index_2.formatColorBySpectrum(initialColor, spectrum);
     });
@@ -28,3 +40,3 @@ const isFirstRender = React.useRef(true);
     const sendChanges = React.useCallback(() => {
-        const colors = getColorFormats(colorRef.current, formats);
+        const colors = index_2.getColorFormats(colorRef.current, formats);
         if (onPan) {
@@ -45,6 +57,6 @@ onPan({ colors, canvasId: "none" });
     const handlePanStart = React.useCallback((event) => {
-        const newColor = getColorChanges(event, colorRef.current);
+        const newColor = index_2.getColorChanges(event, colorRef.current);
         setColor(newColor);
         if (onPanStart) {
-            const colors = getColorFormats(newColor, formats);
+            const colors = index_2.getColorFormats(newColor, formats);
             onPanStart({ colors, canvasId: event.elementId });
@@ -54,6 +66,6 @@ }
     const handlePan = React.useCallback((event) => {
-        const newColor = getColorChanges(event, colorRef.current);
+        const newColor = index_2.getColorChanges(event, colorRef.current);
         setColor(newColor);
         if (onPan) {
-            const colors = getColorFormats(newColor, formats);
+            const colors = index_2.getColorFormats(newColor, formats);
             onPan({ colors, canvasId: event.elementId });
@@ -63,11 +75,11 @@ }
     const handlePanEnd = React.useCallback((event) => {
-        const newColor = getColorChanges(event, colorRef.current);
+        const newColor = index_2.getColorChanges(event, colorRef.current);
         setColor(newColor);
         if (onPanEnd) {
-            const colors = getColorFormats(newColor, formats);
+            const colors = index_2.getColorFormats(newColor, formats);
             onPanEnd({ colors, canvasId: event.elementId });
         }
     }, [onPanEnd, formats]);
-    usePanClosestElement({
-        className: className || COLOR_PICKER_CLASSNAME,
+    usePanClosestElement_1.default({
+        className: className || index_1.COLOR_PICKER_CLASSNAME,
         onPanStart: handlePanStart,
@@ -81,3 +93,3 @@ onPan: handlePan,
             if (typeof spectrum !== "undefined") {
-                return formatColorBySpectrum(state, spectrum);
+                return index_2.formatColorBySpectrum(state, spectrum);
             }
@@ -99,10 +111,10 @@ return state;
         setColor: (col) => {
-            setColor(formatColorBySpectrum(col, spectrum));
+            setColor(index_2.formatColorBySpectrum(col, spectrum));
         },
     }));
-    return (React.createElement("div", { className: `${styles.container} ${className}` },
-        React.createElement(Spectrum, { spectrumFormat: spectrumRef.current, hue: color.h, saturation: color.s, lightness: color.l, value: color.v, width: spectrumWidth, height: spectrumHeight, className: spectrumClasses, handleClasses: handleClasses }),
-        React.createElement(Hue, { hue: color.h, width: sliderWidth, height: sliderHeight, className: hueClasses, handleClasses: handleClasses }),
-        !hideAlpha && (React.createElement(Alpha, { hue: color.h, saturation: color.s, lightness: color.l, value: color.v, alpha: color.a, width: sliderWidth, spectrum: spectrumRef.current, height: sliderHeight, className: alphaClasses, handleClasses: handleClasses }))));
+    return (React.createElement("div", { className: `${ColorPicker_module_css_1.default.container} ${className}` },
+        React.createElement(Spectrum_1.default, { spectrumFormat: spectrumRef.current, hue: color.h, saturation: color.s, lightness: color.l, value: color.v, width: spectrumWidth, height: spectrumHeight, className: spectrumClasses, handleClasses: handleClasses }),
+        React.createElement(Hue_1.default, { hue: color.h, width: sliderWidth, height: sliderHeight, className: hueClasses, handleClasses: handleClasses }),
+        !hideAlpha && (React.createElement(Alpha_1.default, { hue: color.h, saturation: color.s, lightness: color.l, value: color.v, alpha: color.a, width: sliderWidth, spectrum: spectrumRef.current, height: sliderHeight, className: alphaClasses, handleClasses: handleClasses }))));
 });
-export default React.memo(ColorPicker);
+exports.default = React.memo(ColorPicker);

dist/components/Handle/Handle.js

@@ -1,4 +0,16 @@
-import * as React from "react";
-import { formatColorBySpectrum } from "../../utils";
-import styles from "./Handle.module.css";
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const utils_1 = require("../../utils");
+const Handle_module_css_1 = __importDefault(require("./Handle.module.css"));
 function Handle(props) {
@@ -14,3 +26,3 @@ const { spectrumFormat = "hsva", x, y, hue, saturation = 1, value = 1, alpha = 1, lightness = 0.5, className, } = props;
         }
-        : formatColorBySpectrum({
+        : utils_1.formatColorBySpectrum({
             h: hue,
@@ -21,9 +33,9 @@ s: saturation,
         }, "hsla");
-    return (React.createElement("div", { className: `${styles.container} ${className}`, style: {
+    return (React.createElement("div", { className: `${Handle_module_css_1.default.container} ${className}`, style: {
             transform: `translate(-50%, -50%) translate(${x / dpi}px, ${y / dpi}px)`,
         } },
-        React.createElement("div", { className: styles.handle, style: {
+        React.createElement("div", { className: Handle_module_css_1.default.handle, style: {
                 backgroundColor: `hsla(${bgColor.h}, ${bgColor.s * 100}%, ${bgColor.l * 100}%, ${bgColor.a})`,
             } })));
 }
-export default React.memo(Handle);
+exports.default = React.memo(Handle);

dist/components/Hue/Hue.js

@@ -1,6 +0,18 @@
-import * as React from "react";
-import Handle from "../Handle/Handle";
-import { COLOR_PICKER_CLASSNAME } from "../../constants";
-import styles from "./Hue.module.css";
-import baseStyles from "../ColorPicker/ColorPicker.module.css";
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const Handle_1 = __importDefault(require("../Handle/Handle"));
+const constants_1 = require("../../constants");
+const Hue_module_css_1 = __importDefault(require("./Hue.module.css"));
+const ColorPicker_module_css_1 = __importDefault(require("../ColorPicker/ColorPicker.module.css"));
 function Hue(props) {
@@ -26,3 +38,3 @@ const { hue, width: w, height: h, handleClasses, className } = props;
     }, [width, height, dpi, x, hue]);
-    return (React.createElement("div", { id: "hue", className: `${COLOR_PICKER_CLASSNAME} ${styles.container} ${baseStyles.color_picker} ${className}` },
+    return (React.createElement("div", { id: "hue", className: `${constants_1.COLOR_PICKER_CLASSNAME} ${Hue_module_css_1.default.container} ${ColorPicker_module_css_1.default.color_picker} ${className}` },
         React.createElement("canvas", { ref: canvasRef, width: width, height: height, style: {
@@ -32,4 +44,4 @@ width: `${width / dpi}px`,
             } }),
-        React.createElement(Handle, { className: handleClasses, hue: hue, x: x, y: height / 2 })));
+        React.createElement(Handle_1.default, { className: handleClasses, hue: hue, x: x, y: height / 2 })));
 }
-export default React.memo(Hue);
+exports.default = React.memo(Hue);

dist/components/Spectrum/Spectrum.js

@@ -1,7 +0,19 @@
-import * as React from "react";
-import Handle from "../Handle/Handle";
-import { mapRange } from "../../utils";
-import { COLOR_PICKER_CLASSNAME } from "../../constants";
-import styles from "./Spectrum.module.css";
-import baseStyles from "../ColorPicker/ColorPicker.module.css";
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const Handle_1 = __importDefault(require("../Handle/Handle"));
+const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
+const Spectrum_module_css_1 = __importDefault(require("./Spectrum.module.css"));
+const ColorPicker_module_css_1 = __importDefault(require("../ColorPicker/ColorPicker.module.css"));
 function Spectrum(props) {
@@ -14,3 +26,3 @@ const { spectrumFormat, hue, saturation, value = 1, lightness = 1, width: w, height: h, className, handleClasses, } = props;
     const yInput = spectrumFormat === "hsva" ? value : lightness;
-    const y = height * mapRange(yInput, 0, 1, 1, 0);
+    const y = height * utils_1.mapRange(yInput, 0, 1, 1, 0);
     const canvasRef = React.useRef(null);
@@ -47,3 +59,3 @@ React.useEffect(() => {
     }, [hue, width, height, spectrumFormat]);
-    return (React.createElement("div", { id: spectrumFormat === "hsva" ? "saturation-value" : "saturation-lightness", className: `${COLOR_PICKER_CLASSNAME} ${styles.container} ${baseStyles.color_picker} ${className}` },
+    return (React.createElement("div", { id: spectrumFormat === "hsva" ? "saturation-value" : "saturation-lightness", className: `${constants_1.COLOR_PICKER_CLASSNAME} ${Spectrum_module_css_1.default.container} ${ColorPicker_module_css_1.default.color_picker} ${className}` },
         React.createElement("canvas", { style: {
@@ -53,4 +65,4 @@ width: `${width / dpi}px`,
             }, width: width, height: height, ref: canvasRef }),
-        React.createElement(Handle, { spectrumFormat: spectrumFormat, className: handleClasses, hue: hue, saturation: saturation, value: value, lightness: lightness, x: x, y: y })));
+        React.createElement(Handle_1.default, { spectrumFormat: spectrumFormat, className: handleClasses, hue: hue, saturation: saturation, value: value, lightness: lightness, x: x, y: y })));
 }
-export default React.memo(Spectrum);
+exports.default = React.memo(Spectrum);

dist/constants/index.js

@@ -1,1 +0,3 @@
-export const COLOR_PICKER_CLASSNAME = "color-picker";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR_PICKER_CLASSNAME = "color-picker";

dist/hooks/usePanClosestElement.js

@@ -1,6 +0,8 @@
-import { useLayoutEffect, useRef } from "react";
-import { getRelativeCoords } from "../utils/index";
-export default function usePanClosestElement({ className, onPanStart, onPan, onPanEnd, }) {
-    const canvases = useRef(document.getElementsByClassName(className));
-    useLayoutEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const index_1 = require("../utils/index");
+function usePanClosestElement({ className, onPanStart, onPan, onPanEnd, }) {
+    const canvases = react_1.useRef(document.getElementsByClassName(className));
+    react_1.useLayoutEffect(() => {
         const isBrowser = typeof window !== "undefined";
@@ -26,3 +28,3 @@ const isSupported = isBrowser && window && window.addEventListener;
                     const { top, left, width, height } = bounds;
-                    const { x, y } = getRelativeCoords(clientX, clientY, left, top, dpi);
+                    const { x, y } = index_1.getRelativeCoords(clientX, clientY, left, top, dpi);
                     onPanStart({ panX: x, panY: y, width, height, dpi, elementId });
@@ -37,3 +39,3 @@ }
                 const { top, left, width, height } = bounds;
-                const { x, y } = getRelativeCoords(clientX, clientY, left, top, dpi);
+                const { x, y } = index_1.getRelativeCoords(clientX, clientY, left, top, dpi);
                 onPan({ panX: x, panY: y, width, height, dpi, elementId });
@@ -47,3 +49,3 @@ }
                 const { top, left, width, height } = bounds;
-                const { x, y } = getRelativeCoords(clientX, clientY, left, top, dpi);
+                const { x, y } = index_1.getRelativeCoords(clientX, clientY, left, top, dpi);
                 onPanEnd({ panX: x, panY: y, width, height, dpi, elementId });
@@ -70,1 +72,2 @@ }
 }
+exports.default = usePanClosestElement;

dist/index.js

@@ -1,2 +0,7 @@
-import ColorPicker from "./components/ColorPicker/ColorPicker";
-export { ColorPicker, };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ColorPicker_1 = __importDefault(require("./components/ColorPicker/ColorPicker"));
+exports.ColorPicker = ColorPicker_1.default;

dist/utils/calculateAlpha.js

@@ -1,2 +0,7 @@
-import clamp from "./clamp";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clamp_1 = __importDefault(require("./clamp"));
 /**
@@ -6,6 +11,7 @@ * Calculate number between 0 and 1 based on x value
  */
-export default function calculateAlpha(x, width) {
-    const clamped = clamp(x / width, 0, 1);
+function calculateAlpha(x, width) {
+    const clamped = clamp_1.default(x / width, 0, 1);
     const rounded = Number(clamped.toFixed(2));
     return { a: rounded };
 }
+exports.default = calculateAlpha;

dist/utils/calculateChanges.js

@@ -1,3 +0,5 @@
-import { calculateSV, calculateSL, calculateHue, calculateAlpha, } from "./index";
-export default function calculateChanges(panEvent) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./index");
+function calculateChanges(panEvent) {
     const { panX, panY, width, height, dpi, elementId } = panEvent;
@@ -7,12 +9,12 @@ let changes = {};
         case "saturation-value":
-            changes = calculateSV(panX, panY, width * dpi, height * dpi);
+            changes = index_1.calculateSV(panX, panY, width * dpi, height * dpi);
             break;
         case "saturation-lightness":
-            changes = calculateSL(panX, panY, width * dpi, height * dpi);
+            changes = index_1.calculateSL(panX, panY, width * dpi, height * dpi);
             break;
         case "hue":
-            changes = calculateHue(panX, width * dpi);
+            changes = index_1.calculateHue(panX, width * dpi);
             break;
         case "alpha":
-            changes = calculateAlpha(panX, width * dpi);
+            changes = index_1.calculateAlpha(panX, width * dpi);
             break;
@@ -24,1 +26,2 @@ default:
 }
+exports.default = calculateChanges;

dist/utils/calculateHue.js

@@ -1,2 +0,7 @@
-import clamp from "./clamp";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clamp_1 = __importDefault(require("./clamp"));
 /**
@@ -6,4 +11,5 @@ * Calculate number between 0 and 360 based on x value
  */
-export default function calculateHue(x, width) {
-    return { h: clamp(360 * (x / width), 0, 360) };
+function calculateHue(x, width) {
+    return { h: clamp_1.default(360 * (x / width), 0, 360) };
 }
+exports.default = calculateHue;

dist/utils/calculateSL.js

@@ -1,2 +0,7 @@
-import clamp from "./clamp";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clamp_1 = __importDefault(require("./clamp"));
 /**
@@ -7,8 +12,9 @@ * Calculate saturation and lightness of an HSL color gradient
  */
-export default function calculateSV(x, y, width, height) {
-    const _y = clamp(y, 0, height);
+function calculateSV(x, y, width, height) {
+    const _y = clamp_1.default(y, 0, height);
     return {
-        s: clamp(x / width, 0, 1),
-        l: clamp(Math.abs(_y - height) / height, 0, 1)
+        s: clamp_1.default(x / width, 0, 1),
+        l: clamp_1.default(Math.abs(_y - height) / height, 0, 1)
     };
 }
+exports.default = calculateSV;

dist/utils/calculateSV.js

@@ -1,2 +0,7 @@
-import clamp from "./clamp";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const clamp_1 = __importDefault(require("./clamp"));
 /**
@@ -7,8 +12,9 @@ * Calculate saturation and value of an HSV color gradient
  */
-export default function calculateSV(x, y, width, height) {
-    const _y = clamp(y, 0, height);
+function calculateSV(x, y, width, height) {
+    const _y = clamp_1.default(y, 0, height);
     return {
-        s: clamp(x / width, 0, 1),
-        v: clamp(Math.abs(_y - height) / height, 0, 1)
+        s: clamp_1.default(x / width, 0, 1),
+        v: clamp_1.default(Math.abs(_y - height) / height, 0, 1)
     };
 }
+exports.default = calculateSV;

dist/utils/clamp.js

@@ -1,3 +0,6 @@
-export default function clamp(num, min, max) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function clamp(num, min, max) {
     return num <= min ? min : num >= max ? max : num;
 }
+exports.default = clamp;

dist/utils/formatColorBySpectrum.js

@@ -1,4 +0,9 @@
-import tinycolor from "tinycolor2";
-export default function formatColorBySpectrum(color, spectrum) {
-    const newColor = spectrum === "hsva" ? tinycolor(color).toHsv() : tinycolor(color).toHsl();
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+function formatColorBySpectrum(color, spectrum) {
+    const newColor = spectrum === "hsva" ? tinycolor2_1.default(color).toHsv() : tinycolor2_1.default(color).toHsl();
     // @ts-ignore
@@ -16,1 +21,2 @@ const { h, s, v, l } = color;
 }
+exports.default = formatColorBySpectrum;

dist/utils/getColorChanges.js

@@ -1,4 +0,6 @@
-import { calculateChanges } from "./index";
-export default function getColorChange(event, currentColor) {
-    const changes = calculateChanges(event);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./index");
+function getColorChange(event, currentColor) {
+    const changes = index_1.calculateChanges(event);
     const newColor = Object.assign(Object.assign({}, currentColor), changes);
@@ -10,1 +12,2 @@ if (JSON.stringify(newColor) === JSON.stringify(currentColor)) {
 }
+exports.default = getColorChange;

dist/utils/getColorFormats.js

@@ -1,3 +0,8 @@
-import tinycolor from "tinycolor2";
-export default function getColorFormats(color, formats) {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+function getColorFormats(color, formats) {
     const formatsLength = formats.length;
@@ -9,12 +14,12 @@ let colors = {};
             case "rgba":
-                colors = Object.assign(Object.assign({}, colors), { rgba: tinycolor(color).toRgb() });
+                colors = Object.assign(Object.assign({}, colors), { rgba: tinycolor2_1.default(color).toRgb() });
                 break;
             case "hex":
-                colors = Object.assign(Object.assign({}, colors), { hex: tinycolor(color).toHexString() });
+                colors = Object.assign(Object.assign({}, colors), { hex: tinycolor2_1.default(color).toHexString() });
                 break;
             case "hex8":
-                colors = Object.assign(Object.assign({}, colors), { hex8: tinycolor(color).toHex8String() });
+                colors = Object.assign(Object.assign({}, colors), { hex8: tinycolor2_1.default(color).toHex8String() });
                 break;
             case "hsla":
-                colors = Object.assign(Object.assign({}, colors), { hsla: tinycolor(color).toHsl() });
+                colors = Object.assign(Object.assign({}, colors), { hsla: tinycolor2_1.default(color).toHsl() });
                 break;
@@ -30,1 +35,2 @@ case "hsva":
 }
+exports.default = getColorFormats;

dist/utils/getRelativeCoords.js

@@ -1,2 +0,4 @@
-export default function getRelativeCoords(mouseX, mouseY, rectX, rectY, dpi) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function getRelativeCoords(mouseX, mouseY, rectX, rectY, dpi) {
     return {
@@ -7,1 +9,2 @@ x: (mouseX - rectX) * dpi,
 }
+exports.default = getRelativeCoords;

dist/utils/index.js

@@ -1,11 +0,24 @@
-export { default as calculateHue } from "./calculateHue";
-export { default as calculateAlpha } from "./calculateAlpha";
-export { default as calculateSV } from "./calculateSV";
-export { default as calculateSL } from "./calculateSL";
-export { default as calculateChanges } from "./calculateChanges";
-export { default as clamp } from "./clamp";
-export { default as mapRange } from "./mapRange";
-export { default as getRelativeCoords } from "./getRelativeCoords";
-export { default as getColorFormats } from "./getColorFormats";
-export { default as getColorChanges } from "./getColorChanges";
-export { default as formatColorBySpectrum } from "./formatColorBySpectrum";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var calculateHue_1 = require("./calculateHue");
+exports.calculateHue = calculateHue_1.default;
+var calculateAlpha_1 = require("./calculateAlpha");
+exports.calculateAlpha = calculateAlpha_1.default;
+var calculateSV_1 = require("./calculateSV");
+exports.calculateSV = calculateSV_1.default;
+var calculateSL_1 = require("./calculateSL");
+exports.calculateSL = calculateSL_1.default;
+var calculateChanges_1 = require("./calculateChanges");
+exports.calculateChanges = calculateChanges_1.default;
+var clamp_1 = require("./clamp");
+exports.clamp = clamp_1.default;
+var mapRange_1 = require("./mapRange");
+exports.mapRange = mapRange_1.default;
+var getRelativeCoords_1 = require("./getRelativeCoords");
+exports.getRelativeCoords = getRelativeCoords_1.default;
+var getColorFormats_1 = require("./getColorFormats");
+exports.getColorFormats = getColorFormats_1.default;
+var getColorChanges_1 = require("./getColorChanges");
+exports.getColorChanges = getColorChanges_1.default;
+var formatColorBySpectrum_1 = require("./formatColorBySpectrum");
+exports.formatColorBySpectrum = formatColorBySpectrum_1.default;

dist/utils/mapRange.js

@@ -1,2 +0,4 @@
-export default function mapRange(value, inputStart, inputEnd, outputStart, outputEnd) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function mapRange(value, inputStart, inputEnd, outputStart, outputEnd) {
     if (value < inputStart) {
@@ -13,1 +15,2 @@ return outputStart;
 }
+exports.default = mapRange;

package.json

 {
   "name": "react-canvas-color-picker",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "main": "./dist/index.js",
@@ -35,3 +35,2 @@ "types": "./dist/index.d.ts",
     "react-scripts": "3.3.0",
-    "tinycolor2": "1.4.1",
     "typescript-plugin-css-modules": "^2.7.0",
@@ -38,0 +37,0 @@ "typescript": "3.7.5"

New alerts

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

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

Improved metrics

Dev dependency count

9

decreased by-10%

Worsened metrics

Total package byte prevSize

43436

decreased by-94.15%

Number of package files

49

decreased by-26.87%

Lines of code

907

decreased by-92.99%

No dependency changes