Feature/hidden mediaquery optimization

src/base/Hidden/Hidden.tsx

@@ -1,8 +1,12 @@
 import { useMediaQuery, useTheme } from '@mui/material';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+const BREAKPOINTS: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+const extractCondition = (mediaQuery: string) => mediaQuery.replace(/^@media\s*/i, '');
+
 export interface HiddenProps {
   children?: React.ReactNode;
   only?: Breakpoint | Breakpoint[];
@@ -33,61 +37,44 @@ export const Hidden = ({
   xlDown = false
 }: HiddenProps) => {
   const theme = useTheme();
-  const onlyValues = Array.isArray(only) ? only : only ? [only] : [];
-
-  const conditions: string[] = [];
-
-  const extractCondition = (mediaQuery: string) => mediaQuery.replace(/^@media\s*/i, '');
-
-  if (onlyValues.includes('xs')) {
-    conditions.push(extractCondition(theme.breakpoints.only('xs')));
-  }
-  if (onlyValues.includes('sm')) {
-    conditions.push(extractCondition(theme.breakpoints.only('sm')));
-  }
-  if (onlyValues.includes('md')) {
-    conditions.push(extractCondition(theme.breakpoints.only('md')));
-  }
-  if (onlyValues.includes('lg')) {
-    conditions.push(extractCondition(theme.breakpoints.only('lg')));
-  }
-  if (onlyValues.includes('xl')) {
-    conditions.push(extractCondition(theme.breakpoints.only('xl')));
-  }
+  const onlyKey = Array.isArray(only) ? [...only].sort().join(',') : only ?? '';
 
-  if (xsUp) {
-    conditions.push(extractCondition(theme.breakpoints.up('xs')));
-  }
-  if (smUp) {
-    conditions.push(extractCondition(theme.breakpoints.up('sm')));
-  }
-  if (mdUp) {
-    conditions.push(extractCondition(theme.breakpoints.up('md')));
-  }
-  if (lgUp) {
-    conditions.push(extractCondition(theme.breakpoints.up('lg')));
-  }
-  if (xlUp) {
-    conditions.push(extractCondition(theme.breakpoints.up('xl')));
-  }
+  const mediaQuery = useMemo(() => {
+    const onlyValues = onlyKey ? (onlyKey.split(',') as Breakpoint[]) : [];
+    const upProps: Record<Breakpoint, boolean> = {
+      xs: xsUp,
+      sm: smUp,
+      md: mdUp,
+      lg: lgUp,
+      xl: xlUp
+    };
+    const downProps: Record<Breakpoint, boolean> = {
+      xs: xsDown,
+      sm: smDown,
+      md: mdDown,
+      lg: lgDown,
+      xl: xlDown
+    };
+    const conditions: string[] = [];
 
-  if (xsDown) {
-    conditions.push(extractCondition(theme.breakpoints.down('xs')));
-  }
-  if (smDown) {
-    conditions.push(extractCondition(theme.breakpoints.down('sm')));
-  }
-  if (mdDown) {
-    conditions.push(extractCondition(theme.breakpoints.down('md')));
-  }
-  if (lgDown) {
-    conditions.push(extractCondition(theme.breakpoints.down('lg')));
-  }
-  if (xlDown) {
-    conditions.push(extractCondition(theme.breakpoints.down('xl')));
-  }
+    for (const breakpoint of BREAKPOINTS) {
+      if (onlyValues.includes(breakpoint)) {
+        conditions.push(extractCondition(theme.breakpoints.only(breakpoint)));
+      }
+      if (upProps[breakpoint]) {
+        conditions.push(extractCondition(theme.breakpoints.up(breakpoint)));
+      }
+      if (downProps[breakpoint]) {
+        conditions.push(
+          extractCondition(
+            breakpoint === 'xs' ? theme.breakpoints.only('xs') : theme.breakpoints.down(breakpoint)
+          )
+        );
+      }
+    }
 
-  const mediaQuery = conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all';
+    return conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all';
+  }, [onlyKey, xsUp, smUp, mdUp, lgUp, xlUp, xsDown, smDown, mdDown, lgDown, xlDown, theme.breakpoints]);
 
   const matches = useMediaQuery(mediaQuery);