Pull To Action

Apresentação

O componente PullToAction é responsável por implementar a funcionalidade de "puxar para atualizar" (pull-to-refresh), permitindo que os usuários atualizem o conteúdo da tela puxando para baixo. Ele oferece uma experiência de usuário fluida com animações suaves e feedback visual.

⚠️ Importante: Este componente deve ser usado apenas uma vez por tela para evitar conflitos de gestos.

Quando usar

• Para atualizar feeds de conteúdo
• Para recarregar listas de dados
• Para sincronizar informações em tempo real
• Para atualizar dashboards
• Para recarregar notificações
• Para atualizar status de aplicações
• Para sincronizar dados offline
• Para atualizar conteúdo dinâmico

Forma básica de uso

import { PullToAction, View } from 'eitri-luminus';

// Pull to action com configuração completa
<PullToAction 
  onRefresh={async () => await atualizarDados()}
  configuration={{
    pullDownThreshold: 80,
    dragContent: false,
    iconInitialPosition: -50,
    iconFinalPosition: 50,
    showThreshold: 20,
    maxPullRatio: 0.2,
    animationDuration: 0.3,
    spinDuration: 1,
    iconSize: 24,
    enableRotation: true,
    enableFadeIn: true,
    refreshingContent: <div>Atualizando...</div>
  }}
>
  <View height={300}>Conteúdo da página que será atualizado</View>
</PullToAction>

Propriedades

Propriedade	Tipo	Descrição
onRefresh	() => Promise<void>	Função assíncrona executada ao puxar
children	ReactNode	Conteúdo renderizado dentro do componente
configuration	PullToActionConfig	Configurações opcionais do componente
className	string	Classes CSS adicionais
id	string	Identificador único do componente

PullToActionConfig

Propriedade	Tipo	Descrição
pullDownThreshold	number	Limite para ativar refresh (padrão: 70)
dragContent	boolean	Se o conteúdo deve ser arrastado (padrão: false)
iconInitialPosition	number	Posição inicial do ícone (padrão: -50)
iconFinalPosition	number	Posição final do ícone (padrão: 50)
showThreshold	number	Limite para mostrar ícone (padrão: 20)
maxPullRatio	number	Razão máxima de puxada (padrão: 0.2)
animationDuration	number	Duração da animação (padrão: 0.3)
spinDuration	number	Duração da rotação (padrão: 1)
customIcon	ReactNode	Ícone personalizado
iconSize	number	Tamanho do ícone (padrão: 24)
refreshingContent	ReactNode	Conteúdo exibido durante refresh
enableRotation	boolean	Habilita rotação do ícone (padrão: true)
enableFadeIn	boolean	Habilita fade in (padrão: true)

Heranças

O componente PullToAction herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• ⚠️ Use apenas um componente PullToAction por tela para evitar conflitos
• O componente detecta automaticamente gestos de toque
• Suporta animações suaves e feedback visual
• Funciona apenas em dispositivos touch
• Previne comportamento padrão de overscroll
• Suporta configurações personalizadas
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tipos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para atualização de dados
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de refresh
• Funciona bem com listas e feeds
• Facilita a atualização de conteúdo
• Suporta ícones personalizados
• Oferece feedback visual durante o refresh