react-color-palette - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [4.1.0](https://github.com/Wondermarin/react-color-palette/compare/v4.0.0...v4.1.0) (2021-04-16)
+
+
+### Features
+
+* Now `Saturation` is a `div` ([5dd224a](https://github.com/Wondermarin/react-color-palette/commit/5dd224a78373b20c99a799e737824d7063b16991))
+
 ## [4.0.0](https://github.com/Wondermarin/react-color-palette/compare/v3.1.0...v4.0.0) (2021-04-03)
@@ -7,0 +14,0 @@

lib/components/ColorPicker/ColorPicker.component.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../Saturation/Saturation.component.js"),i=require("../Hue/Hue.component.js"),r=require("../Fields/Fields.component.js"),o=require("react/jsx-runtime");exports.default=function(t){var d=t.width,n=t.height,s=void 0===n?d:n,a=t.color,c=t.onChange,h=t.hideHEX,u=void 0!==h&&h,l=t.hideRGB,j=void 0!==l&&l,p=t.hideHSB,v=void 0!==p&&p,x=t.dark,g=void 0!==x&&x;return o.jsxs("div",{className:"rcp ".concat(g?"rcp-dark":"rcp-light"),children:[o.jsx(e.Saturation,{width:d,height:s,color:a,onChange:c}),o.jsxs("div",{className:"rcp-body",style:{width:d-32},children:[o.jsx(i.Hue,{width:d-32,color:a,onChange:c}),o.jsx(r.Fields,{color:a,hideHEX:u,hideRGB:j,hideHSB:v,onChange:c})]})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../Saturation/Saturation.component.js"),i=require("../Hue/Hue.component.js"),r=require("../Fields/Fields.component.js"),o=require("react/jsx-runtime");exports.default=function(t){var d=t.width,n=t.height,s=void 0===n?d:n,a=t.color,c=t.onChange,h=t.hideHEX,u=void 0!==h&&h,l=t.hideRGB,j=void 0!==l&&l,p=t.hideHSB,v=void 0!==p&&p,x=t.dark,g=void 0!==x&&x;return o.jsxs("div",{className:"rcp ".concat(g?"rcp-dark":"rcp-light"),style:{width:d},children:[o.jsx(e.Saturation,{width:d,height:s,color:a,onChange:c}),o.jsxs("div",{className:"rcp-body",children:[o.jsx(i.Hue,{width:d-40,color:a,onChange:c}),o.jsx(r.Fields,{color:a,hideHEX:u,hideRGB:j,hideHSB:v,onChange:c})]})]})};

lib/components/Saturation/Saturation.component.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../utils/moveAt/moveAt.js"),r=require("../../utils/getColorByCoordinates/getColorByCoordinates.js"),n=require("../../utils/getCoordinatesByColor/getCoordinatesByColor.js"),o=require("react/jsx-runtime");function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw i}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return a(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}exports.Saturation=function(a){var u=a.width,l=a.height,c=a.color,s=a.onChange,f=e.useRef(null);e.useEffect((function(){!function(){if(f.current){var e=f.current.getContext("2d");if(e){var t=e.createLinearGradient(0,l/2,u,l/2);t.addColorStop(0,"white"),t.addColorStop(1,"hsl(".concat(c.hsb.h,", 100%, 50%)")),e.fillStyle=t,e.fillRect(0,0,u,l);var r=e.createLinearGradient(u/2,0,u/2,l);r.addColorStop(0,"transparent"),r.addColorStop(1,"black"),e.fillStyle=r,e.fillRect(0,0,u,l)}}}()}),[c.hsb.h,u,l]);var d=e.useMemo((function(){var e=i(n.getCoordinatesByColor(c,u,l),2);return{x:e[0],y:e[1]}}),[c,u,l]),v=function(e,n,o,a){var f=i(t.moveAt({value:e,shift:o,min:0,max:u},{value:n,shift:a,min:0,max:l}),2),d=f[0],v=f[1],m=r.getColorByCoordinates(c.hsb.h,d,v,u,l);s(m)};return o.jsxs("div",{className:"rcp-saturation",onMouseDown:function(e){if(f.current){var t;if(0!==e.button)return;var r=f.current;null===(t=document.getSelection())||void 0===t||t.empty();var n=r.getBoundingClientRect(),o=n.left,i=n.top;v(e.clientX,e.clientY,o,i);var a=function(e){v(e.clientX,e.clientY,o,i)};document.addEventListener("mousemove",a,!1),document.addEventListener("mouseup",(function e(){document.removeEventListener("mousemove",a,!1),document.removeEventListener("mouseup",e,!1)}),!1)}},children:[o.jsx("canvas",{ref:f,width:u,height:l}),o.jsx("div",{className:"rcp-saturation-cursor",style:{left:d.x,top:d.y,backgroundColor:c.hex}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../utils/moveAt/moveAt.js"),r=require("../../utils/getColorByCoordinates/getColorByCoordinates.js"),n=require("../../utils/getCoordinatesByColor/getCoordinatesByColor.js"),o=require("react/jsx-runtime");function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var u,a=e[Symbol.iterator]();!(n=(u=a.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==a.return||a.return()}finally{if(o)throw i}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}exports.Saturation=function(u){var a=u.width,l=u.height,s=u.color,c=u.onChange,f=e.useRef(null),m=e.useMemo((function(){var e=i(n.getCoordinatesByColor(s,a,l),2);return{x:e[0],y:e[1]}}),[s,a,l]),d=function(e,n,o,u){var f=i(t.moveAt({value:e,shift:o,min:0,max:a},{value:n,shift:u,min:0,max:l}),2),m=f[0],d=f[1],v=r.getColorByCoordinates(s.hsb.h,m,d,a,l);c(v)};return o.jsx("div",{ref:f,className:"rcp-saturation",style:{height:l,backgroundColor:"hsl(".concat(s.hsb.h,", 100%, 50%)")},onMouseDown:function(e){if(f.current){var t;if(0!==e.button)return;var r=f.current;null===(t=document.getSelection())||void 0===t||t.empty();var n=r.getBoundingClientRect(),o=n.left,i=n.top;d(e.clientX,e.clientY,o,i);var u=function(e){d(e.clientX,e.clientY,o,i)};document.addEventListener("mousemove",u,!1),document.addEventListener("mouseup",(function e(){document.removeEventListener("mousemove",u,!1),document.removeEventListener("mouseup",e,!1)}),!1)}},children:o.jsx("div",{className:"rcp-saturation-cursor",style:{left:m.x,top:m.y,backgroundColor:s.hex}})})};

package.json

 {
   "name": "react-color-palette",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Color picker for React",
@@ -34,5 +34,6 @@ "main": "lib/index",
     "test": "yarn test:lint && yarn test:typescript",
+    "build:js": "rollup --config rollup.config.prod.ts",
     "build:types": "tsc --emitDeclarationOnly",
-    "build:js": "rollup --config rollup.config.ts",
     "build": "yarn build:js && yarn build:types",
+    "start": "rollup --config rollup.config.dev.ts -w",
     "release:first": "standard-version --first-release",
@@ -59,2 +60,3 @@ "release:alpha": "standard-version --prerelease alpha",
     "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-html": "^0.2.3",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -64,2 +66,3 @@ "@rollup/plugin-replace": "^2.4.2",
     "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
@@ -72,6 +75,11 @@ "@typescript-eslint/parser": "^4.20.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "postcss": "^8.2.9",
     "prettier": "^2.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rollup": "^2.44.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dev": "^1.1.3",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-progress": "^1.1.2",
@@ -78,0 +86,0 @@ "rollup-plugin-terser": "^7.0.2",

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

34307

increased by0.79%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

34

increased by25.93%

Lines of code

321

decreased by-0.31%

No dependency changes