tabs Tabs.tsx

0% Statements 0/17
0% Branches 0/8
0% Functions 0/6
0% Lines 0/13
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { ReactNode } from "react";
import { FlexGrow } from "ui/spacing/Spacing";
import {
  StyledStickyTabs,
  StyledTab,
  StyledTabBar,
  StyledTabs,
  StyledTabSettings,
} from "ui/tabs/style";
 
export type TabBarVariant =
  | "normal"
  | "secondary"
  | "eventSection"
  | "scriptEvent";
 
interface TabBarProps<T extends string> {
  value?: T;
  values: Record<T, string>;
  onChange?: (newValue: T) => void;
  buttons?: ReactNode;
  variant?: TabBarVariant;
  overflowActiveTab?: boolean;
}
 
export const TabBar = <T extends string>({
  value,
  values,
  onChange,
  buttons,
  variant,
  overflowActiveTab,
}: TabBarProps<T>) => {
  const tabKeys = Object.keys(values) as T[];
 
  const onClickTab = (tab: T) => () => {
    onChange?.(tab);
  };
 
  return (
    <StyledTabBar $variant={variant}>
      <StyledTabs $overflowActiveTab={overflowActiveTab} $variant={variant}>
        {tabKeys.map((tab, index) => (
          <StyledTab
            key={values[tab]}
            $selected={value !== undefined ? tab === value : index === 0}
            $variant={variant}
            onClick={onClickTab(tab)}
          >
            <span>{values[tab]}</span>
          </StyledTab>
        ))}
      </StyledTabs>
      <FlexGrow />
      {buttons}
    </StyledTabBar>
  );
};
 
interface StickyTabsProps {
  children?: ReactNode;
  top?: number;
}
 
export const StickyTabs = ({ children, top }: StickyTabsProps) => (
  <StyledStickyTabs children={children} style={top ? { top } : undefined} />
);
 
interface TabSettingsProps {
  children?: ReactNode;
}
 
export const TabSettings = ({ children }: TabSettingsProps) => (
  <StyledTabSettings children={children} />
);