react-eyedrop
Advanced tools
Comparing version 5.2.1 to 5.3.0
@@ -9,2 +9,5 @@ export declare const ERROR_MSGS: { | ||
}; | ||
targetToCanvas: { | ||
targetNotElement: string; | ||
}; | ||
imageToCanvas: { | ||
@@ -19,4 +22,5 @@ targetNotImg: string; | ||
export declare const TARGET_NODE_TYPE_NOT_IMG_ERROR: Error; | ||
export declare const TARGET_NOT_HTML_ELEMENT_ERROR: Error; | ||
export declare const VAL_NOT_RGB_OBJ_ARRAY_ERROR: Error; | ||
export declare const ZERO_PIXELS_FOUND_ERROR: Error; | ||
export declare const ELEMENT_NOT_CANVAS_ERROR: Error; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.ELEMENT_NOT_CANVAS_ERROR = exports.ZERO_PIXELS_FOUND_ERROR = exports.VAL_NOT_RGB_OBJ_ARRAY_ERROR = exports.TARGET_NODE_TYPE_NOT_IMG_ERROR = exports.PICK_RADIUS_OUT_OF_BOUNDS_ERROR = exports.ERROR_MSGS = void 0; | ||
exports.ELEMENT_NOT_CANVAS_ERROR = exports.ZERO_PIXELS_FOUND_ERROR = exports.VAL_NOT_RGB_OBJ_ARRAY_ERROR = exports.TARGET_NOT_HTML_ELEMENT_ERROR = exports.TARGET_NODE_TYPE_NOT_IMG_ERROR = exports.PICK_RADIUS_OUT_OF_BOUNDS_ERROR = exports.ERROR_MSGS = void 0; | ||
exports.ERROR_MSGS = { | ||
@@ -12,2 +12,5 @@ calcAverageColor: { | ||
}, | ||
targetToCanvas: { | ||
targetNotElement: 'targetToCanvas: event target not HTML element' | ||
}, | ||
imageToCanvas: { | ||
@@ -22,4 +25,5 @@ targetNotImg: 'imageToCanvas: event target not of node type img' | ||
exports.TARGET_NODE_TYPE_NOT_IMG_ERROR = new Error(exports.ERROR_MSGS.imageToCanvas.targetNotImg); | ||
exports.TARGET_NOT_HTML_ELEMENT_ERROR = new Error(exports.ERROR_MSGS.targetToCanvas.targetNotElement); | ||
exports.VAL_NOT_RGB_OBJ_ARRAY_ERROR = new Error(exports.ERROR_MSGS.calcAverageColor.notArrayOfRgbObj); | ||
exports.ZERO_PIXELS_FOUND_ERROR = new Error(exports.ERROR_MSGS.calcAverageColor.noPixelsFound); | ||
exports.ELEMENT_NOT_CANVAS_ERROR = new Error(exports.ERROR_MSGS.getCanvasBlockColors.elementNotCanvas); |
"use strict"; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.EyeDropper = void 0; | ||
const React = require("react"); | ||
const getCanvasPixelColor = require("get-canvas-pixel-color"); | ||
const _html2canvas = require("html2canvas"); | ||
const calcAverageColor_1 = require("./calcAverageColor"); | ||
const extractColors_1 = require("./extractColors"); | ||
const imageToCanvas_1 = require("./imageToCanvas"); | ||
const parseRgb_1 = require("./parseRgb"); | ||
const rgbToHex_1 = require("./rgbToHex"); | ||
const validatePickRadius_1 = require("./validatePickRadius"); | ||
const html2canvas = _html2canvas; | ||
const parseRgb_1 = require("./colorUtils/parseRgb"); | ||
const rgbToHex_1 = require("./colorUtils/rgbToHex"); | ||
const validatePickRadius_1 = require("./validations/validatePickRadius"); | ||
const targetToCanvas_1 = require("./targetToCanvas"); | ||
const getColor_1 = require("./getColor"); | ||
const { useCallback, useEffect, useState } = React; | ||
@@ -46,7 +51,7 @@ const styles = { | ||
}); | ||
onPickEnd(); | ||
onPickEnd && onPickEnd(); | ||
}, [setPickingMode, onPickEnd]); | ||
const exitPickByEscKey = useCallback((event) => { | ||
event.keyCode === 27 && pickingColorFromDocument && deactivateColorPicking(); | ||
}, [setPickingMode, pickingColorFromDocument]); | ||
event.code === 'Escape' && pickingColorFromDocument && deactivateColorPicking(); | ||
}, [pickingColorFromDocument, deactivateColorPicking]); | ||
const pickColor = () => { | ||
@@ -69,28 +74,9 @@ if (onPickStart) { | ||
}, [customProps, onChange]); | ||
const targetToCanvas = useCallback((e) => { | ||
const extractColor = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () { | ||
const { target } = e; | ||
if (target.nodeName.toLowerCase() === 'img') { | ||
// Convert image to canvas because `html2canvas` can not | ||
const { offsetX, offsetY } = e; | ||
(0, imageToCanvas_1.imageToCanvas)(target).then((value) => { | ||
const { r, g, b } = getCanvasPixelColor(value, offsetX, offsetY); | ||
updateColors({ r, g, b }); | ||
once && deactivateColorPicking(); | ||
}); | ||
return; | ||
} | ||
const { offsetX, offsetY } = e; | ||
html2canvas(target, { logging: false }).then((canvasEl) => { | ||
if (pickRadius === undefined || pickRadius === 0) { | ||
const { r, g, b } = getCanvasPixelColor(canvasEl, offsetX, offsetY); | ||
updateColors({ r, g, b }); | ||
} | ||
else { | ||
const colorBlock = (0, extractColors_1.extractColors)(canvasEl, pickRadius, offsetX, offsetY); | ||
const rgbColor = (0, calcAverageColor_1.calcAverageColor)(colorBlock); | ||
updateColors(rgbColor); | ||
} | ||
}); | ||
const targetCanvas = yield (0, targetToCanvas_1.targetToCanvas)(target); | ||
const rgbColor = (0, getColor_1.getColor)(pickRadius, targetCanvas, e); | ||
updateColors(rgbColor); | ||
once && deactivateColorPicking(); | ||
}, [deactivateColorPicking, once, pickRadius, updateColors]); | ||
}), [deactivateColorPicking, once, pickRadius, updateColors]); | ||
useEffect(() => { | ||
@@ -105,15 +91,17 @@ onInit && onInit(); | ||
if (pickingColorFromDocument) { | ||
document.addEventListener('click', targetToCanvas); | ||
document.addEventListener('click', extractColor); | ||
} | ||
return () => { | ||
document.removeEventListener('click', targetToCanvas); | ||
document.removeEventListener('click', extractColor); | ||
}; | ||
}, [pickingColorFromDocument, once, targetToCanvas]); | ||
}, [pickingColorFromDocument, once, extractColor]); | ||
// setup listener for the esc key | ||
useEffect(() => { | ||
document.addEventListener('keydown', exitPickByEscKey); | ||
if (pickingColorFromDocument) { | ||
document.addEventListener('keydown', exitPickByEscKey); | ||
} | ||
return () => { | ||
document.removeEventListener('keydown', exitPickByEscKey); | ||
}; | ||
}, [exitPickByEscKey]); | ||
}, [pickingColorFromDocument, exitPickByEscKey]); | ||
const shouldColorsPassThrough = colorsPassThrough ? { [colorsPassThrough]: colors } : {}; | ||
@@ -120,0 +108,0 @@ return (React.createElement("div", { style: styles.eyedropperWrapper, className: wrapperClasses }, CustomComponent ? (React.createElement(CustomComponent, Object.assign({ onClick: pickColor }, shouldColorsPassThrough, { customProps: customProps, disabled: buttonDisabled }))) : (React.createElement(React.Fragment, null, |
@@ -6,3 +6,4 @@ import { HookOptions } from './types'; | ||
}; | ||
export declare const useEyeDrop: ({ once, pickRadius, cursorActive, cursorInactive, }?: HookOptions) => [typeof initialStateColors, () => void, () => void]; | ||
declare type ReturnValue = [typeof initialStateColors, () => void, () => void]; | ||
export declare const useEyeDrop: ({ once, pickRadius, cursorActive, cursorInactive, }?: HookOptions) => ReturnValue; | ||
export {}; |
"use strict"; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useEyeDrop = void 0; | ||
const React = require("react"); | ||
const getCanvasPixelColor = require("get-canvas-pixel-color"); | ||
const _html2canvas = require("html2canvas"); | ||
const imageToCanvas_1 = require("./imageToCanvas"); | ||
const extractColors_1 = require("./extractColors"); | ||
const calcAverageColor_1 = require("./calcAverageColor"); | ||
const parseRgb_1 = require("./parseRgb"); | ||
const rgbToHex_1 = require("./rgbToHex"); | ||
const parseRgb_1 = require("./colorUtils/parseRgb"); | ||
const rgbToHex_1 = require("./colorUtils/rgbToHex"); | ||
const targetToCanvas_1 = require("./targetToCanvas"); | ||
const getColor_1 = require("./getColor"); | ||
const react_1 = require("react"); | ||
const { useEffect, useState } = React; | ||
const html2canvas = _html2canvas; | ||
const initialStateColors = { rgb: '', hex: '' }; | ||
@@ -21,2 +27,8 @@ const useEyeDrop = ({ once, pickRadius, cursorActive = 'copy', cursorInactive = 'auto', } = {}) => { | ||
}; | ||
const cancelPickColor = () => { | ||
setPickingColorFromDocument(false); | ||
}; | ||
const exitPickByEscKey = (0, react_1.useCallback)((event) => { | ||
event.code === 'Escape' && pickingColorFromDocument && cancelPickColor(); | ||
}, [pickingColorFromDocument, cancelPickColor]); | ||
const updateColors = (rgbObj) => { | ||
@@ -27,49 +39,33 @@ const rgb = (0, parseRgb_1.parseRGB)(rgbObj); | ||
}; | ||
const targetToCanvas = (e) => { | ||
const extractColor = (0, react_1.useCallback)((e) => __awaiter(void 0, void 0, void 0, function* () { | ||
const { target } = e; | ||
if (target.nodeName.toLowerCase() === 'img') { | ||
// Convert image to canvas because `html2canvas` can not | ||
const { offsetX, offsetY } = e; | ||
(0, imageToCanvas_1.imageToCanvas)(target).then((value) => { | ||
const { r, g, b } = getCanvasPixelColor(value, offsetX, offsetY); | ||
updateColors({ r, g, b }); | ||
once && setPickingColorFromDocument(false); | ||
}); | ||
return; | ||
} | ||
const { offsetX, offsetY } = e; | ||
html2canvas(target, { logging: false }) | ||
.then((canvasEl) => { | ||
if (pickRadius === undefined || pickRadius === 0) { | ||
const { r, g, b } = getCanvasPixelColor(canvasEl, offsetX, offsetY); | ||
updateColors({ r, g, b }); | ||
} | ||
else { | ||
const colorBlock = (0, extractColors_1.extractColors)(canvasEl, pickRadius, offsetX, offsetY); | ||
const rgbColor = (0, calcAverageColor_1.calcAverageColor)(colorBlock); | ||
updateColors(rgbColor); | ||
} | ||
}); | ||
const targetCanvas = yield (0, targetToCanvas_1.targetToCanvas)(target); | ||
const rgbColor = (0, getColor_1.getColor)(pickRadius, targetCanvas, e); | ||
updateColors(rgbColor); | ||
once && setPickingColorFromDocument(false); | ||
}; | ||
const cancelPickColor = () => { | ||
setPickingColorFromDocument(false); | ||
}; | ||
}), [once, setPickingColorFromDocument]); | ||
useEffect(() => { | ||
if (pickingColorFromDocument) { | ||
document.addEventListener('click', targetToCanvas); | ||
document.addEventListener('click', extractColor); | ||
} | ||
return () => { | ||
if (once || pickingColorFromDocument) { | ||
document.removeEventListener('click', targetToCanvas); | ||
} | ||
document.removeEventListener('click', extractColor); | ||
}; | ||
}, [pickingColorFromDocument, once]); | ||
}, [pickingColorFromDocument, once, extractColor]); | ||
// setup listener for the esc key | ||
useEffect(() => { | ||
if (pickingColorFromDocument) { | ||
document.addEventListener('keydown', exitPickByEscKey); | ||
} | ||
return () => { | ||
document.removeEventListener('keydown', exitPickByEscKey); | ||
}; | ||
}, [pickingColorFromDocument, exitPickByEscKey]); | ||
useEffect(() => { | ||
if (document.body) { | ||
document.body.style.cursor = pickingColorFromDocument ? cursorActive : cursorInactive; | ||
} | ||
}, [pickingColorFromDocument]); | ||
}, [pickingColorFromDocument, cursorActive, cursorInactive]); | ||
return [colors, pickColor, cancelPickColor]; | ||
}; | ||
exports.useEyeDrop = useEyeDrop; |
{ | ||
"name": "react-eyedrop", | ||
"version": "5.2.1", | ||
"version": "5.3.0", | ||
"description": "A reusable ColorPick EyeDropper written in React & TypeScript.", | ||
@@ -29,3 +29,3 @@ "main": "dist/index.js", | ||
"scripts": { | ||
"build": "tsc", | ||
"build": "rm -rf dist && tsc", | ||
"test": "jest", | ||
@@ -32,0 +32,0 @@ "test:watch": "jest --watch", |
@@ -283,3 +283,5 @@ # React EyeDrop | ||
* 5.2.0 | ||
* 5.3.0 | ||
* Now handles any HTML element with background property | ||
* 5.2.1 | ||
* Added `onPickEnd` property | ||
@@ -286,0 +288,0 @@ * 5.1.3 |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
35046
34
561
343