WIP: add WrapperComponent to test resizing

instructure · Sep 20, 2024 · 6448624 · 6448624
1 parent 88fafe3
commit 6448624
Showing 1 changed file with 33 additions and 2 deletions.
diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
@@ -29,7 +29,9 @@ import {
   createContext,
   LegacyRef,
   ReactElement,
-  SyntheticEvent
+  SyntheticEvent,
+  useEffect,
+  useState
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
@@ -93,6 +95,30 @@ export const AppContext = createContext<AppContextType>({
   library: undefined
 })
 
+const WrapperComponent = (props) => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  const SmallScreen = () => <h1>Small screen</h1>
+  const BigScreen = () => <h1>Big screen</h1>
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth <= 768)
+    }
+
+    // Check on component mount
+    handleResize()
+
+    // Add event listener for window resize
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup listener on component unmount
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return <>{isSmallScreen ? <SmallScreen /> : <BigScreen />}</>
+}
+
 @withStyle(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
   static propTypes = propTypes
@@ -769,6 +795,7 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
+          <WrapperComponent />
           <MobileTopNav brand={brandSvg} lightMode={this.state.lightMode}>
             <MobileTopNav.BtnRow>
               <IconButton
@@ -789,7 +816,11 @@ class App extends Component<AppProps, AppState> {
               </IconButton>
             </MobileTopNav.BtnRow>
             <MobileTopNav.BreadCrumb>
-              <Link href="#" isWithinText={false} color={this.state.lightMode ? 'link' : 'link-inverse'}>
+              <Link
+                href="#"
+                isWithinText={false}
+                color={this.state.lightMode ? 'link' : 'link-inverse'}
+              >
                 <div
                   style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                 >