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

Comparing version 1.4.15 to 1.4.16-beat.0

lib/Controls.js

@@ -1,5 +0,9 @@
-import React from 'react';
-import TrashIcon, { LinearIcon, RadialIcon, MenuIcon } from './icon';
+import React, { useState, useRef } from 'react';
+import TrashIcon, { LinearIcon, RadialIcon, MenuIcon, DropperIcon } from './icon';
 import { usePicker } from './context';
+import html2canvas from 'html2canvas';
+import Portal from 'robofox-react-portal';
 
+var tinycolor = require("tinycolor2");
+
 const Controls = () => {
@@ -11,5 +15,8 @@ const {
     setSelectedColor,
-    colors
+    colors,
+    currentColor
   } = usePicker();
+  const [openAdvanced, setOpenAdvanced] = useState(false);
   const isLinear = gradientType === 'linear-gradient';
+  const [inputType, setInputType] = useState('rgb');
 
@@ -25,2 +32,51 @@ const setSolid = () => {
 
+  const lighten = value => {
+    let newC = tinycolor(currentColor).lighten(value).toRgb();
+    console.log(newC);
+  };
+
+  const brighten = value => {
+    let newC = tinycolor(currentColor).brighten(value).toRgb();
+    console.log(newC);
+  };
+
+  const darken = value => {
+    let newC = tinycolor(currentColor).darken(value).toRgb();
+    console.log(newC);
+  };
+
+  const desaturate = value => {
+    let newC = tinycolor(currentColor).desaturate(value).toRgb();
+    console.log(newC);
+  };
+
+  const saturate = value => {
+    let newC = tinycolor(currentColor).saturate(value).toRgb();
+    console.log(newC);
+  };
+
+  const analogous = () => {
+    let colors = tinycolor(currentColor).analogous();
+    console.log(colors);
+  };
+
+  const monochromatic = () => {
+    let colors = tinycolor(currentColor).monochromatic();
+    console.log(colors);
+  };
+
+  const triad = () => {
+    let colors = tinycolor(currentColor).triad();
+    console.log(colors);
+  };
+
+  const tetrad = () => {
+    let colors = tinycolor(currentColor).tetrad();
+    console.log(colors);
+  }; // console.log(colors);
+  // {(isLinear && isGradient) && <DegreePicker />}
+  // {isGradient && <GradientType />}
+  // {(isGradient && colorz.length > 2) && <DeleteBtn />}
+
+
   return /*#__PURE__*/React.createElement("div", {
@@ -31,4 +87,3 @@ style: {
       overflow: 'hidden'
-    },
-    className: "df jsb"
+    }
   }, /*#__PURE__*/React.createElement("div", {
@@ -39,3 +94,3 @@ className: "df jsb ac",
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(EyeDropper, null), /*#__PURE__*/React.createElement("div", {
     className: "df jc ac",
@@ -64,3 +119,42 @@ style: {
     }
-  }, isLinear && isGradient && /*#__PURE__*/React.createElement(DegreePicker, null), isGradient && /*#__PURE__*/React.createElement(GradientType, null), isGradient && colors.length > 2 && /*#__PURE__*/React.createElement(DeleteBtn, null))));
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 24
+    },
+    className: "df jc",
+    onClick: () => setOpenAdvanced(!openAdvanced)
+  }, /*#__PURE__*/React.createElement(MenuIcon, null)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: openAdvanced ? 200 : 0,
+      width: '100%',
+      transition: 'all 120ms linear'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: 11,
+      opacity: openAdvanced ? 1 : 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "df jc ac"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "df ac",
+    style: {
+      height: 28,
+      background: '#e9e9f5',
+      borderRadius: 6,
+      padding: 2
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: controlBtnStyles(inputType === 'hsl'),
+    className: "control-btn df ac",
+    onClick: () => setInputType('hsl')
+  }, "HSL"), /*#__PURE__*/React.createElement("div", {
+    style: controlBtnStyles(inputType === 'rgb'),
+    className: "control-btn df ac",
+    onClick: () => setInputType('rgb')
+  }, "RGB"), /*#__PURE__*/React.createElement("div", {
+    style: controlBtnStyles(inputType === 'hsv'),
+    className: "control-btn df ac",
+    onClick: () => setInputType('hsv')
+  }, "HSV"))))));
 };
@@ -168,2 +262,63 @@
   };
+};
+
+const EyeDropper = () => {
+  const {
+    handleChange
+  } = usePicker();
+  const [pickerCanvas, setPickerCanvas] = useState('');
+  const [coverUp, setCoverUp] = useState(false);
+  const [eyeDrop, setEyeDrop] = useState('');
+
+  const takePick = () => html2canvas(document.body).then(canvas => {
+    const croppedCanvas = document.createElement('canvas');
+    const croppedCanvasContext = croppedCanvas.getContext('2d');
+    const cropPositionTop = 0;
+    const cropPositionLeft = 0;
+    const cropWidth = window.innerWidth * 2;
+    const cropHeight = window.innerHeight * 2;
+    croppedCanvas.width = cropWidth;
+    croppedCanvas.height = cropHeight;
+    croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
+    setPickerCanvas(croppedCanvasContext);
+    setCoverUp(true);
+  });
+
+  const getEyeDrop = e => {
+    e.stopPropagation();
+    const x1 = e.clientX * 2;
+    const y1 = e.clientY * 2;
+    const [r, g, b] = pickerCanvas.getImageData(x1, y1, 1, 1).data;
+    handleChange(`rgba(${r}, ${g}, ${b}, 1)`);
+    setCoverUp(false);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "df ac jfe",
+    style: {
+      height: 28,
+      background: '#e9e9f5',
+      borderRadius: 6,
+      padding: 2,
+      cursor: 'copy'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 24
+    },
+    className: "df jc",
+    onClick: takePick
+  }, /*#__PURE__*/React.createElement(DropperIcon, null)), coverUp && /*#__PURE__*/React.createElement(Portal, {
+    id: "eyeDropCover"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      zIndex: 100000000,
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    onClick: e => getEyeDrop(e)
+  })));
 };

lib/icon.js

@@ -106,2 +106,36 @@ import React from 'react';
   }));
+};
+export const DropperIcon = () => {
+  const style1 = {
+    fill: 'none',
+    stroke: '#231f20',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.4px'
+  };
+  const style2 = {
+    fill: '#231f20',
+    stroke: '#231f20',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.4px'
+  };
+  return /*#__PURE__*/React.createElement("svg", {
+    id: "Layer_1",
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    style: {
+      width: 16
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    style: style1,
+    d: "M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z"
+  }), /*#__PURE__*/React.createElement("polygon", {
+    style: style2,
+    points: "15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87"
+  }), /*#__PURE__*/React.createElement("path", {
+    style: style2,
+    d: "M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z"
+  }));
 };

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "1.4.15",
+  "version": "1.4.16-beat.0",
   "description": "An easy to use color/gradient picker for React.js",
@@ -47,4 +47,6 @@ "main": "lib/index.js",
     "lodash.throttle": "^4.1.1",
-    "tinycolor2": "^1.4.2"
+    "tinycolor2": "^1.4.2",
+    "html2canvas": "^1.4.1",
+    "robofox-react-portal": "^1.0.1"
   }
 }

src/Controls.js

@@ -1,8 +0,14 @@
-import React from 'react'
-import TrashIcon, { LinearIcon, RadialIcon, MenuIcon } from './icon'
+import React, { useState, useRef } from 'react'
+import TrashIcon, { LinearIcon, RadialIcon, MenuIcon, DropperIcon } from './icon'
 import { usePicker } from './context'
+import html2canvas from 'html2canvas'
+import Portal from 'robofox-react-portal';
 
+var tinycolor = require("tinycolor2");
+
 const Controls = () => {
-  const { isGradient, onChange, gradientType, setSelectedColor, colors } = usePicker()
-  const isLinear = gradientType === 'linear-gradient'
+  const { isGradient, onChange, gradientType, setSelectedColor, colors, currentColor } = usePicker();
+  const [openAdvanced, setOpenAdvanced] = useState(false);
+  const isLinear = gradientType === 'linear-gradient';
+  const [inputType, setInputType] = useState('rgb');
 
@@ -18,5 +24,57 @@ const setSolid = () => {
 
+  const lighten = (value) => {
+    let newC = tinycolor(currentColor).lighten(value).toRgb()
+    console.log(newC);
+  }
+
+  const brighten = (value) => {
+    let newC = tinycolor(currentColor).brighten(value).toRgb()
+    console.log(newC);
+  }
+
+  const darken = (value) => {
+    let newC = tinycolor(currentColor).darken(value).toRgb()
+    console.log(newC);
+  }
+
+  const desaturate = (value) => {
+    let newC = tinycolor(currentColor).desaturate(value).toRgb()
+    console.log(newC);
+  }
+
+  const saturate = (value) => {
+    let newC = tinycolor(currentColor).saturate(value).toRgb()
+    console.log(newC);
+  }
+
+  const analogous = () => {
+    let colors = tinycolor(currentColor).analogous()
+    console.log(colors);
+  }
+
+  const monochromatic = () => {
+    let colors = tinycolor(currentColor).monochromatic()
+    console.log(colors);
+  }
+
+  const triad = () => {
+    let colors = tinycolor(currentColor).triad()
+    console.log(colors);
+  }
+
+  const tetrad = () => {
+    let colors = tinycolor(currentColor).tetrad()
+    console.log(colors);
+  }
+  // console.log(colors);
+  // {(isLinear && isGradient) && <DegreePicker />}
+  // {isGradient && <GradientType />}
+  // {(isGradient && colorz.length > 2) && <DeleteBtn />}
+
+
+
   return(
-    <div style={{paddingTop: 12, paddingBottom: 9, overflow: 'hidden'}} className='df jsb'>
+    <div style={{paddingTop: 12, paddingBottom: 9, overflow: 'hidden', }}>
       <div  className='df jsb ac' style={{width: '100%'}}>
+        <EyeDropper />
         <div className='df jc ac' style={{height: 28, background: '#e9e9f5', borderRadius: 6, padding: 2}}>
@@ -27,7 +85,18 @@ <div style={controlBtnStyles(!isGradient)} className='control-btn df ac' onClick={setSolid}>Solid</div>
         <div className='df ac jfe' style={{height: 28, background: '#e9e9f5', borderRadius: 6, padding: 2}}>
-          {(isLinear && isGradient) && <DegreePicker />}
-          {isGradient && <GradientType />}
-          {(isGradient && colors.length > 2) && <DeleteBtn />}
+          <div style={{width: 24}} className='df jc' onClick={() => setOpenAdvanced(!openAdvanced)}>
+            <MenuIcon />
+          </div>
         </div>
       </div>
+      <div style={{height: openAdvanced ? 200 : 0, width: '100%', transition: 'all 120ms linear'}}>
+        <div style={{paddingTop: 11, opacity: openAdvanced ? 1 : 0}}>
+          <div className='df jc ac'>
+            <div className='df ac' style={{height: 28, background: '#e9e9f5', borderRadius: 6, padding: 2}}>
+              <div style={controlBtnStyles(inputType === 'hsl')} className='control-btn df ac' onClick={() => setInputType('hsl')}>HSL</div>
+              <div style={controlBtnStyles(inputType === 'rgb')} className='control-btn df ac' onClick={() => setInputType('rgb')}>RGB</div>
+              <div style={controlBtnStyles(inputType === 'hsv')} className='control-btn df ac' onClick={() => setInputType('hsv')}>HSV</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
@@ -108,1 +177,52 @@ )
 }
+
+const EyeDropper = () => {
+  const { handleChange } = usePicker();
+  const [pickerCanvas, setPickerCanvas] = useState('')
+  const [coverUp, setCoverUp] = useState(false)
+  const [eyeDrop, setEyeDrop] = useState('')
+
+  const takePick = () => html2canvas(document.body)
+  .then((canvas) => {
+    const croppedCanvas = document.createElement('canvas')
+    const croppedCanvasContext = croppedCanvas.getContext('2d')
+
+    const cropPositionTop = 0
+    const cropPositionLeft = 0
+    const cropWidth = window.innerWidth * 2
+    const cropHeight = window.innerHeight * 2
+    croppedCanvas.width = cropWidth
+    croppedCanvas.height = cropHeight
+
+    croppedCanvasContext.drawImage(
+     canvas,
+     cropPositionLeft,
+     cropPositionTop,
+   )
+
+    setPickerCanvas(croppedCanvasContext)
+    setCoverUp(true)
+  })
+
+  const getEyeDrop = (e) => {
+    e.stopPropagation()
+    const x1 = e.clientX * 2;
+    const y1 = e.clientY * 2;
+    const [r, g, b] = pickerCanvas.getImageData(x1, y1, 1, 1).data;
+    handleChange(`rgba(${r}, ${g}, ${b}, 1)`)
+    setCoverUp(false)
+  }
+
+  return(
+    <div className='df ac jfe' style={{height: 28, background: '#e9e9f5', borderRadius: 6, padding: 2, cursor: 'copy'}}>
+      <div style={{width: 24}} className='df jc' onClick={takePick}>
+        <DropperIcon />
+      </div>
+      {coverUp &&
+        <Portal id="eyeDropCover">
+          <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100000000, width: window.innerWidth, height: window.innerHeight }} onClick={(e) => getEyeDrop(e)} />
+        </Portal>
+      }
+    </div>
+  )
+}

src/icon.jsx

@@ -43,1 +43,14 @@ import React from 'react';
 }
+
+export const DropperIcon = () => {
+  const style1 = {fill:'none', stroke: '#231f20', strokeLinecap: 'round', strokeLinejoin:'round', strokeWidth:'1.4px'}
+  const style2 = {fill:'#231f20', stroke: '#231f20', strokeLinecap: 'round', strokeLinejoin:'round', strokeWidth:'1.4px'}
+
+  return(
+    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style={{width: 16}}>
+      <path style={style1} d="M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z"/>
+      <polygon style={style2} points="15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87"/>
+      <path style={style2} d="M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z"/>
+    </svg>
+  )
+}

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

77963

increased by15.5%

Lines of code

2291

increased by14.21%

Worsened metrics

Dependency count

7

increased by40%

Number of low quality alerts

1

increased byInfinity%

Published versions last week

1

decreased by-50%

Dependency changes

• + Addedhtml2canvas@^1.4.1

• + Addedrobofox-react-portal@^1.0.1

• + Addedbase64-arraybuffer@1.0.2(transitive)

• + Addedcss-line-break@2.1.0(transitive)

• + Addedhtml2canvas@1.4.1(transitive)

• + Addedrobofox-react-portal@1.0.3(transitive)

• + Addedtext-segmentation@1.0.3(transitive)

• + Addedutrie@1.0.2(transitive)

• + Addeduuid@8.3.2(transitive)