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

Comparing version 2.0.14 to 2.0.15

lib/ComparibleColors.js

@@ -59,3 +59,2 @@ import React from 'react';
   }, "Analogous"), /*#__PURE__*/React.createElement("div", {
-    style: df,
     style: {
@@ -62,0 +61,0 @@ borderRadius: 5,

lib/gradientParser.js

@@ -8,11 +8,11 @@ import { high, low } from './formatters';
   var tokens = {
-    linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
-    repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,
-    radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,
-    repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,
+    linearGradient: /^(-(webkit|o|ms|moz)-)?(linear-gradient)/i,
+    repeatingLinearGradient: /^(-(webkit|o|ms|moz)-)?(repeating-linear-gradient)/i,
+    radialGradient: /^(-(webkit|o|ms|moz)-)?(radial-gradient)/i,
+    repeatingRadialGradient: /^(-(webkit|o|ms|moz)-)?(repeating-radial-gradient)/i,
     sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
-    extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+    extentKeywords: /^(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)/,
     positionKeywords: /^(left|center|right|top|bottom)/i,
     pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
-    percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+    percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))%/,
     emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
@@ -23,3 +23,3 @@ angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
     comma: /^,/,
-    hexColor: /^\#([0-9a-fA-F]+)/,
+    hexColor: /^#([0-9a-fA-F]+)/,
     literalColor: /^([a-zA-Z]+)/,
@@ -26,0 +26,0 @@ rgbColor: /^rgb/i,

lib/Presets.js

 import React from 'react';
 import { usePicker } from './context';
-import { psRl, cCross, handle, canvasWrapper } from './style';
 
@@ -5,0 +4,0 @@ const Presets = ({

lib/style.js

@@ -104,3 +104,2 @@ export const df = {
   paddingRight: 8,
-  height: '100%',
   lineHeight: 1,
@@ -107,0 +106,0 @@ borderRadius: 4,

lib/useColorPicker.js

@@ -43,3 +43,3 @@ import { useState, useEffect } from 'react';
     }
-  }, [currentColor]);
+  }, [currentColor, previousColors]);
 
@@ -46,0 +46,0 @@ const setLinear = () => {

lib/usePaintHue.js

 import { useEffect } from "react";
-import { config } from './constants';
 
@@ -18,3 +17,3 @@ var tinycolor = require("tinycolor2");
     ctx.fill();
-  }, [canvas]);
+  }, [canvas, squareSize]);
 };
@@ -38,3 +37,3 @@
     }
-  }, [canvas, h, l]);
+  }, [canvas, h, l, squareSize]);
 };
@@ -56,3 +55,3 @@ export const usePaintLight = (canvas, h, s, squareSize) => {
     }
-  }, [canvas, h, s]);
+  }, [canvas, h, s, squareSize]);
 };
@@ -79,3 +78,3 @@ export const usePaintBright = (canvas, h, s, squareSize) => {
     }
-  }, [canvas, h, s]);
+  }, [canvas, h, s, squareSize]);
 };

lib/usePaintSquare.js

@@ -18,5 +18,5 @@ import { useEffect } from "react";
     ctx.fillRect(0, 0, squareSize, squareHeight);
-  }, [canvas, hue]);
+  }, [canvas, hue, squareSize, squareHeight]);
 };
 
 export default usePaintSquare;

package.json

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

README.md

@@ -14,8 +14,11 @@ [![Npm Version][npm-version-image]][npm-version-url]
 
-### Version 2.0.6 
-- Fixes several bugs pertaining to hue slider when saturation is 0
-
 ### Version 2.0.11
 - Add width prop
 
+### Version 2.0.14
+- Add height prop
+
+### Dev Plan
+- v3 in TS
+
 <br /> 
@@ -62,2 +65,3 @@
 | width            | `int`        | 294                     | (optional) The width of the picker                               |
+| height           | `int`        | 294                     | (optional) The height of the picker                              |
 | hideInputs       | `boolean`    | `false`                 | (optional) hide the hex and rgba inputs                          |
@@ -64,0 +68,0 @@ | hideControls     | `boolean`    | `false`                 | (optional) hide the solid/gradient and gradient options          |

src/AdvancedControls.jsx

@@ -72,3 +72,3 @@ import React, { useState, useRef } from 'react'
       <div onMouseUp={stopDragging} style={{ ...psRl, ...barWrapInner, width: squareSize + 30 }}>
-        <div className='c-resize ps-rl' onMouseMove={(e) => handleMove(e)} style={{ ...cResize, ... psRl }}>
+        <div className='c-resize ps-rl' onMouseMove={(e) => handleMove(e)} style={{ ...cResize, ...psRl }}>
           <div style={{ ...handle, left: left, top: 2 }} onMouseDown={() => setDragging(true)} />
@@ -75,0 +75,0 @@ <canvas ref={reffy} width={`${squareSize}px`} height='14px' style={{ position: 'relative', borderRadius: 14 }} onClick={(e) => handleClick(e)} />

src/ComparibleColors.jsx

@@ -24,3 +24,3 @@ import React from 'react'
         <div style={{textAlign: 'center', color: '#323136', fontSize: 12, fontWeight: 500, marginTop: 3}}>Analogous</div>
-        <div style={df} style={{borderRadius: 5, overflow: 'hidden', ...df }}>{analogous?.map((c, key) => (<div key={key} style={{width: '20%', height: 30, background: c.toHexString()}} onClick={() => handleClick(c)} />))}</div>
+        <div style={{borderRadius: 5, overflow: 'hidden', ...df }}>{analogous?.map((c, key) => (<div key={key} style={{width: '20%', height: 30, background: c.toHexString()}} onClick={() => handleClick(c)} />))}</div>
         <div style={{textAlign: 'center', color: '#323136', fontSize: 12, fontWeight: 500, marginTop: 3}}>Monochromatic</div>
@@ -27,0 +27,0 @@ <div style={{borderRadius: 5, overflow: 'hidden', ...df, ...jfe }}>{monochromatic?.map((c, key) => (<div key={key} style={{width: '20%', height: 30, background: c.toHexString()}} onClick={() => handleClick(c)} />))}</div>

src/gradientParser.js

@@ -8,11 +8,11 @@ import { high, low } from './formatters'
   var tokens = {
-    linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
-    repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,
-    radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,
-    repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,
+    linearGradient: /^(-(webkit|o|ms|moz)-)?(linear-gradient)/i,
+    repeatingLinearGradient: /^(-(webkit|o|ms|moz)-)?(repeating-linear-gradient)/i,
+    radialGradient: /^(-(webkit|o|ms|moz)-)?(radial-gradient)/i,
+    repeatingRadialGradient: /^(-(webkit|o|ms|moz)-)?(repeating-radial-gradient)/i,
     sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
-    extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+    extentKeywords: /^(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)/,
     positionKeywords: /^(left|center|right|top|bottom)/i,
     pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
-    percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+    percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))%/,
     emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
@@ -23,3 +23,3 @@ angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
     comma: /^,/,
-    hexColor: /^\#([0-9a-fA-F]+)/,
+    hexColor: /^#([0-9a-fA-F]+)/,
     literalColor: /^([a-zA-Z]+)/,
@@ -26,0 +26,0 @@ rgbColor: /^rgb/i,

src/Presets.js

 import React from 'react'
 import { usePicker } from './context'
-import { psRl, cCross, handle, canvasWrapper } from './style';
 
@@ -5,0 +4,0 @@ const Presets = ({ presets = [] }) => {

src/style.js

@@ -122,3 +122,2 @@ export const df = {
   paddingRight: 8,
-  height: '100%',
   lineHeight: 1,
@@ -125,0 +124,0 @@ borderRadius: 4,

src/useColorPicker.js

@@ -31,3 +31,3 @@ import { useState, useEffect } from 'react'
     }
-  }, [currentColor])
+  }, [currentColor, previousColors])
 
@@ -34,0 +34,0 @@ const setLinear = () => {

src/usePaintHue.js

 import { useEffect } from "react"
-import { config } from './constants'
 var tinycolor = require("tinycolor2");
@@ -16,3 +15,3 @@
     ctx.fill()
-  }, [canvas])
+  }, [canvas, squareSize])
 }
@@ -35,3 +34,3 @@
     }
-  }, [canvas, h, l])
+  }, [canvas, h, l, squareSize])
 }
@@ -52,3 +51,3 @@
     }
-  }, [canvas, h, s])
+  }, [canvas, h, s, squareSize])
 }
@@ -70,3 +69,3 @@
     }
-  }, [canvas, h, s])
+  }, [canvas, h, s, squareSize])
 }

src/usePaintSquare.js

@@ -18,5 +18,5 @@ import { useEffect } from "react"
     ctx.fillRect(0, 0, squareSize, squareHeight)
-  }, [canvas, hue])
+  }, [canvas, hue, squareSize, squareHeight])
 }
 
 export default usePaintSquare

No alert changes

Improved metrics

Number of lines in readme file

350

increased by1.16%

Worsened metrics

Total package byte prevSize

328680

decreased by-0.01%

Lines of code

5218

decreased by-0.13%

No dependency changes