@apexcura/ui-components 0.0.14-Beta44 → 0.0.14-Beta45

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.
Files changed (4) hide show
  1. package/dist/index.css +0 -3
  2. package/dist/index.js +11 -39
  3. package/dist/index.mjs +11 -39
  4. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -375,9 +375,6 @@ video {
375
375
  .italic {
376
376
  font-style: italic;
377
377
  }
378
- .text-\[\\w-\] {
379
- color: w-;
380
- }
381
378
  .text-black {
382
379
  --tw-text-opacity: 1;
383
380
  color: rgb(0 0 0 / var(--tw-text-opacity));
package/dist/index.js CHANGED
@@ -379,7 +379,7 @@ 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)([]);
382
+ console.log(hoverColor);
383
383
  (0, import_react11.useEffect)(() => {
384
384
  if (props.icon) {
385
385
  fetch(props.icon).then((response) => response.text()).then((data) => {
@@ -387,29 +387,6 @@ var ButtonElement = (props) => {
387
387
  tempDiv.innerHTML = data;
388
388
  const svgElement = tempDiv.querySelector("svg");
389
389
  if (svgElement) {
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) => {
400
- const originalFill = path.getAttribute("fill");
401
- path.setAttribute("fill", computedColor);
402
- setOriginalFillColors((prev) => [...prev, originalFill || ""]);
403
- });
404
- }
405
- if (hoverColorClass) {
406
- const tempSpan = document.createElement("span");
407
- tempSpan.className = hoverColorClass.replace("hover:", "");
408
- document.body.appendChild(tempSpan);
409
- const computedHoverColor = getComputedStyle(tempSpan).color;
410
- document.body.removeChild(tempSpan);
411
- setHoverColor(computedHoverColor);
412
- }
413
390
  svgElement.setAttribute(
414
391
  "class",
415
392
  `${props.className ? props.className : ""}`
@@ -420,31 +397,26 @@ var ButtonElement = (props) => {
420
397
  }
421
398
  }, [props.icon, props.className]);
422
399
  const handleMouseEnter = () => {
423
- if (hoverColor && svgContent) {
424
- setSvgContent((prevSvgContent) => {
425
- if (!prevSvgContent) return null;
426
- const tempDiv = document.createElement("div");
427
- tempDiv.innerHTML = prevSvgContent;
428
- const svgElement = tempDiv.querySelector("svg");
429
- const paths = svgElement?.querySelectorAll("path");
430
- paths?.forEach((path, index) => {
431
- path.setAttribute("fill", hoverColor);
432
- });
433
- return tempDiv.innerHTML;
434
- });
400
+ if (props.hoverFillColor) {
401
+ setHoverColor(props.hoverFillColor);
435
402
  }
436
403
  };
437
404
  const handleMouseLeave = () => {
438
405
  if (svgContent) {
406
+ setHoverColor(null);
439
407
  setSvgContent((prevSvgContent) => {
440
408
  if (!prevSvgContent) return null;
441
409
  const tempDiv = document.createElement("div");
442
410
  tempDiv.innerHTML = prevSvgContent;
443
411
  const svgElement = tempDiv.querySelector("svg");
444
412
  const paths = svgElement?.querySelectorAll("path");
445
- paths?.forEach((path, index) => {
446
- const originalFill = originalFillColors[index];
447
- path.setAttribute("fill", originalFill);
413
+ paths?.forEach((path) => {
414
+ const fillValue = path.getAttribute("data-original-fill");
415
+ if (fillValue) {
416
+ path.setAttribute("fill", fillValue);
417
+ } else {
418
+ path.removeAttribute("fill");
419
+ }
448
420
  });
449
421
  return tempDiv.innerHTML;
450
422
  });
package/dist/index.mjs CHANGED
@@ -320,7 +320,7 @@ 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([]);
323
+ console.log(hoverColor);
324
324
  useEffect(() => {
325
325
  if (props.icon) {
326
326
  fetch(props.icon).then((response) => response.text()).then((data) => {
@@ -328,29 +328,6 @@ var ButtonElement = (props) => {
328
328
  tempDiv.innerHTML = data;
329
329
  const svgElement = tempDiv.querySelector("svg");
330
330
  if (svgElement) {
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) => {
341
- const originalFill = path.getAttribute("fill");
342
- path.setAttribute("fill", computedColor);
343
- setOriginalFillColors((prev) => [...prev, originalFill || ""]);
344
- });
345
- }
346
- if (hoverColorClass) {
347
- const tempSpan = document.createElement("span");
348
- tempSpan.className = hoverColorClass.replace("hover:", "");
349
- document.body.appendChild(tempSpan);
350
- const computedHoverColor = getComputedStyle(tempSpan).color;
351
- document.body.removeChild(tempSpan);
352
- setHoverColor(computedHoverColor);
353
- }
354
331
  svgElement.setAttribute(
355
332
  "class",
356
333
  `${props.className ? props.className : ""}`
@@ -361,31 +338,26 @@ var ButtonElement = (props) => {
361
338
  }
362
339
  }, [props.icon, props.className]);
363
340
  const handleMouseEnter = () => {
364
- if (hoverColor && svgContent) {
365
- setSvgContent((prevSvgContent) => {
366
- if (!prevSvgContent) return null;
367
- const tempDiv = document.createElement("div");
368
- tempDiv.innerHTML = prevSvgContent;
369
- const svgElement = tempDiv.querySelector("svg");
370
- const paths = svgElement?.querySelectorAll("path");
371
- paths?.forEach((path, index) => {
372
- path.setAttribute("fill", hoverColor);
373
- });
374
- return tempDiv.innerHTML;
375
- });
341
+ if (props.hoverFillColor) {
342
+ setHoverColor(props.hoverFillColor);
376
343
  }
377
344
  };
378
345
  const handleMouseLeave = () => {
379
346
  if (svgContent) {
347
+ setHoverColor(null);
380
348
  setSvgContent((prevSvgContent) => {
381
349
  if (!prevSvgContent) return null;
382
350
  const tempDiv = document.createElement("div");
383
351
  tempDiv.innerHTML = prevSvgContent;
384
352
  const svgElement = tempDiv.querySelector("svg");
385
353
  const paths = svgElement?.querySelectorAll("path");
386
- paths?.forEach((path, index) => {
387
- const originalFill = originalFillColors[index];
388
- path.setAttribute("fill", originalFill);
354
+ paths?.forEach((path) => {
355
+ const fillValue = path.getAttribute("data-original-fill");
356
+ if (fillValue) {
357
+ path.setAttribute("fill", fillValue);
358
+ } else {
359
+ path.removeAttribute("fill");
360
+ }
389
361
  });
390
362
  return tempDiv.innerHTML;
391
363
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta44",
3
+ "version": "0.0.14-Beta45",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",