flipper-plugin/lib/ui/Tabs.js

Flipper Desktop plugin SDK and components

"use strict";
/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tab = exports.Tabs = void 0;
const React = __importStar(require("react"));
const react_1 = require("react");
const antd_1 = require("antd");
const css_1 = require("@emotion/css");
const Layout_1 = require("./Layout");
const useLocalStorageState_1 = require("../utils/useLocalStorageState");
/**
 * A Tabs component.
 */
function Tabs({ grow, children, className, localStorageKeyOverride, //set this if you need to have a dynamic number of tabs, you do *not* need to namespace with the plugin name
...baseProps }) {
    const keys = baseProps.items?.map((item) => item.key) ?? [];
    const keyedChildren = react_1.Children.map(children, (child, idx) => {
        if (!child || typeof child !== 'object') {
            return;
        }
        const tabKey = (child.props.hasOwnProperty('tabKey') &&
            typeof child.props.tabKey === 'string' &&
            child.props.tabKey) ||
            (child.props.hasOwnProperty('tab') &&
                typeof child.props.tab === 'string' &&
                child.props.tab) ||
            (child.props.hasOwnProperty('key') &&
                typeof child.props.key === 'string' &&
                child.props.key) ||
            `tab_${idx}`;
        keys.push(tabKey);
        return {
            ...child,
            props: {
                ...child.props,
                key: tabKey,
                tabKey,
            },
        };
    });
    const [activeTab, setActiveTab] = (0, useLocalStorageState_1.useLocalStorageState)(`Tabs:${localStorageKeyOverride ?? keys.join(',')}`, undefined);
    return (React.createElement(antd_1.Tabs, { activeKey: keys.includes(activeTab ?? 'not-there') ? activeTab : keys[0], onChange: (key) => {
            setActiveTab(key);
        }, ...baseProps, className: (0, css_1.cx)(className, baseTabs, grow !== false ? growingTabs : undefined) }, keyedChildren));
}
exports.Tabs = Tabs;
const Tab = function Tab({ pad, gap, children, ...baseProps }) {
    return (React.createElement(antd_1.Tabs.TabPane, { ...baseProps },
        React.createElement(Layout_1.Layout.Container, { gap: gap, pad: pad, grow: true, style: { maxWidth: '100%' } }, children)));
};
exports.Tab = Tab;
const baseTabs = (0, css_1.css) `
  & .ant-tabs-nav {
    margin: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
`;
const growingTabs = (0, css_1.css) `
  flex: 1;
  & .tabpanel {
    display: flex;
  }
  & .ant-tabs-content {
    height: 100%;
  }
  & .ant-tabs-tabpane:not(.ant-tabs-tabpane-hidden) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
`;
//# sourceMappingURL=Tabs.js.map