Visão geral
Painéis divididos redimensionáveis + Divisões dinâmicas de arrastar e soltar para React
@byeolnaerim/flex-layouté um componente React para configurar rapidamente uma interface de usuário com painéis divididos redimensionáveis e divisões dinâmicas baseadas em arrastar e soltar.
Por exemplo, se houver uma necessidade de configurar a tela com a visualização da lista de produtos da loja à esquerda e a visualização de prévia de uso à direita, e cada visualização precisar ser redimensionável, esta biblioteca pode oferecer uma boa solução.
História de origem
O primeiro @byeolnaerim/flex-layoutnasceu quando eu era um desenvolvedor de segundo ano e tentava criar um mensageiro para negócios baseado em vanilla js como um projeto pessoal.
Eu queria que ele funcionasse como o Slack ou o vscode, onde cada componente pudesse ser redimensionado. Para mim, a configuração da visualização à esquerda do vscode parecia incrível, então eu queria que o que eu criasse funcionasse de maneira semelhante ao vscode.
Com o tempo, ao começar a aprender React, recriei isso como um componente baseado em typescript, rxjs e react. A partir da funcionalidade de visualização dividida legada que podia ser redimensionada por arrastar, expandi para criar uma visualização dividida dinâmica com arrastar e soltar, mantendo a filosofia de "quero que funcione de maneira muito semelhante ao vscode".
Normalização de Crescimento
@byeolnaerim/flex-layoutQuando criei pela primeira vez, eu entendia que o flex-grow era baseado no layout paiFlexLayout e que o número de contêineres filhosFlexLayoutContainer deveria ser considerado como um limite superior do crescimento total,maxGrow, normalizando a proporção de cada contêiner dentro dele.normalizarEssa era uma interpretação errada.
Por exemplo, se houver 2 contêineres filhos, o max grow é 2, e se a proporção for 30% / 70%, o grow real deve ser 0.668 / 1.332, e com essa suposição, as lógicas de correção se acumularam até chegar ao que temos agora.@byeolnaerim/flex-layoutIsso se tornou.
Repositório: github.com/joohyoungkim19940805/flex-layout