innoboxrr-react-datatable 2.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-react-datatable",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Gemelo React de innoboxrr-vue-datatable: el mismo contrato de modelo, la misma tabla.",
   "type": "module",
   "main": "index.js",
@@ -37,10 +37,11 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@iconify/react": "^6.0.0",
     "axios": "^1.7.0"
   },
   "peerDependencies": {
-    "innoboxrr-form-core": "^2.0.0",
+    "innoboxrr-form-core": "^2.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.0"

package/src/components/DatatableIcon.jsx

@@ -0,0 +1,39 @@
+import { useSyncExternalStore } from 'react'
+import { Icon } from '@iconify/react'
+import { iconFor, onIconChange } from 'innoboxrr-form-core'
+
+/**
+ * El icono de una accion de la tabla.
+ *
+ * Antes cada componente pintaba `<span class="uk-icon" uk-icon="icon: fa-plus">`
+ * por su cuenta. Para que ese icono apareciera hacian falta tres dependencias
+ * que ningun package.json declaraba: uikit, fontawesome y uikit-custom-icons,
+ * que hacia de puente entre las dos.
+ *
+ * Ahora el nombre se resuelve contra el mapa de innoboxrr-form-core, el mismo
+ * que usa la rama Vue.
+ *
+ * @param {{ icon: string, ratio?: number }} props
+ */
+export default function DatatableIcon({ icon, ratio = 1 }) {
+    // useSyncExternalStore es la forma correcta de leer estado que vive fuera
+    // de React: un `setIcons()` en caliente repinta lo ya montado.
+    const resolved = useSyncExternalStore(
+        onIconChange,
+        () => iconFor(icon),
+        () => iconFor(icon)
+    )
+
+    // `ratio` era el multiplicador de UIkit sobre 16px. Se conserva para no
+    // romper a quien ya lo pasa.
+    const size = ratio * 16
+
+    return (
+        <Icon
+            className="fe-mr-sm"
+            icon={resolved}
+            width={size}
+            height={size}
+            aria-hidden="true" />
+    )
+}

package/src/components/DisabledLinkComponent.jsx

@@ -1,3 +1,5 @@
+import DatatableIcon from './DatatableIcon.jsx'
+
 /**
  * Gemelo de DisabledLinkComponent.vue: la acción que el usuario no puede
  * ejecutar. Se sigue mostrando, deshabilitada, para que la interfaz no cambie
@@ -11,9 +13,10 @@ export default function DisabledLinkComponent({ icon = '', text }) {
             href="#"
             aria-disabled="true"
             className="disabled-link block px-4 py-2 dark:hover:text-white dark:text-slate-400"
-            uk-tooltip="title: This action is not authorized; pos:right"
+            data-tooltip="This action is not authorized"
+            data-tooltip-pos="right"
             onClick={(event) => event.preventDefault()}>
-            {showIcon ? <span className="fe-mr-sm uk-icon" uk-icon={icon}></span> : null}
+            {showIcon ? <DatatableIcon icon={icon} /> : null}
             <span>{text}</span>
         </a>
     )

package/src/components/IconLinkComponent.jsx

@@ -1,3 +1,5 @@
+import DatatableIcon from './DatatableIcon.jsx'
+
 /**
  * Gemelo de IconLinkComponent.vue.
  */
@@ -16,10 +18,7 @@ export default function IconLinkComponent({
             href={link}
             target={target}
             onClick={onClick}>
-            <span
-                className="fe-mr-sm uk-icon"
-                uk-icon={`icon: ${icon}; ratio: ${ratio};`}
-                style={{ fontSize: `${ratio * 16}px` }}></span>
+            <DatatableIcon icon={icon} ratio={ratio} />
             <span className={textClass}>{text}</span>
         </a>
     )

package/src/components/IconRouteComponent.jsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import { buildPath } from '../routes.js'
+import DatatableIcon from './DatatableIcon.jsx'
 
 /**
  * Gemelo de IconRouteComponent.vue.
@@ -23,10 +24,7 @@ export default function IconRouteComponent({
         <Link
             to={buildPath(name, params, query)}
             className="block px-4 py-2 dark:hover:text-white dark:text-slate-400">
-            <span
-                className="fe-mr-sm uk-icon"
-                uk-icon={`icon: ${icon}; ratio: ${ratio};`}
-                style={{ fontSize: `${ratio * 16}px` }}></span>
+            <DatatableIcon icon={icon} ratio={ratio} />
             <span className={textClass}>{text}</span>
         </Link>
     )