refactored the Region component

pimcore · Dec 19, 2024 · bc9f518 · bc9f518
1 parent 2445e3e
commit bc9f518
Showing 1 changed file with 31 additions and 29 deletions.
diff --git a/.../element/dynamic-types/defintinitions/objects/layout-related/components/region/region.tsx b/.../element/dynamic-types/defintinitions/objects/layout-related/components/region/region.tsx
@@ -18,12 +18,12 @@ import { ObjectComponent } from '@Pimcore/modules/data-object/editor/types/objec
 
 export interface RegionProps extends AbstractObjectLayoutDefinition {}
 
-export const availableRegions = {
-  north: 'north',
-  south: 'south',
-  east: 'east',
-  west: 'west',
-  center: 'center'
+export enum AvailableRegions {
+  North = 'north',
+  South = 'south',
+  East = 'east',
+  West = 'west',
+  Center = 'center',
 }
 
 export const Region = ({ children }: RegionProps): React.JSX.Element => {
@@ -35,7 +35,7 @@ export const Region = ({ children }: RegionProps): React.JSX.Element => {
     let { region } = child
 
     if (region === '' || region === null) {
-      region = availableRegions.center
+      region = AvailableRegions.Center
     }
 
     const regionIndex = (regionMap[region] ?? 0) + 1
@@ -52,47 +52,49 @@ export const Region = ({ children }: RegionProps): React.JSX.Element => {
     regionMap[region] = regionIndex
   })
 
-  let mainAreaColumnAmount = (regionMap[availableRegions.center] ?? 0) + (regionMap[availableRegions.east] ?? 0) + (regionMap[availableRegions.west] ?? 0)
+  const handleLayoutDefinitionByRegion = (region: AvailableRegions): void => {
+    for (let i = 0; i < regionMap[region]; i++) {
+      layoutDefinition.push(`${region}${i + 1} `.repeat(mainAreaColumnAmount).trim())
+    }
+  }
+
+  let mainAreaColumnAmount = (regionMap[AvailableRegions.Center] ?? 0) + (regionMap[AvailableRegions.East] ?? 0) + (regionMap[AvailableRegions.West] ?? 0)
   const hasMainAreaColumn = mainAreaColumnAmount > 0
 
   if (!hasMainAreaColumn) {
     mainAreaColumnAmount = 1
   }
 
-  if (regionMap[availableRegions.north] > 0) {
-    for (let i = 0; i < regionMap[availableRegions.north]; i++) {
-      layoutDefinition.push(`${availableRegions.north}${i + 1} `.repeat(mainAreaColumnAmount).trim())
-    }
+  if (regionMap[AvailableRegions.North] > 0) {
+    handleLayoutDefinitionByRegion(AvailableRegions.North)
+  }
+
+  if (regionMap[AvailableRegions.South] > 0) {
+    handleLayoutDefinitionByRegion(AvailableRegions.South)
   }
 
   if (hasMainAreaColumn) {
     let mainLayoutDefinition = ''
 
-    if (regionMap[availableRegions.west] > 0) {
-      for (let i = 0; i < regionMap[availableRegions.west]; i++) {
-        mainLayoutDefinition += `${availableRegions.west}${i + 1} `
+    const handleMainLayoutDefinitionByRegion = (region: AvailableRegions): void => {
+      for (let i = 0; i < regionMap[region]; i++) {
+        mainLayoutDefinition += `${region}${i + 1} `
       }
     }
 
-    if (regionMap[availableRegions.center] > 0) {
-      for (let i = 0; i < regionMap[availableRegions.center]; i++) {
-        mainLayoutDefinition += `${availableRegions.center}${i + 1} `
-      }
+    if (regionMap[AvailableRegions.West] > 0) {
+      handleMainLayoutDefinitionByRegion(AvailableRegions.West)
     }
 
-    if (regionMap[availableRegions.east] > 0) {
-      for (let i = 0; i < regionMap[availableRegions.east]; i++) {
-        mainLayoutDefinition += `${availableRegions.east}${i + 1} `
-      }
+    if (regionMap[AvailableRegions.Center] > 0) {
+      handleMainLayoutDefinitionByRegion(AvailableRegions.Center)
     }
 
-    layoutDefinition.push(mainLayoutDefinition.trim())
-  }
-
-  if (regionMap[availableRegions.south] > 0) {
-    for (let i = 0; i < regionMap[availableRegions.south]; i++) {
-      layoutDefinition.push(`${availableRegions.south}${i + 1} `.repeat(mainAreaColumnAmount).trim())
+    if (regionMap[AvailableRegions.East] > 0) {
+      handleMainLayoutDefinitionByRegion(AvailableRegions.East)
     }
+
+    layoutDefinition.push(mainLayoutDefinition.trim())
   }
 
   return (