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 = (props) => { + const { actions = [] } = props; + + const elements = useMemo( + () => + actions.map((actionProps) => ( + + {actionProps.children} + + )), + [actions], + ); + + return ( + + {elements} + + ); +}; + +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 = ( { handlers: { base, origin } }, ...args @@ -19,7 +12,7 @@ const handleAction: ExtendableEventHandler = ( origin?.call(null, ...args); }; -const DialogActionArea: FC = (props) => { +const DialogActionGroup: FC = (props) => { const { cancelProps, closeOnProceed, @@ -69,44 +62,41 @@ const DialogActionArea: FC = (props) => { [closeOnProceed, dialogContext, onProceed, proceedProps?.onClick], ); - const cancelButton = useMemo( - () => ( - - {cancelChildren} - - ), - [cancelChildren, cancelHandler, cancelProps], - ); - - const proceedButton = useMemo( - () => ( - - {proceedChildren} - - ), - [proceedChildren, proceedColour, proceedHandler, proceedProps], - ); - const actions = useMemo( () => ( - - {cancelButton} - {proceedButton} - + ), - [cancelButton, proceedButton], + [ + cancelChildren, + cancelHandler, + cancelProps, + proceedChildren, + proceedColour, + proceedHandler, + proceedProps, + ], ); - const actionArea = useMemo( + const result = useMemo( () => (loading ? : 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; closeOnProceed?: boolean; @@ -40,4 +40,4 @@ type DialogActionAreaOptionalProps = { proceedProps?: Partial; }; -type DialogActionAreaProps = DialogActionAreaOptionalProps; +type DialogActionGroupProps = DialogActionGroupOptionalProps;