Added new Button component and prop customization features.

upmostly · Apr 13, 2019 · 06f6670 · 06f6670
1 parent b962a17
commit 06f6670
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 48 deletions.
diff --git a/examples/src/BasicExample.js b/examples/src/BasicExample.js
@@ -7,23 +7,7 @@ import Modali, { useModali } from '../../src';
 import Button from "./Button";
 
 const BasicExample = () => {
-  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()}
-      />,
-    ],
-  });
+  const [exampleModal, toggleExampleModal] = useModali();
   return (
     <div className="row mt-5">
       <div className="col-12">
@@ -39,7 +23,15 @@ const BasicExample = () => {
       <div className="col-12">
         <SyntaxHighlighter language='jsx' style={okaidia}>{basicExample}</SyntaxHighlighter>
       </div>
-      <Modali {...exampleModal} />
+      <Modali.Modal {...exampleModal}>
+        <div className="row my-3">
+          <div className="col-12 d-flex justify-content-center">
+            <p>
+              Hi, I'm a Modali! 👋
+            </p>
+          </div>
+        </div>
+      </Modali.Modal>
     </div>
   )
 };

diff --git a/examples/src/CompleteExample.js b/examples/src/CompleteExample.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { completeExampleSnippet } from "./snippets/snippets";
+
+import Modali, { useModali } from '../../src';
+import Button from "./Button";
+
+const CompleteExample = () => {
+  const [completeExample, toggleCompleteModal] = useModali({
+    animated: true,
+    title: 'Are you sure?',
+    message: 'Deleting this user will be permanent.',
+    buttons: [
+      <Modali.Button
+        label="Cancel"
+        isStyleCancel
+        onClick={() => toggleCompleteModal()}
+      />,
+      <Modali.Button
+        label="Delete"
+        isStyleDestructive
+        onClick={() => alert('User deleted!')}
+      />,
+    ],
+  });
+  return (
+    <div className="row mt-5">
+      <div className="col-12">
+        <h4>
+          Complete Example
+        </h4>
+      </div>
+      <div className="col-12 mt-2">
+        <Button handleClick={toggleCompleteModal}>
+          Click me to open a complete modal
+        </Button>
+      </div>
+      <div className="col-12">
+        <SyntaxHighlighter language='jsx' style={okaidia}>{completeExampleSnippet}</SyntaxHighlighter>
+      </div>
+      <Modali.Modal {...completeExample} />
+    </div>
+  )
+};
+export default CompleteExample;
diff --git a/examples/src/MultipleModalsExample.js b/examples/src/MultipleModalsExample.js
@@ -29,24 +29,24 @@ const MultipleModalsExample = () => {
       <div className="col-12">
         <SyntaxHighlighter language='jsx' style={okaidia}>{multiple}</SyntaxHighlighter>
       </div>
-      <Modali {...firstModal}>
+      <Modali.Modal {...firstModal}>
         <div className="row my-3">
           <div className="col-12 d-flex justify-content-center">
             <h3>
               I'm the first modal 🔥
             </h3>
           </div>
         </div>
-      </Modali>
-      <Modali {...secondModal}>
+      </Modali.Modal>
+      <Modali.Modal {...secondModal}>
         <div className="row my-3">
           <div className="col-12 d-flex justify-content-center">
             <h3>
               I'm the second modal ✌️
             </h3>
           </div>
         </div>
-      </Modali>
+      </Modali.Modal>
     </div>
   )
 };

diff --git a/examples/src/OptionsModalsExample.js b/examples/src/OptionsModalsExample.js
@@ -8,14 +8,16 @@ import Button from "./Button";
 
 const OptionsModalsExample = () => {
   const [firstModal, toggleFirstModal] = useModali({
-    onHide: () => alert(`I'm now hidden`),
     animated: true,
+    large: true,
+    closeButton: false,
+    onHide: () => alert(`I'm now hidden`),
   });
   return (
     <div className="row mt-5">
       <div className="col-12">
         <h4>
-          Modali Options
+          Modali with More Options
         </h4>
       </div>
       <div className="col-12 mt-2">
@@ -26,15 +28,15 @@ const OptionsModalsExample = () => {
       <div className="col-12">
         <SyntaxHighlighter language='jsx' style={okaidia}>{options}</SyntaxHighlighter>
       </div>
-      <Modali {...firstModal}>
+      <Modali.Modal {...firstModal}>
         <div className="row my-3">
           <div className="col-12 d-flex justify-content-center">
-            <h3>
-              I'm the first modal 🔥
-            </h3>
+            <p className="m-0">
+              I'm a larger, animated modal, without a close button 🤘
+            </p>
           </div>
         </div>
-      </Modali>
+      </Modali.Modal>
     </div>
   )
 };

diff --git a/examples/src/index.js b/examples/src/index.js
@@ -7,10 +7,25 @@ import Modali, { useModali } from '../../src';
 import Button from "./Button";
 import MultipleModalsExample from "./MultipleModalsExample";
 import OptionsModalsExample from "./OptionsModalsExample";
+import CompleteExample from "./CompleteExample";
 
 const App = () => {
   const [exampleModal, toggleExampleModal] = useModali({
     animated: true,
+    title: 'Lobster Ipsum',
+    message: 'This is the modal body. You can write whatever you want, or even pass in your own React component.',
+    buttons: [
+      <Modali.Button
+        label="Cancel"
+        isStyleCancel
+        onClick={() => toggleExampleModal()}
+      />,
+      <Modali.Button
+        label="Delete"
+        isStyleDestructive
+        onClick={() => toggleExampleModal()}
+      />,
+    ],
   });
   return (
     <div className="container my-5">
@@ -22,19 +37,12 @@ const App = () => {
           <Button handleClick={toggleExampleModal}>
             Click me to open a Modal!
           </Button>
-          <Modali {...exampleModal}>
-            <div className="row my-3">
-              <div className="col-12 d-flex justify-content-center">
-                <h3>
-                  I'm an example Modal 👋
-                </h3>
-              </div>
-            </div>
-          </Modali>
+          <Modali.Modal {...exampleModal} />
         </div>
       </div>
       <Installation />
       <BasicExample />
+      <CompleteExample />
       <MultipleModalsExample />
       <OptionsModalsExample />
     </div>

diff --git a/examples/src/snippets/snippets.js b/examples/src/snippets/snippets.js
@@ -1,7 +1,5 @@
 export const installation = `npm install --save modali`;
-
 export const usage = `import Modali, { useModali } from 'modali';`;
-
 export const basicExample = 'import React from \'react\';\n' +
   'import Modali, { useModali } from \'modali\';\n' +
   '\n' +
@@ -11,17 +9,38 @@ export const basicExample = 'import React from \'react\';\n' +
   '  return (\n' +
   '    <div className="app">\n' +
   '      <button onClick={toggleExampleModal}>\n' +
-  '        Click me to open the modal\n' +
+  '        Click me to open a basic modal\n' +
   '      </button>\n' +
-  '      <Modali {...exampleModal}>\n' +
+  '      <Modali.Modal {...exampleModal}>\n' +
   '        Hi, I\'m a Modali!\n' +
-  '      </Modali>\n' +
+  '      </Modali.Modal>\n' +
   '    </div>\n' +
   '  );\n' +
   '};\n' +
   '\n' +
   'export default App;';
 
+export const completeExampleSnippet = 'import React from \'react\';\n' +
+  'import Modali, { useModali } from \'modali\';\n' +
+  '\n' +
+  'const [completeModal, toggleCompleteModal] = useModali({\n' +
+  '  animated: true,\n' +
+  '  title: \'Are you sure?\',\n' +
+  '  message: \'Deleting this user will be permanent.\',\n' +
+  '  buttons: [\n' +
+  '    <Modali.Button\n' +
+  '      label="Cancel"\n' +
+  '      isStyleCancel\n' +
+  '      onClick={() => toggleCompleteModal()}\n' +
+  '    />,\n' +
+  '    <Modali.Button\n' +
+  '      label="Delete"\n' +
+  '      isStyleDestructive\n' +
+  '      onClick={() => deleteUserWithId(123)}\n' +
+  '    />,\n' +
+  '  ],\n' +
+  '});';
+
 export const multiple = 'import React from \'react\';\n' +
   'import Modali, { useModali } from \'modali\';\n' +
   '\n' +
@@ -37,12 +56,12 @@ export const multiple = 'import React from \'react\';\n' +
   '      <button onClick={toggleSecondModal}>\n' +
   '        Click me to open the second modal!\n' +
   '      </button>\n' +
-  '      <Modali {...firstModal}>\n' +
+  '      <Modali.Modal {...firstModal}>\n' +
   '        Hi, I\'m the first Modali\n' +
-  '      </Modali>\n' +
-  '      <Modali {...secondModal}>\n' +
+  '      </Modali.Modal>\n' +
+  '      <Modali.Modal {...secondModal}>\n' +
   '        And I\'m the second Modali\n' +
-  '      </Modali>\n' +
+  '      </Modali.Modal>\n' +
   '    </div>\n' +
   '  );\n' +
   '};\n' +

diff --git a/src/index.js b/src/index.js
@@ -11,7 +11,9 @@ const Button = ({ onClick, label, isStyleDefault, isStyleCancel, isStyleDestruct
   </button>
 );
 
-const Modali = ({ isShown, hide, options, children }) => {
+const Modali = () => {};
+
+const Modal = ({ isShown, hide, options, children }) => {
 
   function handleOverlayClicked(e) {
     if (e.target.className !== 'modali-wrapper') {
@@ -86,6 +88,7 @@ const Modali = ({ isShown, hide, options, children }) => {
 };
 
 Modali.Button = Button;
+Modali.Modal = Modal;
 export default Modali;
 
 export const useModali = (options) => {