Painéis divididos são uma parte constante da vida de um desenvolvedor. Seja para dividir as muitas áreas de sua área de trabalho favorita ou IDE da web, é um ótimo recurso para melhorar a experiência do usuário em termos de organização de tela.

Neste artigo, vamos criar um componente de painel dividido no React do zero.

Criaremos um aplicativo sem bibliotecas externas, apenas React, que mostra uma lista predefinida de nomes famosos no painel esquerdo, enquanto exibe uma citação deles no painel direito.

A imagem abaixo demonstra a natureza deste exemplo de aplicativo:

Em vez de demonstrar como simplesmente criar o componente, também mostraremos como diversificar suas dimensões com dois painéis divididos-um vertical e outro horizontal.

O exemplo também mostra como realizar algumas interações de estado entre os painéis por meio do contexto do React. Dessa forma, você pode ver como usá-lo em um cenário do mundo real mais adequado.

Configuração do projeto

Para executar as coisas rapidamente, usaremos criar-reagir ferramenta-app . Portanto, execute o seguinte comando:

 npx criar-reagir-app splitpane-react

Abra o projeto criado no Visual Studio Code e crie mais alguns arquivos:

-| splitpane-react
-----| src
--------|...
--------| QuoteContext.js
--------| SplitPaneContext.js
--------| SplitPane.js
--------| index.css

Vamos começar com os arquivos de contexto. Certifique-se de colar o seguinte conteúdo em QuoteContext.js :

 import {createContext} de"react"; const QuoteContext=createContext (); exportar QuoteContext padrão;

Desde o advento do React 16, ele introduziu uma nova API de contexto para ajudar os desenvolvedores a passar dados pelas várias hierarquias de níveis de componentes sem a necessidade de props .

Aqui, estamos criando um armazenamento de contexto para armazenar dados para a lista de cotações na memória, já que não recuperaremos essas informações de nenhum outro lugar.

A seguir está o conteúdo de SplitPaneContext.js :

 import {createContext} de"react"; const SplitPaneContext=createContext (); exportar SplitPaneContext padrão;

Sim, eles são praticamente iguais. O motivo pelo qual os estamos exportando para um arquivo externo é que é mais fácil importar o contexto para outros arquivos JavaScript dessa maneira.

A seguir, vamos passar para a estrutura do aplicativo para entender melhor como as coisas se combinam.

Este é o conteúdo do arquivo App.js :

 import SplitPane, { Divisor, SplitPaneBottom, SplitPaneLeft, SplitPaneRight, SplitPaneTop,
} de"./SplitPane";
importar QuoteContext de"./QuoteContext";
import {useState} de"react"; import"./App.css"; citações const=[ { id: 1, autor:"Nelson Mandela", Descrição: "A maior glória de viver não reside em nunca cair, mas em nos elevar toda vez que caímos.", }, { id: 2, autor:"Walt Disney", descrição:"A maneira de começar é parar de falar e começar a fazer.", }, { id: 3, autor:"Oprah Winfrey", Descrição: "Se você olhar o que você tem na vida, você sempre terá mais. Se você olhar o que você não tem na vida, você nunca terá o suficiente.", },
]; function App () { const [currQuote, setCurrQuote]=useState (1); Retorna ( 
              
 );
} exportar aplicativo padrão;

Ao importar este código para o seu projeto, você pode ver alguns erros aparecendo. Não se preocupe, isso ocorre porque ainda não criamos nenhum dos componentes do painel dividido.

Vamos nos concentrar no entendimento por enquanto.

O array quotes representa nossa lista de citações famosas na memória e é melhor ficar no componente superior da hierarquia.

Ele será atribuído diretamente ao provedor QuoteContext para que você possa acessar seus valores posteriormente nos componentes SplitPane .

Observe como estamos empilhando hierarquicamente um painel sobre o outro. Cada painel pode, opcionalmente, ter sua própria classe CSS, que precisaremos adicionar ainda mais alguns estilos.

Tudo tem sido bastante simples até agora. A verdadeira mágica acontece dentro do componente SplitPane.js e, como há muito código lá, vamos construí-lo passo a passo.

O seguinte lista a primeira e mais importante parte deste arquivo:

 import React, { createRef, useContext, useEffect, useRef, useState,
} de"react";
importar QuoteContext de"./QuoteContext";
importar SplitPaneContext de"./SplitPaneContext"; const SplitPane=({filhos,... adereços})=> { const [clientHeight, setClientHeight]=useState (nulo); const [clientWidth, setClientWidth]=useState (nulo); const yDividerPos=useRef (null); const xDividerPos=useRef (null); const onMouseHoldDown=(e)=> { yDividerPos.current=e.clientY; xDividerPos.current=e.clientX; }; const onMouseHoldUp=()=> { yDividerPos.current=null; xDividerPos.current=null; }; const onMouseHoldMove=(e)=> { if (! yDividerPos.current &&! xDividerPos.current) { Retorna; } setClientHeight (clientHeight + e.clientY-yDividerPos.current); setClientWidth (clientWidth + e.clientX-xDividerPos.current); yDividerPos.current=e.clientY; xDividerPos.current=e.clientX; }; useEffect (()=> { document.addEventListener ("mouseup", onMouseHoldUp); document.addEventListener ("mousemove", onMouseHoldMove); return ()=> { document.removeEventListener ("mouseup", onMouseHoldUp); document.removeEventListener ("mousemove", onMouseHoldMove); }; }); Retorna ( 
  {crianças}  
 );
};

Uma rápida olhada no início da listagem de código mostra que estamos fazendo uso forte dos ganchos React. Essa também é uma maneira de garantir que a implementação seja a mais recente possível.

O componente SplitPane é o componente mais importante de nosso aplicativo.

É responsável por manter as posições dos painéis, suas dimensões, os eventos do mouse e seus componentes filhos. Sim, cada painel possui um ou mais painéis internos. Você pode pensar nessa implementação de forma recursiva.

O SplitPaneContext é responsável por manter dados e funções comuns ao painel superior e aos painéis secundários, como a altura e a largura do painel.

A lógica para arrastar e soltar do painel é muito simples. Devemos rastrear os eventos do mouse mousedown e mouseup para definir a posição xey atual do mouse na tela e anulá-los, respectivamente.

Dessa forma, podemos acompanhar esses valores no evento mousemove e atualizar dinamicamente as dimensões do painel de acordo.

O retorno do componente constrói o provedor de contexto junto com os painéis dos filhos.

Veja o resto do código abaixo:

 export const Divider=(adereços)=> { const {onMouseHoldDown}=useContext (SplitPaneContext); return 
;
}; export const SplitPaneTop=(props)=> { const topRef=createRef (); const {clientHeight, setClientHeight}=useContext (SplitPaneContext); const {aspas, setCurrQuote}=useContext (QuoteContext); useEffect (()=> { if (! clientHeight) { setClientHeight (topRef.current.clientHeight); Retorna; } topRef.current.style.minHeight=clientHeight +"px"; topRef.current.style.maxHeight=clientHeight +"px"; }, [clientHeight]); Retorna ( 
 
 Citações famosas: 
 
 {aspas.map ((el, i)=> { Retorna ( 
  setCurrQuote (el.id)}> {el.author}  
 ); })} 
 
 );
}; export const SplitPaneBottom=(props)=> { const {currQuote}=useContext (QuoteContext); Retorna ( 
 ID de cotação atual: {currQuote} 
 );
}; export const SplitPaneLeft=(props)=> { const topRef=createRef (); const {clientWidth, setClientWidth}=useContext (SplitPaneContext); useEffect (()=> { if (! clientWidth) { setClientWidth (topRef.current.clientWidth/2); Retorna; } topRef.current.style.minWidth=clientWidth +"px"; topRef.current.style.maxWidth=clientWidth +"px"; }, [clientWidth]); return 
;
}; export const SplitPaneRight=(props)=> { const {aspas, currQuote}=useContext (QuoteContext); const quote=quotes.find ((el)=> el.id===currQuote); Retorna ( 
 
 
 {quote.description} 
-{""}  {quote.author}  
 
 );
}; exportar SplitPane padrão;

Aí vem o resto dos componentes, começando com o Divider . Este componente representa uma linha divisória de painel único que pode ser vertical ou horizontal, dependendo da classe CSS que é herdada. Observe como estamos recuperando o evento mousedown do objeto de contexto SplitPane .

Os outros componentes estão relacionados a cada um dos painéis dimensionais. O SplitPaneTop , por exemplo, é responsável por gerenciar a altura do painel via propriedades CSS de acordo com o valor do contexto.

Também estamos recuperando e iterando a lista de citações do contexto para exibir a lista de links do autor. Você pode considerar esta lógica não adequada para este componente, o que é bom se você quiser movê-lo para o componente superior.

O SplitPaneBottom se encarrega de exibir o ID da cotação atualmente selecionado.

O SplitPaneRight , por sua vez, encontra a citação atualmente selecionada para exibir sua descrição e autor.

Antes de testar o aplicativo, você deve preencher o arquivo index.css com o seguinte conteúdo:

 html,
corpo { preenchimento: 0; margem: 0;
} .Aplicativo { família de fontes:"Segoe UI", sans-serif; tamanho da fonte: 1.2rem; alinhamento de texto: centro;
} .split-pane-col { largura: 100vw; altura: 100vh; display: flex; direção flexível: coluna;
} .split-pane-row { largura: 100vw; altura: 100vh; display: flex; direção flexível: fileira;
} .split-pane-top,
.split-pane-bottom,
.split-pane-right,
.split-pane-left { flex: 1; estouro: oculto;
} .split-pane-right { cor de fundo: #fff; imagem de fundo: gradiente linear ( 90deg, transparente 79px, # abced4 79px, # abced4 81px, transparente 81px ), gradiente linear (#eee 0.1em, transparente 0.1em); tamanho do fundo: 100% 1,2em;
} .split-pane-top,
.split-pane-bottom { cor de fundo: #ccc; alinhamento de texto: esquerda; enchimento: 2%;
} .separator-col { borda: 5px totalmente preto; cursor: col-resize;
} .separator-row { borda: 5px totalmente preto; cursor: redimensionar linha;
} ul { margem esquerda:-2%;
} ul li { margem: 1rem; tipo-estilo de lista: quadrado;
} ul a { decoração de texto: nenhum; cor: azul escuro; tamanho da fonte: grande;
} ul a: hover { cor preta;
} bloco de citação { borda esquerda: 10px sólido #ccc; margem: 5,5em 0 0 0; citações:"\ 201C""\ 201D""\ 2018""\ 2019"; preenchimento: 2rem 0 1rem;
} blockquote: before { cor: #ccc; conteúdo: citação aberta; tamanho da fonte: 4em; altura da linha: 0,1em; margem direita: 0,25em; alinhamento vertical:-0,4em;
} blockquote p { display: embutido;
} .citar { largura máxima: 60%; alinhamento de texto: direita; margem: automático; estilo da fonte: itálico;
} .quote span { intensidade da fonte: Negrito;
}

Para testar o aplicativo, certifique-se de salvar todos os arquivos e execute o seguinte comando:

 npm run start

Ele abrirá seu navegador padrão e exibirá o aplicativo em execução como vimos na imagem anterior. E você pode executar seus testes aqui.

Conclusão

Você pode encontrar o repositório de código-fonte deste tutorial aqui .

Também recomendo usar painéis mais complexos e aninhados, como os que você pode ver ao codificar em https://codesandbox.io/:

Mais do que isso, torne-os coesos e interoperem entre si por meio do estado e do contexto do React. Boa sorte!

A postagem Como criar uma divisão o componente do painel no React apareceu primeiro no LogRocket Blog .

Source link