Contenedor deslizante

Propósito

Este contenedor permite mostrar su contenido en forma de diálogo que aparece (se desliza) fuera de la pantalla. La visibilidad del contenedor se puede ajustar mediante el atributo open o los métodos del componente web. El atributo modal indica la modalidad del diálogo.

Uso

import { useState, useEffect } from 'react';
import { useSlide } from 'effsz/slide';

const { observe } = useSlide();

export const App = () => {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        const unobserve = observe((event) => {
            // gestionar eventos de diapositivas
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-slide open={open} modal={true}>
            <div>...</div>
        </effsz-slide>
    </div>
};

Tipos

/**
 * Slide container attributes
 */
export interface ISlideContainerAttrs {
    /**
     * Is slide container open
     */
    open: boolean;
    /**
     * Is slide container modal
     */
    modal: boolean;
    /**
     * Position
     */
    pos: 'l' | 't' | 'r' | 'b';
    /**
     * Backdrop alpha coef
     */
    alpha: number;
    /**
     * Backdrop blur coef
     */
    blur: number;
    /**
     * Swipe distance in px to close container
     * @description
     * `30` by default. If equals `0` then container won`t close
     */
    swipe: number;

    // transition

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

/**
 * Slide container
 */
export interface ISlideContainerElement extends HTMLElement {
    get dialog(): HTMLDialogElement;
    get isOpen(): boolean;
    /**
     * Open
     */
    open(): Promise<void>;
    /**
     * Close
     */
    close(): Promise<void>;
    /**
     * Toggle
     */
    toggle(): Promise<void>;
}