react-iro-gradient-picker 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -0
- package/dist/index.es.js +90 -32
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +90 -32
- package/dist/index.js.map +1 -1
- package/dist/lib/types/types.d.ts +2 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -7639,12 +7639,14 @@ var useDebounce = (function (value, delay) {
|
|
7639
7639
|
});
|
7640
7640
|
|
7641
7641
|
var IroGradient = function (_a) {
|
7642
|
-
var _b = _a.value, value = _b === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, _j = _a.showGradientResult, showGradientResult = _j === void 0 ? true : _j, _k = _a.showGradientStops, showGradientStops = _k === void 0 ? true : _k, _l = _a.showGradientMode, showGradientMode = _l === void 0 ? true : _l, _m = _a.showGradientAngle, showGradientAngle = _m === void 0 ? true : _m, _o = _a.showGradientPosition, showGradientPosition = _o === void 0 ? true : _o, _p = _a.allowAddGradientStops, allowAddGradientStops = _p === void 0 ? true : _p, _q = _a.colorBoardHeight, colorBoardHeight = _q === void 0 ? 120 : _q, defaultColors = _a.defaultColors;
|
7642
|
+
var _b = _a.value, value = _b === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, _j = _a.showGradientResult, showGradientResult = _j === void 0 ? true : _j, _k = _a.showGradientStops, showGradientStops = _k === void 0 ? true : _k, _l = _a.showGradientMode, showGradientMode = _l === void 0 ? true : _l, _m = _a.showGradientAngle, showGradientAngle = _m === void 0 ? true : _m, _o = _a.showGradientPosition, showGradientPosition = _o === void 0 ? true : _o, _p = _a.allowAddGradientStops, allowAddGradientStops = _p === void 0 ? true : _p, _q = _a.colorBoardHeight, colorBoardHeight = _q === void 0 ? 120 : _q, defaultColors = _a.defaultColors, _r = _a.showReset, showReset = _r === void 0 ? false : _r, onReset = _a.onReset;
|
7643
|
+
// Store the initial value for reset functionality
|
7644
|
+
var initialValue = React.useRef(value);
|
7643
7645
|
var parsedColors = React.useCallback(function () {
|
7644
7646
|
return parseGradient(value);
|
7645
7647
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
7646
7648
|
}, [value]);
|
7647
|
-
var
|
7649
|
+
var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
|
7648
7650
|
var lastStop = rgbaToArray(stops[stops.length - 1][0]);
|
7649
7651
|
var activeStopIndex = stops.length - 1;
|
7650
7652
|
var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
|
@@ -7652,7 +7654,7 @@ var IroGradient = function (_a) {
|
|
7652
7654
|
var iroPickerRef = React.useRef(null);
|
7653
7655
|
var containerRef = React.useRef(null);
|
7654
7656
|
var isUpdatingFromGradientStop = React.useRef(false);
|
7655
|
-
var
|
7657
|
+
var _t = __read(React.useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
|
7656
7658
|
// Responsive width for IroColorPicker - match solid picker logic
|
7657
7659
|
React.useEffect(function () {
|
7658
7660
|
if (!containerRef.current)
|
@@ -7691,18 +7693,18 @@ var IroGradient = function (_a) {
|
|
7691
7693
|
resizeObserver.observe(containerRef.current);
|
7692
7694
|
return function () { return resizeObserver.disconnect(); };
|
7693
7695
|
}, []);
|
7694
|
-
var
|
7696
|
+
var _u = __read(React.useState({
|
7695
7697
|
gradient: value,
|
7696
7698
|
type: type,
|
7697
7699
|
modifier: modifier,
|
7698
7700
|
stops: stops
|
7699
|
-
}), 2), color =
|
7700
|
-
var
|
7701
|
+
}), 2), color = _u[0], setColor = _u[1];
|
7702
|
+
var _v = __read(React.useState({
|
7701
7703
|
hex: activeStop,
|
7702
7704
|
alpha: activeAlpha,
|
7703
7705
|
loc: stops[activeStopIndex][1],
|
7704
7706
|
index: activeStopIndex
|
7705
|
-
}), 2), activeColor =
|
7707
|
+
}), 2), activeColor = _v[0], setActiveColor = _v[1];
|
7706
7708
|
var debounceColor = useDebounce(color, debounceMS);
|
7707
7709
|
// Update iro picker color
|
7708
7710
|
var updateIroPickerColor = React.useCallback(function (colorData, retryCount) {
|
@@ -7891,6 +7893,29 @@ var IroGradient = function (_a) {
|
|
7891
7893
|
var alpha = Math.round(rgbaArr[3] * 100);
|
7892
7894
|
onChangeActiveColor({ hex: hex, alpha: alpha });
|
7893
7895
|
};
|
7896
|
+
// Reset to initial color
|
7897
|
+
var handleResetColor = function () {
|
7898
|
+
var _a;
|
7899
|
+
var initialParsed = parseGradient(initialValue.current);
|
7900
|
+
setColor(initialParsed);
|
7901
|
+
// Reset active color to the last stop of the initial gradient
|
7902
|
+
var lastStop = rgbaToArray(initialParsed.stops[initialParsed.stops.length - 1][0]);
|
7903
|
+
var newActiveColor = {
|
7904
|
+
hex: rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]),
|
7905
|
+
alpha: Math.round(lastStop[3] * 100),
|
7906
|
+
loc: initialParsed.stops[initialParsed.stops.length - 1][1],
|
7907
|
+
index: initialParsed.stops.length - 1
|
7908
|
+
};
|
7909
|
+
setActiveColor(newActiveColor);
|
7910
|
+
// Update iro picker if available
|
7911
|
+
if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
|
7912
|
+
updateIroPickerColor(newActiveColor);
|
7913
|
+
}
|
7914
|
+
// Call onChange with initial value
|
7915
|
+
onChange(initialValue.current);
|
7916
|
+
// Call onReset callback if provided
|
7917
|
+
onReset === null || onReset === void 0 ? void 0 : onReset();
|
7918
|
+
};
|
7894
7919
|
// Update iro picker when color is selected from default colors panel
|
7895
7920
|
var handleColorFromPanel = function (newColor) {
|
7896
7921
|
setColor(newColor);
|
@@ -7950,10 +7975,7 @@ var IroGradient = function (_a) {
|
|
7950
7975
|
}).toHex8String()
|
7951
7976
|
: activeColor.hex;
|
7952
7977
|
return (React__default["default"].createElement("div", { className: 'w-full rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl', style: {
|
7953
|
-
backgroundColor: 'var(--colorpicker-panel-bg)'
|
7954
|
-
borderColor: 'var(--colorpicker-border)',
|
7955
|
-
borderWidth: '1px',
|
7956
|
-
borderStyle: 'solid'
|
7978
|
+
backgroundColor: 'var(--colorpicker-panel-bg)'
|
7957
7979
|
} },
|
7958
7980
|
React__default["default"].createElement("div", { className: 'relative', ref: containerRef },
|
7959
7981
|
React__default["default"].createElement("div", { className: 'flex justify-center items-center rounded-lg', style: {
|
@@ -7964,20 +7986,27 @@ var IroGradient = function (_a) {
|
|
7964
7986
|
React__default["default"].createElement(GradientPanel$1, { color: color, activeColor: activeColor, setActiveColor: handleSetActiveColor, setColor: updateGradient, setInit: setInit, format: format, showAlpha: showAlpha, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops })),
|
7965
7987
|
React__default["default"].createElement("div", { className: 'pt-4 px-2' },
|
7966
7988
|
React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
|
7967
|
-
showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass' },
|
7968
|
-
React__default["default"].createElement(
|
7969
|
-
|
7970
|
-
|
7971
|
-
|
7989
|
+
showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
|
7990
|
+
React__default["default"].createElement("div", { className: 'flex-1' },
|
7991
|
+
React__default["default"].createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
|
7992
|
+
return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
|
7993
|
+
})); });
|
7994
|
+
}, onSubmitChange: onSubmitChange })),
|
7995
|
+
showReset && (React__default["default"].createElement("button", { onClick: handleResetColor, className: 'px-3 py-2 text-xs font-medium rounded-md transition-colors duration-200 bg-transparent border border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 hover:bg-gray-800/50 whitespace-nowrap flex items-center gap-1', title: 'Reset to initial color' },
|
7996
|
+
React__default["default"].createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
7997
|
+
React__default["default"].createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' })),
|
7998
|
+
"Reset"))))));
|
7972
7999
|
};
|
7973
8000
|
|
7974
8001
|
var IroSolidColorPicker = function (_a) {
|
7975
|
-
var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, defaultColors = _a.defaultColors;
|
8002
|
+
var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, defaultColors = _a.defaultColors, _j = _a.showReset, showReset = _j === void 0 ? false : _j, onReset = _a.onReset;
|
7976
8003
|
var node = React.useRef(null);
|
7977
8004
|
var iroPickerRef = React.useRef(null);
|
7978
|
-
|
7979
|
-
var
|
7980
|
-
var
|
8005
|
+
// Store the initial value for reset functionality
|
8006
|
+
var initialValue = React.useRef(value);
|
8007
|
+
var _k = __read(React.useState(true), 2), init = _k[0], setInit = _k[1];
|
8008
|
+
var _l = __read(React.useState(getHexAlpha(value)), 2), color = _l[0], setColor = _l[1];
|
8009
|
+
var _m = __read(React.useState(200), 2), pickerWidth = _m[0], setPickerWidth = _m[1];
|
7981
8010
|
var pickerWidthRef = React.useRef(200);
|
7982
8011
|
// Update ref when state changes
|
7983
8012
|
React.useEffect(function () {
|
@@ -8155,6 +8184,33 @@ var IroSolidColorPicker = function (_a) {
|
|
8155
8184
|
};
|
8156
8185
|
updateIroColor();
|
8157
8186
|
};
|
8187
|
+
// Reset to initial color
|
8188
|
+
var handleResetColor = function () {
|
8189
|
+
var _a;
|
8190
|
+
var initialColorData = getHexAlpha(initialValue.current);
|
8191
|
+
setColor(initialColorData);
|
8192
|
+
// Update the iro color picker
|
8193
|
+
if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
|
8194
|
+
var iroColor = showAlpha
|
8195
|
+
? {
|
8196
|
+
r: parseInt(initialColorData.hex.slice(1, 3), 16),
|
8197
|
+
g: parseInt(initialColorData.hex.slice(3, 5), 16),
|
8198
|
+
b: parseInt(initialColorData.hex.slice(5, 7), 16),
|
8199
|
+
a: initialColorData.alpha / 100
|
8200
|
+
}
|
8201
|
+
: initialColorData.hex;
|
8202
|
+
try {
|
8203
|
+
iroPickerRef.current.colorPicker.color.set(iroColor);
|
8204
|
+
}
|
8205
|
+
catch (error) {
|
8206
|
+
console.warn('Error updating iro color picker on reset:', error);
|
8207
|
+
}
|
8208
|
+
}
|
8209
|
+
// Call onChange with initial value
|
8210
|
+
onChange(initialValue.current);
|
8211
|
+
// Call onReset callback if provided
|
8212
|
+
onReset === null || onReset === void 0 ? void 0 : onReset();
|
8213
|
+
};
|
8158
8214
|
// Create layout array conditionally based on showAlpha
|
8159
8215
|
var layoutConfig = [
|
8160
8216
|
{
|
@@ -8187,9 +8243,6 @@ var IroSolidColorPicker = function (_a) {
|
|
8187
8243
|
: color.hex;
|
8188
8244
|
return (React__default["default"].createElement("div", { ref: node, className: 'w-full p-2 rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl overflow-hidden', style: {
|
8189
8245
|
backgroundColor: 'var(--colorpicker-panel-bg)',
|
8190
|
-
borderColor: 'var(--colorpicker-border)',
|
8191
|
-
borderWidth: '1px',
|
8192
|
-
borderStyle: 'solid',
|
8193
8246
|
maxWidth: '100%',
|
8194
8247
|
minWidth: 0,
|
8195
8248
|
boxSizing: 'border-box'
|
@@ -8210,8 +8263,13 @@ var IroSolidColorPicker = function (_a) {
|
|
8210
8263
|
React__default["default"].createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
|
8211
8264
|
React__default["default"].createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
|
8212
8265
|
React__default["default"].createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid' })),
|
8213
|
-
showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg
|
8214
|
-
React__default["default"].createElement(
|
8266
|
+
showInputs && (React__default["default"].createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
|
8267
|
+
React__default["default"].createElement("div", { className: 'flex-1' },
|
8268
|
+
React__default["default"].createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })),
|
8269
|
+
showReset && (React__default["default"].createElement("button", { onClick: handleResetColor, className: 'px-3 py-2 text-xs font-medium rounded-md transition-colors duration-200 bg-transparent border border-gray-600 text-gray-300 hover:text-white hover:border-gray-500 hover:bg-gray-800/50 whitespace-nowrap flex items-center gap-1', title: 'Reset to initial color' },
|
8270
|
+
React__default["default"].createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
8271
|
+
React__default["default"].createElement("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' })),
|
8272
|
+
"Reset"))))));
|
8215
8273
|
};
|
8216
8274
|
|
8217
8275
|
var PopupTabs = function (_a) {
|
@@ -8256,8 +8314,8 @@ var PopupTabsBodyItem = function (_a) {
|
|
8256
8314
|
};
|
8257
8315
|
|
8258
8316
|
var ColorPicker = function (_a) {
|
8259
|
-
var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.format, format = _c === void 0 ? 'rgb' : _c, _d = _a.gradient, gradient = _d === void 0 ? false : _d, _e = _a.solid, solid = _e === void 0 ? true : _e, _f = _a.debounceMS, debounceMS = _f === void 0 ? 300 : _f, _g = _a.debounce, debounce = _g === void 0 ? true : _g, _h = _a.showAlpha, showAlpha = _h === void 0 ? true : _h, _j = _a.showInputs, showInputs = _j === void 0 ? true : _j, _k = _a.showGradientResult, showGradientResult = _k === void 0 ? true : _k, _l = _a.showGradientStops, showGradientStops = _l === void 0 ? true : _l, _m = _a.showGradientMode, showGradientMode = _m === void 0 ? true : _m, _o = _a.showGradientAngle, showGradientAngle = _o === void 0 ? true : _o, _p = _a.showGradientPosition, showGradientPosition = _p === void 0 ? true : _p, _q = _a.allowAddGradientStops, allowAddGradientStops = _q === void 0 ? true : _q, _r = _a.popupWidth, popupWidth = _r === void 0 ? 267 : _r, _s = _a.colorBoardHeight, colorBoardHeight = _s === void 0 ? 120 : _s, _t = _a.defaultColors, defaultColors = _t === void 0 ? DEFAULT_COLORS : _t, defaultActiveTab = _a.defaultActiveTab, onChangeTabs = _a.onChangeTabs, _u = _a.onChange, onChange = _u === void 0 ? function () { return ({}); } : _u;
|
8260
|
-
var
|
8317
|
+
var _b = _a.value, value = _b === void 0 ? '#ffffff' : _b, _c = _a.format, format = _c === void 0 ? 'rgb' : _c, _d = _a.gradient, gradient = _d === void 0 ? false : _d, _e = _a.solid, solid = _e === void 0 ? true : _e, _f = _a.debounceMS, debounceMS = _f === void 0 ? 300 : _f, _g = _a.debounce, debounce = _g === void 0 ? true : _g, _h = _a.showAlpha, showAlpha = _h === void 0 ? true : _h, _j = _a.showInputs, showInputs = _j === void 0 ? true : _j, _k = _a.showGradientResult, showGradientResult = _k === void 0 ? true : _k, _l = _a.showGradientStops, showGradientStops = _l === void 0 ? true : _l, _m = _a.showGradientMode, showGradientMode = _m === void 0 ? true : _m, _o = _a.showGradientAngle, showGradientAngle = _o === void 0 ? true : _o, _p = _a.showGradientPosition, showGradientPosition = _p === void 0 ? true : _p, _q = _a.allowAddGradientStops, allowAddGradientStops = _q === void 0 ? true : _q, _r = _a.popupWidth, popupWidth = _r === void 0 ? 267 : _r, _s = _a.colorBoardHeight, colorBoardHeight = _s === void 0 ? 120 : _s, _t = _a.defaultColors, defaultColors = _t === void 0 ? DEFAULT_COLORS : _t, defaultActiveTab = _a.defaultActiveTab, onChangeTabs = _a.onChangeTabs, _u = _a.onChange, onChange = _u === void 0 ? function () { return ({}); } : _u, _v = _a.showReset, showReset = _v === void 0 ? false : _v, onReset = _a.onReset;
|
8318
|
+
var _w = __read(React.useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _w[0], setActiveTab = _w[1];
|
8261
8319
|
var onChangeSolid = function (value) {
|
8262
8320
|
onChange(value);
|
8263
8321
|
};
|
@@ -8280,17 +8338,17 @@ var ColorPicker = function (_a) {
|
|
8280
8338
|
React__default["default"].createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
|
8281
8339
|
React__default["default"].createElement(PopupTabsBody, null,
|
8282
8340
|
React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'solid' },
|
8283
|
-
React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })),
|
8341
|
+
React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })),
|
8284
8342
|
React__default["default"].createElement(PopupTabsBodyItem, { tabName: 'gradient' },
|
8285
|
-
React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight })))))));
|
8343
|
+
React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })))))));
|
8286
8344
|
}
|
8287
8345
|
return (React__default["default"].createElement(ThemeProvider, null,
|
8288
|
-
React__default["default"].createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
|
8346
|
+
React__default["default"].createElement("div", { className: 'relative dark react-iro-color-picker', "data-color-picker-theme": true },
|
8289
8347
|
React__default["default"].createElement(ThemeToggle, null),
|
8290
8348
|
solid || gradient ? (React__default["default"].createElement(PopupTabs, { popupWidth: popupWidth },
|
8291
8349
|
React__default["default"].createElement(PopupTabsBody, null,
|
8292
|
-
solid ? (React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })) : (React__default["default"].createElement(React.Fragment, null)),
|
8293
|
-
gradient ? (React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight })) : (React__default["default"].createElement(React.Fragment, null))))) : null)));
|
8350
|
+
solid ? (React__default["default"].createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })) : (React__default["default"].createElement(React.Fragment, null)),
|
8351
|
+
gradient ? (React__default["default"].createElement(IroGradient, { onChange: onChangeGradient, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, showGradientResult: showGradientResult, showGradientStops: showGradientStops, showGradientMode: showGradientMode, showGradientAngle: showGradientAngle, showGradientPosition: showGradientPosition, allowAddGradientStops: allowAddGradientStops, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })) : (React__default["default"].createElement(React.Fragment, null))))) : null)));
|
8294
8352
|
};
|
8295
8353
|
|
8296
8354
|
exports.ColorPicker = ColorPicker;
|