All files / src/layout Layout.tsx

100% Statements 11/11
100% Branches 2/2
100% Functions 3/3
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60                5x       5x       5x           19x 19x   19x 13x 20x 7x         19x                           5x                        
import React, { useState, useEffect } from "react";
import classNames from "classnames";
import { createRocket, RocketProps } from "../_util/create-rocket";
import { InferProps } from "../_type";
import { LayoutContent } from "./LayoutContent";
import { isChildOfType } from "../_util/is-child-of-type";
import { useConfig } from "../_util/config-context";
 
const LayoutHeader = createRocket(
  "LayoutHeader",
  "header.@{prefix}-layout__header"
);
const LayoutFooter = createRocket(
  "LayoutFooter",
  "footer.@{prefix}-layout__footer"
);
const LayoutSider = createRocket(
  "LayoutFooter",
  "nav.@{prefix}-layout__sidebar"
);
 
function LayoutBody({ className, style, children }: RocketProps) {
  const { classPrefix } = useConfig();
  const [hasSider, setHasSider] = useState<boolean>(false);
 
  useEffect(() => {
    React.Children.forEach(children, child => {
      if (isChildOfType(child, LayoutSider)) {
        setHasSider(true);
      }
    });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
  return (
    <section
      className={classNames(
        `${classPrefix}-layout__body`,
        { "has-subsidebar": hasSider },
        className
      )}
      style={style}
    >
      {children}
    </section>
  );
}
 
export const Layout = Object.assign(
  createRocket("Layout", "section.@{prefix}-layout"),
  {
    Header: LayoutHeader,
    Body: LayoutBody,
    Footer: LayoutFooter,
    Sider: LayoutSider,
    Content: LayoutContent,
  }
);
 
export interface LayoutProps extends InferProps<typeof Layout> {}