Refactor(web-react): Grid useGridStylesProps use new hooks for genera…

…ting classes - uses new hook for generate alignment classes
lmc-eu · Sep 2, 2024 · ad60a64 · ad60a64
1 parent 1092fbd
commit ad60a64
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 35 deletions.
diff --git a/packages/web-react/src/components/Grid/useGridStyleProps.ts b/packages/web-react/src/components/Grid/useGridStyleProps.ts
@@ -1,15 +1,8 @@
 import classNames from 'classnames';
 import { CSSProperties, ElementType } from 'react';
 import { DirectionAxis } from '../../constants';
-import { useClassNamePrefix, useSpacingStyle } from '../../hooks';
-import { GridColsBreakpoints, GridCustomLayoutProps, SpiritGridProps } from '../../types';
-
-type AlignmentOrCols =
-  | string
-  | number
-  | Pick<GridCustomLayoutProps, 'alignmentX' | 'alignmentY' | 'cols'>
-  | GridColsBreakpoints
-  | undefined;
+import { useAlignmentClass, useClassNamePrefix, useSpacingStyle } from '../../hooks';
+import { GridColsBreakpoints, SpiritGridProps, GridAlignmentYType, GridAlignmentXType } from '../../types';
 
 interface GridCSSProperties extends CSSProperties {
   [key: string]: string | undefined | number;
@@ -24,14 +17,6 @@ export interface GridStyles<T> {
   styleProps: GridCSSProperties;
 }
 
-function capitalizeFirstLetter(str: string): string {
-  if (typeof str !== 'string') {
-    return str;
-  }
-
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
 export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyles<SpiritGridProps<ElementType>> {
   const { alignmentX, alignmentY, cols, spacing, spacingX, spacingY, ...restProps } = props;
 
@@ -46,36 +31,30 @@ export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyl
     ...useSpacingStyle(spacingY, 'grid', DirectionAxis.Y),
   };
 
-  function generateGridClass(componentClass: string, property: AlignmentOrCols, type: string) {
+  function generateColsClasses(
+    componentClass: string,
+    property: number | GridColsBreakpoints | undefined,
+    type: string,
+  ) {
     if (typeof property === 'object' && property !== null) {
-      // If the property is an object, we need to check if the mobile property is set.
-      // If not, we set it to stretch
-      if (!Object.keys(property).includes('mobile')) {
-        (property as Record<string, string>).mobile = 'stretch';
-      }
-
       // We map over the object and generate the classes for each breakpoint
       return Object.keys(property)
         .map((key) => {
           const infix = key === 'mobile' ? '' : `--${key}`;
           const responsiveProperty = (property as Record<string, string>)[key];
 
-          return `${componentClass}${infix}--${type}${
-            responsiveProperty && typeof responsiveProperty === 'string'
-              ? capitalizeFirstLetter(responsiveProperty)
-              : `-${responsiveProperty}`
-          }`;
+          return `${componentClass}${infix}--${type}-${responsiveProperty}`;
         })
         .join(' ');
     }
 
-    return `${componentClass}--${type}${property && typeof property === 'string' ? capitalizeFirstLetter(property) : `-${property}`}`;
+    return `${componentClass}--${type}-${property}`;
   }
 
   const classes = classNames(gridClass, {
-    [generateGridClass(gridClass, alignmentX, 'alignmentX')]: alignmentX,
-    [generateGridClass(gridClass, alignmentY, 'alignmentY')]: alignmentY,
-    [generateGridClass(gridClass, cols, 'cols')]: cols,
+    [useAlignmentClass(gridClass, alignmentX as GridAlignmentXType, 'alignmentX')]: alignmentX,
+    [useAlignmentClass(gridClass, alignmentY as GridAlignmentYType, 'alignmentY')]: alignmentY,
+    [generateColsClasses(gridClass, cols, 'cols')]: cols,
   });
 
   return {

diff --git a/packages/web-react/src/types/grid.ts b/packages/web-react/src/types/grid.ts
@@ -41,9 +41,16 @@ export interface GridItemElementTypeProps<T extends ElementType = 'div'> {
   elementType?: T | JSXElementConstructor<unknown>;
 }
 
+export type GridAlignmentXType =
+  | NonNullable<AlignmentXExtendedDictionaryType>
+  | { [key: string]: NonNullable<AlignmentXExtendedDictionaryType> };
+export type GridAlignmentYType =
+  | NonNullable<AlignmentYExtendedDictionaryType>
+  | { [key: string]: NonNullable<AlignmentYExtendedDictionaryType> };
+
 export interface GridCustomLayoutProps {
-  alignmentX?: AlignmentXExtendedDictionaryType | { [key: string]: AlignmentXExtendedDictionaryType };
-  alignmentY?: AlignmentYExtendedDictionaryType | { [key: string]: AlignmentYExtendedDictionaryType };
+  alignmentX?: GridAlignmentXType;
+  alignmentY?: GridAlignmentYType;
   cols?: GridColumns | GridColsBreakpoints;
   /** Custom spacing between items */
   spacing?: SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>;