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