69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
|
// Copyright 2021 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
import React, { KeyboardEvent, ReactNode, useState } from 'react';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import { assert } from '../util/assert';
|
||
|
|
import { getClassNamesFor } from '../util/getClassNamesFor';
|
||
|
|
|
||
|
|
type Tab = {
|
||
|
|
id: string;
|
||
|
|
label: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
type PropsType = {
|
||
|
|
children: (renderProps: { selectedTab: string }) => ReactNode;
|
||
|
|
initialSelectedTab?: string;
|
||
|
|
moduleClassName?: string;
|
||
|
|
onTabChange?: (selectedTab: string) => unknown;
|
||
|
|
tabs: Array<Tab>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Tabs = ({
|
||
|
|
children,
|
||
|
|
initialSelectedTab,
|
||
|
|
moduleClassName,
|
||
|
|
onTabChange,
|
||
|
|
tabs,
|
||
|
|
}: PropsType): JSX.Element => {
|
||
|
|
assert(tabs.length, 'Tabs needs more than 1 tab present');
|
||
|
|
|
||
|
|
const [selectedTab, setSelectedTab] = useState<string>(
|
||
|
|
initialSelectedTab || tabs[0].id
|
||
|
|
);
|
||
|
|
|
||
|
|
const getClassName = getClassNamesFor('Tabs', moduleClassName);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className={getClassName('')}>
|
||
|
|
{tabs.map(({ id, label }) => (
|
||
|
|
<div
|
||
|
|
className={classNames(
|
||
|
|
getClassName('__tab'),
|
||
|
|
selectedTab === id && getClassName('__tab--selected')
|
||
|
|
)}
|
||
|
|
key={id}
|
||
|
|
onClick={() => {
|
||
|
|
setSelectedTab(id);
|
||
|
|
onTabChange?.(id);
|
||
|
|
}}
|
||
|
|
onKeyUp={(e: KeyboardEvent) => {
|
||
|
|
if (e.target === e.currentTarget && e.keyCode === 13) {
|
||
|
|
setSelectedTab(id);
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
role="tab"
|
||
|
|
tabIndex={0}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{children({ selectedTab })}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|