Skip to content

Commit b2840d9

Browse files
jcrowsonjcrowson
committed
Add ESLint, classnames library, etc.
1 parent d3b8cbd commit b2840d9

File tree

11 files changed

+2849
-1545
lines changed

11 files changed

+2849
-1545
lines changed

‎dist/index.js‎

Lines changed: 135 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,65 @@ var _reactDom = require('react-dom');
1515

1616
var _reactDom2 = _interopRequireDefault(_reactDom);
1717

18+
var _propTypes = require('prop-types');
19+
20+
var _propTypes2 = _interopRequireDefault(_propTypes);
21+
22+
var _classnames = require('classnames');
23+
24+
var _classnames2 = _interopRequireDefault(_classnames);
25+
26+
var _shortid = require('shortid');
27+
28+
var _shortid2 = _interopRequireDefault(_shortid);
29+
1830
require('./modali.css');
1931

2032
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2133

22-
var Modali = function Modali(_ref) {
23-
var isShown = _ref.isShown,
24-
hide = _ref.hide,
25-
options = _ref.options,
26-
children = _ref.children;
34+
var Button = function Button(_ref) {
35+
var onClick = _ref.onClick,
36+
label = _ref.label,
37+
isStyleDefault = _ref.isStyleDefault,
38+
isStyleCancel = _ref.isStyleCancel,
39+
isStyleDestructive = _ref.isStyleDestructive;
40+
41+
var buttonClass = (0, _classnames2.default)({
42+
'modali-button': true,
43+
'modali-button-cancel': isStyleCancel,
44+
'modali-button-default': isStyleDefault,
45+
'modali-button-destructive': isStyleDestructive
46+
});
47+
return _react2.default.createElement(
48+
'button',
49+
{
50+
type: 'button',
51+
className: buttonClass,
52+
onClick: onClick
53+
},
54+
label
55+
);
56+
};
2757

58+
Button.defaultProps = {
59+
isStyleDefault: false,
60+
isStyleCancel: false,
61+
isStyleDestructive: false
62+
};
63+
64+
Button.propTypes = {
65+
onClick: _propTypes2.default.func.isRequired,
66+
label: _propTypes2.default.string.isRequired,
67+
isStyleDefault: _propTypes2.default.bool,
68+
isStyleCancel: _propTypes2.default.bool,
69+
isStyleDestructive: _propTypes2.default.bool
70+
};
71+
72+
var Modal = function Modal(_ref2) {
73+
var isModalVisible = _ref2.isModalVisible,
74+
hide = _ref2.hide,
75+
options = _ref2.options,
76+
children = _ref2.children;
2877

2978
function handleOverlayClicked(e) {
3079
if (e.target.className !== 'modali-wrapper') {
@@ -42,7 +91,45 @@ var Modali = function Modali(_ref) {
4291
}
4392
}
4493

45-
return isShown ? _reactDom2.default.createPortal(_react2.default.createElement(
94+
function renderBody() {
95+
if (children) {
96+
return children;
97+
}if (options && options.message) {
98+
return _react2.default.createElement(
99+
'div',
100+
{ className: 'modali-body-style' },
101+
options.message
102+
);
103+
}
104+
return false;
105+
}
106+
107+
function renderFooter() {
108+
var buttons = options.buttons;
109+
110+
return _react2.default.createElement(
111+
'div',
112+
{ className: 'modali-footer' },
113+
buttons.map(function (button) {
114+
return _react2.default.createElement(
115+
_react2.default.Fragment,
116+
{
117+
key: _shortid2.default.generate()
118+
},
119+
button
120+
);
121+
})
122+
);
123+
}
124+
125+
var modaliClass = (0, _classnames2.default)({
126+
modali: true,
127+
'modali-size-large': options && options.large,
128+
'modali-size-regular': !options || options && !options.large,
129+
'modali-animated modali-animation-fade-in': options && options.animated
130+
});
131+
132+
return isModalVisible ? _reactDom2.default.createPortal(_react2.default.createElement(
46133
_react2.default.Fragment,
47134
null,
48135
_react2.default.createElement('div', { className: 'modali-overlay' }),
@@ -51,13 +138,18 @@ var Modali = function Modali(_ref) {
51138
{ className: 'modali-wrapper', 'aria-modal': true, 'aria-hidden': true, tabIndex: -1, role: 'dialog', onClick: handleOverlayClicked },
52139
_react2.default.createElement(
53140
'div',
54-
{ className: 'modali ' + (options && options.large ? 'modali-size-large' : 'modali-size-regular') + ' ' + (options && options.animated ? 'modali-animated modali-animation-fade-in' : '') },
141+
{ className: modaliClass },
55142
_react2.default.createElement(
56143
'div',
57144
{ className: 'modali-content' },
58145
options !== undefined && options.closeButton === false ? null : _react2.default.createElement(
59146
'div',
60147
{ className: 'modali-header' },
148+
options !== undefined && options.title !== undefined && _react2.default.createElement(
149+
'div',
150+
{ className: 'modali-title' },
151+
options.title
152+
),
61153
_react2.default.createElement(
62154
'button',
63155
{ type: 'button', className: 'modali-close-button', 'data-dismiss': 'modal', 'aria-label': 'Close', onClick: hide },
@@ -71,14 +163,18 @@ var Modali = function Modali(_ref) {
71163
_react2.default.createElement(
72164
'div',
73165
{ className: 'modali-body' },
74-
children
75-
)
166+
renderBody()
167+
),
168+
options && options.buttons && options.buttons.length > 0 && renderFooter()
76169
)
77170
)
78171
)
79172
), document.body) : null;
80173
};
81174

175+
var Modali = function Modali() {};
176+
Modali.Button = Button;
177+
Modali.Modal = Modal;
82178
exports.default = Modali;
83179
var useModali = exports.useModali = function useModali(options) {
84180
var _useState = (0, _react.useState)(false),
@@ -88,44 +184,57 @@ var useModali = exports.useModali = function useModali(options) {
88184

89185
var _useState3 = (0, _react.useState)(false),
90186
_useState4 = _slicedToArray(_useState3, 2),
91-
isShown = _useState4[0],
92-
setIsShown = _useState4[1];
187+
isModalVisible = _useState4[0],
188+
setIsModalVisible = _useState4[1];
189+
190+
var _useState5 = (0, _react.useState)(false),
191+
_useState6 = _slicedToArray(_useState5, 2),
192+
isShown = _useState6[0],
193+
setIsShown = _useState6[1];
194+
195+
var isModalVisibleRef = (0, _react.useRef)(isModalVisible);
196+
isModalVisibleRef.current = isModalVisible;
197+
var timeoutHack = void 0;
198+
199+
function toggle() {
200+
timeoutHack = setTimeout(function () {
201+
setIsModalVisible(!isModalVisibleRef.current);
202+
clearTimeout(timeoutHack);
203+
}, 10);
204+
setIsShown(!isShown);
205+
setHasToggledBefore(true);
206+
}
93207

94208
function handleKeyDown(event) {
95-
if (options === undefined && event.keyCode === 27) {
96-
toggle();
97-
}
98-
if (options !== undefined && options.keyboardClose === true && event.keyCode === 27) {
99-
toggle();
100-
}
101-
if (options !== undefined && options.onEscapeKeyDown) {
209+
if (event.keyCode !== 27 || options && options.keyboardClose === false) return;
210+
toggle();
211+
if (options && options.onEscapeKeyDown) {
102212
options.onEscapeKeyDown();
103-
toggle();
104213
}
105214
}
106215

107216
(0, _react.useEffect)(function () {
108217
if (isShown) {
109-
options && options.onShow && options.onShow();
218+
if (options && options.onShow) {
219+
options.onShow();
220+
}
110221
document.addEventListener('keydown', handleKeyDown);
111222
document.body.classList.add('modali-open');
112223
}
113224
if (!isShown && hasToggledBefore) {
114-
options && options.onHide && options.onHide();
225+
if (options && options.onHide) {
226+
options.onHide();
227+
}
115228
document.body.classList.remove('modali-open');
116229
}
117230
return function () {
118231
return document.removeEventListener('keydown', handleKeyDown);
119232
};
120233
}, [isShown]);
121234

122-
function toggle() {
123-
setIsShown(!isShown);
124-
setHasToggledBefore(true);
125-
}
126-
127235
return [{
128236
isShown: isShown,
237+
isModalVisible: isModalVisible,
129238
hide: toggle,
130239
options: options
131240
}, toggle];

‎examples/src/BasicExample.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
33
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
4-
import { basicExample } from "./snippets/snippets";
4+
import { basicExample } from './snippets/snippets';
55

66
import Modali, { useModali } from '../../src';
7-
import Button from "./Button";
7+
import Button from './Button';
88

99
const BasicExample = () => {
1010
const [exampleModal, toggleExampleModal] = useModali();
@@ -21,18 +21,18 @@ const BasicExample = () => {
2121
</Button>
2222
</div>
2323
<div className="col-12">
24-
<SyntaxHighlighter language='jsx' style={okaidia}>{basicExample}</SyntaxHighlighter>
24+
<SyntaxHighlighter language="jsx" style={okaidia}>{basicExample}</SyntaxHighlighter>
2525
</div>
2626
<Modali.Modal {...exampleModal}>
2727
<div className="row my-3">
2828
<div className="col-12 d-flex justify-content-center">
2929
<p>
30-
Hi, I'm a Modali! 👋
30+
Hi, I'm a Modal232i! 👋
3131
</p>
3232
</div>
3333
</div>
3434
</Modali.Modal>
3535
</div>
36-
)
36+
);
3737
};
3838
export default BasicExample;

‎examples/src/Button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const ButtonStyle = {
1111
};
1212

1313
const Button = ({ handleClick, children }) => (
14-
<button style={ButtonStyle} onClick={handleClick}>
14+
<button type="button" style={ButtonStyle} onClick={handleClick}>
1515
{children}
1616
</button>
1717
);

‎examples/src/CompleteExample.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
33
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
4-
import { completeExampleSnippet } from "./snippets/snippets";
4+
import { completeExampleSnippet } from './snippets/snippets';
55

66
import Modali, { useModali } from '../../src';
7-
import Button from "./Button";
7+
import Button from './Button';
88

99
const CompleteExample = () => {
1010
const [completeExample, toggleCompleteModal] = useModali({
@@ -37,10 +37,10 @@ const CompleteExample = () => {
3737
</Button>
3838
</div>
3939
<div className="col-12">
40-
<SyntaxHighlighter language='jsx' style={okaidia}>{completeExampleSnippet}</SyntaxHighlighter>
40+
<SyntaxHighlighter language="jsx" style={okaidia}>{completeExampleSnippet}</SyntaxHighlighter>
4141
</div>
4242
<Modali.Modal {...completeExample} />
4343
</div>
44-
)
44+
);
4545
};
4646
export default CompleteExample;

‎examples/src/Installation.js‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,47 @@
11
import React from 'react';
22
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
33
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
4-
import { installation, usage } from "./snippets/snippets";
4+
import { installation, usage } from './snippets/snippets';
55

6-
const Installation = () => {
7-
return (
8-
<React.Fragment>
9-
<div className="row mt-5">
10-
<div className="col-12">
11-
<h4>
6+
const Installation = () => (
7+
<React.Fragment>
8+
<div className="row mt-5">
9+
<div className="col-12">
10+
<h4>
1211
Installation
13-
</h4>
14-
</div>
15-
<div className="col-12 mt-2">
16-
<p>
12+
</h4>
13+
</div>
14+
<div className="col-12 mt-2">
15+
<p>
1716
Install Modali in your project using npm:
18-
</p>
19-
</div>
20-
<div className="col-12">
21-
<SyntaxHighlighter language='javascript' style={okaidia}>{installation}</SyntaxHighlighter>
22-
</div>
23-
<div className="col-12 mt-2">
24-
<p>
17+
</p>
18+
</div>
19+
<div className="col-12">
20+
<SyntaxHighlighter language="javascript" style={okaidia}>{installation}</SyntaxHighlighter>
21+
</div>
22+
<div className="col-12 mt-2">
23+
<p>
2524
⚠️ Modali uses React Hooks, therefore you are required to use React v16.8 or above when using Modali.
26-
</p>
27-
</div>
25+
</p>
2826
</div>
29-
<div className="row mt-2">
30-
<div className="col-12">
31-
<h4>
27+
</div>
28+
<div className="row mt-2">
29+
<div className="col-12">
30+
<h4>
3231
Usage
33-
</h4>
34-
</div>
35-
<div className="col-12 mt-2">
36-
<p>
32+
</h4>
33+
</div>
34+
<div className="col-12 mt-2">
35+
<p>
3736
Import the Modali component and useModali Hook in your React components, like so:
38-
</p>
39-
</div>
40-
<div className="col-12">
41-
<SyntaxHighlighter language='javascript' style={okaidia}>{usage}</SyntaxHighlighter>
37+
</p>
38+
</div>
39+
<div className="col-12">
40+
<SyntaxHighlighter language="javascript" style={okaidia}>{usage}</SyntaxHighlighter>
4241
After you've imported the Modali component and useModali Hook, you're ready to start using Modali inside your components! 🎉
43-
</div>
4442
</div>
45-
</React.Fragment>
46-
)
47-
};
43+
</div>
44+
</React.Fragment>
45+
);
4846

4947
export default Installation;

0 commit comments

Comments
 (0)