Expandir contenedor

Finalidad

Este contenedor se puede expandir o contraer hasta alcanzar los tamaños max y min predefinidos, respectivamente. Si no se especifica el tamaño máximo, mostrará todos los elementos secundarios al expandirse. Si no se especifica el tamaño mínimo, tendrá un tamaño de cero. Esto puede ser útil para mostrar u ocultar segmentos de diseño de forma dinámica.

Uso

import { useState, useEffect } from 'react';
import { useExpand } from 'effsz/expand';

const { observe } = useExpand();

export const App = () => {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        const unobserve = observe((event) => {
            // gestionar eventos de expansión
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-expand open={open} min="20px">
            <div>...</div>
        </effsz-expand>
    </div>
};

Tipos

/**
 * Expand container attributes
 */
export interface IExpandContainerAttrs {
    /**
     * Main axis
     */
    axis: 'x' | 'y';
    /**
     * Min size
     */
    min: string;
    /**
     * Max size
     */
    max: string;
    /**
     * Is container expanded
     */
    open: boolean;

    // transition

    /**
     * Transition-timing-function
     */
    tf: string;
    /**
     * Resize transition duration
     */
    dur: string;
    /**
     * Resize transition delay
     */
    del: string;
};

/**
 * Expand container
 */
export interface IExpandContainerElement extends HTMLElement {
    get axis(): 'x' | 'y';
    set axis(val: 'x' | 'y');
    get isOpen(): boolean;
    get size(): number;
    /**
     * Expand to max size
     */
    expand(): void;
    /**
     * Collapse to min size
     */
    collapse(): void;
    /**
     * toggle
     */
    toggle(): void;
}