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

Comparing version 3.0.10-beta.8 to 3.0.10-beta.9

dist/cjs/components/GradientBar.d.ts

 import React from 'react';
-export declare const Handle: ({ left, i, setDragging, setInFocus, }: {
+export declare const Handle: ({ left, i, setDragging, }: {
     left?: number | undefined;
     i: number;
     setDragging: (arg0: boolean) => void;
-    setInFocus: (arg0: string | null) => void;
 }) => React.JSX.Element;
 declare const GradientBar: () => React.JSX.Element;
 export default GradientBar;

dist/cjs/components/GradientBar.js

@@ -34,9 +34,3 @@ "use strict";
 const formatters_js_1 = require("../utils/formatters.js");
-const handleStyle = (isSelected) => {
-    return {
-        boxShadow: isSelected ? '0px 0px 5px 1px rgba(86, 140, 245,.95)' : '',
-        border: isSelected ? '2px solid white' : '2px solid rgba(255,255,255,.75)',
-    };
-};
-const Handle = ({ left, i, setDragging, setInFocus, }) => {
+const Handle = ({ left, i, setDragging, }) => {
     const { colors, selectedColor, squareWidth, defaultStyles, createGradientStr, } = (0, context_js_1.usePicker)();
@@ -57,12 +51,14 @@ const isSelected = selectedColor === i;
     };
-    const handleFocus = () => {
-        setInFocus('gpoint');
-        setSelectedColor(i);
-    };
-    const handleBlur = () => {
-        setInFocus(null);
-    };
+    // const handleFocus = () => {
+    //   setInFocus('gpoint')
+    //   setSelectedColor(i)
+    // }
+    // const handleBlur = () => {
+    //   setInFocus(null)
+    // }
     return (react_1.default.createElement("div", { 
         // tabIndex={0}
-        onBlur: handleBlur, onFocus: handleFocus, id: `gradient-handle-${i}`, onMouseDown: (e) => handleDown(e), style: {
+        // onBlur={handleBlur}
+        // onFocus={handleFocus}
+        id: `gradient-handle-${i}`, onMouseDown: (e) => handleDown(e), style: {
             ...defaultStyles.rbgcpGradientHandleWrap,
@@ -72,4 +68,4 @@ left: (left || 0) * leftMultiplyer,
         react_1.default.createElement("div", { style: {
-                ...handleStyle(isSelected),
                 ...defaultStyles.rbgcpGradientHandle,
+                ...(isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {}),
             } }, isSelected && (react_1.default.createElement("div", { style: {
@@ -84,5 +80,5 @@ width: 5,
 const GradientBar = () => {
-    const { currentColor, createGradientStr, colors, value, handleGradient, squareWidth, deletePoint, isGradient, selectedColor, } = (0, context_js_1.usePicker)();
+    const { currentColor, createGradientStr, colors, value, handleGradient, squareWidth } = (0, context_js_1.usePicker)();
     const [dragging, setDragging] = (0, react_1.useState)(false);
-    const [inFocus, setInFocus] = (0, react_1.useState)(null);
+    // const [inFocus, setInFocus] = useState<string | null>(null)
     function force90degLinear(color) {
@@ -99,8 +95,8 @@ return color.replace(/(radial|linear)-gradient\([^,]+,/, 'linear-gradient(90deg,');
     };
-    (0, react_1.useEffect)(() => {
-        const selectedEl = window?.document?.getElementById(`gradient-handle-${selectedColor}`);
-        if (selectedEl) {
-            selectedEl.focus();
-        }
-    }, [selectedColor]);
+    // useEffect(() => {
+    //   const selectedEl = window?.document?.getElementById(
+    //     `gradient-handle-${selectedColor}`
+    //   )
+    //   if (selectedEl) selectedEl.focus()
+    // }, [selectedColor])
     const stopDragging = () => {
@@ -110,6 +106,6 @@ setDragging(false);
     const handleDown = (e) => {
-        if (!dragging) {
-            addPoint(e);
-            setDragging(true);
-        }
+        if (dragging)
+            return;
+        addPoint(e);
+        setDragging(true);
     };
@@ -120,11 +116,11 @@ const handleMove = (e) => {
     };
-    const handleKeyboard = (e) => {
-        if (isGradient) {
-            if (e.keyCode === 8) {
-                if (inFocus === 'gpoint') {
-                    deletePoint();
-                }
-            }
-        }
-    };
+    // const handleKeyboard = (e: any) => {
+    //   if (isGradient) {
+    //     if (e.keyCode === 8) {
+    //       if (inFocus === 'gpoint') {
+    //         deletePoint()
+    //       }
+    //     }
+    //   }
+    // }
     const handleUp = () => {
@@ -135,6 +131,6 @@ stopDragging();
         window.addEventListener('mouseup', handleUp);
-        window?.addEventListener('keydown', handleKeyboard);
+        // window?.addEventListener('keydown', handleKeyboard)
         return () => {
             window.removeEventListener('mouseup', handleUp);
-            window?.removeEventListener('keydown', handleKeyboard);
+            // window?.removeEventListener('keydown', handleKeyboard)
         };
@@ -149,9 +145,9 @@ });
         react_1.default.createElement("div", { style: {
+                height: 14,
+                borderRadius: 10,
                 width: squareWidth,
-                height: 14,
                 backgroundImage: force90degLinear(value),
-                borderRadius: 10,
             }, onMouseDown: (e) => handleDown(e), onMouseMove: (e) => handleMove(e) }),
-        colors?.map((c, i) => (react_1.default.createElement(exports.Handle, { i: i, left: c.left, key: `${i}-${c}`, setDragging: setDragging, setInFocus: setInFocus })))));
+        colors?.map((c, i) => (react_1.default.createElement(exports.Handle, { i: i, left: c.left, key: `${i}-${c}`, setDragging: setDragging })))));
 };
 exports.default = GradientBar;

dist/esm/components/GradientBar.d.ts

 import React from 'react';
-export declare const Handle: ({ left, i, setDragging, setInFocus, }: {
+export declare const Handle: ({ left, i, setDragging, }: {
     left?: number | undefined;
     i: number;
     setDragging: (arg0: boolean) => void;
-    setInFocus: (arg0: string | null) => void;
 }) => React.JSX.Element;
 declare const GradientBar: () => React.JSX.Element;
 export default GradientBar;

dist/esm/components/GradientBar.js

@@ -8,9 +8,3 @@ /* eslint-disable react/no-array-index-key */
 import { low, high } from '../utils/formatters.js';
-const handleStyle = (isSelected) => {
-    return {
-        boxShadow: isSelected ? '0px 0px 5px 1px rgba(86, 140, 245,.95)' : '',
-        border: isSelected ? '2px solid white' : '2px solid rgba(255,255,255,.75)',
-    };
-};
-export const Handle = ({ left, i, setDragging, setInFocus, }) => {
+export const Handle = ({ left, i, setDragging, }) => {
     const { colors, selectedColor, squareWidth, defaultStyles, createGradientStr, } = usePicker();
@@ -31,12 +25,14 @@ const isSelected = selectedColor === i;
     };
-    const handleFocus = () => {
-        setInFocus('gpoint');
-        setSelectedColor(i);
-    };
-    const handleBlur = () => {
-        setInFocus(null);
-    };
+    // const handleFocus = () => {
+    //   setInFocus('gpoint')
+    //   setSelectedColor(i)
+    // }
+    // const handleBlur = () => {
+    //   setInFocus(null)
+    // }
     return (React.createElement("div", { 
         // tabIndex={0}
-        onBlur: handleBlur, onFocus: handleFocus, id: `gradient-handle-${i}`, onMouseDown: (e) => handleDown(e), style: {
+        // onBlur={handleBlur}
+        // onFocus={handleFocus}
+        id: `gradient-handle-${i}`, onMouseDown: (e) => handleDown(e), style: {
             ...defaultStyles.rbgcpGradientHandleWrap,
@@ -46,4 +42,4 @@ left: (left || 0) * leftMultiplyer,
         React.createElement("div", { style: {
-                ...handleStyle(isSelected),
                 ...defaultStyles.rbgcpGradientHandle,
+                ...(isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {}),
             } }, isSelected && (React.createElement("div", { style: {
@@ -57,5 +53,5 @@ width: 5,
 const GradientBar = () => {
-    const { currentColor, createGradientStr, colors, value, handleGradient, squareWidth, deletePoint, isGradient, selectedColor, } = usePicker();
+    const { currentColor, createGradientStr, colors, value, handleGradient, squareWidth } = usePicker();
     const [dragging, setDragging] = useState(false);
-    const [inFocus, setInFocus] = useState(null);
+    // const [inFocus, setInFocus] = useState<string | null>(null)
     function force90degLinear(color) {
@@ -72,8 +68,8 @@ return color.replace(/(radial|linear)-gradient\([^,]+,/, 'linear-gradient(90deg,');
     };
-    useEffect(() => {
-        const selectedEl = window?.document?.getElementById(`gradient-handle-${selectedColor}`);
-        if (selectedEl) {
-            selectedEl.focus();
-        }
-    }, [selectedColor]);
+    // useEffect(() => {
+    //   const selectedEl = window?.document?.getElementById(
+    //     `gradient-handle-${selectedColor}`
+    //   )
+    //   if (selectedEl) selectedEl.focus()
+    // }, [selectedColor])
     const stopDragging = () => {
@@ -83,6 +79,6 @@ setDragging(false);
     const handleDown = (e) => {
-        if (!dragging) {
-            addPoint(e);
-            setDragging(true);
-        }
+        if (dragging)
+            return;
+        addPoint(e);
+        setDragging(true);
     };
@@ -93,11 +89,11 @@ const handleMove = (e) => {
     };
-    const handleKeyboard = (e) => {
-        if (isGradient) {
-            if (e.keyCode === 8) {
-                if (inFocus === 'gpoint') {
-                    deletePoint();
-                }
-            }
-        }
-    };
+    // const handleKeyboard = (e: any) => {
+    //   if (isGradient) {
+    //     if (e.keyCode === 8) {
+    //       if (inFocus === 'gpoint') {
+    //         deletePoint()
+    //       }
+    //     }
+    //   }
+    // }
     const handleUp = () => {
@@ -108,6 +104,6 @@ stopDragging();
         window.addEventListener('mouseup', handleUp);
-        window?.addEventListener('keydown', handleKeyboard);
+        // window?.addEventListener('keydown', handleKeyboard)
         return () => {
             window.removeEventListener('mouseup', handleUp);
-            window?.removeEventListener('keydown', handleKeyboard);
+            // window?.removeEventListener('keydown', handleKeyboard)
         };
@@ -122,9 +118,9 @@ });
         React.createElement("div", { style: {
+                height: 14,
+                borderRadius: 10,
                 width: squareWidth,
-                height: 14,
                 backgroundImage: force90degLinear(value),
-                borderRadius: 10,
             }, onMouseDown: (e) => handleDown(e), onMouseMove: (e) => handleMove(e) }),
-        colors?.map((c, i) => (React.createElement(Handle, { i: i, left: c.left, key: `${i}-${c}`, setDragging: setDragging, setInFocus: setInFocus })))));
+        colors?.map((c, i) => (React.createElement(Handle, { i: i, left: c.left, key: `${i}-${c}`, setDragging: setDragging })))));
 };
 export default GradientBar;

package.json

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

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

Worsened metrics

Total package byte prevSize

405188

decreased by-0.17%

Lines of code

11011

decreased by-0.23%

No dependency changes