[UX] Update useBreakpoints hook copied from APM

- basically the exact same logic, they just also need the xxl and xxxl breakpoints
elastic · Sep 9, 2022 · a371dac · a371dac
1 parent b24bc95
commit a371dac
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 33 deletions.
diff --git a/x-pack/plugins/ux/public/application/ux_app.tsx b/x-pack/plugins/ux/public/application/ux_app.tsx
@@ -142,7 +142,15 @@ export function UXAppRoot({
           lens,
         }}
       >
-        <KibanaThemeProvider theme$={appMountParameters.theme$}>
+        <KibanaThemeProvider
+          theme$={appMountParameters.theme$}
+          modify={{
+            breakpoint: {
+              xxl: 1600,
+              xxxl: 2000,
+            },
+          }}
+        >
           <i18nCore.Context>
             <RouterProvider history={history} router={uxRouter}>
               <DatePickerContextProvider>

diff --git a/x-pack/plugins/ux/public/hooks/use_breakpoints.ts b/x-pack/plugins/ux/public/hooks/use_breakpoints.ts
@@ -5,42 +5,23 @@
  * 2.0.
  */
 
-import { useState } from 'react';
-import useWindowSize from 'react-use/lib/useWindowSize';
-import useDebounce from 'react-use/lib/useDebounce';
 import {
-  getBreakpoint,
-  isWithinMaxBreakpoint,
-  isWithinMinBreakpoint,
+  useIsWithinMaxBreakpoint,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 
-export type Breakpoints = ReturnType<typeof getScreenSizes>;
-
-export function getScreenSizes(windowWidth: number) {
-  return {
-    isXSmall: isWithinMaxBreakpoint(windowWidth, 'xs'),
-    isSmall: isWithinMaxBreakpoint(windowWidth, 's'),
-    isMedium: isWithinMaxBreakpoint(windowWidth, 'm'),
-    isLarge: isWithinMaxBreakpoint(windowWidth, 'l'),
-    isXl: isWithinMaxBreakpoint(windowWidth, 1599),
-    isXXL: isWithinMaxBreakpoint(windowWidth, 1999),
-    isXXXL: isWithinMinBreakpoint(windowWidth, 2000),
-  };
-}
+export type Breakpoints = Record<string, boolean>;
 
 export function useBreakpoints() {
-  const { width } = useWindowSize();
-  const [breakpoint, setBreakpoint] = useState(getBreakpoint(width));
-  const [screenSizes, setScreenSizes] = useState(getScreenSizes(width));
-
-  useDebounce(
-    () => {
-      setBreakpoint(getBreakpoint(width));
-      setScreenSizes(getScreenSizes(width));
-    },
-    50,
-    [width]
-  );
+  const screenSizes = {
+    isXSmall: useIsWithinMaxBreakpoint('xs'),
+    isSmall: useIsWithinMaxBreakpoint('s'),
+    isMedium: useIsWithinMaxBreakpoint('m'),
+    isLarge: useIsWithinMaxBreakpoint('l'),
+    isXl: useIsWithinMaxBreakpoint('xl'),
+    isXXL: useIsWithinMaxBreakpoint('xxl'),
+    isXXXL: useIsWithinMinBreakpoint('xxxl'),
+  };
 
-  return { ...screenSizes, breakpoint, width };
+  return screenSizes;
 }