@composi/gestures:

Uso

Gestos para Escritorio y Móviles

@composi/gestures es una biblioteca de gestos multiplataforma para escritorio y despositivos móviles. Cuando compreso con gzip, @composi/gestures es tan solo 1 KB. Es más pequeño que la mayoría de las imágenes que usarás en tu proyecto.

@composi/gestures proporciona eventos normalizados y gestos para usar en tu aplicación.

Eventos Normalizados

@composi/core proporciona eventos normalizados para que no tenga que preocuparse por mousedown, touchstart, pointerdown, etc. Hay cuatro eventos para usar:

Se usan así cómo se usan los eventos de DOM con una escucha de eventos:

const btn = document.querySelector('button')
btn.addEventListener(eventstart, () => { alert('¡El evento comenzó!') })

Aunque estos te permiten usar un evento para escritorio y dispositivos táctiles, casi siempre es mejor usar gestos. Esto es especialmente válido para tap, ya que responde tanto a un clic como a un toque de dedo o lápiz. Esto representa mejor lo que los usuarios están acostumbrados a hacer.

Gestos

En los dispositivos móviles, los usuarios esperan poder tocar y deslizar el dedo. @composi/gestures proporciona toques y deslizamientos que funcionan tanto en dispositivos móviles como en el escritorio, lo que garantiza una experiencia de usuario consistente en todas las plataformas. Con @composi/gestures no tienes que tener eventos separados para equipos de escritorio y móviles. @composi/core proporciona los siguientes gestos:

Hay dos formas de usar gestos, como eventos en línea o como escuchas de eventos.

Gestos en Línea

import { gestures } from '@composi/gestures'
// Inicializar los gestos:
gestures()

// Definir evento de callback:
function announciarPulsar() {
  alert('¡Pulsaste el botón!')
}

function announciarDeslizamiento() {
  alert('¡Deslizaste sobre el botón!')
}

// Definir eventos en línea:
function PulsarBotón(props) {
  return (
    <button ontap={() => announciarPulsar()}>Pulsar</button>
  )
},

function DeslizarBotón(props) {
  return (
    <button onswipe={() => announciarDeslizamiento()}>Deslizar</button>
  )
}

Gestos con Escuchas de Eventos

También puedes utilizar gestos con escuchas de eventos. Los usas tal como lo harías con cualquier otro evento DOM estándar:

import { gestures } from '@composi/gestures'
// Inicializar los gestos:
gestures()

const pulsarBtn = document.querySelector('#pulsarBtn')
pulsarBtn.addEventListener('tap', function() {
  alert('¡Pulsaste el botón!')
})

En Cuanto a Swipe

Además de swipeleft, swiperight, swipeup y swipedown también hay un gesto genérico para deslizar. Cuando se utiliza el evento genérico swipe, éste recibe un valor que indica en qué dirección fue el deslizamiento. Puede utilizar este dato para determinar cómo manejar el deslizamiento. Según la dirección en la cuál el usuario deslizó, el valor será "left" (izquierda), "right" (derecha), "up" (arriba) or "down (abajo)". Observa en el siguiente ejemplo cómo anunciamos la dirección de deslizamiento a través del atributo data del evento:

import { gestures } from '@composi/gestures'
// Inicializar los gestos:
gestures()

function ProbarDeslizamiento() {
  function anunciarDeslizamiento(e) {
    // La direción del deslizamiento se pasa con el evento
    // como el valor del la propiedad `data`.
    // Usamos switch para ver cuál es el valor y
    // entonces traducirlo al español:
    let dirección
    switch(e.data) {
      case 'left':
        dirección = 'a la izquierda' 
        break
      case 'right'
        dirección = 'a la derecha'
        break
      case 'up'
        dirección = 'para arriba'
        break
      case 'down'
        dirección = 'para abajo'
        break
    }
    alert(`La dirección de deslizamiento fue: ${e.data}.`)
  }
  return (
     anunciarDeslizamiento(e)}>Swipe on me!
  )
}

Al capturar y verificar los datos del evento, puedes hacer que un solo evento de deslizamiento maneje diferentes direcciones. Podrías hacer eso con un interruptor. Proporciónalo un gesto de swipe, y cuando el dato del evento sea 'a la izquierda', actívalo, de lo contrario, desactívalo.

Deslizar sin Seleccionar Texto

Si registras un deslizamiento en un elemento y éste o sus hijos tienen texto, cuando el usuario intente deslizar sobre él, resultará en una selección de texto. Puedes evitar este problema usando la función `disableTextSelection` de @composi/gestures. Lo importas y luego le pasas el elemento para deshabilitar la selección de texto. A continuación mostramos cómo hacer esto. Deshabilitamos la selección de texto en el botón cuando el gancho del ciclo de vida `onmount` se ejecuta:

import { h, render } from '@composi/core'
import { gestures, disableTextSelection } from '@composi/gestures'
// Inicializar gestos:
gestures()

function Botón({state}) {
  gestionarDeslizamiento(e) {
    // Gestionar el deslizamiento aquí...
  }
  prevenirSelección(e) {
    // Deshabilitar la selección del texto del botón:
    disableTextSelection(e.target)
  }
  return (
    
  )
}

Si quieres desactivar la selección de texto en cualquier elemento, es decir, todas las etiquetas de botón o todos los elementos de una clase, puedes usar el selector seguido de un segundo valor veraz:

disableTextSelection('button', true)
// o (cualquier cadena de texto será veraz)
disableTextSelection('.deslizable', 'todos')

Rehabilitar la Selección de Texto

Si deseas volver a habilitar la selección de texto en un elemento que has deshabilitado, puedes importar y usar la función `enableTextSelection`. Impórtalo y úsalo en el elemento para habilitarlo:

import { gestures, disableTextSelection, enableTextSelection } from '@composi/gestures'
enableTextSelection('#user-list')

Para volver a habilitar muchos elementos del mismo tipo, lo usas de la misma manera que `disableTextSelection`, pasando un selector de etiqueta o clase, seguido de un segundo valor veraz:

enableTextSelection('button', true)
// o (cualquier cadena de texto será veraz)
enableTextSelection('.deslizable', 'si')