All files / src/components/layouts/Tabs Tabs.tsx

21.42% Statements 3/14
0% Branches 0/17
0% Functions 0/8
21.42% Lines 3/14

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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                  1x                           1x                                               1x                                                          
import * as React from "react";
import styled from "styled-components";
import { Box, Text } from "rimble-ui";
import { baseColors, colors } from "../../../themes";
 
export interface TabsHeaderProps {
  tabsBorderColor?: string;
}
 
const TabsHeader = styled.ul<TabsHeaderProps>`
  align-items: center;
  border-bottom: ${(props) =>
    props.tabsBorderColor ? `2px solid ${props.tabsBorderColor}` : `2px solid ${colors.primary.border}`};
  display: flex;
  list-style: none;
  justify-content: flex-start;
  margin: 0;
  padding: 8px 8px 0;
`;
 
interface TabTitleProps {
  active: boolean;
}
const TabTitle = styled.li<TabTitleProps>`
  border-bottom: ${(props) => (props.active ? `2px solid ${colors.primary.base}` : "2px solid transparent")};
  color: ${(props) => (props.active ? colors.primary.base : colors.silver)};
  cursor: ${(props) => (props.active ? "auto" : "pointer")};
  margin: 0 16px -2px;
`;
 
export interface TabsProps {
  activeTabName: string;
  tabs: Tab[];
  titleFontSize?: string | number;
  bg?: any;
  tabsBorderColor?: string;
  subHeader?: JSX.Element;
  className?: string;
  onTabClicked(tabName: string): void;
}
 
export interface Tab {
  tabName: string;
  title: string;
  content: JSX.Element;
}
 
export const Tabs: React.FunctionComponent<React.PropsWithChildren<TabsProps>> = (props) => {
  return (
    <Box bg={props.bg || baseColors.white} borderRadius={1} flexGrow="1" className={props.className}>
      <TabsHeader tabsBorderColor={props.tabsBorderColor}>
        {props.tabs.map((tab: any, i: number) => {
          const active = (!props.activeTabName && i === 0) || props.activeTabName === tab.tabName;
          return (
            <TabTitle key={i} onClick={() => props.onTabClicked(tab.tabName)} active={active}>
              <Text
                mb={2}
                fontSize={typeof props.titleFontSize === "undefined" ? 2 : props.titleFontSize}
                fontWeight={3}
              >
                {tab.title}
              </Text>
            </TabTitle>
          );
        })}
      </TabsHeader>
      {props.subHeader}
      {props.tabs.map((tab: any, i: number) => {
        if (tab.tabName !== props.activeTabName) {
          return undefined;
        }
        return <React.Fragment key={i}>{tab.content}</React.Fragment>;
      })}
    </Box>
  );
};