innoboxrr-react-datatable 2.2.0 → 3.0.0

package/src/components/DatatableIcon.jsx

@@ -1,39 +0,0 @@
-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,23 +0,0 @@
-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
- * de forma según los permisos.
- */
-export default function DisabledLinkComponent({ icon = '', text }) {
-    const showIcon = icon !== '' && icon != null
-
-    return (
-        <a
-            href="#"
-            aria-disabled="true"
-            className="disabled-link block px-4 py-2 dark:hover:text-white dark:text-slate-400"
-            data-tooltip="This action is not authorized"
-            data-tooltip-pos="right"
-            onClick={(event) => event.preventDefault()}>
-            {showIcon ? <DatatableIcon icon={icon} /> : null}
-            <span>{text}</span>
-        </a>
-    )
-}

package/src/components/IconLinkComponent.jsx

@@ -1,25 +0,0 @@
-import DatatableIcon from './DatatableIcon.jsx'
-
-/**
- * Gemelo de IconLinkComponent.vue.
- */
-export default function IconLinkComponent({
-    link = '#',
-    text,
-    icon,
-    ratio = 1,
-    textClass = '',
-    target = '_self',
-    onClick,
-}) {
-    return (
-        <a
-            className="block px-4 py-2 dark:hover:text-white dark:text-slate-400"
-            href={link}
-            target={target}
-            onClick={onClick}>
-            <DatatableIcon icon={icon} ratio={ratio} />
-            <span className={textClass}>{text}</span>
-        </a>
-    )
-}

package/src/components/IconRouteComponent.jsx

@@ -1,31 +0,0 @@
-import { Link } from 'react-router-dom'
-import { buildPath } from '../routes.js'
-import DatatableIcon from './DatatableIcon.jsx'
-
-/**
- * Gemelo de IconRouteComponent.vue.
- *
- * vue-router resuelve `{ name, params, query }`; React Router 7 no tiene rutas
- * con nombre, así que la ruta se construye con el mapa que declare la
- * aplicación (ver `registerRoutes` en `src/routes.js`). El contrato del modelo
- * —`params.to.name`— no cambia, que es lo que importa: `models/<entity>/
- * index.js` es el mismo archivo para Vue y para React.
- */
-export default function IconRouteComponent({
-    name,
-    params = {},
-    query = {},
-    text,
-    icon,
-    ratio = 1,
-    textClass = '',
-}) {
-    return (
-        <Link
-            to={buildPath(name, params, query)}
-            className="block px-4 py-2 dark:hover:text-white dark:text-slate-400">
-            <DatatableIcon icon={icon} ratio={ratio} />
-            <span className={textClass}>{text}</span>
-        </Link>
-    )
-}

package/src/components/NavDropdownComponent.jsx

@@ -1,35 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-/**
- * Gemelo de NavDropdownComponent.vue.
- *
- * UIkit lee el atributo `uk-dropdown` del DOM. React lo escribe igual, pero
- * UIkit sólo lo procesa al montarse el nodo, así que se le avisa — con guarda,
- * porque UIkit lo aporta la aplicación anfitriona y en una prueba no está.
- */
-export default function NavDropdownComponent({
-    id,
-    pos = 'bottom-left',
-    mode = 'click',
-    offset = 0,
-    // Es el nombre de una animacion de UIkit, no una clase nuestra.
-    animation = 'uk-animation-slide-top-small',
-    duration = 500,
-    children,
-}) {
-    const host = useRef(null)
-
-    useEffect(() => {
-        globalThis.UIkit?.update?.(host.current)
-    }, [])
-
-    return (
-        <div
-            ref={host}
-            id={id}
-            uk-dropdown={`pos: ${pos}; mode: ${mode}; offset: ${offset}; animation: ${animation}; duration: ${duration};`}
-            className="fe-p-0 z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 p-2">
-            <ul className="fe-menu">{children}</ul>
-        </div>
-    )
-}