From 84ebc333efa35e86a3d5ed62b0989ae5bbfe7495 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Mon, 17 Oct 2022 16:15:56 -0400
Subject: [PATCH] fix(striker-ui): split column and row spacing in Flexbox

---
 striker-ui/components/FlexBox.tsx | 38 +++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/striker-ui/components/FlexBox.tsx b/striker-ui/components/FlexBox.tsx
index f39c45fe..4a2f8899 100644
--- a/striker-ui/components/FlexBox.tsx
+++ b/striker-ui/components/FlexBox.tsx
@@ -3,23 +3,33 @@ import { FC, useMemo } from 'react';
 
 type FlexBoxDirection = 'column' | 'row';
 
-type FlexBoxOptionalProps = {
+type FlexBoxSpacing = number | string;
+
+type FlexBoxOptionalPropsWithDefault = {
   row?: boolean;
+  spacing?: FlexBoxSpacing;
+  xs?: FlexBoxDirection;
+};
+
+type FlexBoxOptionalPropsWithoutDefault = {
+  columnSpacing?: FlexBoxSpacing;
+  rowSpacing?: FlexBoxSpacing;
   lg?: FlexBoxDirection;
   md?: FlexBoxDirection;
   sm?: FlexBoxDirection;
-  spacing?: number | string;
   xl?: FlexBoxDirection;
-  xs?: FlexBoxDirection;
 };
 
+type FlexBoxOptionalProps = FlexBoxOptionalPropsWithDefault &
+  FlexBoxOptionalPropsWithoutDefault;
+
 type FlexBoxProps = MUIBoxProps & FlexBoxOptionalProps;
 
-const FLEX_BOX_DEFAULT_PROPS: Required<
-  Omit<FlexBoxOptionalProps, 'lg' | 'md' | 'sm' | 'xl'>
-> &
-  Pick<FlexBoxOptionalProps, 'lg' | 'md' | 'sm' | 'xl'> = {
+const FLEX_BOX_DEFAULT_PROPS: Required<FlexBoxOptionalPropsWithDefault> &
+  FlexBoxOptionalPropsWithoutDefault = {
+  columnSpacing: undefined,
   row: false,
+  rowSpacing: undefined,
   lg: undefined,
   md: undefined,
   sm: undefined,
@@ -37,6 +47,10 @@ const FlexBox: FC<FlexBoxProps> = ({
   sx,
   xl: dXl = FLEX_BOX_DEFAULT_PROPS.xl,
   xs: dXs = FLEX_BOX_DEFAULT_PROPS.xs,
+  // Input props that depend on other input props.
+  columnSpacing = spacing,
+  rowSpacing = spacing,
+
   ...muiBoxRestProps
 }) => {
   const xs = useMemo(() => (isRow ? 'row' : dXs), [dXs, isRow]);
@@ -49,23 +63,23 @@ const FlexBox: FC<FlexBoxProps> = ({
     FlexBoxDirection,
     {
       alignItems: string;
-      marginLeft: string | number;
-      marginTop: string | number;
+      marginLeft: FlexBoxSpacing;
+      marginTop: FlexBoxSpacing;
     }
   > = useMemo(
     () => ({
       column: {
         alignItems: 'normal',
         marginLeft: 0,
-        marginTop: spacing,
+        marginTop: columnSpacing,
       },
       row: {
         alignItems: 'center',
-        marginLeft: spacing,
+        marginLeft: rowSpacing,
         marginTop: 0,
       },
     }),
-    [spacing],
+    [columnSpacing, rowSpacing],
   );
 
   return (