refactor(suite): update breakpoint handling

Author: seibei-iguchi

packages/components/src/config/variables.ts

@@ -1,11 +1,10 @@
 import { icons } from '@suite-common/icons/src/icons';
-import { above, below, breakpoints } from '@trezor/theme';
+import { aboveBreakpoint, belowBreakpoint, breakpoints } from '@trezor/theme';
 
 /**
  * @deprecated This key is deprecated. Please use `useLayoutSize` hook or breakpoints from `@trezor/theme`.
  */
 export const SCREEN_SIZE = {
-    UNAVAILABLE: `${breakpoints.unavailable}px`,
     SM: `${breakpoints.mobile}px`,
     MD: `${breakpoints.tablet}px`,
     LG: `${breakpoints.laptop}px`,
@@ -16,14 +15,14 @@ export const SCREEN_SIZE = {
  * @deprecated This key is deprecated. Please use `useLayoutSize` hook or breakpoints from `@trezor/theme`.
  */
 export const SCREEN_QUERY = {
-    MOBILE: `@media ${below(breakpoints.mobile)}`,
-    ABOVE_MOBILE: `@media ${above(breakpoints.mobile)}`,
-    BELOW_TABLET: `@media ${below(breakpoints.tablet)}`,
-    ABOVE_TABLET: `@media ${above(breakpoints.tablet)}`,
-    BELOW_LAPTOP: `@media ${below(breakpoints.laptop)}`,
-    ABOVE_LAPTOP: `@media ${above(breakpoints.laptop)}`,
-    BELOW_DESKTOP: `@media ${below(breakpoints.desktop)}`,
-    ABOVE_DESKTOP: `@media ${above(breakpoints.desktop)}`,
+    MOBILE: `@media ${belowBreakpoint(breakpoints.mobile)}`,
+    ABOVE_MOBILE: `@media ${aboveBreakpoint(breakpoints.mobile)}`,
+    BELOW_TABLET: `@media ${belowBreakpoint(breakpoints.tablet)}`,
+    ABOVE_TABLET: `@media ${aboveBreakpoint(breakpoints.tablet)}`,
+    BELOW_LAPTOP: `@media ${belowBreakpoint(breakpoints.laptop)}`,
+    ABOVE_LAPTOP: `@media ${aboveBreakpoint(breakpoints.laptop)}`,
+    BELOW_DESKTOP: `@media ${belowBreakpoint(breakpoints.desktop)}`,
+    ABOVE_DESKTOP: `@media ${aboveBreakpoint(breakpoints.desktop)}`,
 } as const;
 
 export const LAYOUT_SIZE = {

packages/suite/src/reducers/suite/windowReducer.ts

@@ -35,14 +35,8 @@ export default windowReducer;
 
 export const selectIsWindowVisible = (state: WindowRootState) => state.window.isVisible;
 
-// Selector for the breakpoint flags
-export const selectBreakpointFlags = (state: WindowRootState): BreakpointFlags => ({
-    isBelowMobile: state.window.isBelowMobile,
-    isBelowTablet: state.window.isBelowTablet,
-    isBelowLaptop: state.window.isBelowLaptop,
-    isBelowDesktop: state.window.isBelowDesktop,
-    isAboveMobile: state.window.isAboveMobile,
-    isAboveTablet: state.window.isAboveTablet,
-    isAboveLaptop: state.window.isAboveLaptop,
-    isAboveDesktop: state.window.isAboveDesktop,
-});
+export const selectBreakpointFlags = (state: WindowRootState): BreakpointFlags => {
+    const { isVisible, ...breakpointFlags } = state.window;
+
+    return breakpointFlags;
+};

packages/suite/src/support/suite/Resize.tsx

@@ -1,43 +1,45 @@
 import { useEffect } from 'react';
 
-import { BreakpointFlags, above, below, breakpoints } from '@trezor/theme';
+import {
+    Breakpoint,
+    BreakpointFlagName,
+    BreakpointFlags,
+    BreakpointValue,
+    aboveBreakpoint,
+    belowBreakpoint,
+    breakpoints,
+    getBreakpointFlagNames,
+} from '@trezor/theme';
 
 import { updateBreakpoints } from 'src/actions/suite/windowActions';
 import { useDispatch } from 'src/hooks/suite';
 
-type FlagName = keyof BreakpointFlags;
-
 const Resize = () => {
     const dispatch = useDispatch();
 
     useEffect(() => {
-        const queryList: Array<{ mq: MediaQueryList; flag: FlagName }> = Object.entries(breakpoints)
-            .filter(([key]) => key !== 'unavailable')
-            .flatMap(([key, value]) => {
-                // Capitalize first letter for flag names
-                const breakpointName = key.charAt(0).toUpperCase() + key.slice(1);
-
-                const belowFlag = `isBelow${breakpointName}` as FlagName;
-                const aboveFlag = `isAbove${breakpointName}` as FlagName;
-
-                return [
-                    {
-                        mq: window.matchMedia(below(value)),
-                        flag: belowFlag,
-                    },
-                    {
-                        mq: window.matchMedia(above(value)),
-                        flag: aboveFlag,
-                    },
-                ];
-            });
+        const queryList: Array<{ mq: MediaQueryList; flag: BreakpointFlagName }> = (
+            Object.entries(breakpoints) as [Breakpoint, BreakpointValue][]
+        ).flatMap(([breakpoint, breakpointValue]) => {
+            const [belowFlag, aboveFlag] = getBreakpointFlagNames(breakpoint);
+
+            return [
+                {
+                    mq: window.matchMedia(belowBreakpoint(breakpointValue)),
+                    flag: belowFlag,
+                },
+                {
+                    mq: window.matchMedia(aboveBreakpoint(breakpointValue)),
+                    flag: aboveFlag,
+                },
+            ];
+        });
 
         const initialFlags = queryList.reduce<Partial<BreakpointFlags>>((acc, { mq, flag }) => {
             acc[flag] = mq.matches;
 
             return acc;
         }, {});
-        dispatch(updateBreakpoints(initialFlags));
 
         const handlers = queryList.map(({ mq, flag }) => {
             const handler = (e: MediaQueryListEvent) => {
@@ -49,6 +51,8 @@ const Resize = () => {
             return { mq, handler };
         });
 
+        dispatch(updateBreakpoints(initialFlags));
+
         return () => {
             handlers.forEach(({ mq, handler }) => {
                 mq.removeEventListener('change', handler);

packages/theme/src/breakpoints.ts

@@ -1,5 +1,4 @@
 export const breakpoints = {
-    unavailable: 260,
     mobile: 576, // Previously SM
     tablet: 768, // Previously MD
     laptop: 992, // Previously LG
@@ -8,28 +7,33 @@ export const breakpoints = {
 
 export type Breakpoint = keyof typeof breakpoints;
 export type BreakpointValue = (typeof breakpoints)[Breakpoint];
-
-export const below = (breakpoint: BreakpointValue) => `(max-width: ${breakpoint - 1}px)`;
-export const above = (breakpoint: BreakpointValue) => `(min-width: ${breakpoint}px)`;
+export type BreakpointFlagName =
+    | `isBelow${Capitalize<Breakpoint>}`
+    | `isAbove${Capitalize<Breakpoint>}`;
 
 export type BreakpointFlags = {
-    isBelowMobile: boolean;
-    isBelowTablet: boolean;
-    isBelowLaptop: boolean;
-    isBelowDesktop: boolean;
-    isAboveMobile: boolean;
-    isAboveTablet: boolean;
-    isAboveLaptop: boolean;
-    isAboveDesktop: boolean;
+    [K in BreakpointFlagName]: boolean;
 };
 
-export const initialBreakpointFlags: BreakpointFlags = {
-    isBelowMobile: false,
-    isBelowTablet: false,
-    isBelowLaptop: false,
-    isBelowDesktop: false,
-    isAboveMobile: false,
-    isAboveTablet: false,
-    isAboveLaptop: false,
-    isAboveDesktop: false,
+export const belowBreakpoint = (breakpoint: BreakpointValue) => `(max-width: ${breakpoint - 1}px)`;
+export const aboveBreakpoint = (breakpoint: BreakpointValue) => `(min-width: ${breakpoint}px)`;
+
+export const getBreakpointFlagNames = (
+    breakpoint: Breakpoint,
+): [BreakpointFlagName, BreakpointFlagName] => {
+    const capitalizedBreakpoint = (breakpoint.charAt(0).toUpperCase() +
+        breakpoint.slice(1)) as Capitalize<Breakpoint>;
+
+    return [`isBelow${capitalizedBreakpoint}`, `isAbove${capitalizedBreakpoint}`];
 };
+
+export const initialBreakpointFlags: BreakpointFlags = Object.keys(breakpoints).reduce(
+    (acc, breakpoint) => {
+        const [belowFlag, aboveFlag] = getBreakpointFlagNames(breakpoint as Breakpoint);
+        acc[belowFlag] = false;
+        acc[aboveFlag] = false;
+
+        return acc;
+    },
+    {} as BreakpointFlags,
+);