react-iro-gradient-picker 1.0.2 → 1.0.4
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 +105 -42
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +105 -42
- 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
@@ -91,13 +91,18 @@ var ThemeProvider = function (_a) {
|
|
91
91
|
return defaultTheme;
|
92
92
|
}), 2), theme = _c[0], setTheme = _c[1];
|
93
93
|
useEffect(function () {
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
94
|
+
// Apply theme to local container instead of document root for better scoping
|
95
|
+
var containers = document.querySelectorAll('[data-color-picker-theme]');
|
96
|
+
containers.forEach(function (container) {
|
97
|
+
// Remove previous theme class
|
98
|
+
container.classList.remove('light', 'dark');
|
99
|
+
// Add new theme class
|
100
|
+
container.classList.add(theme);
|
101
|
+
});
|
99
102
|
// Store theme preference
|
100
|
-
|
103
|
+
if (typeof window !== 'undefined') {
|
104
|
+
localStorage.setItem('color-picker-theme', theme);
|
105
|
+
}
|
101
106
|
}, [theme]);
|
102
107
|
var toggleTheme = function () {
|
103
108
|
setTheme(function (prevTheme) { return (prevTheme === 'light' ? 'dark' : 'light'); });
|
@@ -7626,12 +7631,14 @@ var useDebounce = (function (value, delay) {
|
|
7626
7631
|
});
|
7627
7632
|
|
7628
7633
|
var IroGradient = function (_a) {
|
7629
|
-
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);
|
7630
7637
|
var parsedColors = useCallback(function () {
|
7631
7638
|
return parseGradient(value);
|
7632
7639
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
7633
7640
|
}, [value]);
|
7634
|
-
var
|
7641
|
+
var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
|
7635
7642
|
var lastStop = rgbaToArray(stops[stops.length - 1][0]);
|
7636
7643
|
var activeStopIndex = stops.length - 1;
|
7637
7644
|
var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
|
@@ -7639,7 +7646,7 @@ var IroGradient = function (_a) {
|
|
7639
7646
|
var iroPickerRef = useRef(null);
|
7640
7647
|
var containerRef = useRef(null);
|
7641
7648
|
var isUpdatingFromGradientStop = useRef(false);
|
7642
|
-
var
|
7649
|
+
var _t = __read(useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
|
7643
7650
|
// Responsive width for IroColorPicker - match solid picker logic
|
7644
7651
|
useEffect(function () {
|
7645
7652
|
if (!containerRef.current)
|
@@ -7678,18 +7685,18 @@ var IroGradient = function (_a) {
|
|
7678
7685
|
resizeObserver.observe(containerRef.current);
|
7679
7686
|
return function () { return resizeObserver.disconnect(); };
|
7680
7687
|
}, []);
|
7681
|
-
var
|
7688
|
+
var _u = __read(useState({
|
7682
7689
|
gradient: value,
|
7683
7690
|
type: type,
|
7684
7691
|
modifier: modifier,
|
7685
7692
|
stops: stops
|
7686
|
-
}), 2), color =
|
7687
|
-
var
|
7693
|
+
}), 2), color = _u[0], setColor = _u[1];
|
7694
|
+
var _v = __read(useState({
|
7688
7695
|
hex: activeStop,
|
7689
7696
|
alpha: activeAlpha,
|
7690
7697
|
loc: stops[activeStopIndex][1],
|
7691
7698
|
index: activeStopIndex
|
7692
|
-
}), 2), activeColor =
|
7699
|
+
}), 2), activeColor = _v[0], setActiveColor = _v[1];
|
7693
7700
|
var debounceColor = useDebounce(color, debounceMS);
|
7694
7701
|
// Update iro picker color
|
7695
7702
|
var updateIroPickerColor = useCallback(function (colorData, retryCount) {
|
@@ -7878,6 +7885,29 @@ var IroGradient = function (_a) {
|
|
7878
7885
|
var alpha = Math.round(rgbaArr[3] * 100);
|
7879
7886
|
onChangeActiveColor({ hex: hex, alpha: alpha });
|
7880
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
|
+
};
|
7881
7911
|
// Update iro picker when color is selected from default colors panel
|
7882
7912
|
var handleColorFromPanel = function (newColor) {
|
7883
7913
|
setColor(newColor);
|
@@ -7937,34 +7967,38 @@ var IroGradient = function (_a) {
|
|
7937
7967
|
}).toHex8String()
|
7938
7968
|
: activeColor.hex;
|
7939
7969
|
return (React.createElement("div", { className: 'w-full rounded-xl shadow-lg space-y-2 transition-all duration-200 hover:shadow-xl', style: {
|
7940
|
-
backgroundColor: 'var(--colorpicker-panel-bg)'
|
7941
|
-
borderColor: 'var(--colorpicker-border)',
|
7942
|
-
borderWidth: '1px',
|
7943
|
-
borderStyle: 'solid'
|
7970
|
+
backgroundColor: 'var(--colorpicker-panel-bg)'
|
7944
7971
|
} },
|
7945
7972
|
React.createElement("div", { className: 'relative', ref: containerRef },
|
7946
7973
|
React.createElement("div", { className: 'flex justify-center items-center rounded-lg', style: {
|
7947
7974
|
height: colorBoardHeight + pickerWidth
|
7948
7975
|
} },
|
7949
7976
|
React.createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleIroColorChange }))),
|
7950
|
-
React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
|
7977
|
+
React.createElement("div", { className: 'rounded-lg colorpicker-glass px-4' },
|
7951
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 })),
|
7952
|
-
React.createElement("div", { className: 'pt-4' },
|
7979
|
+
React.createElement("div", { className: 'pt-4 px-2' },
|
7953
7980
|
React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: function () { }, setActiveColor: handleSetActiveColor, colorType: 'gradient' })),
|
7954
|
-
showInputs && (React.createElement("div", { className: 'rounded-lg colorpicker-glass' },
|
7955
|
-
React.createElement(
|
7956
|
-
|
7957
|
-
|
7958
|
-
|
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"))))));
|
7959
7991
|
};
|
7960
7992
|
|
7961
7993
|
var IroSolidColorPicker = function (_a) {
|
7962
|
-
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;
|
7963
7995
|
var node = useRef(null);
|
7964
7996
|
var iroPickerRef = useRef(null);
|
7965
|
-
|
7966
|
-
var
|
7967
|
-
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];
|
7968
8002
|
var pickerWidthRef = useRef(200);
|
7969
8003
|
// Update ref when state changes
|
7970
8004
|
useEffect(function () {
|
@@ -8142,6 +8176,33 @@ var IroSolidColorPicker = function (_a) {
|
|
8142
8176
|
};
|
8143
8177
|
updateIroColor();
|
8144
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
|
+
};
|
8145
8206
|
// Create layout array conditionally based on showAlpha
|
8146
8207
|
var layoutConfig = [
|
8147
8208
|
{
|
@@ -8174,9 +8235,6 @@ var IroSolidColorPicker = function (_a) {
|
|
8174
8235
|
: color.hex;
|
8175
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: {
|
8176
8237
|
backgroundColor: 'var(--colorpicker-panel-bg)',
|
8177
|
-
borderColor: 'var(--colorpicker-border)',
|
8178
|
-
borderWidth: '1px',
|
8179
|
-
borderStyle: 'solid',
|
8180
8238
|
maxWidth: '100%',
|
8181
8239
|
minWidth: 0,
|
8182
8240
|
boxSizing: 'border-box'
|
@@ -8197,8 +8255,13 @@ var IroSolidColorPicker = function (_a) {
|
|
8197
8255
|
React.createElement(IroColorPicker, { ref: iroPickerRef, width: pickerWidth, color: iroColorValue, layout: layoutConfig, onColorChange: handleColorChange })))),
|
8198
8256
|
React.createElement("div", { className: 'border-t pt-4 colorpicker-glass rounded-lg' },
|
8199
8257
|
React.createElement(DefaultColorPanel, { defaultColors: defaultColors, setColor: handleColorFromPanel, setInit: setInit, colorType: 'solid' })),
|
8200
|
-
showInputs && (React.createElement("div", { className: 'rounded-lg
|
8201
|
-
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"))))));
|
8202
8265
|
};
|
8203
8266
|
|
8204
8267
|
var PopupTabs = function (_a) {
|
@@ -8208,7 +8271,7 @@ var PopupTabs = function (_a) {
|
|
8208
8271
|
activeTab: activeTab
|
8209
8272
|
});
|
8210
8273
|
});
|
8211
|
-
return (React.createElement("div", { className: 'relative rounded-md
|
8274
|
+
return (React.createElement("div", { className: 'relative rounded-md', style: { width: "".concat(popupWidth, "px") } }, childrenContact));
|
8212
8275
|
};
|
8213
8276
|
var PopupTabsHeaderLabel = function (_a) {
|
8214
8277
|
var children = _a.children, activeTab = _a.activeTab, tabName = _a.tabName, onClick = _a.onClick;
|
@@ -8243,8 +8306,8 @@ var PopupTabsBodyItem = function (_a) {
|
|
8243
8306
|
};
|
8244
8307
|
|
8245
8308
|
var ColorPicker = function (_a) {
|
8246
|
-
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;
|
8247
|
-
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];
|
8248
8311
|
var onChangeSolid = function (value) {
|
8249
8312
|
onChange(value);
|
8250
8313
|
};
|
@@ -8259,7 +8322,7 @@ var ColorPicker = function (_a) {
|
|
8259
8322
|
};
|
8260
8323
|
if (solid && gradient) {
|
8261
8324
|
return (React.createElement(ThemeProvider, null,
|
8262
|
-
React.createElement("div", { className: 'relative' },
|
8325
|
+
React.createElement("div", { className: 'relative dark', "data-color-picker-theme": true },
|
8263
8326
|
React.createElement(ThemeToggle, null),
|
8264
8327
|
React.createElement(PopupTabs, { activeTab: activeTab, popupWidth: popupWidth },
|
8265
8328
|
React.createElement(PopupTabsHeader, null,
|
@@ -8267,17 +8330,17 @@ var ColorPicker = function (_a) {
|
|
8267
8330
|
React.createElement(PopupTabsHeaderLabel, { tabName: 'gradient', onClick: function () { return onChangeTab('gradient'); } }, "Gradient")),
|
8268
8331
|
React.createElement(PopupTabsBody, null,
|
8269
8332
|
React.createElement(PopupTabsBodyItem, { tabName: 'solid' },
|
8270
|
-
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 })),
|
8271
8334
|
React.createElement(PopupTabsBodyItem, { tabName: 'gradient' },
|
8272
|
-
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 })))))));
|
8273
8336
|
}
|
8274
8337
|
return (React.createElement(ThemeProvider, null,
|
8275
|
-
React.createElement("div", { className: 'relative' },
|
8338
|
+
React.createElement("div", { className: 'relative dark react-iro-color-picker', "data-color-picker-theme": true },
|
8276
8339
|
React.createElement(ThemeToggle, null),
|
8277
8340
|
solid || gradient ? (React.createElement(PopupTabs, { popupWidth: popupWidth },
|
8278
8341
|
React.createElement(PopupTabsBody, null,
|
8279
|
-
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)),
|
8280
|
-
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)));
|
8281
8344
|
};
|
8282
8345
|
|
8283
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 };
|