flipper-plugin
Version:
Flipper Desktop plugin SDK and components
165 lines • 7.16 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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Sidebar = void 0;
const react_1 = require("react");
const styled_1 = __importDefault(require("@emotion/styled"));
const Container_1 = require("./Container");
const react_2 = __importDefault(require("react"));
const icons_1 = require("@ant-design/icons");
const Interactive_1 = require("./Interactive");
const theme_1 = require("./theme");
const Layout_1 = require("./Layout");
const SidebarInteractiveContainer = (0, styled_1.default)(Interactive_1.Interactive)({
display: 'flex',
flex: '0 1 1',
});
SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
const borderStyle = `1px solid ${theme_1.theme.dividerColor}`;
const SidebarContainer = (0, styled_1.default)(Container_1.Container)((props) => ({
...(props.unstyled
? undefined
: {
borderLeft: props.position === 'right' ? borderStyle : 'none',
borderTop: props.position === 'bottom' ? borderStyle : 'none',
borderRight: props.position === 'left' ? borderStyle : 'none',
borderBottom: props.position === 'top' ? borderStyle : 'none',
backgroundColor: theme_1.theme.backgroundDefault,
}),
flex: 1,
overflow: 'hidden',
}));
SidebarContainer.displayName = 'Sidebar:SidebarContainer';
/**
* A resizable sidebar.
*/
class Sidebar extends react_1.Component {
constructor(props, context) {
super(props, context);
this.onResize = (width, height) => {
const { onResize } = this.props;
if (onResize) {
onResize(width, height);
}
else {
this.setState({ userChange: true, width, height });
}
};
this.state = {
userChange: false,
width: props.width,
height: props.height,
};
}
static getDerivedStateFromProps(nextProps, state) {
if (!state.userChange) {
return { width: nextProps.width, height: nextProps.height };
}
return null;
}
render() {
const { onResize, position, children, gutter } = this.props;
let height;
let minHeight;
let maxHeight;
let width;
let minWidth;
let maxWidth;
// TODO: memo
const resizable = {};
if (position === 'left') {
resizable.right = true;
({ width, minWidth, maxWidth } = this.props);
}
else if (position === 'top') {
resizable.bottom = true;
({ height, minHeight, maxHeight } = this.props);
}
else if (position === 'right') {
resizable.left = true;
({ width, minWidth, maxWidth } = this.props);
}
else if (position === 'bottom') {
resizable.top = true;
({ height, minHeight, maxHeight } = this.props);
}
const horizontal = position === 'left' || position === 'right';
const gutterWidth = gutter ? theme_1.theme.space.large : 0;
if (horizontal) {
width = width == null ? 200 : width;
minWidth = (minWidth == null ? 100 : minWidth) + gutterWidth;
maxWidth = maxWidth == null ? 1200 : maxWidth;
}
else {
height = height == null ? 200 : height;
minHeight = minHeight == null ? 100 : minHeight;
maxHeight = maxHeight == null ? 600 : maxHeight;
}
return (react_2.default.createElement(SidebarInteractiveContainer, { className: this.props.className, minWidth: minWidth, maxWidth: maxWidth, width: horizontal
? !children
? gutterWidth
: onResize
? width
: this.state.width
: undefined, minHeight: minHeight, maxHeight: maxHeight, height: !horizontal ? (onResize ? height : this.state.height) : undefined, resizable: resizable, onResize: this.onResize, gutterWidth: gutter ? theme_1.theme.space.large : undefined },
react_2.default.createElement(SidebarContainer, { position: position, unstyled: gutter }, gutter ? (react_2.default.createElement(GutterWrapper, { position: position },
react_2.default.createElement(Layout_1.Layout.Container, { style: {
background: theme_1.theme.backgroundDefault,
borderRadius: theme_1.theme.borderRadius,
}, grow: true, onMouseDown: (e) => e.stopPropagation() }, children))) : (react_2.default.createElement(Layout_1.Layout.Container, { grow: true, onMouseDown: (e) => e.stopPropagation() }, children)))));
}
}
exports.Sidebar = Sidebar;
Sidebar.defaultProps = {
position: 'left',
};
const GutterWrapper = ({ position, children, }) => {
switch (position) {
case 'right':
return (react_2.default.createElement(Layout_1.Layout.Left, null,
react_2.default.createElement(VerticalGutter, { enabled: !!children }),
children));
case 'left':
return (react_2.default.createElement(Layout_1.Layout.Right, null,
children,
react_2.default.createElement(VerticalGutter, { enabled: !!children })));
case 'bottom':
return (react_2.default.createElement(Layout_1.Layout.Top, null,
react_2.default.createElement(VerticalGutter, { enabled: !!children, rotateStyling: true }),
children));
case 'top':
return (react_2.default.createElement(Layout_1.Layout.Bottom, null,
children,
react_2.default.createElement(VerticalGutter, { enabled: !!children, rotateStyling: true })));
}
};
const VerticalGutterContainer = (0, styled_1.default)('div')(({ enabled, rotateStyling }) => ({
width: rotateStyling ? '100%' : theme_1.theme.space.large,
minWidth: rotateStyling ? '100%' : theme_1.theme.space.large,
cursor: enabled ? undefined : 'default', // hide cursor from interactive container
color: enabled ? theme_1.theme.textColorPlaceholder : theme_1.theme.backgroundWash,
fontSize: '16px',
display: 'flex',
flexDirection: rotateStyling ? 'column' : 'row',
alignItems: 'center',
background: theme_1.theme.backgroundWash,
':hover': {
background: enabled ? theme_1.theme.dividerColor : undefined,
},
'& svg': {
transform: rotateStyling ? 'rotate(90deg)' : undefined,
},
}));
const VerticalGutter = ({ enabled, rotateStyling, }) => (react_2.default.createElement(VerticalGutterContainer, { enabled: enabled, rotateStyling: rotateStyling },
react_2.default.createElement(icons_1.MoreOutlined, null)));
//# sourceMappingURL=Sidebar.js.map