showPositionGuides()

in website/src/components/Playground/src/YogaNode.js [190:244]

• 54 lines of code
• 1 McCabe index (conditional complexity)

  showPositionGuides({node}: ComputedLayout) {
    const padding = PositionRecord({
      top: node.getComputedPadding(yoga.EDGE_TOP),
      left: node.getComputedPadding(yoga.EDGE_LEFT),
      right: node.getComputedPadding(yoga.EDGE_RIGHT),
      bottom: node.getComputedPadding(yoga.EDGE_BOTTOM),
    });
    const border = PositionRecord({
      top: node.getComputedBorder(yoga.EDGE_TOP),
      left: node.getComputedBorder(yoga.EDGE_LEFT),
      right: node.getComputedBorder(yoga.EDGE_RIGHT),
      bottom: node.getComputedBorder(yoga.EDGE_BOTTOM),
    });
    const margin = PositionRecord({
      top: node.getComputedMargin(yoga.EDGE_TOP),
      left: node.getComputedMargin(yoga.EDGE_LEFT),
      right: node.getComputedMargin(yoga.EDGE_RIGHT),
      bottom: node.getComputedMargin(yoga.EDGE_BOTTOM),
    });
    const position = PositionRecord({
      top: node.getPosition(yoga.EDGE_TOP).value,
      left: node.getPosition(yoga.EDGE_LEFT).value,
      right: node.getPosition(yoga.EDGE_RIGHT).value,
      bottom: node.getPosition(yoga.EDGE_BOTTOM).value,
    });

    return [
      <PositionGuide
        key="border"
        inset
        position={border}
        color="rgba(251, 170, 51, 0.15)"
        reverse={node.getFlexWrap() === yoga.WRAP_WRAP_REVERSE}
      />,
      <PositionGuide
        key="padding"
        inset
        offset={border}
        position={padding}
        color="rgba(123, 179, 41, 0.1)"
        reverse={node.getFlexWrap() === yoga.WRAP_WRAP_REVERSE}
      />,
      <PositionGuide
        key="margin"
        position={margin}
        color="rgba(214, 43, 28, 0.1)"
      />,
      <PositionGuide
        key="position"
        offset={margin}
        position={position}
        color="rgba(115, 51, 205, 0.1)"
      />,
    ];
  }