View

Apresentação

O View é o componente mais básico da biblioteca Luminus UI. Ele serve como um container flexível que pode ser usado para agrupar e organizar outros elementos na interface.

Quando usar

• Quando precisar criar um container simples para agrupar elementos
• Para criar layouts básicos
• Quando precisar adicionar interatividade (como cliques) em um grupo de elementos
• Para criar espaçamentos e alinhamentos entre elementos

Forma básica de uso

import { View } from 'eitri-luminus';

// Exemplo básico
<View>
  <Text>Conteúdo aqui</Text>
</View>

// Com interatividade
<View onClick={() => console.log('clicou')}>
  <Text>Clique aqui</Text>
</View>

// Exemplo com sendFocusToInput
<View sendFocusToInput>
  <Text>Clique para focar no input</Text>
  <Input id="meu-input" />
</View>

Propriedades

Propriedade	Tipo	Descrição
onClick	() => void	Função chamada quando o usuário clica no componente. Ao adicionar esta propriedade, toda a área do View se torna clicável, incluindo seu conteúdo.
sendFocusToInput	boolean	Quando true, renderiza o componente como um label, permitindo focar em inputs relacionados

Heranças

O componente View 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)

Métodos via Ref

O componente View expõe os seguintes métodos públicos que podem ser acessados através de uma ref:

import { useRef } from 'react';
import { View } from 'eitri-luminus';

const MyComponent = () => {
  const viewRef = useRef<View>(null);

  const handleScrollIntoView = () => {
    viewRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  const handleGetScrollPosition = () => {
    const position = viewRef.current?.getScrollPosition();
    console.log('Posição de scroll:', position);
  };

  const handleSetScrollPosition = () => {
    viewRef.current?.setScrollPosition(0, 100);
  };

  const handleGetBoundingRect = () => {
    const rect = viewRef.current?.getBoundingRect();
    console.log('Retângulo:', rect);
  };

  return (
    <div>
      <View ref={viewRef} className="h-64 overflow-auto">
        {/* conteúdo */}
      </View>
      <button onClick={handleScrollIntoView}>Rolar para visualização</button>
      <button onClick={handleGetScrollPosition}>Obter posição de scroll</button>
      <button onClick={handleSetScrollPosition}>Definir posição de scroll</button>
      <button onClick={handleGetBoundingRect}>Obter retângulo</button>
    </div>
  );
};

Método	Tipo de Retorno	Descrição
scrollIntoView(options?: ScrollIntoViewOptions)	void	Rola a view para dentro da visualização
getScrollPosition()	{ x: number, y: number }	Retorna a posição de scroll atual
setScrollPosition(x: number, y: number)	void	Define a posição de scroll
getBoundingRect()	DOMRect	Retorna o retângulo delimitador do elemento

Observações

• O View é um componente fundamental que serve como base para outros componentes mais complexos
• Por padrão, ele se comporta como um container flexível
• Pode ser estilizado usando as propriedades de estilo herdadas
• Suporta interatividade através da propriedade onClick
• Quando onClick é adicionado, o cursor muda para pointer para indicar que a área é clicável
• Métodos via ref disponíveis para controle programático de scroll e posicionamento