From 754109e168d7bc82b6e60d7b5e7cd5e6e387baac Mon Sep 17 00:00:00 2001 From: Scott Bishel Date: Mon, 1 Nov 2021 18:59:18 -0600 Subject: [PATCH] Gh 1451 mobile sidebar (#1675) * temporary checkin * hide sidebar by default < 768 * update to use function * remove unused snapshot * unhide sidebar on expansion * update to handle manual close in personal server --- .../__snapshots__/sidebar.test.tsx.snap | 558 ++++++++++++++++++ .../sidebarBoardItem.test.tsx.snap | 120 ++++ .../src/components/sidebar/sidebar.test.tsx | 81 +++ webapp/src/components/sidebar/sidebar.tsx | 54 +- .../sidebar/sidebarBoardItem.test.tsx | 47 ++ .../components/sidebar/sidebarBoardItem.tsx | 3 + 6 files changed, 859 insertions(+), 4 deletions(-) create mode 100644 webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap create mode 100644 webapp/src/components/sidebar/sidebarBoardItem.test.tsx diff --git a/webapp/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap b/webapp/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap index e30d0a482..d6332a181 100644 --- a/webapp/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap +++ b/webapp/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap @@ -1,5 +1,563 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`components/sidebarSidebar global templates 1`] = ` +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + Add board +
+
+
+
+
+
+ Settings +
+
+
+
+
+`; + +exports[`components/sidebarSidebar sidebar expect hidden 1`] = ` +
+ +
+`; + +exports[`components/sidebarSidebar sidebar hidden 1`] = ` +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + Dashboard + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Use the switcher to easily change channels +
+
+
+
+
+
+ Settings +
+
+
+
+
+`; + +exports[`components/sidebarSidebar sidebar hidden 2`] = ` +
+ +
+`; + exports[`components/sidebarSidebar sidebar in dashboard page 1`] = `
+
+
+ +
+ i board title +
+
+ +
+
+
+ + + + + + +
+ view title +
+
+
+ + + + + + +
+ view title +
+
+
+
+`; diff --git a/webapp/src/components/sidebar/sidebar.test.tsx b/webapp/src/components/sidebar/sidebar.test.tsx index 87c769392..ab46a99a2 100644 --- a/webapp/src/components/sidebar/sidebar.test.tsx +++ b/webapp/src/components/sidebar/sidebar.test.tsx @@ -69,6 +69,85 @@ describe('components/sidebarSidebar', () => { expect(container).toMatchSnapshot() }) + test('sidebar hidden', () => { + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3), + }, + boards: { + boards: [], + }, + views: { + views: [], + }, + users: { + me: {}, + }, + }) + + const history = createMemoryHistory() + + const component = wrapIntl( + + + + + , + ) + const {container} = render(component) + expect(container).toMatchSnapshot() + + const hideSidebar = container.querySelector('.Button > .HideSidebarIcon') + expect(hideSidebar).toBeDefined() + + userEvent.click(hideSidebar as Element) + expect(container).toMatchSnapshot() + + const showSidebar = container.querySelector('.Button > .ShowSidebarIcon') + expect(showSidebar).toBeDefined() + }) + + test('sidebar expect hidden', () => { + const customGlobal = global as any + + customGlobal.innerWidth = 500 + + const store = mockStore({ + workspace: { + userWorkspaces: new Array(workspace1, workspace2, workspace3), + }, + boards: { + boards: [], + }, + views: { + views: [], + }, + users: { + me: {}, + }, + }) + + const history = createMemoryHistory() + + const component = wrapIntl( + + + + + , + ) + const {container} = render(component) + expect(container).toMatchSnapshot() + + const hideSidebar = container.querySelector('.Button > .HideSidebarIcon') + expect(hideSidebar).toBeNull() + + const showSidebar = container.querySelector('.Button > .ShowSidebarIcon') + expect(showSidebar).toBeDefined() + + customGlobal.innerWidth = 1024 + }) + test('global templates', () => { const store = mockStore({ workspace: { @@ -104,6 +183,8 @@ describe('components/sidebarSidebar', () => { , ) const {container} = render(component) + expect(container).toMatchSnapshot() + const addBoardButton = container.querySelector('.SidebarAddBoardMenu > .MenuWrapper') expect(addBoardButton).toBeDefined() userEvent.click(addBoardButton as Element) diff --git a/webapp/src/components/sidebar/sidebar.tsx b/webapp/src/components/sidebar/sidebar.tsx index 9471446c4..5ea75fb0a 100644 --- a/webapp/src/components/sidebar/sidebar.tsx +++ b/webapp/src/components/sidebar/sidebar.tsx @@ -32,8 +32,18 @@ type Props = { isDashboard?: boolean } +function getWindowDimensions() { + const {innerWidth: width, innerHeight: height} = window + return { + width, + height, + } +} + const Sidebar = React.memo((props: Props) => { const [isHidden, setHidden] = useState(false) + const [userHidden, setUserHidden] = useState(false) + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()) const boards = useAppSelector(getSortedBoards) const views = useAppSelector(getSortedViews) const intl = useIntl() @@ -42,11 +52,34 @@ const Sidebar = React.memo((props: Props) => { loadTheme() }, []) + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()) + } + + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) + + useEffect(() => { + hideSidebar() + }, [windowDimensions]) + const workspace = useAppSelector(getCurrentWorkspace) if (!boards) { return
} + const hideSidebar = () => { + if (!userHidden) { + if (windowDimensions.width < 768) { + setHidden(true) + } else { + setHidden(false) + } + } + } + if (isHidden) { return (
@@ -54,13 +87,19 @@ const Sidebar = React.memo((props: Props) => {
} - onClick={() => setHidden(false)} + onClick={() => { + setUserHidden(false) + setHidden(false) + }} />
} - onClick={() => setHidden(false)} + onClick={() => { + setUserHidden(false) + setHidden(false) + }} />
@@ -79,7 +118,10 @@ const Sidebar = React.memo((props: Props) => {
setHidden(true)} + onClick={() => { + setUserHidden(true) + setHidden(true) + }} icon={} />
@@ -92,7 +134,10 @@ const Sidebar = React.memo((props: Props) => {
setHidden(true)} + onClick={() => { + setUserHidden(true) + setHidden(true) + }} icon={} />
@@ -129,6 +174,7 @@ const Sidebar = React.memo((props: Props) => { const nextBoardId = boards.length > 1 ? boards.find((o) => o.id !== board.id)?.id : undefined return ( { + test('sidebar call hideSidebar', () => { + const board = TestBlockFactory.createBoard() + const view = TestBlockFactory.createBoardView(board) + + const view2 = TestBlockFactory.createBoardView(board) + view2.fields.sortOptions = [] + const history = createMemoryHistory() + + const mockHide = jest.fn() + + const component = wrapIntl( + + + + , + ) + const {container} = render(component) + expect(container).toMatchSnapshot() + + const subItems = container.querySelectorAll('.subitem > .BoardIcon') + expect(subItems).toBeDefined() + userEvent.click(subItems[0] as Element) + expect(mockHide).toBeCalled() + }) +}) diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx index 677557a79..48dc31700 100644 --- a/webapp/src/components/sidebar/sidebarBoardItem.tsx +++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx @@ -26,6 +26,7 @@ type Props = { activeBoardId?: string activeViewId?: string nextBoardId?: string + hideSidebar: () => void } const SidebarBoardItem = React.memo((props: Props) => { @@ -44,11 +45,13 @@ const SidebarBoardItem = React.memo((props: Props) => { } const newPath = generatePath(match.path, params) history.push(newPath) + props.hideSidebar() }, [match, history]) const showView = useCallback((viewId, boardId) => { const newPath = generatePath(match.path, {...match.params, boardId: boardId || '', viewId: viewId || ''}) history.push(newPath) + props.hideSidebar() }, [match, history]) const iconForViewType = (viewType: IViewType): JSX.Element => {