added modal footer

scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js

@@ -29,33 +29,40 @@ class ConfirmAlert extends React.Component<Props> {
   render() {
     const { title, message, buttons } = this.props;
 
-    const body= (
-      <>
-        {message}
-        <div className="buttons is-right">
-          {buttons.map((button, i) => (
-            <a className="button is-info is-right"
-               key={i}
-               onClick={() => this.handleClickButton(button)}
+    const body = <>{message}</>;
+
+    const footer = (
+      <div className="field is-grouped">
+        {buttons.map((button, i) => (
+          <p className="control">
+            <a
+              className="button is-info"
+              key={i}
+              onClick={() => this.handleClickButton(button)}
             >
               {button.label}
             </a>
-          ))}
-        </div>
-        </>
+          </p>
+        ))}
+      </div>
     );
 
-
     return (
-      <Modal title={title} closeFunction={() => this.close()} body={body} active={true}/>
+      <Modal
+        title={title}
+        closeFunction={() => this.close()}
+        body={body}
+        active={true}
+        footer={footer}
+      />
     );
   }
 }
 
 export function confirmAlert(properties: Props) {
   const root = document.getElementById("modalRoot");
-  if(root){
-    ReactDOM.render(<ConfirmAlert {...properties}/>, root);
+  if (root) {
+    ReactDOM.render(<ConfirmAlert {...properties} />, root);
   }
 }
 

scm-ui-components/packages/ui-components/src/modals/Modal.js

@@ -7,6 +7,7 @@ type Props = {
   title: string,
   closeFunction: () => void,
   body: any,
+  footer?: any,
   active: boolean,
   classes: any
 };
@@ -19,42 +20,35 @@ const styles = {
   }
 };
 
-
-
 class Modal extends React.Component<Props> {
-
   render() {
-    const { title, closeFunction, body, active, classes } = this.props;
+    const { title, closeFunction, body, footer, active, classes } = this.props;
 
     const isActive = active ? "is-active" : null;
 
+    let showFooter = null;
+    if (footer) {
+      showFooter = <footer className="modal-card-foot">{footer}</footer>;
+    }
+
     return (
-      <div className={classNames(
-        "modal",
-        isActive
-      )}>
+      <div className={classNames("modal", isActive)}>
         <div className="modal-background" />
         <div className={classNames("modal-card", classes.resize)}>
-
           <header className="modal-card-head">
-            <p className="modal-card-title">
-              {title}
-            </p>
+            <p className="modal-card-title">{title}</p>
             <button
               className="delete"
               aria-label="close"
               onClick={closeFunction}
             />
           </header>
-          <section className="modal-card-body">
-            {body}
-          </section>
-
+          <section className="modal-card-body">{body}</section>
+          {showFooter}
         </div>
       </div>
     );
   }
 }
 
-
 export default injectSheet(styles)(Modal);