random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move add collection pane to React (#486)

Browse Source 
* Move add collection pane to React

* Add feature flag

* fix unit tests

* FIx merge conflicts and address comments

* Resolve merge conflicts

* Address comments

* Fix e2e test failure

* Update test snapshots

* Update test snapshots
This commit is contained in:
victor-meng
2021-03-18 18:06:13 -07:00
committed by GitHub
parent c6090e2663
commit 65c859c835
22 changed files with 1891 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Explorer/Panes/PanelContainerComponent.tsx
View File

@@ -9,10 +9,30 @@ export interface PanelContainerProps {
closePanel: () => void;
}
export class PanelContainerComponent extends React.Component<PanelContainerProps> {
export interface PanelContainerState {
height: string;
}
export class PanelContainerComponent extends React.Component<PanelContainerProps, PanelContainerState> {
private static readonly consoleHeaderHeight = 32;
private static readonly consoleContentHeight = 220;
constructor(props: PanelContainerProps) {
super(props);
this.state = {
height: this.getPanelHeight(),
};
}
componentDidMount(): void {
window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
}
componentWillUnmount(): void {
window.removeEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
}
render(): JSX.Element {
if (!this.props.panelContent) {
return <></>;
@@ -30,8 +50,10 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
headerClassName="panelHeader"
styles={{
navigation: { borderBottom: "1px solid #cccccc" },
content: { padding: "24px 34px 20px 34px", height: "100%" },
content: { padding: 0, height: "100%" },
scrollableContent: { height: "100%" },
header: { padding: "0 0 8px 34px" },
commands: { marginTop: 8 },
}}
style={{ height: this.getPanelHeight() }}
>