feat: add api for switching parts of the UI to fullscreen (#237)

src/app/App.tsx

@@ -26,11 +26,17 @@ import {
   Tabs,
   Toolbar,
 } from '@/components';
+import {
+  FullScreenProvider,
+  useFullscreen,
+} from '@/components/context/FullscreenContext';
 
 export default function App() {
   return (
     <AppStateProvider>
-      <DropZoneArea />
+      <FullScreenProvider>
+        <DropZoneArea />
+      </FullScreenProvider>
     </AppStateProvider>
   );
 }
@@ -51,7 +57,7 @@ function DropZoneArea() {
   const dispatch = useAppDispatch();
   const appState = useAppState();
   const measurement = getCurrentMeasurement(appState);
-
+  const { toggle } = useFullscreen();
   const items: Array<TabItem> = [
     {
       id: '1h',
@@ -63,6 +69,7 @@ function DropZoneArea() {
     { id: '1h,1h', title: '1H,1H', content: 'Hello, World! [c]' },
     { id: '1h,13c', title: '1H,13C', content: 'Hello, World! [d]' },
   ];
+
   return (
     <RootLayout>
       <DropZoneContainer
@@ -71,9 +78,18 @@ function DropZoneArea() {
         }}
       >
         <div
-          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+          style={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
         >
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
             <Header>
               <Toolbar orientation="horizontal">
                 <Toolbar.Item
@@ -91,7 +107,7 @@ function DropZoneArea() {
                 <Toolbar.Item id="b" title="General settings">
                   <FaCogs />
                 </Toolbar.Item>
-                <Toolbar.Item id="c" title="Full screen">
+                <Toolbar.Item id="c" title="Full screen" onClick={toggle}>
                   <FaTabletAlt />
                 </Toolbar.Item>
               </Toolbar>

src/components/context/FullscreenContext.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable no-alert */
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+
+interface FullscreenProps {
+  children: ReactNode;
+}
+interface FullscreenState {
+  isFullScreen: boolean;
+}
+
+interface ContextType extends FullscreenState {
+  toggle: () => void;
+}
+const fullscreenContextInit = {
+  isFullScreen: false,
+  toggle: () => {},
+};
+const FullscreenContext = createContext<ContextType>(fullscreenContextInit);
+
+export function useFullscreen() {
+  return useContext(FullscreenContext);
+}
+export function FullScreenProvider(props: FullscreenProps) {
+  const [isFullScreen, toggle] = useReducer((value: boolean) => !value, false);
+
+  const value = useMemo(
+    () => ({ isFullScreen, toggle }),
+    [isFullScreen, toggle],
+  );
+  return (
+    <FullscreenContext.Provider value={value}>
+      <FullscreenInner {...props} />
+    </FullscreenContext.Provider>
+  );
+}
+function FullscreenInner(props: FullscreenProps) {
+  const { children } = props;
+  const { isFullScreen } = useFullscreen();
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (isFullScreen && ref.current) {
+      ref.current.requestFullscreen().catch(() => {
+        alert('Fullscreen is not supported');
+      });
+    } else if (
+      !isFullScreen &&
+      ref.current &&
+      document.fullscreenElement !== null &&
+      document.exitFullscreen
+    ) {
+      document.exitFullscreen().catch(() => {
+        alert("Can't exit fullscreen");
+      });
+    }
+  }, [isFullScreen]);
+  return (
+    <div
+      ref={ref}
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'white',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/index.ts

@@ -15,6 +15,7 @@ export * from './color-picker/ColorPicker';
 export * as ValueRenderers from './value-renderers/index';
 
 export * from './context/AccordionContext';
+export * from './context/FullscreenContext';
 
 export * from './hooks/useToggle';
 export * from './hooks/useOnOff';

stories/components/fullscreen.stories.tsx

@@ -0,0 +1,51 @@
+import { Button, FullScreenProvider, useFullscreen } from '@/components';
+
+export default {
+  title: 'Components / Fullscreen',
+};
+export function basic() {
+  return (
+    <div>
+      <FullScreenProvider>
+        <div
+          style={{ border: 'solid 1px black', padding: '10px', margin: '10px' }}
+        >
+          Page 1
+          <FullScreenProvider>
+            <div
+              style={{
+                border: 'solid 1px red',
+                padding: '10px',
+                margin: '10px',
+              }}
+            >
+              Page 2
+              <FullScreenProvider>
+                <div
+                  style={{
+                    border: 'solid 1px blue',
+                    padding: '10px',
+                    margin: '10px',
+                  }}
+                >
+                  Page 3
+                  <Content i="3" />
+                </div>
+              </FullScreenProvider>
+              <Content i="2" />
+            </div>
+          </FullScreenProvider>
+          <Content i="1" />
+        </div>
+      </FullScreenProvider>
+    </div>
+  );
+}
+function Content({ i }) {
+  const { toggle } = useFullscreen();
+  return (
+    <div>
+      <Button onClick={toggle}>Toggle fullscreen {i}</Button>
+    </div>
+  );
+}