Improve Container for custom breakpoints

efoken · Dec 6, 2024 · 8ac2600 · 8ac2600
1 parent d3021d5
commit 8ac2600
Showing 1 changed file with 34 additions and 39 deletions.
diff --git a/packages/components/src/Container/Container.tsx b/packages/components/src/Container/Container.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { clamp, max, min, styled, useOwnerState } from '@react-universal/core';
+import { clamp, max, styled, useOwnerState } from '@react-universal/core';
+import type { Breakpoint } from '@react-universal/core';
 import type { AnyObject } from '@react-universal/utils';
 import { forwardRef } from 'react';
 import { View } from '../View';
@@ -14,49 +15,43 @@ import type {
 const MIN_WIDTH = '20rem';
 const MAX_WIDTH = '79.75rem';
 
-const ContainerRoot = styled(View)<{ ownerState: ContainerOwnerState }>(
-  ({ ownerState, runtime, theme }) => ({
-    marginInline: 'auto',
-    paddingInline: {
-      xs: max(theme.space[4], runtime.insets.left, runtime.insets.right),
-      sm: max(theme.space[6], runtime.insets.left, runtime.insets.right),
-      md: max(theme.space[7], runtime.insets.left, runtime.insets.right),
-    },
-    width: '100%',
-    variants: [
-      {
-        props: ({ maxWidth }) => maxWidth != null && maxWidth !== false,
-        style: {
-          maxWidth:
-            ownerState.maxWidth != null && ownerState.maxWidth !== false
-              ? {
-                  [ownerState.maxWidth]:
-                    ownerState.maxWidth === 'xs'
-                      ? max(theme.breakpoints.xs, MIN_WIDTH)
-                      : min(theme.breakpoints[ownerState.maxWidth], MAX_WIDTH),
-                }
-              : undefined,
-        },
-      },
-      {
-        props: { fixed: true },
+const ContainerRoot = styled(View)<{ ownerState: ContainerOwnerState }>(({ runtime, theme }) => ({
+  marginInline: 'auto',
+  paddingInline: {
+    xs: max(theme.space[4], runtime.insets.left, runtime.insets.right),
+    sm: max(theme.space[6], runtime.insets.left, runtime.insets.right),
+    md: max(theme.space[7], runtime.insets.left, runtime.insets.right),
+  },
+  width: '100%',
+  variants: [
+    ...(Object.entries(theme.breakpoints) as [Breakpoint, number][]).map(
+      ([breakpoint, maxWidth]) => ({
+        props: { maxWidth: breakpoint },
         style: {
-          maxWidth: Object.entries(theme.breakpoints).reduce<AnyObject>(
-            (acc, [breakpoint, maxWidth]) => {
-              acc[breakpoint] = clamp(MIN_WIDTH, maxWidth, MAX_WIDTH);
-              return acc;
-            },
-            {},
-          ),
-          minWidth: 0,
+          maxWidth: {
+            [breakpoint]: clamp(MIN_WIDTH, maxWidth, MAX_WIDTH),
+          },
         },
+      }),
+    ),
+    {
+      props: { fixed: true },
+      style: {
+        maxWidth: Object.entries(theme.breakpoints).reduce<AnyObject>(
+          (acc, [breakpoint, maxWidth]) => {
+            acc[breakpoint] = clamp(MIN_WIDTH, maxWidth, MAX_WIDTH);
+            return acc;
+          },
+          {},
+        ),
+        minWidth: 0,
       },
-    ],
-  }),
-);
+    },
+  ],
+}));
 
 export const Container = forwardRef<HTMLElement & ContainerMethods, ContainerProps>(
-  ({ fixed = false, maxWidth = 'lg', ...props }, ref) => {
+  ({ fixed = false, maxWidth = false, ...props }, ref) => {
     const ownerState = useOwnerState({
       fixed,
       maxWidth,