@apexcura/ui-components 0.0.14-Beta44 → 0.0.14-Beta46
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.js +35 -49
- package/dist/index.mjs +35 -49
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -379,7 +379,6 @@ var import_react11 = __toESM(require("react"));
|
|
|
379
379
|
var ButtonElement = (props) => {
|
|
380
380
|
const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
|
|
381
381
|
const [hoverColor, setHoverColor] = (0, import_react11.useState)(null);
|
|
382
|
-
const [originalFillColors, setOriginalFillColors] = (0, import_react11.useState)([]);
|
|
383
382
|
(0, import_react11.useEffect)(() => {
|
|
384
383
|
if (props.icon) {
|
|
385
384
|
fetch(props.icon).then((response) => response.text()).then((data) => {
|
|
@@ -387,28 +386,26 @@ var ButtonElement = (props) => {
|
|
|
387
386
|
tempDiv.innerHTML = data;
|
|
388
387
|
const svgElement = tempDiv.querySelector("svg");
|
|
389
388
|
if (svgElement) {
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
document.body.removeChild(tempSpan);
|
|
411
|
-
setHoverColor(computedHoverColor);
|
|
389
|
+
if (props.svgoverride) {
|
|
390
|
+
const textColorClass = props.className.match(/text-[\w-]+/g)?.[0];
|
|
391
|
+
const hoverColorClass = props.className.match(/hover:text-[\w-]+/g)?.[0];
|
|
392
|
+
if (textColorClass) {
|
|
393
|
+
const tempSpan = document.createElement("span");
|
|
394
|
+
tempSpan.className = textColorClass;
|
|
395
|
+
document.body.appendChild(tempSpan);
|
|
396
|
+
const computedColor = getComputedStyle(tempSpan).color;
|
|
397
|
+
document.body.removeChild(tempSpan);
|
|
398
|
+
const paths = svgElement.querySelectorAll("path");
|
|
399
|
+
paths.forEach((path) => path.setAttribute("fill", computedColor));
|
|
400
|
+
}
|
|
401
|
+
if (hoverColorClass) {
|
|
402
|
+
const tempSpan = document.createElement("span");
|
|
403
|
+
tempSpan.className = hoverColorClass.replace("hover:", "");
|
|
404
|
+
document.body.appendChild(tempSpan);
|
|
405
|
+
const computedHoverColor = getComputedStyle(tempSpan).color;
|
|
406
|
+
document.body.removeChild(tempSpan);
|
|
407
|
+
setHoverColor(computedHoverColor);
|
|
408
|
+
}
|
|
412
409
|
}
|
|
413
410
|
svgElement.setAttribute(
|
|
414
411
|
"class",
|
|
@@ -418,36 +415,25 @@ var ButtonElement = (props) => {
|
|
|
418
415
|
}
|
|
419
416
|
}).catch((error) => console.error("Error fetching SVG:", error));
|
|
420
417
|
}
|
|
421
|
-
}, [props.icon, props.className]);
|
|
418
|
+
}, [props.icon, props.className, props.svgoverride]);
|
|
422
419
|
const handleMouseEnter = () => {
|
|
423
|
-
if (hoverColor && svgContent) {
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
paths?.forEach((path, index) => {
|
|
431
|
-
path.setAttribute("fill", hoverColor);
|
|
432
|
-
});
|
|
433
|
-
return tempDiv.innerHTML;
|
|
434
|
-
});
|
|
420
|
+
if (props.svgoverride && hoverColor && svgContent) {
|
|
421
|
+
const tempDiv = document.createElement("div");
|
|
422
|
+
tempDiv.innerHTML = svgContent;
|
|
423
|
+
const svgElement = tempDiv.querySelector("svg");
|
|
424
|
+
const paths = svgElement?.querySelectorAll("path");
|
|
425
|
+
paths?.forEach((path) => path.setAttribute("fill", hoverColor));
|
|
426
|
+
setSvgContent(tempDiv.innerHTML);
|
|
435
427
|
}
|
|
436
428
|
};
|
|
437
429
|
const handleMouseLeave = () => {
|
|
438
|
-
if (svgContent) {
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
paths?.forEach((path, index) => {
|
|
446
|
-
const originalFill = originalFillColors[index];
|
|
447
|
-
path.setAttribute("fill", originalFill);
|
|
448
|
-
});
|
|
449
|
-
return tempDiv.innerHTML;
|
|
450
|
-
});
|
|
430
|
+
if (props.svgoverride && svgContent) {
|
|
431
|
+
const tempDiv = document.createElement("div");
|
|
432
|
+
tempDiv.innerHTML = svgContent;
|
|
433
|
+
const svgElement = tempDiv.querySelector("svg");
|
|
434
|
+
const paths = svgElement?.querySelectorAll("path");
|
|
435
|
+
paths?.forEach((path) => path.removeAttribute("fill"));
|
|
436
|
+
setSvgContent(tempDiv.innerHTML);
|
|
451
437
|
}
|
|
452
438
|
};
|
|
453
439
|
return /* @__PURE__ */ import_react11.default.createElement(
|
package/dist/index.mjs
CHANGED
|
@@ -320,7 +320,6 @@ import React11, { useEffect, useState as useState4 } from "react";
|
|
|
320
320
|
var ButtonElement = (props) => {
|
|
321
321
|
const [svgContent, setSvgContent] = useState4(null);
|
|
322
322
|
const [hoverColor, setHoverColor] = useState4(null);
|
|
323
|
-
const [originalFillColors, setOriginalFillColors] = useState4([]);
|
|
324
323
|
useEffect(() => {
|
|
325
324
|
if (props.icon) {
|
|
326
325
|
fetch(props.icon).then((response) => response.text()).then((data) => {
|
|
@@ -328,28 +327,26 @@ var ButtonElement = (props) => {
|
|
|
328
327
|
tempDiv.innerHTML = data;
|
|
329
328
|
const svgElement = tempDiv.querySelector("svg");
|
|
330
329
|
if (svgElement) {
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
document.body.removeChild(tempSpan);
|
|
352
|
-
setHoverColor(computedHoverColor);
|
|
330
|
+
if (props.svgoverride) {
|
|
331
|
+
const textColorClass = props.className.match(/text-[\w-]+/g)?.[0];
|
|
332
|
+
const hoverColorClass = props.className.match(/hover:text-[\w-]+/g)?.[0];
|
|
333
|
+
if (textColorClass) {
|
|
334
|
+
const tempSpan = document.createElement("span");
|
|
335
|
+
tempSpan.className = textColorClass;
|
|
336
|
+
document.body.appendChild(tempSpan);
|
|
337
|
+
const computedColor = getComputedStyle(tempSpan).color;
|
|
338
|
+
document.body.removeChild(tempSpan);
|
|
339
|
+
const paths = svgElement.querySelectorAll("path");
|
|
340
|
+
paths.forEach((path) => path.setAttribute("fill", computedColor));
|
|
341
|
+
}
|
|
342
|
+
if (hoverColorClass) {
|
|
343
|
+
const tempSpan = document.createElement("span");
|
|
344
|
+
tempSpan.className = hoverColorClass.replace("hover:", "");
|
|
345
|
+
document.body.appendChild(tempSpan);
|
|
346
|
+
const computedHoverColor = getComputedStyle(tempSpan).color;
|
|
347
|
+
document.body.removeChild(tempSpan);
|
|
348
|
+
setHoverColor(computedHoverColor);
|
|
349
|
+
}
|
|
353
350
|
}
|
|
354
351
|
svgElement.setAttribute(
|
|
355
352
|
"class",
|
|
@@ -359,36 +356,25 @@ var ButtonElement = (props) => {
|
|
|
359
356
|
}
|
|
360
357
|
}).catch((error) => console.error("Error fetching SVG:", error));
|
|
361
358
|
}
|
|
362
|
-
}, [props.icon, props.className]);
|
|
359
|
+
}, [props.icon, props.className, props.svgoverride]);
|
|
363
360
|
const handleMouseEnter = () => {
|
|
364
|
-
if (hoverColor && svgContent) {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
paths?.forEach((path, index) => {
|
|
372
|
-
path.setAttribute("fill", hoverColor);
|
|
373
|
-
});
|
|
374
|
-
return tempDiv.innerHTML;
|
|
375
|
-
});
|
|
361
|
+
if (props.svgoverride && hoverColor && svgContent) {
|
|
362
|
+
const tempDiv = document.createElement("div");
|
|
363
|
+
tempDiv.innerHTML = svgContent;
|
|
364
|
+
const svgElement = tempDiv.querySelector("svg");
|
|
365
|
+
const paths = svgElement?.querySelectorAll("path");
|
|
366
|
+
paths?.forEach((path) => path.setAttribute("fill", hoverColor));
|
|
367
|
+
setSvgContent(tempDiv.innerHTML);
|
|
376
368
|
}
|
|
377
369
|
};
|
|
378
370
|
const handleMouseLeave = () => {
|
|
379
|
-
if (svgContent) {
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
paths?.forEach((path, index) => {
|
|
387
|
-
const originalFill = originalFillColors[index];
|
|
388
|
-
path.setAttribute("fill", originalFill);
|
|
389
|
-
});
|
|
390
|
-
return tempDiv.innerHTML;
|
|
391
|
-
});
|
|
371
|
+
if (props.svgoverride && svgContent) {
|
|
372
|
+
const tempDiv = document.createElement("div");
|
|
373
|
+
tempDiv.innerHTML = svgContent;
|
|
374
|
+
const svgElement = tempDiv.querySelector("svg");
|
|
375
|
+
const paths = svgElement?.querySelectorAll("path");
|
|
376
|
+
paths?.forEach((path) => path.removeAttribute("fill"));
|
|
377
|
+
setSvgContent(tempDiv.innerHTML);
|
|
392
378
|
}
|
|
393
379
|
};
|
|
394
380
|
return /* @__PURE__ */ React11.createElement(
|