react-iro-gradient-picker 2.0.2 → 2.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/dist/index.es.js +4 -79
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +4 -79
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -6877,7 +6877,6 @@ var IroColorPicker = forwardRef(function (_a, ref) {
|
|
|
6877
6877
|
var theme = detectedTheme;
|
|
6878
6878
|
var isUpdatingColor = useRef(false);
|
|
6879
6879
|
var _o = __read(useState(width || 200), 2), containerWidth = _o[0], setContainerWidth = _o[1];
|
|
6880
|
-
var _p = __read(useState(true), 2), isLoading = _p[0], setIsLoading = _p[1];
|
|
6881
6880
|
// Set up ResizeObserver to make the color picker responsive
|
|
6882
6881
|
// Only when width prop is NOT provided (parent doesn't control width)
|
|
6883
6882
|
useEffect(function () {
|
|
@@ -7036,15 +7035,12 @@ var IroColorPicker = forwardRef(function (_a, ref) {
|
|
|
7036
7035
|
if (!colorPickerRef.current || !colorPickerRef.current.color) {
|
|
7037
7036
|
throw new Error('ColorPicker was not created properly');
|
|
7038
7037
|
}
|
|
7039
|
-
// Update picker ready state and notify parent
|
|
7040
|
-
setIsLoading(false);
|
|
7041
7038
|
// Force update of imperative handle by calling onMount callback
|
|
7042
7039
|
if (onMount) {
|
|
7043
7040
|
setTimeout(function () { return onMount(colorPickerRef.current); }, 0);
|
|
7044
7041
|
}
|
|
7045
7042
|
}
|
|
7046
7043
|
catch (error) {
|
|
7047
|
-
setIsLoading(false);
|
|
7048
7044
|
colorPickerRef.current = null;
|
|
7049
7045
|
return null; // Return null to indicate failure
|
|
7050
7046
|
}
|
|
@@ -7199,69 +7195,13 @@ var IroColorPicker = forwardRef(function (_a, ref) {
|
|
|
7199
7195
|
useEffect(function () {
|
|
7200
7196
|
if (!width)
|
|
7201
7197
|
return;
|
|
7202
|
-
|
|
7203
|
-
var maxRetries = 3;
|
|
7204
|
-
var createWithRetry = function () {
|
|
7205
|
-
// Longer initial delay to ensure DOM is completely ready
|
|
7206
|
-
var timeoutId = setTimeout(function () {
|
|
7207
|
-
try {
|
|
7208
|
-
var result = createColorPicker(width);
|
|
7209
|
-
if (!result &&
|
|
7210
|
-
colorPickerRef.current === null &&
|
|
7211
|
-
retryCount < maxRetries) {
|
|
7212
|
-
retryCount++;
|
|
7213
|
-
// Exponential backoff: 100ms, 200ms, 400ms
|
|
7214
|
-
setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
|
|
7215
|
-
}
|
|
7216
|
-
}
|
|
7217
|
-
catch (error) {
|
|
7218
|
-
if (retryCount < maxRetries) {
|
|
7219
|
-
retryCount++;
|
|
7220
|
-
setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
|
|
7221
|
-
}
|
|
7222
|
-
}
|
|
7223
|
-
}, 100); // Increased from 50ms to 100ms
|
|
7224
|
-
return function () { return clearTimeout(timeoutId); };
|
|
7225
|
-
};
|
|
7226
|
-
var cleanupFn = createWithRetry();
|
|
7227
|
-
return function () {
|
|
7228
|
-
if (cleanupFn)
|
|
7229
|
-
cleanupFn();
|
|
7230
|
-
};
|
|
7198
|
+
createColorPicker(width);
|
|
7231
7199
|
}, [width, theme, createColorPicker]);
|
|
7232
7200
|
// useEffect for when containerWidth is used (internal ResizeObserver)
|
|
7233
7201
|
useEffect(function () {
|
|
7234
7202
|
if (width)
|
|
7235
7203
|
return; // Don't run if width prop is provided
|
|
7236
|
-
|
|
7237
|
-
var maxRetries = 3;
|
|
7238
|
-
var createWithRetry = function () {
|
|
7239
|
-
// Longer initial delay to ensure DOM is completely ready
|
|
7240
|
-
var timeoutId = setTimeout(function () {
|
|
7241
|
-
try {
|
|
7242
|
-
var result = createColorPicker(containerWidth);
|
|
7243
|
-
if (!result &&
|
|
7244
|
-
colorPickerRef.current === null &&
|
|
7245
|
-
retryCount < maxRetries) {
|
|
7246
|
-
retryCount++;
|
|
7247
|
-
// Exponential backoff: 100ms, 200ms, 400ms
|
|
7248
|
-
setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
|
|
7249
|
-
}
|
|
7250
|
-
}
|
|
7251
|
-
catch (error) {
|
|
7252
|
-
if (retryCount < maxRetries) {
|
|
7253
|
-
retryCount++;
|
|
7254
|
-
setTimeout(createWithRetry, 100 * Math.pow(2, retryCount - 1));
|
|
7255
|
-
}
|
|
7256
|
-
}
|
|
7257
|
-
}, 100); // Increased from 50ms to 100ms
|
|
7258
|
-
return function () { return clearTimeout(timeoutId); };
|
|
7259
|
-
};
|
|
7260
|
-
var cleanupFn = createWithRetry();
|
|
7261
|
-
return function () {
|
|
7262
|
-
if (cleanupFn)
|
|
7263
|
-
cleanupFn();
|
|
7264
|
-
};
|
|
7204
|
+
createColorPicker(containerWidth);
|
|
7265
7205
|
}, [containerWidth, theme, createColorPicker, width]);
|
|
7266
7206
|
// Update color when prop changes
|
|
7267
7207
|
useEffect(function () {
|
|
@@ -7365,25 +7305,10 @@ var IroColorPicker = forwardRef(function (_a, ref) {
|
|
|
7365
7305
|
minWidth: 0,
|
|
7366
7306
|
overflow: 'hidden',
|
|
7367
7307
|
justifyContent: 'center',
|
|
7368
|
-
minHeight:
|
|
7308
|
+
minHeight: 'auto',
|
|
7369
7309
|
position: 'relative',
|
|
7370
7310
|
backgroundColor: 'transparent'
|
|
7371
|
-
} }
|
|
7372
|
-
position: 'absolute',
|
|
7373
|
-
inset: 0,
|
|
7374
|
-
display: 'flex',
|
|
7375
|
-
alignItems: 'center',
|
|
7376
|
-
justifyContent: 'center',
|
|
7377
|
-
background: 'var(--colorpicker-panel-bg, #1e293b)'
|
|
7378
|
-
} },
|
|
7379
|
-
React.createElement("div", { style: {
|
|
7380
|
-
width: '32px',
|
|
7381
|
-
height: '32px',
|
|
7382
|
-
border: '3px solid rgba(59, 130, 246, 0.3)',
|
|
7383
|
-
borderTop: '3px solid rgb(59, 130, 246)',
|
|
7384
|
-
borderRadius: '50%',
|
|
7385
|
-
animation: 'spin 0.8s linear infinite'
|
|
7386
|
-
} })))));
|
|
7311
|
+
} }));
|
|
7387
7312
|
});
|
|
7388
7313
|
IroColorPicker.displayName = 'IroColorPicker';
|
|
7389
7314
|
|