mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
78 lines
2.8 KiB
TypeScript
Executable File
78 lines
2.8 KiB
TypeScript
Executable File
/**
|
|
* Copyright (c) 2021 OpenLens Authors
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
* this software and associated documentation files (the "Software"), to deal in
|
|
* the Software without restriction, including without limitation the rights to
|
|
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
* the Software, and to permit persons to whom the Software is furnished to do so,
|
|
* subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*/
|
|
|
|
import styles from "./main-layout.module.css";
|
|
|
|
import React from "react";
|
|
import { observer } from "mobx-react";
|
|
import { cssNames } from "../../utils";
|
|
import { ErrorBoundary } from "../error-boundary";
|
|
import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
|
|
import { sidebarStorage } from "./sidebar-storage";
|
|
|
|
interface Props {
|
|
sidebar: React.ReactNode;
|
|
className?: string;
|
|
footer?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Main layout is commonly used as a wrapper for "global pages"
|
|
*
|
|
* @link https://api-docs.k8slens.dev/master/extensions/capabilities/common-capabilities/#global-pages
|
|
*/
|
|
@observer
|
|
export class MainLayout extends React.Component<Props> {
|
|
onSidebarResize = (width: number) => {
|
|
sidebarStorage.merge({ width });
|
|
};
|
|
|
|
render() {
|
|
const { onSidebarResize } = this;
|
|
const { className, footer, children, sidebar } = this.props;
|
|
const { width: sidebarWidth } = sidebarStorage.get();
|
|
const style = { "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties;
|
|
|
|
return (
|
|
<div className={cssNames(styles.mainLayout, className)} style={style}>
|
|
<div className={styles.sidebar}>
|
|
{sidebar}
|
|
<ResizingAnchor
|
|
direction={ResizeDirection.HORIZONTAL}
|
|
placement={ResizeSide.TRAILING}
|
|
growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
|
|
getCurrentExtent={() => sidebarWidth}
|
|
onDrag={onSidebarResize}
|
|
minExtent={120}
|
|
maxExtent={400}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.contents}>
|
|
<ErrorBoundary>{children}</ErrorBoundary>
|
|
</div>
|
|
|
|
<div className={styles.footer}>{footer}</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|