innoboxrr-react-datatable 2.3.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,98 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-import { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift } from '@floating-ui/dom'
-import { classFor } from 'innoboxrr-form-core'
-
-/**
- * Gemelo de NavDropdownComponent.vue.
- *
- * Antes lo movía `uk-dropdown`, y como UIkit sólo procesa el atributo al
- * montarse el nodo, había que avisarle con `UIkit.update()` — con guarda,
- * porque UIkit lo aportaba la aplicación anfitriona sin que nadie lo
- * declarara, y en una prueba no estaba.
- *
- * La mitad de lo que hacía ya lo hace el navegador. La **Popover API** —el
- * atributo `popover` y el `popoverTarget` del botón— aporta de fábrica la capa
- * superior, el cierre al pulsar fuera y el cierre con Escape. Lo único que
- * falta es colocarlo, y de eso se ocupa Floating UI.
- *
- * El botón que lo abre sólo necesita `popoverTarget` con este mismo id:
- *
- *     <button popoverTarget={`dropdown_${row.id}`}>…</button>
- *     <NavDropdownComponent id={`dropdown_${row.id}`} pos="left" />
- *
- * @param {{ id: string, pos?: string, offset?: number, children?: any }} props
- */
-export default function NavDropdownComponent({
-    id,
-    // Se conservan los nombres que usaba UIkit para no romper a quien ya los
-    // pasa; `bottom-left` y compañía se traducen a los de Floating UI.
-    pos = 'bottom-left',
-    offset = 4,
-    children,
-}) {
-    const panel = useRef(null)
-    const stopFollowing = useRef(null)
-
-    const placement = (() => {
-        const [side, align] = pos.split('-')
-
-        if (! align) {
-            return side
-        }
-
-        // UIkit dice `bottom-left` para «debajo, alineado a la izquierda»;
-        // Floating UI lo llama `bottom-start`.
-        return `${side}-${align === 'left' ? 'start' : 'end'}`
-    })()
-
-    const onBeforeToggle = useCallback((event) => {
-        if (event.newState !== 'open') {
-            stopFollowing.current?.()
-            stopFollowing.current = null
-
-            return
-        }
-
-        // El botón es quien apunta a este panel, así que se encuentra por el
-        // atributo y no hace falta que nadie lo pase como prop.
-        const trigger = document.querySelector(`[popovertarget="${id}"]`)
-
-        if (! trigger || ! panel.current) {
-            return
-        }
-
-        // autoUpdate recoloca al hacer scroll o redimensionar: un menú abierto
-        // que se queda flotando donde estaba es peor que uno mal colocado.
-        stopFollowing.current = autoUpdate(trigger, panel.current, () => {
-            computePosition(trigger, panel.current, {
-                placement,
-                middleware: [
-                    offsetMiddleware(offset),
-                    // Si no cabe abajo, se va arriba; si se sale por un lado,
-                    // se desplaza para caber.
-                    flip(),
-                    shift({ padding: 8 }),
-                ],
-            }).then(({ x, y }) => {
-                Object.assign(panel.current.style, { left: `${x}px`, top: `${y}px` })
-            })
-        })
-    }, [id, offset, placement])
-
-    useEffect(() => {
-        const node = panel.current
-
-        node?.addEventListener('beforetoggle', onBeforeToggle)
-
-        return () => {
-            node?.removeEventListener('beforetoggle', onBeforeToggle)
-            stopFollowing.current?.()
-        }
-    }, [onBeforeToggle])
-
-    return (
-        <div ref={panel} id={id} popover="" className={classFor('menu')}>
-            <ul className="fe-menu-list">{children}</ul>
-        </div>
-    )
-}