Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhancement: make left sidebar of datadoc resizable #1346

Merged
merged 7 commits into from
Feb 28, 2024
Merged

enhancement: make left sidebar of datadoc resizable #1346

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fbc9136
enhancement: make left sidebar of datadoc resizable
adamstruck Sep 20, 2023
2213194
address pr comments
adamstruck Feb 26, 2024
a03459e
Merge branch 'pinterest:master' into expandable-datadoc-left-sidebar
adamstruck Feb 26, 2024
dacf8f8
revert div class name change
adamstruck Feb 26, 2024
a067185
revert extra changes
adamstruck Feb 27, 2024
5dd5a4a
revert a067185787215e2c1fc93dfdd7d42776a545fb8a
adamstruck Feb 27, 2024
311742b
revert unneeded changes
adamstruck Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 37 additions & 31 deletions querybook/webapp/components/DataDocLeftSidebar/DataDocLeftSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import clsx from 'clsx';
import Resizable from 're-resizable';
import React, { useCallback, useEffect } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { DataTableViewMini } from 'components/DataTableViewMini/DataTableViewMini';
Expand Down Expand Up @@ -39,7 +39,7 @@ export const DataDocLeftSidebar: React.FunctionComponent<IProps> = ({
const clearSidebarTableId = () => dispatch(setSidebarTableId(null));

const [contentState, setContentState] =
React.useState<LeftSidebarContentState>('default');
useState<LeftSidebarContentState>('default');

useEvent(
'keydown',
Expand All @@ -64,6 +64,7 @@ export const DataDocLeftSidebar: React.FunctionComponent<IProps> = ({
},
[]
);

useEffect(() => {
if (sidebarTableId != null) {
setContentState('table');
Expand All @@ -76,39 +77,33 @@ export const DataDocLeftSidebar: React.FunctionComponent<IProps> = ({
const resizeToCollapseSidebar = useResizeToCollapseSidebar(
DEFAULT_SIDEBAR_WIDTH,
1 / 3,
React.useCallback(() => setContentState('default'), [])
React.useCallback(() => {
clearSidebarTableId();
setContentState('default');
}, [])
);

let contentDOM: React.ReactChild;
if (contentState === 'contents') {
contentDOM = (
<Resizable
defaultSize={{
width: `${DEFAULT_SIDEBAR_WIDTH}px`,
}}
minWidth={DEFAULT_SIDEBAR_WIDTH}
enable={enableResizable({ right: true })}
onResize={resizeToCollapseSidebar}
>
<div className="sidebar-content sidebar-content-contents">
<Level className="contents-panel-header">
<IconButton
icon="ArrowLeft"
onClick={() => setContentState('default')}
/>
<div className="flex-row">
<span className="mr4">
contents ({TOGGLE_TOC_SHORTCUT})
</span>
<InfoButton layout={['right', 'top']}>
Click to jump to the corresponding cell. Drag
cells to reorder them.
</InfoButton>
</div>
</Level>
<DataDocContents cells={cells} docId={docId} />
</div>
</Resizable>
<div className="sidebar-content sidebar-content-contents">
<Level className="contents-panel-header">
<IconButton
icon="ArrowLeft"
onClick={() => setContentState('default')}
/>
<div className="flex-row">
<span className="mr4">
contents ({TOGGLE_TOC_SHORTCUT})
</span>
<InfoButton layout={['right', 'top']}>
Click to jump to the corresponding cell. Drag cells
to reorder them.
</InfoButton>
</div>
</Level>
<DataDocContents cells={cells} docId={docId} />
</div>
);
} else if (contentState === 'table') {
contentDOM = (
Expand Down Expand Up @@ -143,7 +138,18 @@ export const DataDocLeftSidebar: React.FunctionComponent<IProps> = ({
hidden: cells.length === 0,
})}
>
{contentDOM}
{contentState === 'default' ? (
<> {contentDOM} </>
adamstruck marked this conversation as resolved.
Show resolved Hide resolved
) : (
<Resizable
defaultSize={{ width: `${DEFAULT_SIDEBAR_WIDTH}px` }}
minWidth={DEFAULT_SIDEBAR_WIDTH}
enable={enableResizable({ right: true })}
onResize={resizeToCollapseSidebar}
>
{contentDOM}
</Resizable>
)}
</div>
);
};
Loading