flipper-plugin/lib/ui/renderSplitLayout.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 __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderSplitLayout = void 0;
const react_1 = __importDefault(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const theme_1 = require("./theme");
const Sidebar_1 = require("./Sidebar");
const Empty = styled_1.default.div({ width: 0, height: 0 });
function renderSplitLayout(props, direction, grow) {
    let [child1, child2] = props.children;
    // prevent some children to be accidentally omitted if the primary one is `null`
    if (!child1) {
        child1 = react_1.default.createElement(Empty, null);
    }
    if (!child2) {
        child2 = react_1.default.createElement(Empty, null);
    }
    if ('resizable' in props && props.resizable) {
        const { width, height, minHeight, minWidth, maxHeight, maxWidth } = props;
        const sizeProps = direction === 'column'
            ? {
                minHeight,
                height: height ?? 300,
                maxHeight,
            }
            : {
                minWidth,
                width: width ?? 300,
                maxWidth,
            };
        if (grow === 2) {
            child1 = (react_1.default.createElement(Sidebar_1.Sidebar, { position: direction === 'column' ? 'top' : 'left', ...sizeProps }, child1));
        }
        else {
            child2 = (react_1.default.createElement(Sidebar_1.Sidebar, { position: direction === 'column' ? 'bottom' : 'right', ...sizeProps }, child2));
        }
    }
    return (react_1.default.createElement(SandySplitContainer, { ...props, flexDirection: direction, grow: grow },
        child1,
        child2));
}
exports.renderSplitLayout = renderSplitLayout;
const SandySplitContainer = styled_1.default.div((props) => ({
    boxSizing: 'border-box',
    display: 'flex',
    flex: `1 1 0`,
    flexDirection: props.flexDirection,
    alignItems: props.center ? 'center' : 'stretch',
    gap: (0, theme_1.normalizeSpace)(props.gap, theme_1.theme.space.small),
    overflow: props.center ? undefined : 'hidden', // only use overflow hidden in container mode, to avoid weird resizing issues
    '>:nth-child(1)': {
        flex: props.grow === 1 ? splitGrowStyle : splitFixedStyle,
        minWidth: props.grow === 1 ? 0 : undefined,
    },
    '>:nth-child(2)': {
        flex: props.grow === 2 ? splitGrowStyle : splitFixedStyle,
        minWidth: props.grow === 2 ? 0 : undefined,
    },
}));
const splitFixedStyle = `0 0 auto`;
const splitGrowStyle = `1 0 0`;
//# sourceMappingURL=renderSplitLayout.js.map