frontend/src/components/header/index.tsx


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

import React, { FunctionComponent, useMemo } from "react";
import { Row } from "react-bootstrap";
import ContentHeaderButton, { ContentHeaderAsyncButton } from "./Button";
import ContentHeaderGroup from "./Group";
import "./style.scss";

interface Props {
  scroll?: boolean;
  className?: string;
}

declare type Header = FunctionComponent<Props> & {
  Button: typeof ContentHeaderButton;
  AsyncButton: typeof ContentHeaderAsyncButton;
  Group: typeof ContentHeaderGroup;
};

export const ContentHeader: Header = ({ children, scroll, className }) => {
  const cls = useMemo(() => {
    const rowCls = ["content-header", "bg-dark", "p-2"];

    if (className !== undefined) {
      rowCls.push(className);
    }

    if (scroll !== false) {
      rowCls.push("scroll");
    }
    return rowCls.join(" ");
  }, [scroll, className]);

  let childItem: React.ReactNode;

  if (scroll !== false) {
    childItem = (
      <div className="d-flex flex-nowrap flex-grow-1">{children}</div>
    );
  } else {
    childItem = children;
  }
  return <Row className={cls}>{childItem}</Row>;
};

ContentHeader.Button = ContentHeaderButton;
ContentHeader.Group = ContentHeaderGroup;
ContentHeader.AsyncButton = ContentHeaderAsyncButton;

export default ContentHeader;