From e8fe92321e80fd902b9b1b5676642b4446ac3898 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 15 Sep 2023 13:41:24 -0400
Subject: [PATCH] fix(striker-ui): break dialog action group

---
 striker-ui/components/ActionGroup.tsx         | 33 +++++++++
 ...ogActionArea.tsx => DialogActionGroup.tsx} | 68 ++++++++-----------
 striker-ui/components/Dialog/index.tsx        |  9 ++-
 striker-ui/types/ActionGroup.d.ts             |  5 ++
 striker-ui/types/Dialog.d.ts                  |  6 +-
 5 files changed, 77 insertions(+), 44 deletions(-)
 create mode 100644 striker-ui/components/ActionGroup.tsx
 rename striker-ui/components/Dialog/{DialogActionArea.tsx => DialogActionGroup.tsx} (61%)
 create mode 100644 striker-ui/types/ActionGroup.d.ts

diff --git a/striker-ui/components/ActionGroup.tsx b/striker-ui/components/ActionGroup.tsx
new file mode 100644
index 00000000..f31e1b4a
--- /dev/null
+++ b/striker-ui/components/ActionGroup.tsx
@@ -0,0 +1,33 @@
+import { styled } from '@mui/material';
+import { FC, ReactElement, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import ContainedButton from './ContainedButton';
+import FlexBox from './FlexBox';
+
+const FlexEndBox = styled(FlexBox)({
+  justifyContent: 'flex-end',
+  width: '100%',
+});
+
+const ActionGroup: FC<ActionGroupProps> = (props) => {
+  const { actions = [] } = props;
+
+  const elements = useMemo(
+    () =>
+      actions.map<ReactElement>((actionProps) => (
+        <ContainedButton key={uuidv4()} {...actionProps}>
+          {actionProps.children}
+        </ContainedButton>
+      )),
+    [actions],
+  );
+
+  return (
+    <FlexEndBox row spacing=".5em">
+      {elements}
+    </FlexEndBox>
+  );
+};
+
+export default ActionGroup;
diff --git a/striker-ui/components/Dialog/DialogActionArea.tsx b/striker-ui/components/Dialog/DialogActionGroup.tsx
similarity index 61%
rename from striker-ui/components/Dialog/DialogActionArea.tsx
rename to striker-ui/components/Dialog/DialogActionGroup.tsx
index cb80f541..32aa6b57 100644
--- a/striker-ui/components/Dialog/DialogActionArea.tsx
+++ b/striker-ui/components/Dialog/DialogActionGroup.tsx
@@ -1,16 +1,9 @@
-import { styled } from '@mui/material';
 import { FC, useCallback, useContext, useMemo } from 'react';
 
-import ContainedButton from '../ContainedButton';
+import ActionGroup from '../ActionGroup';
 import { DialogContext } from './Dialog';
-import FlexBox from '../FlexBox';
 import Spinner from '../Spinner';
 
-const FlexEndBox = styled(FlexBox)({
-  justifyContent: 'flex-end',
-  width: '100%',
-});
-
 const handleAction: ExtendableEventHandler<ButtonClickEventHandler> = (
   { handlers: { base, origin } },
   ...args
@@ -19,7 +12,7 @@ const handleAction: ExtendableEventHandler<ButtonClickEventHandler> = (
   origin?.call(null, ...args);
 };
 
-const DialogActionArea: FC<DialogActionAreaProps> = (props) => {
+const DialogActionGroup: FC<DialogActionGroupProps> = (props) => {
   const {
     cancelProps,
     closeOnProceed,
@@ -69,44 +62,41 @@ const DialogActionArea: FC<DialogActionAreaProps> = (props) => {
     [closeOnProceed, dialogContext, onProceed, proceedProps?.onClick],
   );
 
-  const cancelButton = useMemo(
-    () => (
-      <ContainedButton {...cancelProps} onClick={cancelHandler}>
-        {cancelChildren}
-      </ContainedButton>
-    ),
-    [cancelChildren, cancelHandler, cancelProps],
-  );
-
-  const proceedButton = useMemo(
-    () => (
-      <ContainedButton
-        background={proceedColour}
-        {...proceedProps}
-        onClick={proceedHandler}
-      >
-        {proceedChildren}
-      </ContainedButton>
-    ),
-    [proceedChildren, proceedColour, proceedHandler, proceedProps],
-  );
-
   const actions = useMemo(
     () => (
-      <FlexEndBox row spacing=".5em">
-        {cancelButton}
-        {proceedButton}
-      </FlexEndBox>
+      <ActionGroup
+        actions={[
+          {
+            ...cancelProps,
+            children: cancelChildren,
+            onClick: cancelHandler,
+          },
+          {
+            background: proceedColour,
+            ...proceedProps,
+            children: proceedChildren,
+            onClick: proceedHandler,
+          },
+        ]}
+      />
     ),
-    [cancelButton, proceedButton],
+    [
+      cancelChildren,
+      cancelHandler,
+      cancelProps,
+      proceedChildren,
+      proceedColour,
+      proceedHandler,
+      proceedProps,
+    ],
   );
 
-  const actionArea = useMemo(
+  const result = useMemo(
     () => (loading ? <Spinner mt={0} /> : actions),
     [actions, loading],
   );
 
-  return actionArea;
+  return result;
 };
 
-export default DialogActionArea;
+export default DialogActionGroup;
diff --git a/striker-ui/components/Dialog/index.tsx b/striker-ui/components/Dialog/index.tsx
index 26339e3f..f9d4d9da 100644
--- a/striker-ui/components/Dialog/index.tsx
+++ b/striker-ui/components/Dialog/index.tsx
@@ -1,6 +1,11 @@
 import Dialog from './Dialog';
-import DialogActionArea from './DialogActionArea';
+import DialogActionGroup from './DialogActionGroup';
 import DialogHeader from './DialogHeader';
 import DialogScrollBox from './DialogScrollBox';
 
-export { Dialog, DialogActionArea, DialogHeader, DialogScrollBox };
+export {
+  Dialog,
+  DialogActionGroup as DialogActionArea,
+  DialogHeader,
+  DialogScrollBox,
+};
diff --git a/striker-ui/types/ActionGroup.d.ts b/striker-ui/types/ActionGroup.d.ts
new file mode 100644
index 00000000..9251ffd1
--- /dev/null
+++ b/striker-ui/types/ActionGroup.d.ts
@@ -0,0 +1,5 @@
+type ActionGroupOptionalProps = {
+  actions?: ContainedButtonProps[];
+};
+
+type ActionGroupProps = ActionGroupOptionalProps;
diff --git a/striker-ui/types/Dialog.d.ts b/striker-ui/types/Dialog.d.ts
index adbf6d98..dd5758ee 100644
--- a/striker-ui/types/Dialog.d.ts
+++ b/striker-ui/types/Dialog.d.ts
@@ -21,14 +21,14 @@ type DialogHeaderOptionalProps = {
 
 type DialogHeaderProps = DialogHeaderOptionalProps;
 
-/** DialogActionArea */
+/** DialogActionGroup */
 
 type ButtonClickEventHandler = Exclude<
   ContainedButtonProps['onClick'],
   undefined
 >;
 
-type DialogActionAreaOptionalProps = {
+type DialogActionGroupOptionalProps = {
   cancelChildren?: ContainedButtonProps['children'];
   cancelProps?: Partial<ContainedButtonProps>;
   closeOnProceed?: boolean;
@@ -40,4 +40,4 @@ type DialogActionAreaOptionalProps = {
   proceedProps?: Partial<ContainedButtonProps>;
 };
 
-type DialogActionAreaProps = DialogActionAreaOptionalProps;
+type DialogActionGroupProps = DialogActionGroupOptionalProps;