flipper-plugin
Version:
Flipper Desktop plugin SDK and components
96 lines • 4.02 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.Panel = void 0;
const React = __importStar(require("react"));
const antd_1 = require("antd");
const Tracked_1 = require("./Tracked");
const useLocalStorageState_1 = require("../utils/useLocalStorageState");
const react_1 = require("react");
const styled_1 = __importDefault(require("@emotion/styled"));
const css_1 = require("@emotion/css");
const theme_1 = require("./theme");
const Layout_1 = require("./Layout");
const stickyHeader = (0, css_1.css) `
& .ant-collapse-header {
position: sticky !important;
top: 0;
}
`;
const Panel = (props) => {
const [collapsed, setCollapsed] = (0, useLocalStorageState_1.useLocalStorageState)(`panel:${props.title}:collapsed`, props.collapsible === false ? false : props.collapsed);
const toggle = (0, react_1.useCallback)(() => {
if (props.collapsible === false) {
return;
}
setCollapsed((c) => !c);
}, [setCollapsed, props.collapsible]);
return (React.createElement(Tracked_1.TrackingScope, { scope: props.title },
React.createElement(StyledCollapse, { className: props.className, bordered: false, activeKey: collapsed ? undefined : props.title, onChange: toggle },
React.createElement(antd_1.Collapse.Panel, { key: props.title, className: props.stickyHeader ? stickyHeader : undefined, header: props.extraActions ? (React.createElement(Layout_1.Layout.Right, { center: true },
React.createElement("span", null, props.title),
props.extraActions)) : (props.title), showArrow: props.collapsible !== false },
React.createElement(Layout_1.Layout.Container, { pad: props.pad, gap: props.pad }, props.children)))));
};
exports.Panel = Panel;
exports.Panel.defaultProps = {
collapsed: false,
collapsible: true,
};
const StyledCollapse = (0, styled_1.default)(antd_1.Collapse)({
background: theme_1.theme.backgroundDefault,
borderRadius: 0,
'& > .ant-collapse-item .ant-collapse-header': {
background: theme_1.theme.backgroundWash,
paddingTop: theme_1.theme.space.tiny,
paddingBottom: theme_1.theme.space.tiny,
fontWeight: 'bold',
display: 'flex',
'> .anticon': {
padding: `5px 0px`,
left: 8,
fontSize: '10px',
fontWeight: theme_1.theme.bold,
},
},
'& > .ant-collapse-item': {
borderBottom: 'none',
},
'& > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box': {
padding: 0,
},
});
//# sourceMappingURL=Panel.js.map