Skip to content

Commit 06f6670

Browse files
jcrowsonjcrowson
committed
Added new Button component and prop customization features.
1 parent b962a17 commit 06f6670

File tree

7 files changed

+118
-48
lines changed

7 files changed

+118
-48
lines changed

‎examples/src/BasicExample.js‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,7 @@ import Modali, { useModali } from '../../src';
77
import Button from "./Button";
88

99
const BasicExample = () => {
10-
const [exampleModal, toggleExampleModal] = useModali({
11-
animated: true,
12-
title: 'Are you sure?',
13-
message: 'Deleting this user will be permanent.',
14-
buttons: [
15-
<Modali.Button
16-
label="Cancel"
17-
isStyleCancel
18-
onClick={() => toggleExampleModal()}
19-
/>,
20-
<Modali.Button
21-
label="Delete"
22-
isStyleDestructive
23-
onClick={() => toggleExampleModal()}
24-
/>,
25-
],
26-
});
10+
const [exampleModal, toggleExampleModal] = useModali();
2711
return (
2812
<div className="row mt-5">
2913
<div className="col-12">
@@ -39,7 +23,15 @@ const BasicExample = () => {
3923
<div className="col-12">
4024
<SyntaxHighlighter language='jsx' style={okaidia}>{basicExample}</SyntaxHighlighter>
4125
</div>
42-
<Modali {...exampleModal} />
26+
<Modali.Modal {...exampleModal}>
27+
<div className="row my-3">
28+
<div className="col-12 d-flex justify-content-center">
29+
<p>
30+
Hi, I'm a Modali! 👋
31+
</p>
32+
</div>
33+
</div>
34+
</Modali.Modal>
4335
</div>
4436
)
4537
};

‎examples/src/CompleteExample.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
3+
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
4+
import { completeExampleSnippet } from "./snippets/snippets";
5+
6+
import Modali, { useModali } from '../../src';
7+
import Button from "./Button";
8+
9+
const CompleteExample = () => {
10+
const [completeExample, toggleCompleteModal] = useModali({
11+
animated: true,
12+
title: 'Are you sure?',
13+
message: 'Deleting this user will be permanent.',
14+
buttons: [
15+
<Modali.Button
16+
label="Cancel"
17+
isStyleCancel
18+
onClick={() => toggleCompleteModal()}
19+
/>,
20+
<Modali.Button
21+
label="Delete"
22+
isStyleDestructive
23+
onClick={() => alert('User deleted!')}
24+
/>,
25+
],
26+
});
27+
return (
28+
<div className="row mt-5">
29+
<div className="col-12">
30+
<h4>
31+
Complete Example
32+
</h4>
33+
</div>
34+
<div className="col-12 mt-2">
35+
<Button handleClick={toggleCompleteModal}>
36+
Click me to open a complete modal
37+
</Button>
38+
</div>
39+
<div className="col-12">
40+
<SyntaxHighlighter language='jsx' style={okaidia}>{completeExampleSnippet}</SyntaxHighlighter>
41+
</div>
42+
<Modali.Modal {...completeExample} />
43+
</div>
44+
)
45+
};
46+
export default CompleteExample;

‎examples/src/MultipleModalsExample.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@ const MultipleModalsExample = () => {
2929
<div className="col-12">
3030
<SyntaxHighlighter language='jsx' style={okaidia}>{multiple}</SyntaxHighlighter>
3131
</div>
32-
<Modali {...firstModal}>
32+
<Modali.Modal {...firstModal}>
3333
<div className="row my-3">
3434
<div className="col-12 d-flex justify-content-center">
3535
<h3>
3636
I'm the first modal 🔥
3737
</h3>
3838
</div>
3939
</div>
40-
</Modali>
41-
<Modali {...secondModal}>
40+
</Modali.Modal>
41+
<Modali.Modal {...secondModal}>
4242
<div className="row my-3">
4343
<div className="col-12 d-flex justify-content-center">
4444
<h3>
4545
I'm the second modal ✌️
4646
</h3>
4747
</div>
4848
</div>
49-
</Modali>
49+
</Modali.Modal>
5050
</div>
5151
)
5252
};

‎examples/src/OptionsModalsExample.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ import Button from "./Button";
88

99
const OptionsModalsExample = () => {
1010
const [firstModal, toggleFirstModal] = useModali({
11-
onHide: () => alert(`I'm now hidden`),
1211
animated: true,
12+
large: true,
13+
closeButton: false,
14+
onHide: () => alert(`I'm now hidden`),
1315
});
1416
return (
1517
<div className="row mt-5">
1618
<div className="col-12">
1719
<h4>
18-
Modali Options
20+
Modali with More Options
1921
</h4>
2022
</div>
2123
<div className="col-12 mt-2">
@@ -26,15 +28,15 @@ const OptionsModalsExample = () => {
2628
<div className="col-12">
2729
<SyntaxHighlighter language='jsx' style={okaidia}>{options}</SyntaxHighlighter>
2830
</div>
29-
<Modali {...firstModal}>
31+
<Modali.Modal {...firstModal}>
3032
<div className="row my-3">
3133
<div className="col-12 d-flex justify-content-center">
32-
<h3>
33-
I'm the first modal 🔥
34-
</h3>
34+
<p className="m-0">
35+
I'm a larger, animated modal, without a close button 🤘
36+
</p>
3537
</div>
3638
</div>
37-
</Modali>
39+
</Modali.Modal>
3840
</div>
3941
)
4042
};

‎examples/src/index.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,25 @@ import Modali, { useModali } from '../../src';
77
import Button from "./Button";
88
import MultipleModalsExample from "./MultipleModalsExample";
99
import OptionsModalsExample from "./OptionsModalsExample";
10+
import CompleteExample from "./CompleteExample";
1011

1112
const App = () => {
1213
const [exampleModal, toggleExampleModal] = useModali({
1314
animated: true,
15+
title: 'Lobster Ipsum',
16+
message: 'This is the modal body. You can write whatever you want, or even pass in your own React component.',
17+
buttons: [
18+
<Modali.Button
19+
label="Cancel"
20+
isStyleCancel
21+
onClick={() => toggleExampleModal()}
22+
/>,
23+
<Modali.Button
24+
label="Delete"
25+
isStyleDestructive
26+
onClick={() => toggleExampleModal()}
27+
/>,
28+
],
1429
});
1530
return (
1631
<div className="container my-5">
@@ -22,19 +37,12 @@ const App = () => {
2237
<Button handleClick={toggleExampleModal}>
2338
Click me to open a Modal!
2439
</Button>
25-
<Modali {...exampleModal}>
26-
<div className="row my-3">
27-
<div className="col-12 d-flex justify-content-center">
28-
<h3>
29-
I'm an example Modal 👋
30-
</h3>
31-
</div>
32-
</div>
33-
</Modali>
40+
<Modali.Modal {...exampleModal} />
3441
</div>
3542
</div>
3643
<Installation />
3744
<BasicExample />
45+
<CompleteExample />
3846
<MultipleModalsExample />
3947
<OptionsModalsExample />
4048
</div>

‎examples/src/snippets/snippets.js‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
export const installation = `npm install --save modali`;
2-
32
export const usage = `import Modali, { useModali } from 'modali';`;
4-
53
export const basicExample = 'import React from \'react\';\n' +
64
'import Modali, { useModali } from \'modali\';\n' +
75
'\n' +
@@ -11,17 +9,38 @@ export const basicExample = 'import React from \'react\';\n' +
119
' return (\n' +
1210
' <div className="app">\n' +
1311
' <button onClick={toggleExampleModal}>\n' +
14-
' Click me to open the modal\n' +
12+
' Click me to open a basic modal\n' +
1513
' </button>\n' +
16-
' <Modali {...exampleModal}>\n' +
14+
' <Modali.Modal {...exampleModal}>\n' +
1715
' Hi, I\'m a Modali!\n' +
18-
' </Modali>\n' +
16+
' </Modali.Modal>\n' +
1917
' </div>\n' +
2018
' );\n' +
2119
'};\n' +
2220
'\n' +
2321
'export default App;';
2422

23+
export const completeExampleSnippet = 'import React from \'react\';\n' +
24+
'import Modali, { useModali } from \'modali\';\n' +
25+
'\n' +
26+
'const [completeModal, toggleCompleteModal] = useModali({\n' +
27+
' animated: true,\n' +
28+
' title: \'Are you sure?\',\n' +
29+
' message: \'Deleting this user will be permanent.\',\n' +
30+
' buttons: [\n' +
31+
' <Modali.Button\n' +
32+
' label="Cancel"\n' +
33+
' isStyleCancel\n' +
34+
' onClick={() => toggleCompleteModal()}\n' +
35+
' />,\n' +
36+
' <Modali.Button\n' +
37+
' label="Delete"\n' +
38+
' isStyleDestructive\n' +
39+
' onClick={() => deleteUserWithId(123)}\n' +
40+
' />,\n' +
41+
' ],\n' +
42+
'});';
43+
2544
export const multiple = 'import React from \'react\';\n' +
2645
'import Modali, { useModali } from \'modali\';\n' +
2746
'\n' +
@@ -37,12 +56,12 @@ export const multiple = 'import React from \'react\';\n' +
3756
' <button onClick={toggleSecondModal}>\n' +
3857
' Click me to open the second modal!\n' +
3958
' </button>\n' +
40-
' <Modali {...firstModal}>\n' +
59+
' <Modali.Modal {...firstModal}>\n' +
4160
' Hi, I\'m the first Modali\n' +
42-
' </Modali>\n' +
43-
' <Modali {...secondModal}>\n' +
61+
' </Modali.Modal>\n' +
62+
' <Modali.Modal {...secondModal}>\n' +
4463
' And I\'m the second Modali\n' +
45-
' </Modali>\n' +
64+
' </Modali.Modal>\n' +
4665
' </div>\n' +
4766
' );\n' +
4867
'};\n' +

‎src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const Button = ({ onClick, label, isStyleDefault, isStyleCancel, isStyleDestruct
1111
</button>
1212
);
1313

14-
const Modali = ({ isShown, hide, options, children }) => {
14+
const Modali = () => {};
15+
16+
const Modal = ({ isShown, hide, options, children }) => {
1517

1618
function handleOverlayClicked(e) {
1719
if (e.target.className !== 'modali-wrapper') {
@@ -86,6 +88,7 @@ const Modali = ({ isShown, hide, options, children }) => {
8688
};
8789

8890
Modali.Button = Button;
91+
Modali.Modal = Modal;
8992
export default Modali;
9093

9194
export const useModali = (options) => {

0 commit comments

Comments
 (0)