react-color-palette - npm Package Compare versions

Comparing version 5.0.0 to 6.0.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## [6.0.0](https://github.com/Wondermarin/react-color-palette/compare/v5.0.0...v6.0.0) (2021-06-26)
+
+
+### ⚠ BREAKING CHANGES
+
+* `hideHSB` -> `hideHSV` (#14)
+
+### Bug Fixes
+
+* `hideHSB` -> `hideHSV` ([#14](https://github.com/Wondermarin/react-color-palette/issues/14)) ([b6d8e8b](https://github.com/Wondermarin/react-color-palette/commit/b6d8e8b95f31bbd8269d5a4e9aa9f8fe0be336e1))
+* Hue bar size ([#12](https://github.com/Wondermarin/react-color-palette/issues/12)) ([95084b1](https://github.com/Wondermarin/react-color-palette/commit/95084b148e37fc28cdaee7abc143161a0b7b9f6e))
+
 ## [5.0.0](https://github.com/Wondermarin/react-color-palette/compare/v4.1.0...v5.0.0) (2021-04-28)
@@ -7,0 +19,0 @@

lib/components/ColorPicker.component.d.ts

 /// <reference types="react" />
 import { ColorPickerProps } from "../interfaces/ColorPicker.interface";
-export declare const ColorPicker: ({ width, height, color, onChange, hideHEX, hideRGB, hideHSB, dark, }: ColorPickerProps) => JSX.Element;
+export declare const ColorPicker: ({ width, height, color, onChange, hideHEX, hideRGB, hideHSV, dark, }: ColorPickerProps) => JSX.Element;

lib/components/Fields.component.d.ts

 /// <reference types="react" />
 import { FieldsProps } from "../interfaces/Fields.interface";
-export declare const Fields: ({ color, hideHEX, hideRGB, hideHSB, onChange }: FieldsProps) => JSX.Element;
+export declare const Fields: ({ color, hideHEX, hideRGB, hideHSV, onChange }: FieldsProps) => JSX.Element;

lib/index.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return e>t?t:e<n?n:e}function c(e){if(!e.startsWith("#")||4===e.length){const t=document.createElement("canvas").getContext("2d");if(!t)throw new Error("2d context not supported or canvas already initialized");return t.fillStyle=e,t.fillStyle}return 7===e.length?e:"#000000"}function o(e){e=e.slice(1);return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}function s({r:e,g:t,b:n}){e/=255,t/=255,n/=255;const r=Math.max(e,t,n),l=r-Math.min(e,t,n);return{h:l?60*(r===e?(t-n)/l+(t<n?6:0):r===t?2+(n-e)/l:4+(e-t)/l):0,s:r?l/r*100:0,v:100*r}}function i({r:e,g:t,b:n}){return`#${[e,t,n].map((e=>e.toString(16).padStart(2,"0"))).join("")}`}function d(e,t){let n=c("#121212"),r=o(n),l=s(r);if("hex"===e){n=c(t),r=o(n),l=s(r)}else if("rgb"===e){r=t,n=i(r),l=s(r)}else if("hsv"===e){l=t,r=function({h:e,s:t,v:n}){const r=~~(e/60),l=e/60-r,a=(n/=100)*(1-(t/=100)),u=n*(1-t*l),c=n*(1-t*(1-l)),o=r%6;return{r:Math.round(255*[n,u,a,a,c,n][o]),g:Math.round(255*[c,n,n,u,a,a][o]),b:Math.round(255*[a,a,c,n,n,u][o])}}(l),n=i(r)}return{hex:n,rgb:r,hsv:l}}const h=({className:t,style:r,onChange:l,children:a})=>{const c=e.useRef(null),o=e=>{if(c.current){const{current:t}=c,{width:n,height:r,left:a,top:o}=t.getBoundingClientRect(),s=u(e.clientX-a,n,0),i=u(e.clientY-o,r,0);l(s,i)}};return n.default.createElement("div",{ref:c,className:t,style:r,onMouseDown:e=>{if(0!==e.button)return;o(e);const t=e=>{o(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},a)},f=({width:t,height:r,color:l,onChange:u})=>{const c=e.useMemo((()=>{const[e,n]=function(e,t,n){const{s:r,v:l}=e.hsv;return[r/100*t,(100-l)/100*n]}(l,t,r);return{x:e,y:n}}),[l,t,r]);return n.default.createElement(h,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${l.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{u(d("hsv",a(a({},l.hsv),{},{s:e/t*100,v:100-n/r*100})))}},n.default.createElement("div",{className:"rcp-saturation-cursor",style:{left:c.x,top:c.y,backgroundColor:l.hex}}))},m=({width:t,color:r,onChange:l})=>{const u=e.useMemo((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return n.default.createElement(h,{className:"rcp-hue",onChange:e=>{l(d("hsv",a(a({},r.hsv),{},{h:e/t*360})))}},n.default.createElement("div",{className:"rcp-hue-cursor",style:{left:u,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))},p=/[0-9A-F]/i;const v=({color:t,hideHEX:r,onChange:l})=>{const u=e.useCallback((()=>({value:t.hex,inputted:!1})),[t.hex]),[c,o]=e.useState(u);e.useEffect((()=>{c.inputted||o(u)}),[c.inputted,u]);return n.default.createElement(n.default.Fragment,null,!r&&n.default.createElement("div",{className:"rcp-fields-floor"},n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:c.value,onFocus:()=>o(a(a({},c),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),p.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(l(d("hex",t)),o(a(a({},c),{},{value:t})))},onBlur:()=>o(a(a({},c),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HEX"))))},g=({color:t,hideRGB:r,hideHSB:l,onChange:c})=>{const o=e.useCallback((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}`,inputted:!1})),[t.rgb]),s=e.useCallback((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%`,inputted:!1})),[t.hsv]),[i,h]=e.useState(o),[f,m]=e.useState(s);e.useEffect((()=>{i.inputted||h(o)}),[i.inputted,o]),e.useEffect((()=>{f.inputted||m(s)}),[f.inputted,s]);return n.default.createElement(n.default.Fragment,null,(!r||!l)&&n.default.createElement("div",{className:"rcp-fields-floor"},!r&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:i.value,onFocus:()=>h(a(a({},i),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map((e=>u(Number(e),255,0)));return{r:t,g:n,b:r}}(t.slice(0,3));c(d("rgb",e))}h(a(a({},i),{},{value:e.target.value}))},onBlur:()=>h(a(a({},i),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!l&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:f.value,onFocus:()=>m(a(a({},f),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map(((e,t)=>u(Number(e),t?100:360,0)));return{h:t,s:n,v:r}}(t.slice(0,3));c(d("hsv",e))}m(a(a({},f),{},{value:e.target.value}))},onBlur:()=>m(a(a({},f),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},b=({color:e,hideHEX:t,hideRGB:r,hideHSB:l,onChange:a})=>n.default.createElement(n.default.Fragment,null,(!t||!r||!l)&&n.default.createElement("div",{className:"rcp-fields"},n.default.createElement(v,{color:e,hideHEX:t,onChange:a}),n.default.createElement(g,{color:e,hideRGB:r,hideHSB:l,onChange:a})));exports.ColorPicker=({width:e,height:t=e,color:r,onChange:l,hideHEX:a=!1,hideRGB:u=!1,hideHSB:c=!1,dark:o=!1})=>n.default.createElement("div",{className:"rcp "+(o?"rcp-dark":"rcp-light"),style:{width:e}},n.default.createElement(f,{width:e,height:t,color:r,onChange:l}),n.default.createElement("div",{className:"rcp-body"},n.default.createElement(m,{width:e-40,color:r,onChange:l}),n.default.createElement(b,{color:r,hideHEX:a,hideRGB:u,hideHSB:c,onChange:l}))),exports.toColor=d,exports.useColor=function(t,n){const r=e.useCallback((()=>{if("hex"===t){return d("hex",n)}if("rgb"===t){return d("rgb",n)}if("hsv"===t){return d("hsv",n)}return d("hex","#000000")}),[t,n]),[l,a]=e.useState(r);return e.useEffect((()=>{a(r)}),[r]),[l,a]};
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(e,t,n){return e>t?t:e<n?n:e}function c(e){if(!e.startsWith("#")||4===e.length){const t=document.createElement("canvas").getContext("2d");if(!t)throw new Error("2d context not supported or canvas already initialized");return t.fillStyle=e,t.fillStyle}return 7===e.length?e:"#000000"}function o(e){e=e.slice(1);return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}function s({r:e,g:t,b:n}){e/=255,t/=255,n/=255;const r=Math.max(e,t,n),l=r-Math.min(e,t,n);return{h:l?60*(r===e?(t-n)/l+(t<n?6:0):r===t?2+(n-e)/l:4+(e-t)/l):0,s:r?l/r*100:0,v:100*r}}function i({r:e,g:t,b:n}){return`#${[e,t,n].map((e=>e.toString(16).padStart(2,"0"))).join("")}`}function d(e,t){let n=c("#121212"),r=o(n),l=s(r);if("hex"===e){n=c(t),r=o(n),l=s(r)}else if("rgb"===e){r=t,n=i(r),l=s(r)}else if("hsv"===e){l=t,r=function({h:e,s:t,v:n}){const r=~~(e/60),l=e/60-r,a=(n/=100)*(1-(t/=100)),u=n*(1-t*l),c=n*(1-t*(1-l)),o=r%6;return{r:Math.round(255*[n,u,a,a,c,n][o]),g:Math.round(255*[c,n,n,u,a,a][o]),b:Math.round(255*[a,a,c,n,n,u][o])}}(l),n=i(r)}return{hex:n,rgb:r,hsv:l}}const h=({className:t,style:r,onChange:l,children:a})=>{const c=e.useRef(null),o=e=>{if(c.current){const{current:t}=c,{width:n,height:r,left:a,top:o}=t.getBoundingClientRect(),s=u(e.clientX-a,n,0),i=u(e.clientY-o,r,0);l(s,i)}};return n.default.createElement("div",{ref:c,className:t,style:r,onMouseDown:e=>{if(0!==e.button)return;o(e);const t=e=>{o(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},a)},f=({width:t,height:r,color:a,onChange:u})=>{const c=e.useMemo((()=>{const[e,n]=function(e,t,n){const{s:r,v:l}=e.hsv;return[r/100*t,(100-l)/100*n]}(a,t,r);return{x:e,y:n}}),[a,t,r]);return n.default.createElement(h,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${a.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{u(d("hsv",l(l({},a.hsv),{},{s:e/t*100,v:100-n/r*100})))}},n.default.createElement("div",{className:"rcp-saturation-cursor",style:{left:c.x,top:c.y,backgroundColor:a.hex}}))},m=({width:t,color:r,onChange:a})=>{const u=e.useMemo((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return n.default.createElement(h,{className:"rcp-hue",onChange:e=>{a(d("hsv",l(l({},r.hsv),{},{h:e/t*360})))}},n.default.createElement("div",{className:"rcp-hue-cursor",style:{left:u,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))},p=/[0-9A-F]/i;const g=({color:t,hideHEX:r,onChange:a})=>{const u=e.useCallback((()=>({value:t.hex,inputted:!1})),[t.hex]),[c,o]=e.useState(u);e.useEffect((()=>{c.inputted||o(u)}),[c.inputted,u]);return n.default.createElement(n.default.Fragment,null,!r&&n.default.createElement("div",{className:"rcp-fields-element hex-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:c.value,onFocus:()=>o(l(l({},c),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),p.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(a(d("hex",t)),o(l(l({},c),{},{value:t})))},onBlur:()=>o(l(l({},c),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HEX")))},v=({color:t,hideRGB:r,hideHSV:a,onChange:c})=>{const o=e.useCallback((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}`,inputted:!1})),[t.rgb]),s=e.useCallback((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%`,inputted:!1})),[t.hsv]),[i,h]=e.useState(o),[f,m]=e.useState(s);e.useEffect((()=>{i.inputted||h(o)}),[i.inputted,o]),e.useEffect((()=>{f.inputted||m(s)}),[f.inputted,s]);return n.default.createElement(n.default.Fragment,null,(!r||!a)&&n.default.createElement(n.default.Fragment,null,!r&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:i.value,onFocus:()=>h(l(l({},i),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map((e=>u(Number(e),255,0)));return{r:t,g:n,b:r}}(t.slice(0,3));c(d("rgb",e))}h(l(l({},i),{},{value:e.target.value}))},onBlur:()=>h(l(l({},i),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!a&&n.default.createElement("div",{className:"rcp-fields-element"},n.default.createElement("input",{className:"rcp-fields-element-input",value:f.value,onFocus:()=>m(l(l({},f),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map(((e,t)=>u(Number(e),t?100:360,0)));return{h:t,s:n,v:r}}(t.slice(0,3));c(d("hsv",e))}m(l(l({},f),{},{value:e.target.value}))},onBlur:()=>m(l(l({},f),{},{inputted:!1}))}),n.default.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},b=({color:e,hideHEX:t,hideRGB:r,hideHSV:l,onChange:a})=>n.default.createElement(n.default.Fragment,null,(!t||!r||!l)&&n.default.createElement("div",{className:"rcp-fields"},n.default.createElement(v,{color:e,hideRGB:r,hideHSV:l,onChange:a}),n.default.createElement(g,{color:e,hideHEX:t,onChange:a})));exports.ColorPicker=({width:e,height:t=e,color:r,onChange:l,hideHEX:a=!1,hideRGB:u=!1,hideHSV:c=!1,dark:o=!1})=>n.default.createElement("div",{className:"rcp "+(o?"rcp-dark":"rcp-light"),style:{width:e}},n.default.createElement(f,{width:e,height:t,color:r,onChange:l}),n.default.createElement("div",{className:"rcp-body"},n.default.createElement(m,{width:e-40,color:r,onChange:l}),n.default.createElement(b,{color:r,hideHEX:a,hideRGB:u,hideHSV:c,onChange:l}))),exports.toColor=d,exports.useColor=function(t,n){const r=e.useCallback((()=>{if("hex"===t){return d("hex",n)}if("rgb"===t){return d("rgb",n)}if("hsv"===t){return d("hsv",n)}return d("hex","#000000")}),[t,n]),[l,a]=e.useState(r);return e.useEffect((()=>{a(r)}),[r]),[l,a]};

lib/index.module.js

@@ -1,1 +0,1 @@
-import e,{useRef as t,useMemo as n,useCallback as r,useState as l,useEffect as c}from"react";function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return e>t?t:e<n?n:e}function u(e){if(!e.startsWith("#")||4===e.length){const t=document.createElement("canvas").getContext("2d");if(!t)throw new Error("2d context not supported or canvas already initialized");return t.fillStyle=e,t.fillStyle}return 7===e.length?e:"#000000"}function h(e){e=e.slice(1);return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}function d({r:e,g:t,b:n}){e/=255,t/=255,n/=255;const r=Math.max(e,t,n),l=r-Math.min(e,t,n);return{h:l?60*(r===e?(t-n)/l+(t<n?6:0):r===t?2+(n-e)/l:4+(e-t)/l):0,s:r?l/r*100:0,v:100*r}}function m({r:e,g:t,b:n}){return`#${[e,t,n].map((e=>e.toString(16).padStart(2,"0"))).join("")}`}function p(e,t){let n=u("#121212"),r=h(n),l=d(r);if("hex"===e){n=u(t),r=h(n),l=d(r)}else if("rgb"===e){r=t,n=m(r),l=d(r)}else if("hsv"===e){l=t,r=function({h:e,s:t,v:n}){const r=~~(e/60),l=e/60-r,c=(n/=100)*(1-(t/=100)),a=n*(1-t*l),o=n*(1-t*(1-l)),s=r%6;return{r:Math.round(255*[n,a,c,c,o,n][s]),g:Math.round(255*[o,n,n,a,c,c][s]),b:Math.round(255*[c,c,o,n,n,a][s])}}(l),n=m(r)}return{hex:n,rgb:r,hsv:l}}const g=({className:n,style:r,onChange:l,children:c})=>{const a=t(null),o=e=>{if(a.current){const{current:t}=a,{width:n,height:r,left:c,top:o}=t.getBoundingClientRect(),s=i(e.clientX-c,n,0),u=i(e.clientY-o,r,0);l(s,u)}};return e.createElement("div",{ref:a,className:n,style:r,onMouseDown:e=>{if(0!==e.button)return;o(e);const t=e=>{o(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},c)},v=({width:t,height:r,color:l,onChange:c})=>{const a=n((()=>{const[e,n]=function(e,t,n){const{s:r,v:l}=e.hsv;return[r/100*t,(100-l)/100*n]}(l,t,r);return{x:e,y:n}}),[l,t,r]);return e.createElement(g,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${l.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{c(p("hsv",s(s({},l.hsv),{},{s:e/t*100,v:100-n/r*100})))}},e.createElement("div",{className:"rcp-saturation-cursor",style:{left:a.x,top:a.y,backgroundColor:l.hex}}))},f=({width:t,color:r,onChange:l})=>{const c=n((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return e.createElement(g,{className:"rcp-hue",onChange:e=>{l(p("hsv",s(s({},r.hsv),{},{h:e/t*360})))}},e.createElement("div",{className:"rcp-hue-cursor",style:{left:c,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))},b=/[0-9A-F]/i;const E=({color:t,hideHEX:n,onChange:a})=>{const o=r((()=>({value:t.hex,inputted:!1})),[t.hex]),[i,u]=l(o);c((()=>{i.inputted||u(o)}),[i.inputted,o]);return e.createElement(e.Fragment,null,!n&&e.createElement("div",{className:"rcp-fields-floor"},e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:i.value,onFocus:()=>u(s(s({},i),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),b.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(a(p("hex",t)),u(s(s({},i),{},{value:t})))},onBlur:()=>u(s(s({},i),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HEX"))))},y=({color:t,hideRGB:n,hideHSB:a,onChange:o})=>{const u=r((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}`,inputted:!1})),[t.rgb]),h=r((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%`,inputted:!1})),[t.hsv]),[d,m]=l(u),[g,v]=l(h);c((()=>{d.inputted||m(u)}),[d.inputted,u]),c((()=>{g.inputted||v(h)}),[g.inputted,h]);return e.createElement(e.Fragment,null,(!n||!a)&&e.createElement("div",{className:"rcp-fields-floor"},!n&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:d.value,onFocus:()=>m(s(s({},d),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map((e=>i(Number(e),255,0)));return{r:t,g:n,b:r}}(t.slice(0,3));o(p("rgb",e))}m(s(s({},d),{},{value:e.target.value}))},onBlur:()=>m(s(s({},d),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!a&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:g.value,onFocus:()=>v(s(s({},g),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map(((e,t)=>i(Number(e),t?100:360,0)));return{h:t,s:n,v:r}}(t.slice(0,3));o(p("hsv",e))}v(s(s({},g),{},{value:e.target.value}))},onBlur:()=>v(s(s({},g),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},C=({color:t,hideHEX:n,hideRGB:r,hideHSB:l,onChange:c})=>e.createElement(e.Fragment,null,(!n||!r||!l)&&e.createElement("div",{className:"rcp-fields"},e.createElement(E,{color:t,hideHEX:n,onChange:c}),e.createElement(y,{color:t,hideRGB:r,hideHSB:l,onChange:c}))),N=({width:t,height:n=t,color:r,onChange:l,hideHEX:c=!1,hideRGB:a=!1,hideHSB:o=!1,dark:s=!1})=>e.createElement("div",{className:"rcp "+(s?"rcp-dark":"rcp-light"),style:{width:t}},e.createElement(v,{width:t,height:n,color:r,onChange:l}),e.createElement("div",{className:"rcp-body"},e.createElement(f,{width:t-40,color:r,onChange:l}),e.createElement(C,{color:r,hideHEX:c,hideRGB:a,hideHSB:o,onChange:l})));function w(e,t){const n=r((()=>{if("hex"===e){return p("hex",t)}if("rgb"===e){return p("rgb",t)}if("hsv"===e){return p("hsv",t)}return p("hex","#000000")}),[e,t]),[a,o]=l(n);return c((()=>{o(n)}),[n]),[a,o]}export{N as ColorPicker,p as toColor,w as useColor};
+import e,{useRef as t,useMemo as n,useCallback as r,useState as l,useEffect as c}from"react";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t,n){return e>t?t:e<n?n:e}function u(e){if(!e.startsWith("#")||4===e.length){const t=document.createElement("canvas").getContext("2d");if(!t)throw new Error("2d context not supported or canvas already initialized");return t.fillStyle=e,t.fillStyle}return 7===e.length?e:"#000000"}function h(e){e=e.slice(1);return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}function d({r:e,g:t,b:n}){e/=255,t/=255,n/=255;const r=Math.max(e,t,n),l=r-Math.min(e,t,n);return{h:l?60*(r===e?(t-n)/l+(t<n?6:0):r===t?2+(n-e)/l:4+(e-t)/l):0,s:r?l/r*100:0,v:100*r}}function m({r:e,g:t,b:n}){return`#${[e,t,n].map((e=>e.toString(16).padStart(2,"0"))).join("")}`}function p(e,t){let n=u("#121212"),r=h(n),l=d(r);if("hex"===e){n=u(t),r=h(n),l=d(r)}else if("rgb"===e){r=t,n=m(r),l=d(r)}else if("hsv"===e){l=t,r=function({h:e,s:t,v:n}){const r=~~(e/60),l=e/60-r,c=(n/=100)*(1-(t/=100)),a=n*(1-t*l),o=n*(1-t*(1-l)),s=r%6;return{r:Math.round(255*[n,a,c,c,o,n][s]),g:Math.round(255*[o,n,n,a,c,c][s]),b:Math.round(255*[c,c,o,n,n,a][s])}}(l),n=m(r)}return{hex:n,rgb:r,hsv:l}}const g=({className:n,style:r,onChange:l,children:c})=>{const a=t(null),o=e=>{if(a.current){const{current:t}=a,{width:n,height:r,left:c,top:o}=t.getBoundingClientRect(),s=i(e.clientX-c,n,0),u=i(e.clientY-o,r,0);l(s,u)}};return e.createElement("div",{ref:a,className:n,style:r,onMouseDown:e=>{if(0!==e.button)return;o(e);const t=e=>{o(e)},n=()=>{document.removeEventListener("mousemove",t,!1),document.removeEventListener("mouseup",n,!1)};document.addEventListener("mousemove",t,!1),document.addEventListener("mouseup",n,!1)}},c)},v=({width:t,height:r,color:l,onChange:c})=>{const a=n((()=>{const[e,n]=function(e,t,n){const{s:r,v:l}=e.hsv;return[r/100*t,(100-l)/100*n]}(l,t,r);return{x:e,y:n}}),[l,t,r]);return e.createElement(g,{className:"rcp-saturation",style:{height:r,backgroundColor:`hsl(${l.hsv.h}, 100%, 50%)`},onChange:(e,n)=>{c(p("hsv",o(o({},l.hsv),{},{s:e/t*100,v:100-n/r*100})))}},e.createElement("div",{className:"rcp-saturation-cursor",style:{left:a.x,top:a.y,backgroundColor:l.hex}}))},f=({width:t,color:r,onChange:l})=>{const c=n((()=>function(e,t){return e/360*t}(r.hsv.h,t)),[r.hsv.h,t]);return e.createElement(g,{className:"rcp-hue",onChange:e=>{l(p("hsv",o(o({},r.hsv),{},{h:e/t*360})))}},e.createElement("div",{className:"rcp-hue-cursor",style:{left:c,backgroundColor:`hsl(${r.hsv.h}, 100%, 50%)`}}))},b=/[0-9A-F]/i;const E=({color:t,hideHEX:n,onChange:a})=>{const s=r((()=>({value:t.hex,inputted:!1})),[t.hex]),[i,u]=l(s);c((()=>{i.inputted||u(s)}),[i.inputted,s]);return e.createElement(e.Fragment,null,!n&&e.createElement("div",{className:"rcp-fields-element hex-element"},e.createElement("input",{className:"rcp-fields-element-input",value:i.value,onFocus:()=>u(o(o({},i),{},{inputted:!0})),onChange:e=>{const t=e.target.value;(function(e){return e.startsWith("#")?(e=e.slice(1),b.test(e[e.length-1])):/\w/i.test(e)&&!/\d/.test(e)||""===e})(t)&&(a(p("hex",t)),u(o(o({},i),{},{value:t})))},onBlur:()=>u(o(o({},i),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HEX")))},y=({color:t,hideRGB:n,hideHSV:a,onChange:s})=>{const u=r((()=>({value:`${t.rgb.r}, ${t.rgb.g}, ${t.rgb.b}`,inputted:!1})),[t.rgb]),h=r((()=>({value:`${Math.round(t.hsv.h)}°, ${Math.round(t.hsv.s)}%, ${Math.round(t.hsv.v)}%`,inputted:!1})),[t.hsv]),[d,m]=l(u),[g,v]=l(h);c((()=>{d.inputted||m(u)}),[d.inputted,u]),c((()=>{g.inputted||v(h)}),[g.inputted,h]);return e.createElement(e.Fragment,null,(!n||!a)&&e.createElement(e.Fragment,null,!n&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:d.value,onFocus:()=>m(o(o({},d),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map((e=>i(Number(e),255,0)));return{r:t,g:n,b:r}}(t.slice(0,3));s(p("rgb",e))}m(o(o({},d),{},{value:e.target.value}))},onBlur:()=>m(o(o({},d),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"RGB")),!a&&e.createElement("div",{className:"rcp-fields-element"},e.createElement("input",{className:"rcp-fields-element-input",value:g.value,onFocus:()=>v(o(o({},g),{},{inputted:!0})),onChange:e=>{const t=e.target.value.match(/\d+/g);if(t&&3===t.length){const e=function(e){const[t,n,r]=e.map(((e,t)=>i(Number(e),t?100:360,0)));return{h:t,s:n,v:r}}(t.slice(0,3));s(p("hsv",e))}v(o(o({},g),{},{value:e.target.value}))},onBlur:()=>v(o(o({},g),{},{inputted:!1}))}),e.createElement("label",{className:"rcp-fields-element-label"},"HSV"))))},C=({color:t,hideHEX:n,hideRGB:r,hideHSV:l,onChange:c})=>e.createElement(e.Fragment,null,(!n||!r||!l)&&e.createElement("div",{className:"rcp-fields"},e.createElement(y,{color:t,hideRGB:r,hideHSV:l,onChange:c}),e.createElement(E,{color:t,hideHEX:n,onChange:c}))),N=({width:t,height:n=t,color:r,onChange:l,hideHEX:c=!1,hideRGB:a=!1,hideHSV:o=!1,dark:s=!1})=>e.createElement("div",{className:"rcp "+(s?"rcp-dark":"rcp-light"),style:{width:t}},e.createElement(v,{width:t,height:n,color:r,onChange:l}),e.createElement("div",{className:"rcp-body"},e.createElement(f,{width:t-40,color:r,onChange:l}),e.createElement(C,{color:r,hideHEX:c,hideRGB:a,hideHSV:o,onChange:l})));function w(e,t){const n=r((()=>{if("hex"===e){return p("hex",t)}if("rgb"===e){return p("rgb",t)}if("hsv"===e){return p("hsv",t)}return p("hex","#000000")}),[e,t]),[a,o]=l(n);return c((()=>{o(n)}),[n]),[a,o]}export{N as ColorPicker,p as toColor,w as useColor};

lib/interfaces/ColorPicker.interface.d.ts

@@ -29,5 +29,5 @@ /// <reference types="react" />
     /**
-     * Hide HSB field.
+     * Hide HSV field.
      */
-    readonly hideHSB?: boolean;
+    readonly hideHSV?: boolean;
     /**
@@ -34,0 +34,0 @@ * Color theme.

lib/interfaces/Fields.interface.d.ts

@@ -11,3 +11,3 @@ /// <reference types="react" />
     readonly hideRGB: boolean;
-    readonly hideHSB: boolean;
+    readonly hideHSV: boolean;
     readonly onChange: React.Dispatch<React.SetStateAction<Color>>;
@@ -19,4 +19,4 @@ }
     readonly hideRGB: boolean;
-    readonly hideHSB: boolean;
+    readonly hideHSV: boolean;
     readonly onChange: React.Dispatch<React.SetStateAction<Color>>;
 }

package.json

 {
   "name": "react-color-palette",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "🎨 Lightweight Color Picker component for React.",
@@ -65,6 +65,4 @@ "main": "lib/index.js",
     "build": "yarn build:js && yarn build:types",
-    "predemo:build": "del-cli demo/build",
-    "demo:build": "parcel build demo/index.html --dist-dir demo/build --target demo --public-url . --no-source-maps",
-    "predemo:start": "del-cli demo/build",
-    "demo:start": "parcel serve demo/index.html --dist-dir demo/build --port 3000 --open --log-level verbose --no-source-maps",
+    "demo:build": "vite build",
+    "demo:dev": "vite",
     "predemo:deploy": "yarn demo:build",
@@ -81,34 +79,33 @@ "demo:deploy": "gh-pages -d demo/build",
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@parcel/packager-raw-url": "2.0.0-beta.2",
-    "@parcel/transformer-webmanifest": "2.0.0-beta.2",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@types/node": "^14.14.37",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "@typescript-eslint/parser": "^4.20.0",
-    "del-cli": "^3.0.1",
-    "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.1",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@types/node": "^15.12.4",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
+    "@vitejs/plugin-react-refresh": "^1.3.3",
+    "del-cli": "^4.0.0",
+    "eslint": "^7.29.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "gh-pages": "^3.1.0",
-    "parcel": "^2.0.0-beta.2",
-    "prettier": "^2.2.1",
+    "gh-pages": "^3.2.3",
+    "prettier": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rollup": "^2.45.2",
+    "rollup": "^2.52.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-terser": "^7.0.2",
-    "standard-version": "^9.1.1",
-    "typescript": "^4.2.3"
+    "standard-version": "^9.3.0",
+    "typescript": "^4.3.4",
+    "vite": "^2.3.8"
   }
 }

README.md

@@ -11,3 +11,3 @@ <div align="center">
   <a href="https://bundlephobia.com/result?p=react-color-palette">
-    <img alt="size" src="https://badgen.net/bundlephobia/minzip/react-color-palette?color=561ecb" />
+    <img alt="size" src="https://badgen.net/bundlephobia/minzip/react-color-palette@latest?color=561ecb" />
   </a>
@@ -32,3 +32,3 @@ <br />
 
-- 🚀 **Lightweight (3.5KB)**.
+- 🚀 **Lightweight (2.5 KB)**.
 - 💨 **No dependencies**.
@@ -70,9 +70,9 @@ - 🛡️ **Strict (written in TypeScript)**.
 
-| Library | Minified | Gzipped | Dependencies |
-| ------- | -------- | ------- | ------------ |
-| **react-color-palette** | ![](https://badgen.net/bundlephobia/min/react-color-palette?color=green&label=) | ![](https://badgen.net/bundlephobia/minzip/react-color-palette?color=green&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-color-palette?color=green&label=) |
-| react-colorful | ![](https://badgen.net/bundlephobia/min/react-colorful?color=green&label=) | ![](https://badgen.net/bundlephobia/minzip/react-colorful?color=green&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-colorful?color=green&label=) |
-| react-input-color | ![](https://badgen.net/bundlephobia/min/react-input-color?color=red&label=) | ![](https://badgen.net/bundlephobia/minzip/react-input-color?color=orange&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-input-color?color=red&label=) |
-| rc-color-picker | ![](https://badgen.net/bundlephobia/min/rc-color-picker?color=red&label=) | ![](https://badgen.net/bundlephobia/minzip/rc-color-picker?color=red&label=) | ![](https://badgen.net/bundlephobia/dependency-count/rc-color-picker?color=red&label=) |
-| react-color | ![](https://badgen.net/bundlephobia/min/react-color?color=red&label=) | ![](https://badgen.net/bundlephobia/minzip/react-color?color=red&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-color?color=red&label=) |
+| Library | Minified | Gzipped | Dependencies | Tree Shaking | Type Declarations |
+| :-----: | :------: | :-----: | :----------: | :----------: | :---------------: |
+| **react-color-palette** | ![](https://badgen.net/bundlephobia/min/react-color-palette@latest?color=green&label=) | ![](https://badgen.net/bundlephobia/minzip/react-color-palette@latest?color=green&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-color-palette@latest?color=green&label=) | ![](https://badgen.net/bundlephobia/tree-shaking/react-color-palette@latest?label=) | ![](https://badgen.net/npm/types/react-color-palette?color=green&label=) |
+| react-colorful | ![](https://badgen.net/bundlephobia/min/react-colorful@latest?color=orange&label=) | ![](https://badgen.net/bundlephobia/minzip/react-colorful@latest?color=green&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-colorful@latest?color=green&label=) | ![](https://badgen.net/bundlephobia/tree-shaking/react-colorful@latest?label=) | ![](https://badgen.net/npm/types/react-colorful?color=green&label=) |
+| react-input-color | ![](https://badgen.net/bundlephobia/min/react-input-color@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/minzip/react-input-color@latest?color=orange&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-input-color@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/tree-shaking/react-input-color@latest?label=) | ![](https://badgen.net/npm/types/react-input-color?color=green&label=) |
+| rc-color-picker | ![](https://badgen.net/bundlephobia/min/rc-color-picker@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/minzip/rc-color-picker@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/dependency-count/rc-color-picker@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/tree-shaking/rc-color-picker@latest?label=) | ![](https://badgen.net/npm/types/rc-color-picker?color=red&label=) |
+| react-color | ![](https://badgen.net/bundlephobia/min/react-color@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/minzip/react-color@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/dependency-count/react-color@latest?color=red&label=) | ![](https://badgen.net/bundlephobia/tree-shaking/react-color@latest?label=) | ![](https://badgen.net/npm/types/react-color?color=orange&label=) |
 
@@ -79,0 +79,0 @@ <hr />

Fixed alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

43112

increased by2.49%

Dev dependency count

30

decreased by-3.23%

Lines of code

354

increased by0.28%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes