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/README.md
CHANGED
@@ -18,6 +18,7 @@ A beautiful, modern React gradient and solid color picker with full dark theme i
|
|
18
18
|
|
19
19
|
- 🌙 **Complete Dark Theme** - Works perfectly across all components (modal, solid, gradient)
|
20
20
|
- 🎨 **Gradient & Solid Colors** - Full support for both gradient and solid color picking
|
21
|
+
- 🔄 **Reset Button** - Built-in reset functionality with customizable callbacks
|
21
22
|
- 🔄 **Theme Toggle** - Easy switching between light and dark themes
|
22
23
|
- 💾 **Theme Persistence** - Automatically saves user theme preference
|
23
24
|
- 🎯 **Tailwind CSS** - Modern styling with comprehensive theming system
|
@@ -82,6 +83,35 @@ function App() {
|
|
82
83
|
export default App;
|
83
84
|
```
|
84
85
|
|
86
|
+
### 🔄 With Reset Functionality
|
87
|
+
|
88
|
+
```tsx
|
89
|
+
import React, { useState } from 'react';
|
90
|
+
import ColorPicker from 'react-iro-gradient-picker';
|
91
|
+
|
92
|
+
function App() {
|
93
|
+
const [color, setColor] = useState('#3B82F6');
|
94
|
+
const originalColor = '#3B82F6';
|
95
|
+
|
96
|
+
const handleReset = () => {
|
97
|
+
setColor(originalColor);
|
98
|
+
console.log('Color reset to original value!');
|
99
|
+
};
|
100
|
+
|
101
|
+
return (
|
102
|
+
<ColorPicker
|
103
|
+
solid
|
104
|
+
value={color}
|
105
|
+
onChange={setColor}
|
106
|
+
showReset
|
107
|
+
onReset={handleReset}
|
108
|
+
/>
|
109
|
+
);
|
110
|
+
}
|
111
|
+
|
112
|
+
export default App;
|
113
|
+
```
|
114
|
+
|
85
115
|
### 🌙 With Dark Theme Support
|
86
116
|
|
87
117
|
```tsx
|
@@ -157,6 +187,8 @@ This is an enhanced version of the original react-gcolor-picker with major impro
|
|
157
187
|
| defaultActiveTab | `string` | `undefined` | Default value for active tab when initializing the component, takes two values: `solid` or `gradient` |
|
158
188
|
| onChangeTabs | `function` | `null` | Default onChange function detect when tabs change and return one of the values: `solid` or `gradient` |
|
159
189
|
| onChange | `function` | `null` | Default onChange function returns string value in the given format |
|
190
|
+
| showReset | `bool` | `false` | Show/hide reset button in the picker interface |
|
191
|
+
| onReset | `function` | `null` | Callback function triggered when reset button is clicked |
|
160
192
|
|
161
193
|
When passing a value for a gradient, you must specify the position of all colors. Otherwise the component will throw an exception.
|
162
194
|
For example:
|
package/dist/index.es.js
CHANGED
@@ -7631,12 +7631,14 @@ var useDebounce = (function (value, delay) {
|
|
7631
7631
|
});
|
7632
7632
|
|
7633
7633
|
var IroGradient = function (_a) {
|
7634
|
-
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;
|
7634
|
+
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;
|
7635
|
+
// Store the initial value for reset functionality
|
7636
|
+
var initialValue = useRef(value);
|
7635
7637
|
var parsedColors = useCallback(function () {
|
7636
7638
|
return parseGradient(value);
|
7637
7639
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
7638
7640
|
}, [value]);
|
7639
|
-
var
|
7641
|
+
var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
|
7640
7642
|
var lastStop = rgbaToArray(stops[stops.length - 1][0]);
|
7641
7643
|
var activeStopIndex = stops.length - 1;
|
7642
7644
|
var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
|
@@ -7644,7 +7646,7 @@ var IroGradient = function (_a) {
|
|
7644
7646
|
var iroPickerRef = useRef(null);
|
7645
7647
|
var containerRef = useRef(null);
|
7646
7648
|
var isUpdatingFromGradientStop = useRef(false);
|
7647
|
-
var
|
7649
|
+
var _t = __read(useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
|
7648
7650
|
// Responsive width for IroColorPicker - match solid picker logic
|
7649
7651
|
useEffect(function () {
|
7650
7652
|
if (!containerRef.current)
|
@@ -7683,18 +7685,18 @@ var IroGradient = function (_a) {
|
|
7683
7685
|
resizeObserver.observe(containerRef.current);
|
7684
7686
|
return function () { return resizeObserver.disconnect(); };
|
7685
7687
|
}, []);
|
7686
|
-
var
|
7688
|
+
var _u = __read(useState({
|
7687
7689
|
gradient: value,
|
7688
7690
|
type: type,
|
7689
7691
|
modifier: modifier,
|
7690
7692
|
stops: stops
|
7691
|
-
}), 2), color =
|
7692
|
-
var
|
7693
|
+
}), 2), color = _u[0], setColor = _u[1];
|
7694
|
+
var _v = __read(useState({
|
7693
7695
|
hex: activeStop,
|
7694
7696
|
alpha: activeAlpha,
|
7695
7697
|
loc: stops[activeStopIndex][1],
|
7696
7698
|
index: activeStopIndex
|
7697
|
-
}), 2), activeColor =
|
7699
|
+
}), 2), activeColor = _v[0], setActiveColor = _v[1];
|
7698
7700
|
var debounceColor = useDebounce(color, debounceMS);
|
7699
7701
|
// Update iro picker color
|
7700
7702
|
var updateIroPickerColor = useCallback(function (colorData, retryCount) {
|
@@ -7883,6 +7885,29 @@ var IroGradient = function (_a) {
|
|
7883
7885
|
var alpha = Math.round(rgbaArr[3] * 100);
|
7884
7886
|
onChangeActiveColor({ hex: hex, alpha: alpha });
|
7885
7887
|
};
|
7888
|
+
// Reset to initial color
|
7889
|
+
var handleResetColor = function () {
|
7890
|
+
var _a;
|
7891
|
+
var initialParsed = parseGradient(initialValue.current);
|
7892
|
+
setColor(initialParsed);
|
7893
|
+
// Reset active color to the last stop of the initial gradient
|
7894
|
+
var lastStop = rgbaToArray(initialParsed.stops[initialParsed.stops.length - 1][0]);
|
7895
|
+
var newActiveColor = {
|
7896
|
+
hex: rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]),
|
7897
|
+
alpha: Math.round(lastStop[3] * 100),
|
7898
|
+
loc: initialParsed.stops[initialParsed.stops.length - 1][1],
|
7899
|
+
index: initialParsed.stops.length - 1
|
7900
|
+
};
|
7901
|
+
setActiveColor(newActiveColor);
|
7902
|
+
// Update iro picker if available
|
7903
|
+
if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
|
7904
|
+
updateIroPickerColor(newActiveColor);
|
7905
|
+
}
|
7906
|
+
// Call onChange with initial value
|
7907
|
+
onChange(initialValue.current);
|
7908
|
+
// Call onReset callback if provided
|
7909
|
+
onReset === null || onReset === void 0 ? void 0 : onReset();
|
7910
|
+
};
|
7886
7911
|
// Update iro picker when color is selected from default colors panel
|
7887
7912
|
var handleColorFromPanel = function (newColor) {
|
7888
7913
|
setColor(newColor);
|
@@ -7942,10 +7967,7 @@ var IroGradient = function (_a) {
|
|
7942
7967
|
}).toHex8String()
|
7943
7968
|
: activeColor.hex;
|
7944
7969
|
return (React.createElement("div", { className: 'w-full rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl', style: {
|
7945
|
-
backgroundColor: 'var(--colorpicker-panel-bg)'
|
7946
|
-
borderColor: 'var(--colorpicker-border)',
|
7947
|
-
borderWidth: '1px',
|
7948
|
-
borderStyle: 'solid'
|
7970
|
+
backgroundColor: 'var(--colorpicker-panel-bg)'
|
7949
7971
|
} },
|
7950
7972
|
React.createElement("div", { className: 'relative', ref: containerRef },
|
7951
7973
|
React.createElement("div", { className: 'flex justify-center items-center rounded-lg', style: {
|
@@ -7956,20 +7978,27 @@ var IroGradient = function (_a) {
|
|
7956
7978
|
React.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 })),
|
7957
7979
|
React.createElement("div", { className: 'pt-4 px-2' },
|
7958
7980
|
React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
|
7959
|
-
showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
|
7960
|
-
React.createElement(
|
7961
|
-
|
7962
|
-
|
7963
|
-
|
7981
|
+
showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
|
7982
|
+
React.createElement("div", { className: 'flex-1' },
|
7983
|
+
React.createElement(InputRgba, { hex: activeColor.hex, alpha: activeColor.alpha, showAlpha: showAlpha, onChange: function (value) {
|
7984
|
+
return setActiveColor(function (prev) { return (__assign(__assign({}, prev), { hex: value.hex, alpha: value.alpha, index: prev.index // Preserve the index!
|
7985
|
+
})); });
|
7986
|
+
}, onSubmitChange: onSubmitChange })),
|
7987
|
+
showReset && (React.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' },
|
7988
|
+
React.createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
7989
|
+
React.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' })),
|
7990
|
+
"Reset"))))));
|
7964
7991
|
};
|
7965
7992
|
|
7966
7993
|
var IroSolidColorPicker = function (_a) {
|
7967
|
-
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;
|
7994
|
+
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;
|
7968
7995
|
var node = useRef(null);
|
7969
7996
|
var iroPickerRef = useRef(null);
|
7970
|
-
|
7971
|
-
var
|
7972
|
-
var
|
7997
|
+
// Store the initial value for reset functionality
|
7998
|
+
var initialValue = useRef(value);
|
7999
|
+
var _k = __read(useState(true), 2), init = _k[0], setInit = _k[1];
|
8000
|
+
var _l = __read(useState(getHexAlpha(value)), 2), color = _l[0], setColor = _l[1];
|
8001
|
+
var _m = __read(useState(200), 2), pickerWidth = _m[0], setPickerWidth = _m[1];
|
7973
8002
|
var pickerWidthRef = useRef(200);
|
7974
8003
|
// Update ref when state changes
|
7975
8004
|
useEffect(function () {
|
@@ -8147,6 +8176,33 @@ var IroSolidColorPicker = function (_a) {
|
|
8147
8176
|
};
|
8148
8177
|
updateIroColor();
|
8149
8178
|
};
|
8179
|
+
// Reset to initial color
|
8180
|
+
var handleResetColor = function () {
|
8181
|
+
var _a;
|
8182
|
+
var initialColorData = getHexAlpha(initialValue.current);
|
8183
|
+
setColor(initialColorData);
|
8184
|
+
// Update the iro color picker
|
8185
|
+
if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
|
8186
|
+
var iroColor = showAlpha
|
8187
|
+
? {
|
8188
|
+
r: parseInt(initialColorData.hex.slice(1, 3), 16),
|
8189
|
+
g: parseInt(initialColorData.hex.slice(3, 5), 16),
|
8190
|
+
b: parseInt(initialColorData.hex.slice(5, 7), 16),
|
8191
|
+
a: initialColorData.alpha / 100
|
8192
|
+
}
|
8193
|
+
: initialColorData.hex;
|
8194
|
+
try {
|
8195
|
+
iroPickerRef.current.colorPicker.color.set(iroColor);
|
8196
|
+
}
|
8197
|
+
catch (error) {
|
8198
|
+
console.warn('Error updating iro color picker on reset:', error);
|
8199
|
+
}
|
8200
|
+
}
|
8201
|
+
// Call onChange with initial value
|
8202
|
+
onChange(initialValue.current);
|
8203
|
+
// Call onReset callback if provided
|
8204
|
+
onReset === null || onReset === void 0 ? void 0 : onReset();
|
8205
|
+
};
|
8150
8206
|
// Create layout array conditionally based on showAlpha
|
8151
8207
|
var layoutConfig = [
|
8152
8208
|
{
|
@@ -8179,9 +8235,6 @@ var IroSolidColorPicker = function (_a) {
|
|
8179
8235
|
: color.hex;
|
8180
8236
|
return (React.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: {
|
8181
8237
|
backgroundColor: 'var(--colorpicker-panel-bg)',
|
8182
|
-
borderColor: 'var(--colorpicker-border)',
|
8183
|
-
borderWidth: '1px',
|
8184
|
-
borderStyle: 'solid',
|
8185
8238
|
maxWidth: '100%',
|
8186
8239
|
minWidth: 0,
|
8187
8240
|
boxSizing: 'border-box'
|
@@ -8202,8 +8255,13 @@ var IroSolidColorPicker = function (_a) {
|
|
8202
8255
|
React.createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
|
8203
8256
|
React.createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
|
8204
8257
|
React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid' })),
|
8205
|
-
showInputs && (React.createElement("div", { className: 'rounded-lg
|
8206
|
-
React.createElement(
|
8258
|
+
showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass flex items-center gap-2' },
|
8259
|
+
React.createElement("div", { className: 'flex-1' },
|
8260
|
+
React.createElement(InputRgba, { hex: color.hex, alpha: color.alpha, format: format, showAlpha: showAlpha, onChange: handleInputChange, onSubmitChange: handleInputSubmit })),
|
8261
|
+
showReset && (React.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' },
|
8262
|
+
React.createElement("svg", { className: 'w-3 h-3', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
|
8263
|
+
React.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' })),
|
8264
|
+
"Reset"))))));
|
8207
8265
|
};
|
8208
8266
|
|
8209
8267
|
var PopupTabs = function (_a) {
|
@@ -8248,8 +8306,8 @@ var PopupTabsBodyItem = function (_a) {
|
|
8248
8306
|
};
|
8249
8307
|
|
8250
8308
|
var ColorPicker = function (_a) {
|
8251
|
-
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;
|
8252
|
-
var
|
8309
|
+
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;
|
8310
|
+
var _w = __read(useState(defaultActiveTab || getIndexActiveTag(value)), 2), activeTab = _w[0], setActiveTab = _w[1];
|
8253
8311
|
var onChangeSolid = function (value) {
|
8254
8312
|
onChange(value);
|
8255
8313
|
};
|
@@ -8272,17 +8330,17 @@ var ColorPicker = function (_a) {
|
|
8272
8330
|
React.createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
|
8273
8331
|
React.createElement(PopupTabsBody, null,
|
8274
8332
|
React.createElement(PopupTabsBodyItem, { tabName: 'solid' },
|
8275
|
-
React.createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })),
|
8333
|
+
React.createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight, showReset: showReset, onReset: onReset })),
|
8276
8334
|
React.createElement(PopupTabsBodyItem, { tabName: 'gradient' },
|
8277
|
-
React.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 })))))));
|
8335
|
+
React.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 })))))));
|
8278
8336
|
}
|
8279
8337
|
return (React.createElement(ThemeProvider, null,
|
8280
|
-
React.createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
|
8338
|
+
React.createElement("div", { className: 'relative dark react-iro-color-picker', "data-color-picker-theme": true },
|
8281
8339
|
React.createElement(ThemeToggle, null),
|
8282
8340
|
solid || gradient ? (React.createElement(PopupTabs, { popupWidth: popupWidth },
|
8283
8341
|
React.createElement(PopupTabsBody, null,
|
8284
|
-
solid ? (React.createElement(IroSolidColorPicker, { onChange: onChangeSolid, value: value, format: format, defaultColors: defaultColors, debounceMS: debounceMS, debounce: debounce, showAlpha: showAlpha, showInputs: showInputs, colorBoardHeight: colorBoardHeight })) : (React.createElement(Fragment, null)),
|
8285
|
-
gradient ? (React.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.createElement(Fragment, null))))) : null)));
|
8342
|
+
solid ? (React.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.createElement(Fragment, null)),
|
8343
|
+
gradient ? (React.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.createElement(Fragment, null))))) : null)));
|
8286
8344
|
};
|
8287
8345
|
|
8288
8346
|
export { ColorPicker, DEFAULT_COLORS, InputRgba, PopupTabs, PopupTabsBody, PopupTabsBodyItem, PopupTabsHeader, PopupTabsHeaderLabel, RADIALS_POS, ThemeProvider, ThemeToggle, TinyColor, checkFormat, cn, ColorPicker as default, getGradient, getHexAlpha, hexToRgba, isValidHex, isValidRgba, parseGradient, rgbaToArray, rgbaToHex, useDebounce, validGradient };
|