flipper-plugin
Version:
Flipper Desktop plugin SDK and components
95 lines • 3.83 kB
JavaScript
;
/**
* 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Layout = void 0;
const react_1 = __importStar(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const Container_1 = require("./Container");
const renderSplitLayout_1 = require("./renderSplitLayout");
const Horizontal = (0, styled_1.default)(Container_1.Container)({
flexDirection: 'row',
});
const ScrollParent = styled_1.default.div(({ axis }) => ({
flex: `1 1 0`,
boxSizing: 'border-box',
position: 'relative',
overflowX: axis === 'y' ? 'hidden' : 'auto',
overflowY: axis === 'x' ? 'hidden' : 'auto',
}));
const ScrollChild = (0, styled_1.default)(Container_1.Container)(({ axis }) => ({
position: 'absolute',
minHeight: '100%',
minWidth: '100%',
maxWidth: axis === 'y' ? '100%' : undefined,
maxHeight: axis === 'x' ? '100%' : undefined,
}));
const ScrollContainer = (0, react_1.forwardRef)(({ children, horizontal, vertical, padv, padh, pad, ...rest }, ref) => {
const axis = horizontal && !vertical ? 'x' : !horizontal && vertical ? 'y' : 'both';
return (react_1.default.createElement(ScrollParent, { axis: axis, ...rest, ref: ref },
react_1.default.createElement(ScrollChild, { axis: axis, padv: padv, padh: padh, pad: pad }, children)));
});
/**
* The Layout component divides all available screenspace over two components:
* A fixed top (or left) component, and all remaining space to a bottom component.
*
* The main area will be scrollable by default, but if multiple containers are nested,
* scrolling can be disabled by using `scrollable={false}`
*
* If initialSize is set, the fixed container will be made resizable
*
* Use Layout.Top / Right / Bottom / Left to indicate where the fixed element should live.
*/
exports.Layout = {
Top(props) {
return (0, renderSplitLayout_1.renderSplitLayout)(props, 'column', 2);
},
Bottom(props) {
return (0, renderSplitLayout_1.renderSplitLayout)(props, 'column', 1);
},
Left(props) {
return (0, renderSplitLayout_1.renderSplitLayout)(props, 'row', 2);
},
Right(props) {
return (0, renderSplitLayout_1.renderSplitLayout)(props, 'row', 1);
},
Container: Container_1.Container,
ScrollContainer,
Horizontal,
};
Object.keys(exports.Layout).forEach((key) => {
exports.Layout[key].displayName = `Layout.${key}`;
});
//# sourceMappingURL=Layout.js.map