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

Comparing version 3.0.13-beta.1 to 3.0.13-beta.2

dist/cjs/components/Inputs.js

@@ -46,7 +46,5 @@ "use strict";
 var Input = function (_a) {
-    var label = _a.label, value = _a.value, callback = _a.callback, _b = _a.max, max = _b === void 0 ? 100 : _b;
+    var label = _a.label, value = _a.value, callback = _a.callback, _b = _a.max, max = _b === void 0 ? 100 : _b, hideOpacity = _a.hideOpacity, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _c = (0, react_1.useState)(value), temp = _c[0], setTemp = _c[1];
-    var _d = (0, context_js_1.usePicker)(), _e = _d.hc, hc = _e === void 0 ? {} : _e, hideOpacity = _d.hideOpacity, defaultStyles = _d.defaultStyles, pickerIdSuffix = _d.pickerIdSuffix;
     var width = hideOpacity ? '22%' : '18%';
-    var opacity = hc.a;
     (0, react_1.useEffect)(function () {
@@ -61,11 +59,10 @@ setTemp(value);
     return (react_1.default.createElement("div", { style: { width: width }, id: "rbgcp-".concat(label, "-input-wrapper").concat(pickerIdSuffix) },
-        react_1.default.createElement("input", { onChange: function (e) { return onChange(e); }, style: __assign({}, defaultStyles.rbgcpInput), value: "".concat(temp).concat((0, converters_js_1.getHexAlpha)(opacity)), id: "rbgcp-".concat(label, "-input").concat(pickerIdSuffix) }),
+        react_1.default.createElement("input", { value: temp, onChange: function (e) { return onChange(e); }, style: __assign({}, defaultStyles.rbgcpInput), id: "rbgcp-".concat(label, "-input").concat(pickerIdSuffix) }),
         react_1.default.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
 };
 var HexInput = function (_a) {
-    var opacity = _a.opacity;
-    var _b = (0, context_js_1.usePicker)(), handleChange = _b.handleChange, tinyColor = _b.tinyColor, defaultStyles = _b.defaultStyles, pickerIdSuffix = _b.pickerIdSuffix;
-    var _c = (0, react_1.useState)(''), disable = _c[0], setDisable = _c[1];
+    var opacity = _a.opacity, tinyColor = _a.tinyColor, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var _b = (0, react_1.useState)(''), disable = _b[0], setDisable = _b[1];
     var hex = tinyColor.toHex();
-    var _d = (0, react_1.useState)(hex), newHex = _d[0], setNewHex = _d[1];
+    var _c = (0, react_1.useState)(hex), newHex = _c[0], setNewHex = _c[1];
     (0, react_1.useEffect)(function () {
@@ -92,7 +89,7 @@ if (disable !== 'hex') {
     return (react_1.default.createElement("div", { style: { width: '23%' }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
-        react_1.default.createElement("input", { value: newHex, onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
+        react_1.default.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), value: "".concat(newHex).concat((0, converters_js_1.getHexAlpha)(opacity)), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
         react_1.default.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, "HEX")));
 };
-var RGBInputs = function () {
-    var _a = (0, context_js_1.usePicker)(), handleChange = _a.handleChange, hc = _a.hc;
+var RGBInputs = function (_a) {
+    var hc = _a.hc, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var handleRgb = function (_a) {
@@ -103,8 +100,8 @@ var r = _a.r, g = _a.g, b = _a.b;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Input, { value: hc === null || hc === void 0 ? void 0 : hc.r, callback: function (newVal) { return handleRgb({ r: newVal, g: hc === null || hc === void 0 ? void 0 : hc.g, b: hc === null || hc === void 0 ? void 0 : hc.b }); }, label: "R", max: 255 }),
-        react_1.default.createElement(Input, { value: hc === null || hc === void 0 ? void 0 : hc.g, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: newVal, b: hc === null || hc === void 0 ? void 0 : hc.b }); }, label: "G", max: 255 }),
-        react_1.default.createElement(Input, { value: hc === null || hc === void 0 ? void 0 : hc.b, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: hc === null || hc === void 0 ? void 0 : hc.g, b: newVal }); }, label: "B", max: 255 })));
+        react_1.default.createElement(Input, { label: "R", max: 255, value: hc === null || hc === void 0 ? void 0 : hc.r, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleRgb({ r: newVal, g: hc === null || hc === void 0 ? void 0 : hc.g, b: hc === null || hc === void 0 ? void 0 : hc.b }); } }),
+        react_1.default.createElement(Input, { label: "G", max: 255, value: hc === null || hc === void 0 ? void 0 : hc.g, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: newVal, b: hc === null || hc === void 0 ? void 0 : hc.b }); } }),
+        react_1.default.createElement(Input, { label: "B", max: 255, value: hc === null || hc === void 0 ? void 0 : hc.b, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: hc === null || hc === void 0 ? void 0 : hc.g, b: newVal }); } })));
 };
-var HSLInputs = function () {
-    var _a = (0, context_js_1.usePicker)(), handleChange = _a.handleChange, tinyColor = _a.tinyColor, setHc = _a.setHc, hc = _a.hc;
+var HSLInputs = function (_a) {
+    var hc = _a.hc, setHc = _a.setHc, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _b = tinyColor.toHsl(), s = _b.s, l = _b.l;
@@ -121,8 +118,8 @@ var handleH = function (h, s, l) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(hc === null || hc === void 0 ? void 0 : hc.h), callback: function (newVal) { return handleH(newVal, s, l); }, label: "H", max: 360 }),
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(s * 100), callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, l: l }); }, label: "S" }),
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(l * 100), callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: s, l: newVal }); }, label: "L" })));
+        react_1.default.createElement(Input, { label: "H", max: 360, value: (0, formatters_js_1.round)(hc === null || hc === void 0 ? void 0 : hc.h), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleH(newVal, s, l); } }),
+        react_1.default.createElement(Input, { label: "S", value: (0, formatters_js_1.round)(s * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, l: l }); } }),
+        react_1.default.createElement(Input, { label: "L", value: (0, formatters_js_1.round)(l * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: s, l: newVal }); } })));
 };
-var HSVInputs = function () {
-    var _a = (0, context_js_1.usePicker)(), handleChange = _a.handleChange, setHc = _a.setHc, hc = _a.hc;
+var HSVInputs = function (_a) {
+    var hc = _a.hc, setHc = _a.setHc, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var handleH = function (h, s, v) {
@@ -138,8 +135,8 @@ var _a = (0, tinycolor2_1.default)({ h: h, s: s, v: v }).toRgb(), r = _a.r, g = _a.g, b = _a.b;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(hc === null || hc === void 0 ? void 0 : hc.h), callback: function (newVal) { return handleH(newVal, hc === null || hc === void 0 ? void 0 : hc.s, hc === null || hc === void 0 ? void 0 : hc.v); }, label: "H", max: 360 }),
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)((hc === null || hc === void 0 ? void 0 : hc.s) * 100), callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, v: hc === null || hc === void 0 ? void 0 : hc.v }); }, label: "S" }),
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)((hc === null || hc === void 0 ? void 0 : hc.v) * 100), callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: hc === null || hc === void 0 ? void 0 : hc.s, v: newVal }); }, label: "V" })));
+        react_1.default.createElement(Input, { label: "H", max: 360, value: (0, formatters_js_1.round)(hc === null || hc === void 0 ? void 0 : hc.h), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleH(newVal, hc === null || hc === void 0 ? void 0 : hc.s, hc === null || hc === void 0 ? void 0 : hc.v); } }),
+        react_1.default.createElement(Input, { label: "S", hideOpacity: hideOpacity, value: (0, formatters_js_1.round)((hc === null || hc === void 0 ? void 0 : hc.s) * 100), defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, v: hc === null || hc === void 0 ? void 0 : hc.v }); } }),
+        react_1.default.createElement(Input, { label: "V", hideOpacity: hideOpacity, value: (0, formatters_js_1.round)((hc === null || hc === void 0 ? void 0 : hc.v) * 100), defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: hc === null || hc === void 0 ? void 0 : hc.s, v: newVal }); } })));
 };
-var CMKYInputs = function () {
-    var _a = (0, context_js_1.usePicker)(), handleChange = _a.handleChange, hc = _a.hc;
+var CMKYInputs = function (_a) {
+    var hc = _a.hc, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _b = (0, converters_js_1.rgb2cmyk)(hc === null || hc === void 0 ? void 0 : hc.r, hc === null || hc === void 0 ? void 0 : hc.g, hc === null || hc === void 0 ? void 0 : hc.b), c = _b.c, m = _b.m, y = _b.y, k = _b.k;
@@ -151,19 +148,19 @@ var handleCmyk = function (value) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(c * 100), callback: function (newVal) { return handleCmyk({ c: newVal / 100, m: m, y: y, k: k }); }, label: "C" }),
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(m * 100), callback: function (newVal) { return handleCmyk({ c: c, m: newVal / 100, y: y, k: k }); }, label: "M" }),
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(y * 100), callback: function (newVal) { return handleCmyk({ c: c, m: m, y: newVal / 100, k: k }); }, label: "Y" }),
-        react_1.default.createElement(Input, { value: (0, formatters_js_1.round)(k * 100), callback: function (newVal) { return handleCmyk({ c: c, m: m, y: y, k: newVal / 100 }); }, label: "K" })));
+        react_1.default.createElement(Input, { label: "C", value: (0, formatters_js_1.round)(c * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: newVal / 100, m: m, y: y, k: k }); } }),
+        react_1.default.createElement(Input, { label: "M", value: (0, formatters_js_1.round)(m * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: c, m: newVal / 100, y: y, k: k }); } }),
+        react_1.default.createElement(Input, { label: "Y", value: (0, formatters_js_1.round)(y * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: c, m: m, y: newVal / 100, k: k }); } }),
+        react_1.default.createElement(Input, { label: "K", value: (0, formatters_js_1.round)(k * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: c, m: m, y: y, k: newVal / 100 }); } })));
 };
 var Inputs = function () {
-    var _a = (0, context_js_1.usePicker)(), handleChange = _a.handleChange, inputType = _a.inputType, hideOpacity = _a.hideOpacity, hc = _a.hc, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var _a = (0, context_js_1.usePicker)(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     return (react_1.default.createElement("div", { style: __assign({ paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
-        inputType !== 'cmyk' && react_1.default.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a }),
-        inputType === 'hsl' && react_1.default.createElement(HSLInputs, null),
-        inputType === 'rgb' && react_1.default.createElement(RGBInputs, null),
-        inputType === 'hsv' && react_1.default.createElement(HSVInputs, null),
-        inputType === 'cmyk' && react_1.default.createElement(CMKYInputs, null),
-        !hideOpacity && (react_1.default.createElement(Input, { value: Math.round((hc === null || hc === void 0 ? void 0 : hc.a) * 100), callback: function (newVal) {
+        inputType !== 'cmyk' && (react_1.default.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'hsl' && (react_1.default.createElement(HSLInputs, { hc: hc, setHc: setHc, tinyColor: tinyColor, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'rgb' && (react_1.default.createElement(RGBInputs, { hc: hc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'hsv' && (react_1.default.createElement(HSVInputs, { hc: hc, setHc: setHc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'cmyk' && (react_1.default.createElement(CMKYInputs, { hc: hc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        !hideOpacity && (react_1.default.createElement(Input, { label: "A", hideOpacity: hideOpacity, defaultStyles: defaultStyles, value: Math.round((hc === null || hc === void 0 ? void 0 : hc.a) * 100), pickerIdSuffix: pickerIdSuffix, callback: function (newVal) {
                 return handleChange("rgba(".concat(hc === null || hc === void 0 ? void 0 : hc.r, ", ").concat(hc === null || hc === void 0 ? void 0 : hc.g, ", ").concat(hc === null || hc === void 0 ? void 0 : hc.b, ", ").concat(newVal / 100, ")"));
-            }, label: "A" }))));
+            } }))));
 };
 exports.default = Inputs;

dist/esm/components/Inputs.js

@@ -18,7 +18,5 @@ var __assign = (this && this.__assign) || function () {
 var Input = function (_a) {
-    var label = _a.label, value = _a.value, callback = _a.callback, _b = _a.max, max = _b === void 0 ? 100 : _b;
+    var label = _a.label, value = _a.value, callback = _a.callback, _b = _a.max, max = _b === void 0 ? 100 : _b, hideOpacity = _a.hideOpacity, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _c = useState(value), temp = _c[0], setTemp = _c[1];
-    var _d = usePicker(), _e = _d.hc, hc = _e === void 0 ? {} : _e, hideOpacity = _d.hideOpacity, defaultStyles = _d.defaultStyles, pickerIdSuffix = _d.pickerIdSuffix;
     var width = hideOpacity ? '22%' : '18%';
-    var opacity = hc.a;
     useEffect(function () {
@@ -33,11 +31,10 @@ setTemp(value);
     return (React.createElement("div", { style: { width: width }, id: "rbgcp-".concat(label, "-input-wrapper").concat(pickerIdSuffix) },
-        React.createElement("input", { onChange: function (e) { return onChange(e); }, style: __assign({}, defaultStyles.rbgcpInput), value: "".concat(temp).concat(getHexAlpha(opacity)), id: "rbgcp-".concat(label, "-input").concat(pickerIdSuffix) }),
+        React.createElement("input", { value: temp, onChange: function (e) { return onChange(e); }, style: __assign({}, defaultStyles.rbgcpInput), id: "rbgcp-".concat(label, "-input").concat(pickerIdSuffix) }),
         React.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, label)));
 };
 var HexInput = function (_a) {
-    var opacity = _a.opacity;
-    var _b = usePicker(), handleChange = _b.handleChange, tinyColor = _b.tinyColor, defaultStyles = _b.defaultStyles, pickerIdSuffix = _b.pickerIdSuffix;
-    var _c = useState(''), disable = _c[0], setDisable = _c[1];
+    var opacity = _a.opacity, tinyColor = _a.tinyColor, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var _b = useState(''), disable = _b[0], setDisable = _b[1];
     var hex = tinyColor.toHex();
-    var _d = useState(hex), newHex = _d[0], setNewHex = _d[1];
+    var _c = useState(hex), newHex = _c[0], setNewHex = _c[1];
     useEffect(function () {
@@ -64,7 +61,7 @@ if (disable !== 'hex') {
     return (React.createElement("div", { style: { width: '23%' }, id: "rbgcp-hex-input-wrapper".concat(pickerIdSuffix) },
-        React.createElement("input", { value: newHex, onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
+        React.createElement("input", { onBlur: hexBlur, onFocus: hexFocus, onChange: function (e) { return handleHex(e); }, id: "rbgcp-hex-input".concat(pickerIdSuffix), value: "".concat(newHex).concat(getHexAlpha(opacity)), style: __assign(__assign({}, defaultStyles.rbgcpInput), defaultStyles.rbgcpHexInput) }),
         React.createElement("div", { style: __assign({}, defaultStyles.rbgcpInputLabel) }, "HEX")));
 };
-var RGBInputs = function () {
-    var _a = usePicker(), handleChange = _a.handleChange, hc = _a.hc;
+var RGBInputs = function (_a) {
+    var hc = _a.hc, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var handleRgb = function (_a) {
@@ -75,8 +72,8 @@ var r = _a.r, g = _a.g, b = _a.b;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { value: hc === null || hc === void 0 ? void 0 : hc.r, callback: function (newVal) { return handleRgb({ r: newVal, g: hc === null || hc === void 0 ? void 0 : hc.g, b: hc === null || hc === void 0 ? void 0 : hc.b }); }, label: "R", max: 255 }),
-        React.createElement(Input, { value: hc === null || hc === void 0 ? void 0 : hc.g, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: newVal, b: hc === null || hc === void 0 ? void 0 : hc.b }); }, label: "G", max: 255 }),
-        React.createElement(Input, { value: hc === null || hc === void 0 ? void 0 : hc.b, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: hc === null || hc === void 0 ? void 0 : hc.g, b: newVal }); }, label: "B", max: 255 })));
+        React.createElement(Input, { label: "R", max: 255, value: hc === null || hc === void 0 ? void 0 : hc.r, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleRgb({ r: newVal, g: hc === null || hc === void 0 ? void 0 : hc.g, b: hc === null || hc === void 0 ? void 0 : hc.b }); } }),
+        React.createElement(Input, { label: "G", max: 255, value: hc === null || hc === void 0 ? void 0 : hc.g, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: newVal, b: hc === null || hc === void 0 ? void 0 : hc.b }); } }),
+        React.createElement(Input, { label: "B", max: 255, value: hc === null || hc === void 0 ? void 0 : hc.b, hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleRgb({ r: hc === null || hc === void 0 ? void 0 : hc.r, g: hc === null || hc === void 0 ? void 0 : hc.g, b: newVal }); } })));
 };
-var HSLInputs = function () {
-    var _a = usePicker(), handleChange = _a.handleChange, tinyColor = _a.tinyColor, setHc = _a.setHc, hc = _a.hc;
+var HSLInputs = function (_a) {
+    var hc = _a.hc, setHc = _a.setHc, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _b = tinyColor.toHsl(), s = _b.s, l = _b.l;
@@ -93,8 +90,8 @@ var handleH = function (h, s, l) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { value: round(hc === null || hc === void 0 ? void 0 : hc.h), callback: function (newVal) { return handleH(newVal, s, l); }, label: "H", max: 360 }),
-        React.createElement(Input, { value: round(s * 100), callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, l: l }); }, label: "S" }),
-        React.createElement(Input, { value: round(l * 100), callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: s, l: newVal }); }, label: "L" })));
+        React.createElement(Input, { label: "H", max: 360, value: round(hc === null || hc === void 0 ? void 0 : hc.h), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleH(newVal, s, l); } }),
+        React.createElement(Input, { label: "S", value: round(s * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, l: l }); } }),
+        React.createElement(Input, { label: "L", value: round(l * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSl({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: s, l: newVal }); } })));
 };
-var HSVInputs = function () {
-    var _a = usePicker(), handleChange = _a.handleChange, setHc = _a.setHc, hc = _a.hc;
+var HSVInputs = function (_a) {
+    var hc = _a.hc, setHc = _a.setHc, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var handleH = function (h, s, v) {
@@ -110,8 +107,8 @@ var _a = tc({ h: h, s: s, v: v }).toRgb(), r = _a.r, g = _a.g, b = _a.b;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { value: round(hc === null || hc === void 0 ? void 0 : hc.h), callback: function (newVal) { return handleH(newVal, hc === null || hc === void 0 ? void 0 : hc.s, hc === null || hc === void 0 ? void 0 : hc.v); }, label: "H", max: 360 }),
-        React.createElement(Input, { value: round((hc === null || hc === void 0 ? void 0 : hc.s) * 100), callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, v: hc === null || hc === void 0 ? void 0 : hc.v }); }, label: "S" }),
-        React.createElement(Input, { value: round((hc === null || hc === void 0 ? void 0 : hc.v) * 100), callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: hc === null || hc === void 0 ? void 0 : hc.s, v: newVal }); }, label: "V" })));
+        React.createElement(Input, { label: "H", max: 360, value: round(hc === null || hc === void 0 ? void 0 : hc.h), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleH(newVal, hc === null || hc === void 0 ? void 0 : hc.s, hc === null || hc === void 0 ? void 0 : hc.v); } }),
+        React.createElement(Input, { label: "S", hideOpacity: hideOpacity, value: round((hc === null || hc === void 0 ? void 0 : hc.s) * 100), defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: newVal, v: hc === null || hc === void 0 ? void 0 : hc.v }); } }),
+        React.createElement(Input, { label: "V", hideOpacity: hideOpacity, value: round((hc === null || hc === void 0 ? void 0 : hc.v) * 100), defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleSV({ h: hc === null || hc === void 0 ? void 0 : hc.h, s: hc === null || hc === void 0 ? void 0 : hc.s, v: newVal }); } })));
 };
-var CMKYInputs = function () {
-    var _a = usePicker(), handleChange = _a.handleChange, hc = _a.hc;
+var CMKYInputs = function (_a) {
+    var hc = _a.hc, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     var _b = rgb2cmyk(hc === null || hc === void 0 ? void 0 : hc.r, hc === null || hc === void 0 ? void 0 : hc.g, hc === null || hc === void 0 ? void 0 : hc.b), c = _b.c, m = _b.m, y = _b.y, k = _b.k;
@@ -123,19 +120,19 @@ var handleCmyk = function (value) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { value: round(c * 100), callback: function (newVal) { return handleCmyk({ c: newVal / 100, m: m, y: y, k: k }); }, label: "C" }),
-        React.createElement(Input, { value: round(m * 100), callback: function (newVal) { return handleCmyk({ c: c, m: newVal / 100, y: y, k: k }); }, label: "M" }),
-        React.createElement(Input, { value: round(y * 100), callback: function (newVal) { return handleCmyk({ c: c, m: m, y: newVal / 100, k: k }); }, label: "Y" }),
-        React.createElement(Input, { value: round(k * 100), callback: function (newVal) { return handleCmyk({ c: c, m: m, y: y, k: newVal / 100 }); }, label: "K" })));
+        React.createElement(Input, { label: "C", value: round(c * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: newVal / 100, m: m, y: y, k: k }); } }),
+        React.createElement(Input, { label: "M", value: round(m * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: c, m: newVal / 100, y: y, k: k }); } }),
+        React.createElement(Input, { label: "Y", value: round(y * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: c, m: m, y: newVal / 100, k: k }); } }),
+        React.createElement(Input, { label: "K", value: round(k * 100), hideOpacity: hideOpacity, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix, callback: function (newVal) { return handleCmyk({ c: c, m: m, y: y, k: newVal / 100 }); } })));
 };
 var Inputs = function () {
-    var _a = usePicker(), handleChange = _a.handleChange, inputType = _a.inputType, hideOpacity = _a.hideOpacity, hc = _a.hc, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
+    var _a = usePicker(), hc = _a.hc, setHc = _a.setHc, inputType = _a.inputType, tinyColor = _a.tinyColor, hideOpacity = _a.hideOpacity, handleChange = _a.handleChange, defaultStyles = _a.defaultStyles, pickerIdSuffix = _a.pickerIdSuffix;
     return (React.createElement("div", { style: __assign({ paddingTop: 14, display: 'flex', justifyContent: 'space-between' }, defaultStyles.rbgcpInputsWrap), id: "rbgcp-inputs-wrap".concat(pickerIdSuffix) },
-        inputType !== 'cmyk' && React.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a }),
-        inputType === 'hsl' && React.createElement(HSLInputs, null),
-        inputType === 'rgb' && React.createElement(RGBInputs, null),
-        inputType === 'hsv' && React.createElement(HSVInputs, null),
-        inputType === 'cmyk' && React.createElement(CMKYInputs, null),
-        !hideOpacity && (React.createElement(Input, { value: Math.round((hc === null || hc === void 0 ? void 0 : hc.a) * 100), callback: function (newVal) {
+        inputType !== 'cmyk' && (React.createElement(HexInput, { opacity: hc === null || hc === void 0 ? void 0 : hc.a, tinyColor: tinyColor, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'hsl' && (React.createElement(HSLInputs, { hc: hc, setHc: setHc, tinyColor: tinyColor, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'rgb' && (React.createElement(RGBInputs, { hc: hc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'hsv' && (React.createElement(HSVInputs, { hc: hc, setHc: setHc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        inputType === 'cmyk' && (React.createElement(CMKYInputs, { hc: hc, hideOpacity: hideOpacity, handleChange: handleChange, defaultStyles: defaultStyles, pickerIdSuffix: pickerIdSuffix })),
+        !hideOpacity && (React.createElement(Input, { label: "A", hideOpacity: hideOpacity, defaultStyles: defaultStyles, value: Math.round((hc === null || hc === void 0 ? void 0 : hc.a) * 100), pickerIdSuffix: pickerIdSuffix, callback: function (newVal) {
                 return handleChange("rgba(".concat(hc === null || hc === void 0 ? void 0 : hc.r, ", ").concat(hc === null || hc === void 0 ? void 0 : hc.g, ", ").concat(hc === null || hc === void 0 ? void 0 : hc.b, ", ").concat(newVal / 100, ")"));
-            }, label: "A" }))));
+            } }))));
 };
 export default Inputs;

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.13-beta.1",
+  "version": "3.0.13-beta.2",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "type": "module",

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

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

475225

increased by1.66%

Lines of code

11251

increased by1.57%

No dependency changes