react-best-gradient-color-picker - npm Package Compare versions

Comparing version 3.0.3-beta.3 to 3.0.3-beta.4

dist/cjs/components/Controls.js

@@ -65,5 +65,19 @@ "use strict";
         return (react_1.default.createElement("div", { style: { paddingTop: 12, paddingBottom: 4 } },
-            react_1.default.createElement("div", { style: { width: '100%' }, className: "ac jsb" },
+            react_1.default.createElement("div", { style: {
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                } },
                 react_1.default.createElement(ColorTypeBtns, { hideColorTypeBtns: hideColorTypeBtns, setGradient: setGradient, isGradient: isGradient, setSolid: setSolid, locales: locales }),
-                !allRightControlsHidden && (react_1.default.createElement("div", { style: { display: noTools ? 'none' : '' }, className: "rbgcp-control-btn-wrapper" },
+                !allRightControlsHidden && (react_1.default.createElement("div", { style: {
+                        display: noTools ? 'none' : 'flex',
+                        height: '28px',
+                        // background: [theme]?.c3,
+                        borderRadius: '6px',
+                        padding: '2px',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        position: 'relative',
+                    } },
                     !hideEyeDrop && react_1.default.createElement(EyeDropper_js_1.default, { onSelect: handleChange }),
@@ -70,0 +84,0 @@ react_1.default.createElement("div", { style: { display: hideAdvancedSliders ? 'none' : 'flex' }, id: "rbgcp-advanced-btn", className: `rbgcp-control-icon-btn rbgcp-advanced-btn ${openAdvanced && 'rbgcp-control-btn-selected'}`, onClick: () => setOpenAdvanced(!openAdvanced) },

dist/cjs/components/Hue.js

@@ -37,7 +37,2 @@ "use strict";
     (0, usePaintHue_js_1.default)(barRef, squareSize);
-    // useEffect(() => {
-    //   if (barRef?.current) {
-    //     setHandleTop(barRef?.current?.offsetTop - 2)
-    //   }
-    // }, [barRef])
     const stopDragging = () => {
@@ -68,3 +63,9 @@ setDragging(false);
     }, []);
-    return (react_1.default.createElement("div", { style: { height: 14, marginTop: 17, marginBottom: 4 }, onMouseMove: (e) => handleMove(e), className: "c-resize ps-rl" },
+    return (react_1.default.createElement("div", { style: {
+            height: 14,
+            marginTop: 17,
+            marginBottom: 4,
+            cursor: 'crosshair',
+            position: 'relative',
+        }, onMouseMove: (e) => handleMove(e) },
         react_1.default.createElement("div", { role: "button", style: {
@@ -71,0 +72,0 @@ border: '2px solid white',

dist/cjs/components/Opacity.js

@@ -59,7 +59,58 @@ "use strict";
     }, []);
-    return (react_1.default.createElement("div", { onMouseDown: handleDown, onMouseMove: (e) => handleMove(e), className: "c-resize ps-rl", style: { height: 14, marginTop: 17, marginBottom: 4 } },
-        react_1.default.createElement("div", { style: { width: '100%', height: 14 }, className: "rbgcp-checkered" }),
-        react_1.default.createElement("div", { style: { left: left * opacity, top: -2 }, className: "rbgcp-handle" }),
-        react_1.default.createElement("div", { style: { background: bg }, className: "rbgcp-opacity-overlay", onClick: (e) => handleClick(e) })));
+    return (react_1.default.createElement("div", { onMouseDown: handleDown, onMouseMove: (e) => handleMove(e), style: {
+            height: 14,
+            marginTop: 17,
+            marginBottom: 4,
+            cursor: 'ew-resize',
+            position: 'relative',
+        } },
+        react_1.default.createElement("div", { style: checkerStyles }),
+        react_1.default.createElement("div", { style: {
+                left: left * opacity,
+                top: -2,
+                position: 'absolute',
+                border: '2px solid white',
+                borderRadius: '50%',
+                boxShadow: '0px 0px 3px rgba(0,0,0,.5)',
+                width: '18px',
+                height: '18px',
+                zIndex: 1000,
+                transition: 'all 10ms linear',
+            } }),
+        react_1.default.createElement("div", { style: {
+                background: bg,
+                position: 'absolute',
+                left: '0px',
+                top: '0px',
+                width: '100%',
+                height: '100%',
+                borderRadius: '10px',
+            }, onClick: (e) => handleClick(e) })));
 };
 exports.default = Opacity;
+const checkerStyles = {
+    width: '100%',
+    height: 14,
+    background: `linear-gradient(45deg, rgba(0, 0, 0, 0.18) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.18) 0),
+    linear-gradient(45deg, rgba(0, 0, 0, 0.18) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.18) 0), white`,
+    backgroundRepeat: 'repeat, repeat',
+    backgroundPosition: '0px 0, 7px 7px',
+    webkitTransformOrigin: '0 0 0',
+    transformOrigin: '0 0 0',
+    webkitBackgroundOrigin: 'padding-box, padding-box',
+    backgroundOrigin: 'padding-box, padding-box',
+    webkitBackgroundClip: 'border-box, border-box',
+    backgroundClip: 'border-box, border-box',
+    webkitBackgroundSize: '14px 14px, 14px 14px',
+    backgroundSize: '14px 14px, 14px 14px',
+    webkitBoxShadow: 'none',
+    boxShadow: 'none',
+    textShadow: 'none',
+    webkitTransition: 'none',
+    mozTransition: 'none',
+    oTransition: 'none',
+    transition: 'none',
+    webkitTransform: 'scaleX(1) scaleY(1) scaleZ(1)',
+    transform: 'scaleX(1) scaleY(1) scaleZ(1)',
+    borderRadius: '10px',
+};

dist/cjs/components/Square.js

@@ -81,7 +81,22 @@ "use strict";
     return (react_1.default.createElement("div", { style: { position: 'relative' } },
-        react_1.default.createElement("div", { className: "ps-rl c-cross", onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: (e) => handleMove(e), onTouchMove: (e) => handleTouchMove(e) },
-            react_1.default.createElement("div", { className: "rbgcp-handle", style: { left: x, top: y }, onMouseDown: handleMouseDown, role: "button", tabIndex: 0 }),
-            react_1.default.createElement("div", { className: "rbgcp-canvas-wrapper", style: { height: squareHeight }, onClick: (e) => handleClick(e) },
+        react_1.default.createElement("div", { onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: (e) => handleMove(e), onTouchMove: (e) => handleTouchMove(e), style: { position: 'relative', cursor: 'crosshair' } },
+            react_1.default.createElement("div", { style: {
+                    left: x,
+                    top: y,
+                    position: 'absolute',
+                    border: '2px solid white',
+                    borderRadius: '50%',
+                    boxShadow: '0px 0px 3px rgba(0,0,0,.5)',
+                    width: '18px',
+                    height: '18px',
+                    zIndex: 1000,
+                    transition: 'all 10ms linear',
+                }, onMouseDown: handleMouseDown, role: "button", tabIndex: 0 }),
+            react_1.default.createElement("div", { style: {
+                    height: squareHeight,
+                    borderRadius: '6px',
+                    overflow: 'hidden',
+                }, onClick: (e) => handleClick(e) },
                 react_1.default.createElement("canvas", { ref: canvas, width: `${squareSize}px`, height: `${squareHeight}px`, id: "paintSquare" })))));
 };
 exports.default = Square;

dist/cjs/utils/utils.js

@@ -157,3 +157,2 @@ "use strict";
     if (typeof window !== 'undefined' && allowDark) {
-        console.log('RUN');
         isDarkMode =
@@ -177,3 +176,2 @@ window.matchMedia &&
     };
-    console.log(isDarkMode);
     if (isDarkMode === 'dark' && allowDark) {
@@ -180,0 +178,0 @@ return processedTheme?.dark;

dist/esm/components/Controls.js

@@ -36,5 +36,19 @@ import React, { useState } from 'react';
         return (React.createElement("div", { style: { paddingTop: 12, paddingBottom: 4 } },
-            React.createElement("div", { style: { width: '100%' }, className: "ac jsb" },
+            React.createElement("div", { style: {
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                } },
                 React.createElement(ColorTypeBtns, { hideColorTypeBtns: hideColorTypeBtns, setGradient: setGradient, isGradient: isGradient, setSolid: setSolid, locales: locales }),
-                !allRightControlsHidden && (React.createElement("div", { style: { display: noTools ? 'none' : '' }, className: "rbgcp-control-btn-wrapper" },
+                !allRightControlsHidden && (React.createElement("div", { style: {
+                        display: noTools ? 'none' : 'flex',
+                        height: '28px',
+                        // background: [theme]?.c3,
+                        borderRadius: '6px',
+                        padding: '2px',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        position: 'relative',
+                    } },
                     !hideEyeDrop && React.createElement(EyeDropper, { onSelect: handleChange }),
@@ -41,0 +55,0 @@ React.createElement("div", { style: { display: hideAdvancedSliders ? 'none' : 'flex' }, id: "rbgcp-advanced-btn", className: `rbgcp-control-icon-btn rbgcp-advanced-btn ${openAdvanced && 'rbgcp-control-btn-selected'}`, onClick: () => setOpenAdvanced(!openAdvanced) },

dist/esm/components/Hue.js

@@ -9,7 +9,2 @@ import React, { useRef, useState, useEffect } from 'react';
     usePaintHue(barRef, squareSize);
-    // useEffect(() => {
-    //   if (barRef?.current) {
-    //     setHandleTop(barRef?.current?.offsetTop - 2)
-    //   }
-    // }, [barRef])
     const stopDragging = () => {
@@ -40,3 +35,9 @@ setDragging(false);
     }, []);
-    return (React.createElement("div", { style: { height: 14, marginTop: 17, marginBottom: 4 }, onMouseMove: (e) => handleMove(e), className: "c-resize ps-rl" },
+    return (React.createElement("div", { style: {
+            height: 14,
+            marginTop: 17,
+            marginBottom: 4,
+            cursor: 'crosshair',
+            position: 'relative',
+        }, onMouseMove: (e) => handleMove(e) },
         React.createElement("div", { role: "button", style: {
@@ -43,0 +44,0 @@ border: '2px solid white',

dist/esm/components/Opacity.js

@@ -34,7 +34,58 @@ import React, { useState, useEffect } from 'react';
     }, []);
-    return (React.createElement("div", { onMouseDown: handleDown, onMouseMove: (e) => handleMove(e), className: "c-resize ps-rl", style: { height: 14, marginTop: 17, marginBottom: 4 } },
-        React.createElement("div", { style: { width: '100%', height: 14 }, className: "rbgcp-checkered" }),
-        React.createElement("div", { style: { left: left * opacity, top: -2 }, className: "rbgcp-handle" }),
-        React.createElement("div", { style: { background: bg }, className: "rbgcp-opacity-overlay", onClick: (e) => handleClick(e) })));
+    return (React.createElement("div", { onMouseDown: handleDown, onMouseMove: (e) => handleMove(e), style: {
+            height: 14,
+            marginTop: 17,
+            marginBottom: 4,
+            cursor: 'ew-resize',
+            position: 'relative',
+        } },
+        React.createElement("div", { style: checkerStyles }),
+        React.createElement("div", { style: {
+                left: left * opacity,
+                top: -2,
+                position: 'absolute',
+                border: '2px solid white',
+                borderRadius: '50%',
+                boxShadow: '0px 0px 3px rgba(0,0,0,.5)',
+                width: '18px',
+                height: '18px',
+                zIndex: 1000,
+                transition: 'all 10ms linear',
+            } }),
+        React.createElement("div", { style: {
+                background: bg,
+                position: 'absolute',
+                left: '0px',
+                top: '0px',
+                width: '100%',
+                height: '100%',
+                borderRadius: '10px',
+            }, onClick: (e) => handleClick(e) })));
 };
 export default Opacity;
+const checkerStyles = {
+    width: '100%',
+    height: 14,
+    background: `linear-gradient(45deg, rgba(0, 0, 0, 0.18) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.18) 0),
+    linear-gradient(45deg, rgba(0, 0, 0, 0.18) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.18) 75%, rgba(0, 0, 0, 0.18) 0), white`,
+    backgroundRepeat: 'repeat, repeat',
+    backgroundPosition: '0px 0, 7px 7px',
+    webkitTransformOrigin: '0 0 0',
+    transformOrigin: '0 0 0',
+    webkitBackgroundOrigin: 'padding-box, padding-box',
+    backgroundOrigin: 'padding-box, padding-box',
+    webkitBackgroundClip: 'border-box, border-box',
+    backgroundClip: 'border-box, border-box',
+    webkitBackgroundSize: '14px 14px, 14px 14px',
+    backgroundSize: '14px 14px, 14px 14px',
+    webkitBoxShadow: 'none',
+    boxShadow: 'none',
+    textShadow: 'none',
+    webkitTransition: 'none',
+    mozTransition: 'none',
+    oTransition: 'none',
+    transition: 'none',
+    webkitTransform: 'scaleX(1) scaleY(1) scaleZ(1)',
+    transform: 'scaleX(1) scaleY(1) scaleZ(1)',
+    borderRadius: '10px',
+};

dist/esm/components/Square.js

@@ -53,7 +53,22 @@ import React, { useRef, useState, useEffect } from 'react';
     return (React.createElement("div", { style: { position: 'relative' } },
-        React.createElement("div", { className: "ps-rl c-cross", onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: (e) => handleMove(e), onTouchMove: (e) => handleTouchMove(e) },
-            React.createElement("div", { className: "rbgcp-handle", style: { left: x, top: y }, onMouseDown: handleMouseDown, role: "button", tabIndex: 0 }),
-            React.createElement("div", { className: "rbgcp-canvas-wrapper", style: { height: squareHeight }, onClick: (e) => handleClick(e) },
+        React.createElement("div", { onMouseUp: stopDragging, onTouchEnd: stopDragging, onMouseDown: handleCanvasDown, onTouchStart: handleCanvasDown, onMouseMove: (e) => handleMove(e), onTouchMove: (e) => handleTouchMove(e), style: { position: 'relative', cursor: 'crosshair' } },
+            React.createElement("div", { style: {
+                    left: x,
+                    top: y,
+                    position: 'absolute',
+                    border: '2px solid white',
+                    borderRadius: '50%',
+                    boxShadow: '0px 0px 3px rgba(0,0,0,.5)',
+                    width: '18px',
+                    height: '18px',
+                    zIndex: 1000,
+                    transition: 'all 10ms linear',
+                }, onMouseDown: handleMouseDown, role: "button", tabIndex: 0 }),
+            React.createElement("div", { style: {
+                    height: squareHeight,
+                    borderRadius: '6px',
+                    overflow: 'hidden',
+                }, onClick: (e) => handleClick(e) },
                 React.createElement("canvas", { ref: canvas, width: `${squareSize}px`, height: `${squareHeight}px`, id: "paintSquare" })))));
 };
 export default Square;

dist/esm/utils/utils.js

@@ -141,3 +141,2 @@ import { formatInputValues } from './formatters.js';
     if (typeof window !== 'undefined' && allowDark) {
-        console.log('RUN');
         isDarkMode =
@@ -161,3 +160,2 @@ window.matchMedia &&
     };
-    console.log(isDarkMode);
     if (isDarkMode === 'dark' && allowDark) {
@@ -164,0 +162,0 @@ return processedTheme?.dark;

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.3-beta.3",
+  "version": "3.0.3-beta.4",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "type": "module",

src/utils/utils.ts

@@ -157,3 +157,2 @@ import { formatInputValues } from './formatters.js'
   if (typeof window !== 'undefined' && allowDark) {
-    console.log('RUN')
     isDarkMode =
@@ -178,3 +177,3 @@ window.matchMedia &&
   }
-  console.log(isDarkMode)
+
   if (isDarkMode === 'dark' && allowDark) {
@@ -181,0 +180,0 @@ return processedTheme?.dark

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

Total package byte prevSize

392885

increased by1.85%

Lines of code

10222

increased by2.36%

No dependency changes