Descripción general
Paneles divididos redimensionables + Divisiones dinámicas de arrastrar y soltar para React
@byeolnaerim/flex-layoutes un componente de React para configurar rápidamente una interfaz de usuario de paneles divididos redimensionables y divisiones dinámicas basadas en arrastrar y soltar.
Por ejemplo, si hay una necesidad de configurar la pantalla con una vista de lista de productos de la tienda a la izquierda y una vista de vista previa de uso real a la derecha, y cada vista debe ser redimensionable, esta biblioteca puede ofrecer una buena solución.
Historia de origen
El primero @byeolnaerim/flex-layoutnació cuando era un desarrollador de segundo año y trataba de crear un mensajero para negocios basado en vanilla js como proyecto personal.
Quería que se redimensionaran entre sí como Slack o vscode. Me parecía genial la configuración de vista a la izquierda de vscode, así que quería que lo que creé funcionara de manera similar a vscode.
Con el tiempo, al comenzar con React, recreé esto como un componente basado en TypeScript, rxjs y React. Expandí la funcionalidad de vista dividida dinámica con arrastrar y soltar para cumplir con mi filosofía pasada de "querer que funcione de manera muy similar a vscode" desde la funcionalidad de vista dividida heredada que se podía redimensionar.
Normalización de crecimiento
@byeolnaerim/flex-layoutCuando creé por primera vez, entendí que flex-grow se basaba en el diseño superior.FlexLayout Las cantidades de los contenedores hijosFlexLayoutContainer se entendían como el límite superior del crecimiento total.maxGrowy se normalizaban dentro de eso para distribuirse.normalizar(Esta fue una interpretación incorrecta.)
Por ejemplo, si hay 2 contenedores hijos, el crecimiento máximo es 2, y si la proporción es 30% / 70%, el crecimiento real debería ser 0.668 / 1.332, y bajo esa suposición se han acumulado las lógicas de corrección hasta llegar a lo que es ahora.@byeolnaerim/flex-layoutEsto se ha convertido.