react-iro-gradient-picker 1.2.1 → 1.2.3
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 +52 -0
- package/dist/index.es.js +137 -97
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +137 -97
- package/dist/index.js.map +1 -1
- package/dist/utils/validation/validGradient.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -6394,111 +6394,139 @@ var isValidRgba = (function (rgba) {
|
|
6394
6394
|
return !!rgbaToHex(rgba);
|
6395
6395
|
});
|
6396
6396
|
|
6397
|
-
var
|
6398
|
-
|
6399
|
-
|
6400
|
-
|
6401
|
-
|
6402
|
-
|
6403
|
-
|
6404
|
-
|
6405
|
-
|
6406
|
-
|
6407
|
-
|
6408
|
-
var rColorHex = /\#(?:[a-f0-9]{6,8}|[a-f0-9]{3})/;
|
6409
|
-
var rDigits3 = /\(\s*(?:\d{1,3}%?\s*,\s*){2}%?\d{1,3}%?\s*\)/;
|
6410
|
-
var rDigits4 = /\(\s*(?:\d{1,3}%?\s*,\s*){2}%?\d{1,3}%?\s*,\s*\d*\.?\d+\)/;
|
6411
|
-
var rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/;
|
6412
|
-
var rKeyword = /[_a-z-][_a-z0-9-]*/;
|
6413
|
-
var rColor = combineRegExp([
|
6414
|
-
'(?:',
|
6415
|
-
rColorHex,
|
6416
|
-
'|',
|
6417
|
-
'(?:rgb|hsl)',
|
6418
|
-
rDigits3,
|
6419
|
-
'|',
|
6420
|
-
'(?:rgba|hsla)',
|
6421
|
-
rDigits4,
|
6422
|
-
'|',
|
6423
|
-
rKeyword,
|
6424
|
-
')'
|
6425
|
-
], '');
|
6426
|
-
var rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], '');
|
6427
|
-
var rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');
|
6428
|
-
var rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, '|', rRadial, ')'], '');
|
6429
|
-
var rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);
|
6430
|
-
var rColorStopSearch = combineRegExp([
|
6431
|
-
'\\s*(',
|
6432
|
-
rColor,
|
6433
|
-
')',
|
6434
|
-
'(?:\\s+',
|
6435
|
-
'(',
|
6436
|
-
rValue,
|
6437
|
-
'))?',
|
6438
|
-
'(?:',
|
6439
|
-
rComma,
|
6440
|
-
'\\s*)?'
|
6441
|
-
], searchFlags);
|
6442
|
-
return {
|
6443
|
-
gradientSearch: rGradientSearch,
|
6444
|
-
colorStopSearch: rColorStopSearch
|
6445
|
-
};
|
6446
|
-
};
|
6447
|
-
var parseGradient$1 = function (regExpLib, input) {
|
6448
|
-
var result = {
|
6449
|
-
stops: [],
|
6450
|
-
angle: '',
|
6451
|
-
line: '',
|
6452
|
-
original: ''
|
6453
|
-
};
|
6454
|
-
var matchGradient, matchColorStop, stopResult;
|
6455
|
-
regExpLib.gradientSearch.lastIndex = 0;
|
6456
|
-
matchGradient = regExpLib.gradientSearch.exec(input);
|
6457
|
-
if (matchGradient !== null) {
|
6458
|
-
result = __assign(__assign({}, result), { original: matchGradient[0] });
|
6459
|
-
if (matchGradient[1]) {
|
6460
|
-
result.line = matchGradient[1];
|
6397
|
+
var validGradient = (function (input) {
|
6398
|
+
try {
|
6399
|
+
// Clean input
|
6400
|
+
var cleanInput = input
|
6401
|
+
.trim()
|
6402
|
+
.replace(/;$/, '')
|
6403
|
+
.replace(/^background-image:\s*/, '');
|
6404
|
+
// Extract gradient type and content
|
6405
|
+
var gradientMatch = cleanInput.match(/^(linear|radial)-gradient\s*\(\s*(.*)\s*\)$/i);
|
6406
|
+
if (!gradientMatch) {
|
6407
|
+
return 'Failed to find gradient';
|
6461
6408
|
}
|
6462
|
-
|
6463
|
-
|
6409
|
+
var _a = __read(gradientMatch, 3), type = _a[1], content = _a[2];
|
6410
|
+
var parts = [];
|
6411
|
+
var currentPart = '';
|
6412
|
+
var parenDepth = 0;
|
6413
|
+
var inQuotes = false;
|
6414
|
+
// Parse content by splitting on commas, but respect parentheses and quotes
|
6415
|
+
for (var i = 0; i < content.length; i++) {
|
6416
|
+
var char = content[i];
|
6417
|
+
if (char === '"' || char === "'") {
|
6418
|
+
inQuotes = !inQuotes;
|
6419
|
+
}
|
6420
|
+
else if (!inQuotes) {
|
6421
|
+
if (char === '(')
|
6422
|
+
parenDepth++;
|
6423
|
+
else if (char === ')')
|
6424
|
+
parenDepth--;
|
6425
|
+
else if (char === ',' && parenDepth === 0) {
|
6426
|
+
parts.push(currentPart.trim());
|
6427
|
+
currentPart = '';
|
6428
|
+
continue;
|
6429
|
+
}
|
6430
|
+
}
|
6431
|
+
currentPart += char;
|
6464
6432
|
}
|
6465
|
-
if (
|
6466
|
-
|
6433
|
+
if (currentPart.trim()) {
|
6434
|
+
parts.push(currentPart.trim());
|
6467
6435
|
}
|
6468
|
-
|
6469
|
-
|
6470
|
-
|
6471
|
-
|
6472
|
-
|
6473
|
-
|
6474
|
-
|
6475
|
-
|
6476
|
-
|
6436
|
+
var angle = '';
|
6437
|
+
var line = '';
|
6438
|
+
var colorStops = [];
|
6439
|
+
// Determine if first part is direction/angle or color stop
|
6440
|
+
var firstPart = parts[0];
|
6441
|
+
var isDirection = /^\d+deg$/i.test(firstPart) ||
|
6442
|
+
/^to\s+/.test(firstPart) ||
|
6443
|
+
/^(?:circle|ellipse)/.test(firstPart) ||
|
6444
|
+
/at\s+/.test(firstPart);
|
6445
|
+
if (isDirection) {
|
6446
|
+
if (type === 'linear') {
|
6447
|
+
if (/^\d+deg$/i.test(firstPart)) {
|
6448
|
+
angle = firstPart.replace(/deg$/i, '');
|
6449
|
+
}
|
6450
|
+
else if (/^to\s+/.test(firstPart)) {
|
6451
|
+
line = firstPart;
|
6452
|
+
// Convert named directions to angles
|
6453
|
+
var directionMap = {
|
6454
|
+
'to top': '0',
|
6455
|
+
'to top right': '45',
|
6456
|
+
'to right': '90',
|
6457
|
+
'to bottom right': '135',
|
6458
|
+
'to bottom': '180',
|
6459
|
+
'to bottom left': '225',
|
6460
|
+
'to left': '270',
|
6461
|
+
'to top left': '315'
|
6462
|
+
};
|
6463
|
+
angle = directionMap[firstPart] || '0';
|
6464
|
+
}
|
6465
|
+
}
|
6466
|
+
else {
|
6467
|
+
line = firstPart;
|
6477
6468
|
}
|
6478
|
-
|
6479
|
-
matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[5]);
|
6469
|
+
colorStops = parts.slice(1);
|
6480
6470
|
}
|
6481
|
-
|
6482
|
-
|
6483
|
-
|
6484
|
-
|
6485
|
-
|
6486
|
-
|
6487
|
-
|
6488
|
-
|
6489
|
-
|
6490
|
-
|
6491
|
-
|
6492
|
-
|
6471
|
+
else {
|
6472
|
+
// No explicit direction, use defaults
|
6473
|
+
angle = type === 'linear' ? '180' : '';
|
6474
|
+
line = type === 'radial' ? 'circle at center' : '';
|
6475
|
+
colorStops = parts;
|
6476
|
+
}
|
6477
|
+
// Parse color stops
|
6478
|
+
var stops_1 = [];
|
6479
|
+
for (var i = 0; i < colorStops.length; i++) {
|
6480
|
+
var stopString = colorStops[i].trim();
|
6481
|
+
// Try to extract color and position
|
6482
|
+
var stopMatch = stopString.match(/^(.+?)(?:\s+(\d+(?:\.\d+)?)(%)?)?$/);
|
6483
|
+
if (stopMatch) {
|
6484
|
+
var _b = __read(stopMatch, 4), colorStr = _b[1], positionStr = _b[2], isPercent = _b[3];
|
6485
|
+
var tinyColorInstance = tinycolor(colorStr.trim());
|
6486
|
+
if (tinyColorInstance.isValid()) {
|
6487
|
+
var stop_1 = {
|
6488
|
+
color: tinyColorInstance.toRgbString()
|
6489
|
+
};
|
6490
|
+
if (positionStr) {
|
6491
|
+
var position = parseFloat(positionStr);
|
6492
|
+
// Assume percentage if no unit specified
|
6493
|
+
if (isPercent || !isPercent) {
|
6494
|
+
position = position / 100;
|
6495
|
+
}
|
6496
|
+
stop_1.position = Math.max(0, Math.min(1, position));
|
6497
|
+
}
|
6498
|
+
stops_1.push(stop_1);
|
6499
|
+
}
|
6500
|
+
}
|
6493
6501
|
}
|
6494
|
-
|
6495
|
-
|
6502
|
+
// Auto-assign positions if missing
|
6503
|
+
stops_1.forEach(function (stop, index) {
|
6504
|
+
if (!stop.hasOwnProperty('position')) {
|
6505
|
+
stop.position = stops_1.length > 1 ? index / (stops_1.length - 1) : 0;
|
6506
|
+
}
|
6507
|
+
});
|
6508
|
+
// Ensure we have at least 2 stops
|
6509
|
+
if (stops_1.length === 0) {
|
6510
|
+
return 'No valid color stops found';
|
6511
|
+
}
|
6512
|
+
else if (stops_1.length === 1) {
|
6513
|
+
// Duplicate the single stop to create a valid gradient
|
6514
|
+
stops_1.push({
|
6515
|
+
color: stops_1[0].color,
|
6516
|
+
position: 1
|
6517
|
+
});
|
6496
6518
|
}
|
6519
|
+
return {
|
6520
|
+
stops: stops_1,
|
6521
|
+
angle: angle,
|
6522
|
+
line: line,
|
6523
|
+
original: cleanInput
|
6524
|
+
};
|
6497
6525
|
}
|
6498
|
-
|
6499
|
-
|
6526
|
+
catch (error) {
|
6527
|
+
console.warn('Error parsing gradient:', error);
|
6528
|
+
return 'Failed to parse gradient';
|
6500
6529
|
}
|
6501
|
-
return result;
|
6502
6530
|
});
|
6503
6531
|
|
6504
6532
|
var LINEAR_POS = [
|
@@ -7739,7 +7767,19 @@ var IroGradient = function (_a) {
|
|
7739
7767
|
// Store the initial value for reset functionality
|
7740
7768
|
var initialValue = React.useRef(value);
|
7741
7769
|
var parsedColors = React.useCallback(function () {
|
7742
|
-
|
7770
|
+
try {
|
7771
|
+
var parsed = parseGradient(value);
|
7772
|
+
// If parsing failed, return fallback gradient
|
7773
|
+
if (typeof parsed === 'string') {
|
7774
|
+
console.warn('Gradient parsing failed, using fallback:', parsed);
|
7775
|
+
return parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
|
7776
|
+
}
|
7777
|
+
return parsed;
|
7778
|
+
}
|
7779
|
+
catch (error) {
|
7780
|
+
console.warn('Error parsing gradient, using fallback:', error);
|
7781
|
+
return parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
|
7782
|
+
}
|
7743
7783
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
7744
7784
|
}, [value]);
|
7745
7785
|
var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
|