New interface.

Author: James Crowson

examples/src/BasicExample.js

@@ -7,7 +7,23 @@ import Modali, { useModali } from '../../src';
 import Button from "./Button";
 
 const BasicExample = () => {
-  const [exampleModal, toggleExampleModal] = useModali();
+  const [exampleModal, toggleExampleModal] = useModali({
+    animated: true,
+    title: 'Are you sure?',
+    message: 'Deleting this user will be permanent.',
+    buttons: [
+      <Modali.Button
+        label="Cancel"
+        isStyleCancel
+        onClick={() => toggleExampleModal()}
+      />,
+      <Modali.Button
+        label="Delete"
+        isStyleDestructive
+        onClick={() => toggleExampleModal()}
+      />,
+    ],
+  });
   return (
     <div className="row mt-5">
       <div className="col-12">
@@ -23,15 +39,7 @@ const BasicExample = () => {
       <div className="col-12">
         <SyntaxHighlighter language='jsx' style={okaidia}>{basicExample}</SyntaxHighlighter>
       </div>
-      <Modali {...exampleModal}>
-        <div className="row my-3">
-          <div className="col-12 d-flex justify-content-center">
-            <h3>
-              I'm a basic Modal Dialog 👍
-            </h3>
-          </div>
-        </div>
-      </Modali>
+      <Modali {...exampleModal} />
     </div>
   )
 };

src/index.js

@@ -2,6 +2,15 @@ import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import './modali.css';
 
+const Button = ({ onClick, label, isStyleDefault, isStyleCancel, isStyleDestructive }) => (
+  <button
+    className={`modali-button ${isStyleCancel && 'modali-button-cancel'} ${isStyleDefault && 'modali-button-default'} ${isStyleDestructive && 'modali-button-destructive'}`}
+    onClick={onClick}
+  >
+    {label}
+  </button>
+);
+
 const Modali = ({ isShown, hide, options, children }) => {
 
   function handleOverlayClicked(e) {
@@ -20,6 +29,33 @@ const Modali = ({ isShown, hide, options, children }) => {
     }
   }
 
+  function renderBody() {
+    if (children) {
+      return children;
+    } else if (options !== undefined && options.message !== undefined) {
+      return (
+        <div className="modali-body-style">
+          {options.message}
+        </div>
+      );
+    }
+  }
+
+  function renderFooter() {
+    const { buttons } = options;
+    return (
+      <div className="modali-footer">
+        {buttons.map((button, index) => (
+          <React.Fragment
+            key={`modali-button-${index}`}
+          >
+            {button}
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  }
+
   return isShown ? ReactDOM.createPortal(
     <React.Fragment>
       <div className="modali-overlay"/>
@@ -28,21 +64,28 @@ const Modali = ({ isShown, hide, options, children }) => {
           <div className="modali-content">
             {options !== undefined && options.closeButton === false ? null : (
               <div className="modali-header">
+                {options !== undefined && options.title !== undefined && (
+                  <div className="modali-title">
+                    {options.title}
+                  </div>
+                )}
                 <button type="button" className="modali-close-button" data-dismiss="modal" aria-label="Close" onClick={hide}>
                   <span aria-hidden="true">&times;</span>
                 </button>
               </div>
             )}
             <div className="modali-body">
-              {children}
+              {renderBody()}
             </div>
+            {options !== undefined && options.buttons !== undefined && options.buttons.length > 0 && renderFooter()}
           </div>
         </div>
       </div>
     </React.Fragment>, document.body
   ) : null;
 };
 
+Modali.Button = Button;
 export default Modali;
 
 export const useModali = (options) => {

src/modali.css

@@ -36,29 +36,26 @@
 
 .modali-header {
   display: flex;
-  -ms-flex-align: start;
-  align-items: flex-start;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  padding: 1rem 1rem;
-  border-top-left-radius: .3rem;
-  border-top-right-radius: .3rem;
+  align-items: start;
+  padding: 1.5rem 1.5rem .5rem 1.5rem;
 }
 
-.modali-header .modali-close-button {
-  padding: 1rem 1rem;
-  margin: -1rem -1rem -1rem auto;
+.modali-header .modali-title {
+  font-weight: 700;
+  font-size: 1.2rem;
 }
 
 .modali-close-button {
+  padding: 1rem;
+  margin: -1rem -1rem -1rem auto;
   font-size: 1.4rem;
   font-weight: 700;
   line-height: 1;
   color: #000;
   opacity: .3;
   cursor: pointer;
   border: none;
-  outline: 0;
+  outline: 0 !important;
 }
 
 .modali-close-button:hover {
@@ -68,15 +65,23 @@
 
 .modali-body {
   position: relative;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
   background-color: #fff;
   border-radius: .3rem;
 }
 
+.modali-body-style {
+  padding: .5rem 1.5rem;
+}
+
+.modali-footer {
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .modali-open {
   overflow: hidden;
 }
@@ -91,6 +96,31 @@
   max-width: 800px;
 }
 
+/* Button Classes */
+
+.modali-button {
+  font-size: .9rem;
+  font-weight: 700;
+  border: none;
+  border-radius: 3px;
+  padding: .3rem 1rem;
+  margin-left: .5rem;
+}
+
+.modali-button-cancel {
+  background: #fff;
+  color: #000;
+}
+
+.modali-button-destructive {
+  background: #FF1654;
+  color: #fff;
+}
+
+.modali-button-default {
+  background: #247BA0;
+  color: #fff;
+}
 
 /* Animation Classes */