coneto/components/capsule-tab.tsx at 7d5d7f10df2df43e7f32f98e3b858f23a4482023 · systatum/coneto · GitHub

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { ReactNode, useCallback, useState } from "react";
import { Capsule } from "./capsule";
import styled, { css, CSSProp } from "styled-components";

export interface CapsuleTabProps {
  tabs: CapsuleTabContentProps[];
  activeTab?: string;
  activeBackgroundColor?: string;
  styles?: CapsuleTabStylesProps;
  onTabChange?: (id: string) => void;
}

export interface CapsuleTabStylesProps {
  self?: CSSProp;
  contentStyle?: CSSProp;
  capsuleWrapperStyle?: CSSProp;
  tabStyle?: CSSProp;
}

export interface CapsuleTabContentProps {
  id: string;
  title: string;
  content: ReactNode;
}

function CapsuleTab({
  tabs,
  styles,
  activeTab = "1",
  activeBackgroundColor = "black",
  onTabChange,
}: CapsuleTabProps) {
  const [selectedLocal, setSelectedLocal] = useState<string>(activeTab);

  const isControlled = onTabChange && activeTab !== undefined;
  const selected = isControlled ? activeTab : selectedLocal;

  const setSelected = useCallback(
    (next: string) => {
      if (!isControlled) {
        setSelectedLocal(next);
      }

      onTabChange?.(next);
    },
    [isControlled, onTabChange]
  );
  const activeContent = tabs.filter((tab) => tab.id === selected);

  return (
    <CapsuleTabWrapper aria-label="capsule-tab-wrapper" $style={styles?.self}>
      <Capsule
        styles={{
          containerStyle: css`
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;

            ${styles?.capsuleWrapperStyle};
          `,
          tabStyle: css`
            border-radius: 12px;
            ${styles?.tabStyle};
          `,
        }}
        tabs={tabs}
        onTabChange={setSelected}
        activeTab={selected}
        activeBackgroundColor={activeBackgroundColor}
        full
      />

      <ContentWrapper
        aria-label="capsule-tab-content"
        $style={styles?.contentStyle}
      >
        {activeContent.map((props) => props.content)}
      </ContentWrapper>
    </CapsuleTabWrapper>
  );
}

const CapsuleTabWrapper = styled.div<{
  $style?: CSSProp;
}>`
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  box-shadow: 0 1px 3px -3px #5b5b5b;

  ${({ $style }) => $style}
`;

const ContentWrapper = styled.div<{
  $style?: CSSProp;
}>`
  display: flex;
  flex-direction: column;
  width: 100%;

  ${({ $style }) => $style}
`;

export { CapsuleTab };