random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

disable auto-collapse on sidebar

This commit is contained in:
Ashley Stanton-Nurse 2024-09-04 11:09:22 -07:00
parent 4b207f3fa6
commit 7a5084874b
No known key found for this signature in database
1 changed files with 3 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Explorer/Sidebar.tsx
View File

@ -25,7 +25,6 @@ import { userContext } from "UserContext";
import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils"; import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
import { Allotment, AllotmentHandle } from "allotment"; import { Allotment, AllotmentHandle } from "allotment";
import { useSidePanel } from "hooks/useSidePanel"; import { useSidePanel } from "hooks/useSidePanel";
import { debounce } from "lodash";
import React, { useCallback, useEffect, useMemo, useRef } from "react"; import React, { useCallback, useEffect, useMemo, useRef } from "react";
const useSidebarStyles = makeStyles({ const useSidebarStyles = makeStyles({
@ -219,22 +218,18 @@ interface SidebarProps {
explorer: Explorer; explorer: Explorer;
} }
const CollapseThreshold = 140;
export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => { export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
const styles = useSidebarStyles(); const styles = useSidebarStyles();
const [expanded, setExpanded] = React.useState(true); const [expanded, setExpanded] = React.useState(true);
const [loading, setLoading] = React.useState(false); const [loading, setLoading] = React.useState(false);
const [expandedSize, setExpandedSize] = React.useState(300);
const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo"; const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
const allotment = useRef<AllotmentHandle>(null); const allotment = useRef<AllotmentHandle>(null);
const expand = useCallback(() => { const expand = useCallback(() => {
if (!expanded) { if (!expanded) {
allotment.current.resize([expandedSize, Infinity]);
setExpanded(true); setExpanded(true);
} }
}, [expanded, expandedSize, setExpanded]); }, [expanded, setExpanded]);
const collapse = useCallback(() => { const collapse = useCallback(() => {
if (expanded) { if (expanded) {
@ -243,31 +238,11 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
} }
}, [expanded, setExpanded]); }, [expanded, setExpanded]);
const onChange = debounce((sizes: number[]) => {
if (expanded && sizes[0] <= CollapseThreshold) {
collapse();
} else if (!expanded && sizes[0] > CollapseThreshold) {
expand();
}
}, 10);
const onDragEnd = useCallback(
(sizes: number[]) => {
if (expanded) {
// Remember the last size we had when expanded
setExpandedSize(sizes[0]);
} else {
allotment.current.resize([24, Infinity]);
}
},
[expanded, setExpandedSize],
);
const onRefreshClick = useCallback(async () => { const onRefreshClick = useCallback(async () => {
setLoading(true); setLoading(true);
await explorer.onRefreshResourcesClick(); await explorer.onRefreshResourcesClick();
setLoading(false); setLoading(false);
}, [setLoading]); }, [explorer, setLoading]);
const hasGlobalCommands = !( const hasGlobalCommands = !(
configContext.platform === Platform.Fabric || configContext.platform === Platform.Fabric ||
@ -276,7 +251,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
); );
return ( return (
<Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs"> <Allotment ref={allotment} className="resourceTreeAndTabs">
{/* Collections Tree - Start */} {/* Collections Tree - Start */}
{hasSidebar && ( {hasSidebar && (
// When collapsed, we force the pane to 24 pixels wide and make it non-resizable. // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.