37a7b16774
Summary: Ant'd tabs didn't allow for vertical fill out. Introduced our own tiny wrapper that has `grow` by default. Also made sure the users last selection is remembered. Reviewed By: cekkaewnumchai Differential Revision: D28026345 fbshipit-source-id: 7703bc241cd1427336b7c917bdb5be9f56bba9b9
90 lines
1.9 KiB
TypeScript
90 lines
1.9 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {Children} from 'react';
|
|
import {Tabs as AntdTabs, TabsProps, TabPaneProps} from 'antd';
|
|
import {css, cx} from '@emotion/css';
|
|
import {Layout} from './Layout';
|
|
import {Spacing} from './theme';
|
|
import {useLocalStorageState} from '../utils/useLocalStorageState';
|
|
|
|
/**
|
|
* A Tabs component.
|
|
*/
|
|
export function Tabs({
|
|
grow,
|
|
children,
|
|
className,
|
|
...baseProps
|
|
}: {grow?: boolean} & TabsProps) {
|
|
const keys: string[] = [];
|
|
const keyedChildren = Children.map(children, (child: any, idx) => {
|
|
if (!child || typeof child !== 'object') {
|
|
return;
|
|
}
|
|
const tabKey =
|
|
(typeof child.props.tab === 'string' && child.props.tab) || `tab_${idx}`;
|
|
keys.push(tabKey);
|
|
return {
|
|
...child,
|
|
props: {
|
|
...child.props,
|
|
key: tabKey,
|
|
tabKey,
|
|
},
|
|
};
|
|
});
|
|
|
|
const [activeTab, setActiveTab] = useLocalStorageState<string | undefined>(
|
|
'Tabs:' + keys.join(','),
|
|
undefined,
|
|
);
|
|
|
|
return (
|
|
<AntdTabs
|
|
activeKey={activeTab}
|
|
onChange={(key) => {
|
|
setActiveTab(key);
|
|
}}
|
|
{...baseProps}
|
|
className={cx(className, grow !== false ? growingTabs : undefined)}>
|
|
{keyedChildren}
|
|
</AntdTabs>
|
|
);
|
|
}
|
|
|
|
export const Tab: React.FC<
|
|
TabPaneProps & {
|
|
pad?: Spacing;
|
|
gap?: Spacing;
|
|
}
|
|
> = function Tab({pad, gap, children, ...baseProps}) {
|
|
return (
|
|
<AntdTabs.TabPane {...baseProps}>
|
|
<Layout.Container gap={gap} pad={pad} grow>
|
|
{children}
|
|
</Layout.Container>
|
|
</AntdTabs.TabPane>
|
|
);
|
|
};
|
|
|
|
const growingTabs = css`
|
|
flex: 1;
|
|
& .tabpanel {
|
|
display: flex;
|
|
}
|
|
& .ant-tabs-content {
|
|
height: 100%;
|
|
}
|
|
& .ant-tabs-tabpane {
|
|
display: flex;
|
|
}
|
|
`;
|