verticallyStackedLayout() — react Function Reference

Architecture documentation for the verticallyStackedLayout() function in layouter.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ verticallyStackedLayout() — react Function Reference

Dependency Diagram

graph TD
  9ed920ea_aa9d_ecc8_6f75_efd67e62b6e0["verticallyStackedLayout()"]
  967225f1_4dbc_efd7_073f_8182bb20aa4f["layouter.js"]
  9ed920ea_aa9d_ecc8_6f75_efd67e62b6e0 -->|defined in| 967225f1_4dbc_efd7_073f_8182bb20aa4f
  style 9ed920ea_aa9d_ecc8_6f75_efd67e62b6e0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/layouter.js lines 62–79

export const verticallyStackedLayout: Layouter = (layout, containerFrame) => {
  let currentY = containerFrame.origin.y;
  return layout.map(layoutInfo => {
    const desiredSize = layoutInfo.view.desiredSize();
    const height = desiredSize
      ? desiredSize.height
      : containerFrame.origin.y + containerFrame.size.height - currentY;
    const proposedFrame = {
      origin: {x: containerFrame.origin.x, y: currentY},
      size: {width: containerFrame.size.width, height},
    };
    currentY += height;
    return {
      ...layoutInfo,
      frame: proposedFrame,
    };
  });
};