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

Comparing version 1.1.2 to 1.1.3

lib/context.js

@@ -25,2 +25,3 @@ import React, { createContext, useContext, useState, useEffect } from 'react';
   const initials = getInitialValues(colors, selectedColor);
+  const [color, setColor] = useState(initials?.c);
   const [hue, setHue] = useState(initials?.h);
@@ -47,8 +48,3 @@ const [hueX, setHueX] = useState(initials?.hx);
       let sorted = deepCopy.sort((a, b) => a.left - b.left);
-      let colorString = sorted?.map(cc => `${cc?.value} ${cc.left}%`);
-      let newGrad = `${getGradientType(value)}, ${colorString.join(', ')})`;
-
-      if (newGrad?.includes('gradient')) {
-        onChange(newGrad);
-      }
+      let colorString = sorted?.map(cc => `${cc?.value} ${cc.left}%`); // setColor(`${getGradientType(value)}, ${colorString.join(', ')})`)
     } else {
@@ -87,3 +83,3 @@ onChange(newColor);
     setSelectedColor(index);
-    onChange(newS?.value);
+    setColor(newS?.value);
     setHue(newS?.hsl[0]);
@@ -102,3 +98,3 @@ setHueX(computeHueX(newS.hsl[0]));
     colors.push({
-      value: '',
+      value: color,
       left: left / 2.8,
@@ -122,2 +118,3 @@ opacity: 100,
     hueX,
+    color,
     colors,
@@ -127,2 +124,3 @@ addPoint,
     squareXY,
+    setColor,
     handleHue,
@@ -129,0 +127,0 @@ offsetLeft,

lib/index.js

 import React, { useRef, useState, useEffect } from "react";
 import PickerContextWrapper from './context';
-import { useWindowSizes } from 'react-use-window-sizes';
+import { useWindowWidth } from '~App/hooks';
 import Picker from "./Picker";
@@ -15,3 +15,3 @@ import './styles.css';
   const contRef = useRef(null);
-  const width = useWindowSizes();
+  const width = useWindowWidth();
   const [isGradient, setIsGradient] = useState(value?.includes('gradient'));
@@ -47,3 +47,10 @@ const colors = getColors(value, isGradient);
     }));
+  } else {
+    let arr = value.split('(')[1]?.slice(0, -1)?.split(',');
+    return [{
+      value: value,
+      hsl: convertRGBtoHSL([parseInt(arr[0]), parseInt(arr[1]), parseInt(arr[2])]),
+      opacity: parseInt(arr[3]) * 100
+    }];
   }
 };

lib/Picker.js

@@ -6,4 +6,8 @@ import React from "react";
 import GradientBar from './GradientBar';
+import { usePicker } from './context';
 
 const Picker = () => {
+  const {
+    isGradient
+  } = usePicker();
   return /*#__PURE__*/React.createElement("div", {
@@ -13,5 +17,5 @@ style: {
     }
-  }, /*#__PURE__*/React.createElement(Square, null), /*#__PURE__*/React.createElement(GradientBar, null), /*#__PURE__*/React.createElement(Hue, null), /*#__PURE__*/React.createElement(Opacity, null));
+  }, /*#__PURE__*/React.createElement(Square, null), isGradient && /*#__PURE__*/React.createElement(GradientBar, null), /*#__PURE__*/React.createElement(Hue, null), /*#__PURE__*/React.createElement(Opacity, null));
 };
 
 export default Picker;

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/context.js

@@ -18,2 +18,3 @@ import React, { createContext, useContext, useState, useEffect } from 'react';
   const initials = getInitialValues(colors, selectedColor)
+  const [color, setColor] = useState(initials?.c)
   const [hue, setHue] = useState(initials?.h)
@@ -37,6 +38,3 @@ const [hueX, setHueX] = useState(initials?.hx)
       let colorString = sorted?.map((cc) => `${cc?.value} ${cc.left}%`)
-      let newGrad = `${getGradientType(value)}, ${colorString.join(', ')})`
-      if (newGrad?.includes('gradient')) {
-        onChange(newGrad)
-      }
+      // setColor(`${getGradientType(value)}, ${colorString.join(', ')})`)
     } else {
@@ -75,3 +73,3 @@ onChange(newColor)
     setSelectedColor(index);
-    onChange(newS?.value)
+    setColor(newS?.value)
     setHue(newS?.hsl[0])
@@ -89,3 +87,3 @@ setHueX(computeHueX(newS.hsl[0]))
     let left = computeBarPosition(e, offsetLeft)
-    colors.push({value: '', left: left / 2.8, opacity: 100, hsl: hsl })
+    colors.push({value: color, left: left / 2.8, opacity: 100, hsl: hsl })
     handleSelectedColor(e, newIndex)
@@ -105,2 +103,3 @@ }
     hueX,
+    color,
     colors,
@@ -110,2 +109,3 @@ addPoint,
     squareXY,
+    setColor,
     handleHue,
@@ -112,0 +112,0 @@ offsetLeft,

src/index.js

 import React, { useRef, useState, useEffect } from "react"
 import PickerContextWrapper from './context'
-import { useWindowSizes } from 'react-use-window-sizes'
+import { useWindowWidth } from '~App/hooks'
 import Picker from "./Picker"
@@ -9,5 +9,5 @@ import './styles.css'
 
-function ColorPicker({ value, onChange }) {
+function ColorPicker({  value, onChange }) {
   const contRef = useRef(null)
-  const width = useWindowSizes()
+  const width = useWindowWidth()
   const [isGradient, setIsGradient] = useState(value?.includes('gradient'))
@@ -36,3 +36,6 @@ const colors = getColors(value, isGradient)
     return obj[0]?.colorStops?.map((c) => ({value: `rgba(${c.value[0]}, ${c.value[1]}, ${c.value[2]}, ${c.value[3]})`, left: parseInt(c.length?.value), hsl: convertRGBtoHSL([parseInt(c.value[0]), parseInt(c.value[1]), parseInt(c.value[2])]), opacity: parseInt(c.value[3]) * 100 }))
+  } else {
+    let arr = value.split('(')[1]?.slice(0,-1)?.split(',')
+    return [{ value: value, hsl: convertRGBtoHSL([parseInt(arr[0]), parseInt(arr[1]), parseInt(arr[2])]), opacity: parseInt(arr[3]) * 100 }]
   }
 }

src/Picker.js

@@ -6,8 +6,11 @@ import React from "react"
 import GradientBar from './GradientBar'
+import { usePicker } from './context'
 
 const Picker = () => {
+  const { isGradient } = usePicker();
+
   return (
     <div style={{ userSelect: 'none' }}>
       <Square />
-      <GradientBar />
+      {isGradient && <GradientBar />}
       <Hue />
@@ -14,0 +17,0 @@ <Opacity />

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

42325

increased by1.45%

Lines of code

1240

increased by1.22%

No dependency changes