Introduce Tabs

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

desktop/flipper-plugin/src/ui/Tabs.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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;
+  }
+`;