WRS-2189 - change page on arrow key press, scrollbars findings

chili-publish · Dec 16, 2024 · eea3fa1 · eea3fa1
1 parent 1b96ae6
commit eea3fa1
Show file tree

Hide file tree

Showing 14 changed files with 186 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
         "validate-versions": "node validate_versions.cjs"
     },
     "dependencies": {
-        "@chili-publish/grafx-shared-components": "^0.88.7",
+        "@chili-publish/grafx-shared-components": "https://stgrafxstudiodevpublic.blob.core.windows.net/grafx-shared-components/dev-shared-components/466/grafx-shared-components.tgz",
         "@chili-publish/studio-sdk": "^1.17.2-rc.2",
         "@babel/preset-env": "^7.25.3",
         "@fortawesome/fontawesome-svg-core": "^6.7.1",

diff --git a/src/MainContent.tsx b/src/MainContent.tsx
@@ -327,7 +327,13 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
 
     return (
         <AppProvider isDocumentLoaded={isDocumentLoaded} isAnimationPlaying={animationStatus}>
-            <ShortcutProvider projectConfig={projectConfig} undoStackState={undoStackState} zoom={currentZoom}>
+            <ShortcutProvider
+                projectConfig={projectConfig}
+                undoStackState={undoStackState}
+                zoom={currentZoom}
+                pages={pages}
+                activePageId={activePageId}
+            >
                 <Container canvas={canvas}>
                     <UiConfigContextProvider projectConfig={projectConfig} layoutIntent={layoutIntent}>
                         <VariablePanelContextProvider

diff --git a/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx b/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx
@@ -1,26 +1,25 @@
 import { ITheme } from '@chili-publish/grafx-shared-components';
 import styled from 'styled-components';
+import { SCROLL_SIZE } from '../../../utils/constants';
 
 export const LeftPanelContainer = styled.div<{ overflowScroll: boolean; panelTheme: ITheme['panel'] }>`
     min-width: 18.75rem;
     width: 18.75rem;
     background-color: ${(props) => props.panelTheme.backgroundColor};
     border-right: 2px solid ${(props) => props.panelTheme.borderColor};
-    ${(props) => props.overflowScroll && 'overflow: scroll'};
     padding-left: 0;
-
-    &::-webkit-scrollbar {
-        width: 0;
-    }
+    scollbar-gutter: stable;
 `;
 
 export const VariablesListContainer = styled.div<{ hidden: boolean }>`
-    padding: 0 1.25rem;
+    padding: 0 0 0 1.25rem;
+    width: calc(18.75rem - 1.25rem - ${SCROLL_SIZE});
     ${({ hidden }) => hidden && 'display: none;'};
 `;
 
 export const ImagePanelContainer = styled.div<{ hidden: boolean }>`
     padding: 0 0 0 1.25rem;
     height: 100%;
+    width: calc(18.75rem - 1.25rem - ${SCROLL_SIZE});
     ${({ hidden }) => hidden && 'display: none;'};
 `;
diff --git a/src/components/layout-panels/leftPanel/LeftPanel.tsx b/src/components/layout-panels/leftPanel/LeftPanel.tsx
@@ -1,5 +1,5 @@
 import { Variable } from '@chili-publish/studio-sdk';
-import { useTheme } from '@chili-publish/grafx-shared-components';
+import { ScrollbarWrapper, useTheme } from '@chili-publish/grafx-shared-components';
 import { ImagePanelContainer, LeftPanelContainer, VariablesListContainer } from './LeftPanel.styles';
 import ImagePanel from '../../imagePanel/ImagePanel';
 import VariablesList from '../../variables/VariablesList';
@@ -25,14 +25,16 @@ function LeftPanel({ variables, isDocumentLoaded }: LeftPanelProps) {
             overflowScroll={contentType !== ContentType.IMAGE_PANEL}
             panelTheme={panel}
         >
-            <VariablesListContainer hidden={contentType === ContentType.IMAGE_PANEL}>
-                {featureFlags?.STUDIO_DATA_SOURCE ? <DataSource isDocumentLoaded={isDocumentLoaded} /> : null}
-                <VariablesList variables={variables} isDocumentLoaded={isDocumentLoaded} />
-            </VariablesListContainer>
+            <ScrollbarWrapper>
+                <VariablesListContainer hidden={contentType === ContentType.IMAGE_PANEL}>
+                    {featureFlags?.STUDIO_DATA_SOURCE ? <DataSource isDocumentLoaded={isDocumentLoaded} /> : null}
+                    <VariablesList variables={variables} isDocumentLoaded={isDocumentLoaded} />
+                </VariablesListContainer>
 
-            <ImagePanelContainer hidden={contentType !== ContentType.IMAGE_PANEL}>
-                <ImagePanel />
-            </ImagePanelContainer>
+                <ImagePanelContainer hidden={contentType !== ContentType.IMAGE_PANEL}>
+                    <ImagePanel />
+                </ImagePanelContainer>
+            </ScrollbarWrapper>
         </LeftPanelContainer>
     );
 }

diff --git a/src/components/pagesPanel/Pages.styles.ts b/src/components/pagesPanel/Pages.styles.ts
@@ -1,25 +1,27 @@
 import { ITheme } from '@chili-publish/grafx-shared-components';
 import styled from 'styled-components';
+import { BORDER_SIZE, PAGES_CONTAINER_HEIGHT, SCROLL_SIZE } from '../../utils/constants';
 
 export const Container = styled.div<{ themeStyles: ITheme; isMobileSize: boolean }>`
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     max-width: ${({ isMobileSize }) => (!isMobileSize ? 'calc(100vw - 18.875rem)' : '100%')};
-    height: 7.5rem;
+    height: ${PAGES_CONTAINER_HEIGHT};
     background: ${({ themeStyles }) => themeStyles.panel.backgroundColor};
-    border-top: 2px solid ${({ themeStyles }) => themeStyles.panel.borderColor};
+    border-top: ${BORDER_SIZE} solid ${({ themeStyles }) => themeStyles.panel.borderColor};
 `;
-export const ScrollableContainer = styled.div`
+
+export const ScrollableContainer = styled.div<{ themeStyles?: ITheme; isMobileSize?: boolean }>`
     display: flex;
-    height: 100%;
-    padding: 0 0.625rem;
+    height: calc(${PAGES_CONTAINER_HEIGHT} - ${SCROLL_SIZE} - ${BORDER_SIZE});
     align-items: center;
-    overflow-x: auto;
     width: auto;
     white-space: nowrap;
-    overflow-y: hidden;
+    padding: 0.5rem 0.625rem 0 0.625rem;
+    scrollbar-gutter: stable;
 `;
+
 export const Card = styled.div<{ themeStyles: ITheme; selected?: boolean }>`
     box-sizing: border-box;
     width: 5rem;

diff --git a/src/components/pagesPanel/Pages.tsx b/src/components/pagesPanel/Pages.tsx
@@ -9,7 +9,7 @@ import {
     useTheme,
 } from '@chili-publish/grafx-shared-components';
 import { ScrollableContainer, Card, Container } from './Pages.styles';
-import { PREVIEW_FALLBACK } from '../../utils/constants';
+import { BORDER_SIZE, PAGES_CONTAINER_HEIGHT, PREVIEW_FALLBACK } from '../../utils/constants';
 import { PageSnapshot } from '../../types/types';
 import { PreviewCardBadge } from './PreviewCardBadge';
 
@@ -81,8 +81,13 @@ function Pages({ pages, activePageId, pagesToRefresh, setPagesToRefresh }: Pages
 
     return (
         <Container themeStyles={theme} isMobileSize={isMobileSize}>
-            <ScrollbarWrapper invertScrollbarColors>
-                <ScrollableContainer>
+            <ScrollbarWrapper
+                height={`calc(${PAGES_CONTAINER_HEIGHT} - ${BORDER_SIZE})`}
+                enableOverflowX
+                enableOverflowY={false}
+                scrollbarHeight={!isMobileSize ? '0.875rem' : '0'}
+            >
+                <ScrollableContainer isMobileSize={isMobileSize}>
                     {!!pages?.length &&
                         pages.map((item, index) => (
                             <PreviewCardBadge badgeNumber={index + 1} key={`badge-${item.id}`}>

diff --git a/src/components/variables/MobileVariablesTray.tsx b/src/components/variables/MobileVariablesTray.tsx
@@ -125,6 +125,9 @@ function MobileVariablesPanel(props: VariablesPanelProps) {
                     overflow: ${isVariablesListOpen ? 'auto' : 'hidden'};
                     ${contentType === ContentType.IMAGE_PANEL && `padding-bottom: 0`};
                     ${isDataSourcePanelOpen && dataSourceTrayStyles}
+                    &::-webkit-scrollbar {
+                        width: 0;
+                    }
                 `}
             >
                 <VariablesContainer height={showImagePanel ? imagePanelHeight : undefined}>

diff --git a/src/contexts/ShortcutManager/ShortcutProvider.tsx b/src/contexts/ShortcutManager/ShortcutProvider.tsx
@@ -1,18 +1,29 @@
 import { startTransition, useCallback, useEffect, useMemo } from 'react';
 import { useGetIframeAsync } from '@chili-publish/grafx-shared-components';
+import { Page } from '@chili-publish/studio-sdk';
 import { ProjectConfig } from '../../types/types';
 import { isMac } from './shortcuts';
 import useUndoRedo from './useUndoRedo';
 import useZoom from './useZoom';
 import { useAppContext } from '../AppProvider';
+import { useSelectPage } from './useSelectPage';
 
 interface ShortcutProviderProps {
     projectConfig: ProjectConfig;
     zoom: number;
     undoStackState: { canUndo: boolean; canRedo: boolean };
     children: React.ReactNode;
+    pages: Page[];
+    activePageId: string | null;
 }
-function ShortcutProvider({ projectConfig, undoStackState, zoom, children }: ShortcutProviderProps) {
+function ShortcutProvider({
+    projectConfig,
+    undoStackState,
+    zoom,
+    children,
+    pages,
+    activePageId,
+}: ShortcutProviderProps) {
     const commandKey = isMac ? 'metaKey' : 'ctrlKey';
     const iframe = useGetIframeAsync({ containerId: 'studio-ui-chili-editor' })?.contentWindow;
 
@@ -23,6 +34,7 @@ function ShortcutProvider({ projectConfig, undoStackState, zoom, children }: Sho
     const { handleUndo, handleRedo } = useUndoRedo(undoStackState);
     const { zoomIn, zoomOut } = useZoom(zoom);
     const { isDocumentLoaded, selectedMode, updateSelectedMode, cleanRunningTasks } = useAppContext();
+    const { selectedPageIndex, handleOnArrowKeyDown } = useSelectPage({ pages, activePageId });
 
     const shortcuts = useMemo(
         () => [
@@ -68,6 +80,24 @@ function ShortcutProvider({ projectConfig, undoStackState, zoom, children }: Sho
                     if (zoom) zoomOut();
                 },
             },
+            {
+                keys: `ArrowLeft`,
+                action: (e: KeyboardEvent) => {
+                    e.preventDefault();
+                    if (selectedPageIndex >= 0) {
+                        handleOnArrowKeyDown(e);
+                    }
+                },
+            },
+            {
+                keys: `ArrowRight`,
+                action: (e: KeyboardEvent) => {
+                    e.preventDefault();
+                    if (selectedPageIndex >= 0) {
+                        handleOnArrowKeyDown(e);
+                    }
+                },
+            },
         ],
         [
             selectedMode,
@@ -82,6 +112,8 @@ function ShortcutProvider({ projectConfig, undoStackState, zoom, children }: Sho
             zoomOut,
             commandKey,
             cleanRunningTasks,
+            selectedPageIndex,
+            handleOnArrowKeyDown,
         ],
     );
 

diff --git a/src/contexts/ShortcutManager/useSelectPage.ts b/src/contexts/ShortcutManager/useSelectPage.ts
@@ -0,0 +1,46 @@
+import { Page } from '@chili-publish/studio-sdk';
+import { useCallback, useEffect, useState } from 'react';
+
+export const useSelectPage = ({ pages, activePageId }: { pages: Page[]; activePageId: string | null }) => {
+    const [selectedPageIndex, setSelectedPageIndex] = useState<number>(-1);
+
+    const handleOnArrowKeyDown = useCallback(
+        async (event: KeyboardEvent) => {
+            switch (event.key) {
+                case 'ArrowLeft': {
+                    let index = selectedPageIndex - 1;
+                    setSelectedPageIndex((prevIndex) => {
+                        index = prevIndex > 0 ? prevIndex - 1 : prevIndex;
+                        return index;
+                    });
+                    (async () => {
+                        await window.StudioUISDK.page.select(pages[index].id);
+                    })();
+                    break;
+                }
+                case 'ArrowRight': {
+                    let index = selectedPageIndex + 1;
+                    setSelectedPageIndex((prevIndex) => {
+                        index = prevIndex + 1 < pages.length ? prevIndex + 1 : prevIndex;
+                        return index;
+                    });
+                    (async () => {
+                        await window.StudioUISDK.page.select(pages[index].id);
+                    })();
+                    break;
+                }
+                default:
+                    break;
+            }
+        },
+        [selectedPageIndex, pages],
+    );
+
+    useEffect(() => {
+        if (!pages.length || !activePageId) return;
+        const found = pages.findIndex((i) => i.id === activePageId);
+        setSelectedPageIndex(found !== -1 ? found : 0);
+    }, [pages, activePageId]);
+
+    return { handleOnArrowKeyDown, selectedPageIndex };
+};
diff --git a/src/tests/components/dataSource/DataSourceModal.test.tsx b/src/tests/components/dataSource/DataSourceModal.test.tsx
@@ -107,15 +107,16 @@ describe('DataSourceModal test', () => {
             expect(dataRowsTable).toBeInTheDocument();
         });
 
+        expect(screen.getByText('Row 1')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('1 | Joe | 15')).toBeInTheDocument();
+
         await act(async () => {
             await user.keyboard('[ArrowDown]');
         });
-
-        expect(screen.getByText('Row 1')).toBeInTheDocument();
-        expect(screen.getByDisplayValue('1 | Joe | 15')).toBeInTheDocument();
         await act(async () => {
             await user.keyboard('[Enter]');
         });
+
         expect(screen.queryByRole('table')).not.toBeInTheDocument();
         expect(screen.getByText('Row 2')).toBeInTheDocument();
         expect(screen.getByDisplayValue('2 | John | 18')).toBeInTheDocument();

diff --git a/src/tests/components/variablesComponents/imageVariable/useMediaDetails.test.ts b/src/tests/components/variablesComponents/imageVariable/useMediaDetails.test.ts
@@ -156,7 +156,7 @@ describe('"useMediaDetails" hook', () => {
         mockSubscriber.emit('onVariableListChanged', [variableChange]);
 
         await waitFor(() => {
-            expect(window.StudioUISDK.mediaConnector.query).toHaveBeenCalledTimes(1);
+            expect(window.StudioUISDK.mediaConnector.query).toHaveBeenCalledTimes(2);
         });
     });