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

Comparing version 2.0.6 to 2.0.7

lib/AdvancedControls.js

 import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
 import { usePicker } from './context';
@@ -179,2 +180,6 @@ import { getHandleValue } from './utils';
   }))));
+};
+
+AdvancedControls.propTypes = {
+  openAdvanced: PropTypes.bool
 };

lib/ComparibleColors.js

 import React from 'react';
+import PropTypes from 'prop-types';
 import { usePicker } from './context';
@@ -139,2 +140,5 @@
 
-export default ComparibleColors;
+export default ComparibleColors;
+ComparibleColors.propTypes = {
+  openComparibles: PropTypes.bool
+};

lib/context.js

@@ -1,5 +0,6 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
-import { computePickerPosition, getGradientType, computeSquareXY, getDegrees, getNewHsl, getHandleValue, isUpperCase } from "./utils";
-import { low, high, getColors } from "./formatters";
-import { config } from "./constants";
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { computePickerPosition, getGradientType, computeSquareXY, getDegrees, getNewHsl, getHandleValue, isUpperCase } from './utils';
+import { low, high, getColors } from './formatters';
+import { config } from './constants';
+import PropTypes from 'prop-types';
 
@@ -20,6 +21,6 @@ var tinycolor = require("tinycolor2");
   const offsetLeft = bounds?.x;
-  const isGradient = value?.includes("gradient");
+  const isGradient = value?.includes('gradient');
   const gradientType = getGradientType(value);
   const degrees = getDegrees(value);
-  const degreeStr = gradientType === "linear-gradient" ? `${degrees}deg` : "circle";
+  const degreeStr = gradientType === 'linear-gradient' ? `${degrees}deg` : 'circle';
   const colors = getColors(value);
@@ -34,3 +35,3 @@ const indexedColors = colors?.map((c, i) => ({ ...c,
   const [tinyColor, setTinyColor] = useState(tinycolor(currentColor));
-  const [inputType, setInputType] = useState("rgb");
+  const [inputType, setInputType] = useState('rgb');
   const {
@@ -74,3 +75,3 @@ r,
     let colorString = sorted?.map(cc => `${cc?.value} ${cc.left}%`);
-    onChange(`${gradientType}(${degreeStr}, ${colorString.join(", ")})`);
+    onChange(`${gradientType}(${degreeStr}, ${colorString.join(', ')})`);
   };
@@ -185,2 +186,8 @@
   return useContext(PickerContext);
-}
+}
+PickerContextWrapper.propTypes = {
+  children: PropTypes.node,
+  bounds: PropTypes.object,
+  value: PropTypes.string,
+  onChange: PropTypes.func
+};

lib/Controls.js

@@ -9,2 +9,3 @@ import React, { useState } from 'react';
 import GradientControls from './GradientControls';
+import PropTypes from 'prop-types';
 var {
@@ -189,2 +190,12 @@ defaultColor,
   };
+};
+Controls.propTypes = {
+  hideEyeDrop: PropTypes.bool,
+  hideAdvancedSliders: PropTypes.bool,
+  hideColorGuide: PropTypes.bool,
+  hideInputType: PropTypes.bool
+};
+InputTypeDropdown.propTypes = {
+  openInputType: PropTypes.bool,
+  setOpenInputType: PropTypes.func
 };

lib/GradientBar.js

 import React, { useState } from "react";
 import { getHandleValue } from './utils';
 import { usePicker } from "./context";
+import PropTypes from 'prop-types';
 
@@ -102,2 +103,8 @@ const GradientBar = () => {
   };
+};
+
+Handle.propTypes = {
+  left: PropTypes.number,
+  i: PropTypes.number,
+  setDragging: PropTypes.func
 };

lib/icon.js

 import React from 'react';
+import PropTypes from 'prop-types';
 
@@ -258,2 +259,20 @@ const TrashIcon = () => {
   }));
+};
+LinearIcon.propTypes = {
+  color: PropTypes.string
+};
+RadialIcon.propTypes = {
+  color: PropTypes.string
+};
+SlidersIcon.propTypes = {
+  color: PropTypes.string
+};
+InputsIcon.propTypes = {
+  color: PropTypes.string
+};
+PaletteIcon.propTypes = {
+  color: PropTypes.string
+};
+DegreesIcon.propTypes = {
+  color: PropTypes.string
 };

lib/index.js

 import React, { useRef, useState, useEffect } from "react";
 import PickerContextWrapper from './context';
+import PropTypes from 'prop-types';
 import Picker from "./Picker";
@@ -42,2 +43,14 @@ import './styles.css';
 
-export default ColorPicker;
+export default ColorPicker;
+ColorPicker.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  hideControls: PropTypes.bool,
+  hideInputs: PropTypes.bool,
+  hidePresets: PropTypes.bool,
+  presets: PropTypes.array,
+  hideEyeDrop: PropTypes.bool,
+  hideAdvancedSliders: PropTypes.bool,
+  hideColorGuide: PropTypes.bool,
+  hideInputType: PropTypes.bool
+};

lib/Inputs.js

@@ -5,2 +5,3 @@ import React, { useState, useEffect } from 'react';
 import { usePicker } from './context';
+import PropTypes from 'prop-types';
 
@@ -329,2 +330,9 @@ var tc = require("tinycolor2");
   return Math.round(val, 2);
+};
+
+Input.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  callback: PropTypes.func,
+  max: PropTypes.number,
+  label: PropTypes.string
 };

lib/Picker.js

@@ -8,2 +8,3 @@ import React from "react";
 import Controls from './Controls';
+import PropTypes from 'prop-types';
 import GradientBar from './GradientBar';
@@ -39,2 +40,12 @@ import { usePicker } from './context';
 
-export default Picker;
+export default Picker;
+Picker.propTypes = {
+  hideControls: PropTypes.bool,
+  hideInputs: PropTypes.bool,
+  hidePresets: PropTypes.bool,
+  presets: PropTypes.array,
+  hideEyeDrop: PropTypes.bool,
+  hideAdvancedSliders: PropTypes.bool,
+  hideColorGuide: PropTypes.bool,
+  hideInputType: PropTypes.bool
+};

lib/Presets.js

 import React from 'react';
+import PropTypes from 'prop-types';
 import { usePicker } from './context';
@@ -55,2 +56,5 @@
 export default Presets;
+Presets.propTypes = {
+  presets: PropTypes.array
+};
 const fakePresets = ['rgba(0,0,0,1)', 'rgba(128,128,128, 1)', 'rgba(192,192,192, 1)', 'rgba(255,255,255, 1)', 'rgba(0,0,128,1)', 'rgba(0,0,255,1)', 'rgba(0,255,255, 1)', 'rgba(0,128,0,1)', 'rgba(128,128,0, 1)', 'rgba(0,128,128,1)', 'rgba(0,255,0, 1)', 'rgba(128,0,0, 1)', 'rgba(128,0,128, 1)', 'rgba(175, 51, 242, 1)', 'rgba(255,0,255, 1)', 'rgba(255,0,0, 1)', 'rgba(240, 103, 46, 1)', 'rgba(255,255,0, 1)'];

lib/Square.js

 import React, { useRef, useState } from "react";
 import throttle from "lodash.throttle";
 import usePaintSquare from "./usePaintSquare";
-import { usePicker } from "./context";
+import { usePicker } from './context';
 
@@ -43,3 +43,3 @@ const Square = () => {
     style: {
-      position: "absolute",
+      position: 'absolute',
       left: -7,
@@ -68,3 +68,4 @@ top: -7,
     width: "294px",
-    height: "294px"
+    height: "294px",
+    id: "paintSquare"
   }))));
@@ -71,0 +72,0 @@ };

lib/utils.js

@@ -1,3 +0,3 @@
-import { formatInputValues } from "./formatters";
-import { config } from "./constants";
+import { formatInputValues } from './formatters';
+import { config } from './constants';
 
@@ -48,7 +48,7 @@ var tc = require("tinycolor2");
 export const getDegrees = value => {
-  let s1 = value?.split(",")[0];
-  return parseInt(s1?.split("(")[1]?.slice(0, -3));
+  let s1 = value?.split(',')[0];
+  return parseInt(s1?.split('(')[1]?.slice(0, -3));
 };
 export const getGradientType = value => {
-  return value?.split("(")[0];
+  return value?.split('(')[0];
 };
@@ -72,3 +72,3 @@ export const getNewHsl = (newHue, s, l, o, setInternalHue) => {
   let className = e.target.className;
-  let adjuster = className === "c-resize ps-rl" ? 15 : 0;
+  let adjuster = className === 'c-resize ps-rl' ? 15 : 0;
   return {
@@ -75,0 +75,0 @@ offsetLeft: client?.x + adjuster,

package.json

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

README.md

@@ -21,2 +21,5 @@ <div align="center">
 
+### Version 2.0.6 
+- Fixes several bugs pertaining to hue slider when saturation is 0
+
 <br /> 
@@ -28,2 +31,3 @@
 
+
 ## Install
@@ -30,0 +34,0 @@ ```

src/AdvancedControls.jsx

 import React, { useState, useRef } from 'react'
+import PropTypes from 'prop-types'
 import { usePicker } from './context'
@@ -79,1 +80,5 @@ import { getHandleValue } from './utils'
 }
+
+AdvancedControls.propTypes = {
+  openAdvanced: PropTypes.bool,
+}

src/ComparibleColors.jsx

 import React from 'react'
+import PropTypes from 'prop-types'
 import { usePicker } from './context'
@@ -35,1 +36,5 @@
 export default ComparibleColors;
+
+ComparibleColors.propTypes = {
+  openComparibles: PropTypes.bool,
+}

src/context.js

@@ -1,40 +0,26 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
-import {
-  computePickerPosition,
-  getGradientType,
-  computeSquareXY,
-  getDegrees,
-  getNewHsl,
-  getHandleValue,
-  isUpperCase
-} from "./utils";
-import { low, high, getColors } from "./formatters";
-import { config } from "./constants";
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { computePickerPosition, getGradientType, computeSquareXY, getDegrees, getNewHsl, getHandleValue, isUpperCase } from './utils'
+import { low, high, getColors } from './formatters'
+import { config } from './constants'
+import PropTypes from 'prop-types'
 
 var tinycolor = require("tinycolor2");
-const { squareSize, crossSize } = config;
+const { squareSize, crossSize } = config
 const PickerContext = createContext();
 
-export default function PickerContextWrapper({
-  children,
-  bounds,
-  value,
-  onChange
-}) {
-  const offsetLeft = bounds?.x;
+export default function PickerContextWrapper({ children, bounds, value, onChange }) {
+  const offsetLeft = bounds?.x
 
-  const isGradient = value?.includes("gradient");
-  const gradientType = getGradientType(value);
-  const degrees = getDegrees(value);
-  const degreeStr =
-    gradientType === "linear-gradient" ? `${degrees}deg` : "circle";
+  const isGradient = value?.includes('gradient')
+  const gradientType = getGradientType(value)
+  const degrees = getDegrees(value)
+  const degreeStr = gradientType === 'linear-gradient' ? `${degrees}deg` : 'circle'
   const colors = getColors(value);
-  const indexedColors = colors?.map((c, i) => ({ ...c, index: i }));
-  const currentColorObj =
-    indexedColors?.filter(c => isUpperCase(c.value))[0] || indexedColors[0];
+  const indexedColors = colors?.map((c, i) => ({...c, index: i}))
+  const currentColorObj = indexedColors?.filter(c => isUpperCase(c.value))[0] || indexedColors[0]
   const currentColor = currentColorObj?.value;
   const selectedColor = currentColorObj?.index;
-  const currentLeft = currentColorObj?.left;
+  const currentLeft = currentColorObj?.left
   const [tinyColor, setTinyColor] = useState(tinycolor(currentColor));
-  const [inputType, setInputType] = useState("rgb");
+  const [inputType, setInputType] = useState('rgb');
 
@@ -44,3 +30,3 @@ const { r, g, b, a: opacity } = tinyColor.toRgb();
   const { s: hsvS, v: hsvV } = tinyColor.toHsv();
-  const [internalHue, setInternalHue] = useState(Math.round(h));
+  const [internalHue, setInternalHue] = useState(Math.round(h))
   const hue = Math.round(h);
@@ -52,84 +38,75 @@ const [x, y] = computeSquareXY([hue, s, l]);
   useEffect(() => {
-    setTinyColor(tinycolor(currentColor));
-    setInternalHue(hue);
-  }, [currentColor, hue]);
+    setTinyColor(tinycolor(currentColor))
+    setInternalHue(hue)
+  }, [currentColor, hue])
 
   useEffect(() => {
     if (isGradient) {
-      setPreviousGradients([value, ...previousGraidents?.slice(0, 4)]);
+      setPreviousGradients([value, ...previousGraidents?.slice(0, 4) ]);
     } else {
       if (tinycolor(value).isValid()) {
-        setPreviousColors([value, ...previousColors?.slice(0, 4)]);
+        setPreviousColors([value, ...previousColors?.slice(0, 4) ])
       }
     }
-    //eslint-disable-next-line
-  }, [value]);
+  //eslint-disable-next-line
+  }, [value])
 
-  const createGradientStr = newColors => {
-    let sorted = newColors.sort((a, b) => a.left - b.left);
-    let colorString = sorted?.map(cc => `${cc?.value} ${cc.left}%`);
-    onChange(`${gradientType}(${degreeStr}, ${colorString.join(", ")})`);
-  };
+  const createGradientStr = (newColors) => {
+    let sorted = newColors.sort((a, b) => a.left - b.left)
+    let colorString = sorted?.map((cc) => `${cc?.value} ${cc.left}%`)
+    onChange(`${gradientType}(${degreeStr}, ${colorString.join(', ')})`)
+  }
 
   const handleGradient = (newColor, left = currentLeft) => {
     let remaining = colors?.filter(c => !isUpperCase(c.value));
-    let newColors = [
-      { value: newColor.toUpperCase(), left: left },
-      ...remaining
-    ];
-    createGradientStr(newColors);
-  };
+    let newColors = [{value: newColor.toUpperCase(), left: left}, ...remaining]
+    createGradientStr(newColors)
+  }
 
-  const handleChange = newColor => {
+  const handleChange = (newColor) => {
     if (isGradient) {
-      handleGradient(newColor);
+      handleGradient(newColor)
     } else {
-      onChange(newColor);
+      onChange(newColor)
     }
-  };
+  }
 
-  const handleOpacity = e => {
+  const handleOpacity = (e) => {
     let newO = getHandleValue(e) / 100;
-    let newColor = `rgba(${r}, ${g}, ${b}, ${newO})`;
-    handleChange(newColor);
-  };
+    let newColor = `rgba(${r}, ${g}, ${b}, ${newO})`
+    handleChange(newColor)
+  }
 
-  const handleHue = e => {
+  const handleHue = (e) => {
     let newHue = getHandleValue(e) * 3.6;
     let newHsl = getNewHsl(newHue, s, l, opacity, setInternalHue);
-    handleChange(newHsl);
-  };
+    handleChange(newHsl)
+  }
 
   const handleColor = (e, ctx) => {
     const [x, y] = computePickerPosition(e);
-    const x1 = Math.min(x + crossSize / 2, squareSize - 1);
-    const y1 = Math.min(y + crossSize / 2, squareSize - 1);
-    const [r, g, b] = ctx.getImageData(x1, y1, 1, 1).data;
-    let newColor = `rgba(${r}, ${g}, ${b}, ${opacity})`;
-    handleChange(newColor);
-  };
+    const x1 = Math.min(x + crossSize / 2, squareSize - 1)
+    const y1 = Math.min(y + crossSize / 2, squareSize - 1)
+    const [r, g, b] = ctx.getImageData(x1, y1, 1, 1).data
+    let newColor = `rgba(${r}, ${g}, ${b}, ${opacity})`
+    handleChange(newColor)
+  }
 
-  const setSelectedColor = index => {
-    let newGradStr = colors?.map((cc, i) => ({
-      ...cc,
-      value: i === index ? high(cc) : low(cc)
-    }));
-    createGradientStr(newGradStr);
-  };
+  const setSelectedColor = (index) => {
+    let newGradStr = colors?.map((cc, i) => ({...cc, value: i === index ? high(cc) : low(cc)}))
+    createGradientStr(newGradStr)
+  }
 
-  const addPoint = e => {
-    let left = getHandleValue(e, offsetLeft);
-    let newColors = [
-      ...colors.map(c => ({ ...c, value: low(c) })),
-      { value: currentColor, left: left }
-    ];
-    createGradientStr(newColors);
-  };
+  const addPoint = (e) => {
+    let left = getHandleValue(e, offsetLeft)
+    let newColors = [...colors.map(c => ({...c, value: low(c)})), {value: currentColor, left: left }]
+    createGradientStr(newColors)
+  }
 
   const deletePoint = () => {
     if (colors?.length > 2) {
-      let remaining = colors?.filter((rc, i) => i !== selectedColor);
-      createGradientStr(remaining);
+      let remaining = colors?.filter((rc, i) => i !== selectedColor)
+      createGradientStr(remaining)
     }
-  };
+  }
 
@@ -172,10 +149,6 @@ const pickerState = {
     setSelectedColor,
-    previousGraidents
+    previousGraidents,
   };
 
-  return (
-    <PickerContext.Provider value={pickerState}>
-      {children}
-    </PickerContext.Provider>
-  );
+  return <PickerContext.Provider value={pickerState}>{children}</PickerContext.Provider>;
 }
@@ -186,1 +159,8 @@
 }
+
+PickerContextWrapper.propTypes = {
+  children: PropTypes.node,
+  bounds: PropTypes.object,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+}

src/Controls.js

@@ -9,2 +9,3 @@ import React, { useState } from 'react'
 import GradientControls from './GradientControls'
+import PropTypes from 'prop-types'
 
@@ -92,1 +93,13 @@ var { defaultColor, defaultGradient } = config;
 }
+
+Controls.propTypes = {
+  hideEyeDrop: PropTypes.bool,
+  hideAdvancedSliders: PropTypes.bool,
+  hideColorGuide: PropTypes.bool,
+  hideInputType: PropTypes.bool,
+}
+
+InputTypeDropdown.propTypes = {
+  openInputType: PropTypes.bool,
+  setOpenInputType: PropTypes.func,
+}

src/GradientBar.js

 import React, { useState } from "react";
 import { getHandleValue } from './utils';
 import { usePicker } from "./context";
+import PropTypes from 'prop-types'
 
@@ -62,1 +63,7 @@ const GradientBar = () => {
 }
+
+Handle.propTypes = {
+  left: PropTypes.number,
+  i: PropTypes.number,
+  setDragging: PropTypes.func,
+}

src/icon.jsx

 import React from 'react';
+import PropTypes from 'prop-types'
 
@@ -100,1 +101,25 @@ const TrashIcon = () => {
 }
+
+LinearIcon.propTypes = {
+  color: PropTypes.string,
+}
+
+RadialIcon.propTypes = {
+  color: PropTypes.string,
+}
+
+SlidersIcon.propTypes = {
+  color: PropTypes.string,
+}
+
+InputsIcon.propTypes = {
+  color: PropTypes.string,
+}
+
+PaletteIcon.propTypes = {
+  color: PropTypes.string,
+}
+
+DegreesIcon.propTypes = {
+  color: PropTypes.string,
+}

src/index.js

 import React, { useRef, useState, useEffect } from "react"
 import PickerContextWrapper from './context'
+import PropTypes from 'prop-types'
 import Picker from "./Picker";
@@ -26,1 +27,14 @@ import './styles.css';
 export default ColorPicker;
+
+ColorPicker.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  hideControls: PropTypes.bool,
+  hideInputs: PropTypes.bool,
+  hidePresets: PropTypes.bool,
+  presets: PropTypes.array,
+  hideEyeDrop: PropTypes.bool,
+  hideAdvancedSliders: PropTypes.bool,
+  hideColorGuide: PropTypes.bool,
+  hideInputType: PropTypes.bool,
+}

src/Inputs.js

@@ -5,2 +5,3 @@ import React, { useState, useEffect } from 'react'
 import { usePicker } from './context'
+import PropTypes from 'prop-types'
 
@@ -154,1 +155,8 @@ var tc = require("tinycolor2");
 }
+
+Input.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  callback: PropTypes.func,
+  max: PropTypes.number,
+  label: PropTypes.string,
+}

src/Picker.js

@@ -8,2 +8,3 @@ import React from "react"
 import Controls from './Controls'
+import PropTypes from 'prop-types'
 import GradientBar from './GradientBar'
@@ -28,2 +29,13 @@ import { usePicker } from './context'
 
-export default Picker
+export default Picker;
+
+Picker.propTypes = {
+  hideControls: PropTypes.bool,
+  hideInputs: PropTypes.bool,
+  hidePresets: PropTypes.bool,
+  presets: PropTypes.array,
+  hideEyeDrop: PropTypes.bool,
+  hideAdvancedSliders: PropTypes.bool,
+  hideColorGuide: PropTypes.bool,
+  hideInputType: PropTypes.bool,
+}

src/Presets.js

 import React from 'react'
+import PropTypes from 'prop-types'
 import { usePicker } from './context'
@@ -25,4 +26,8 @@
 
-export default Presets
+export default Presets;
 
+Presets.propTypes = {
+  presets: PropTypes.array,
+}
+
 const fakePresets = [
@@ -29,0 +34,0 @@ 'rgba(0,0,0,1)',

src/Square.js

@@ -1,5 +0,5 @@
-import React, { useRef, useState } from "react";
-import throttle from "lodash.throttle";
-import usePaintSquare from "./usePaintSquare";
-import { usePicker } from "./context";
+import React, { useRef, useState } from "react"
+import throttle from "lodash.throttle"
+import usePaintSquare from "./usePaintSquare"
+import { usePicker } from './context'
 
@@ -12,54 +12,37 @@ const Square = () => {
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     const ctx = canvas?.current?.getContext("2d");
-    const onMouseMove = throttle(() => handleColor(e, ctx), 250);
-    onMouseMove();
-  };
+    const onMouseMove = throttle(() => handleColor(e, ctx), 250)
+    onMouseMove()
+  }
 
   const stopDragging = () => {
-    setDragging(false);
-  };
+    setDragging(false)
+  }
 
-  const handleMove = e => {
+  const handleMove = (e) => {
     if (dragging) {
-      handleChange(e);
+      handleChange(e)
     }
-  };
+  }
 
-  const handleClick = e => {
+  const handleClick = (e) => {
     if (!dragging) {
-      handleChange(e);
+      handleChange(e)
     }
-  };
+  }
 
   return (
-    <div className="ps-rl">
-      <div
-        style={{
-          position: "absolute",
-          left: -7,
-          top: -7,
-          width: 308,
-          height: 308
-        }}
-        onMouseEnter={stopDragging}
-      />
-      <div
-        className="ps-rl c-cross"
-        onMouseMove={e => handleMove(e)}
-        onMouseUp={stopDragging}
-      >
-        <div
-          style={{ left: x, top: y }}
-          className="handle"
-          onMouseDown={() => setDragging(true)}
-        />
-        <div className="canvas-wrapper" onClick={e => handleClick(e)}>
-          <canvas ref={canvas} width="294px" height="294px" />
+    <div className='ps-rl'>
+      <div style={{position: 'absolute', left: -7, top: -7, width: 308, height: 308}} onMouseEnter={stopDragging} />
+      <div className='ps-rl c-cross' onMouseMove={(e) => handleMove(e)} onMouseUp={stopDragging}>
+        <div style={{left: x, top: y}} className='handle' onMouseDown={() => setDragging(true)} />
+        <div className='canvas-wrapper' onClick={(e) => handleClick(e)}>
+          <canvas ref={canvas} width='294px' height='294px' id='paintSquare' />
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Square;
+export default Square

src/utils.js

@@ -1,6 +0,6 @@
-import { formatInputValues } from "./formatters";
-import { config } from "./constants";
+import { formatInputValues } from './formatters'
+import { config } from './constants'
 var tc = require("tinycolor2");
 
-const { squareSize, barSize, crossSize } = config;
+const { squareSize, barSize, crossSize } = config
 
@@ -10,56 +10,56 @@ export function getHandleValue(e) {
   let pos = e.clientX - offsetLeft - barSize / 2;
-  let bounded = formatInputValues(pos, 0, 276);
-  return Math.round(bounded / 2.76);
+  let bounded = formatInputValues(pos, 0, 276)
+  return Math.round(bounded / 2.76)
 }
 
 export function computeSquareXY(hsl) {
-  const s = hsl[1] * 100;
-  const l = hsl[2] * 100;
-  const t = (s * (l < 50 ? l : 100 - l)) / 100;
-  const s1 = Math.round((200 * t) / (l + t)) | 0;
-  const b1 = Math.round(t + l);
-  const x = (squareSize / 100) * s1 - crossSize / 2;
-  const y = squareSize - (squareSize / 100) * b1 - crossSize / 2;
-  return [x, y];
+  const s = hsl[1] * 100
+  const l = hsl[2] * 100
+  const t = (s * (l < 50 ? l : 100 - l)) / 100
+  const s1 = Math.round((200 * t) / (l + t)) | 0
+  const b1 = Math.round(t + l)
+  const x = (squareSize / 100) * s1 - crossSize / 2
+  const y = squareSize - (squareSize / 100) * b1 - crossSize / 2
+  return [x, y]
 }
 
 export function computePickerPosition(e) {
-  const { offsetLeft, offsetTop } = safeBounds(e);
+  const { offsetLeft, offsetTop } = safeBounds(e)
   const getX = () => {
-    let xPos = e.clientX - offsetLeft - crossSize / 2;
-    return formatInputValues(xPos, -8, 284);
-  };
+    let xPos = e.clientX - offsetLeft - crossSize / 2
+    return formatInputValues(xPos, -8, 284)
+  }
   const getY = () => {
-    let yPos = e.clientY - offsetTop - crossSize / 2;
-    return formatInputValues(yPos, -8, 284);
-  };
+    let yPos = e.clientY - offsetTop - crossSize / 2
+    return formatInputValues(yPos, -8, 284)
+  }
 
-  return [getX(), getY()];
+  return [getX(), getY()]
 }
 
-export const getDegrees = value => {
-  let s1 = value?.split(",")[0];
-  return parseInt(s1?.split("(")[1]?.slice(0, -3));
-};
+export const getDegrees = (value) => {
+  let s1 = value?.split(',')[0]
+  return parseInt(s1?.split('(')[1]?.slice(0,-3))
+}
 
-export const getGradientType = value => {
-  return value?.split("(")[0];
-};
+export const getGradientType = (value) => {
+  return value?.split('(')[0]
+}
 
 export const getNewHsl = (newHue, s, l, o, setInternalHue) => {
   setInternalHue(newHue);
-  let tiny = tc({ h: newHue, s: s, l: l });
+  let tiny = tc({h: newHue, s: s, l: l})
   let { r, g, b } = tiny.toRgb();
-  return `rgba(${r}, ${g}, ${b}, ${o})`;
-};
+  return `rgba(${r}, ${g}, ${b}, ${o})`
+}
 
-export const safeBounds = e => {
+export const safeBounds = (e) => {
   let client = e.target.parentNode.getBoundingClientRect();
   let className = e.target.className;
-  let adjuster = className === "c-resize ps-rl" ? 15 : 0;
-  return { offsetLeft: client?.x + adjuster, offsetTop: client?.y };
-};
+  let adjuster = className === 'c-resize ps-rl' ? 15 : 0;
+  return { offsetLeft: client?.x + adjuster, offsetTop: client?.y}
+}
 
-export const isUpperCase = str => {
+export const isUpperCase = (str) => {
   return str?.[0] === str?.[0]?.toUpperCase();
-};
+}

No alert changes

Improved metrics

Total package byte prevSize

162074

increased by2.64%

Lines of code

4682

increased by2.81%

Number of lines in readme file

341

increased by1.19%

No dependency changes