rewrite webpack config

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["transform-class-properties", "ramda"]
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.php]
+indent_size = 4

.gitignore

@@ -0,0 +1,17 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+lib
+bundle.js

.npmignore

@@ -0,0 +1,6 @@
+src
+examples
+.babelrc
+.editorconfig
+webpack.config.js
+bundle.js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Nghiệp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,215 @@
+# REACT-REDUX-MODAL-FLEX
+
+Make easy a modal/popup with Redux.
+
+[![NPM version](https://img.shields.io/npm/v/react-redux-modal-flex.svg)](https://www.npmjs.com/package/react-redux-modal-flex)
+[![NPM monthly download](https://img.shields.io/npm/dm/react-redux-modal-flex.svg)](https://www.npmjs.com/package/react-redux-modal-flex)
+
+## Demo
+
+[http://react-redux-modal-flex.surge.sh/](http://react-redux-modal-flex.surge.sh/)
+
+## Features
+
+* Responsive
+* Easy custom `animation` effect by [Animate.css](https://daneden.github.io/animate.css/)
+
+## Installation
+
+To install the stable version you can use:
+
+```sh
+$ yarn add react-redux-modal-flex
+```
+
+## Example
+
+### Step 1:
+
+`rootReducer.js`
+
+```js
+import { combineReducers } from 'redux';
+import { reducer as modal } from 'react-redux-modal-flex';
+import todos from './todos';
+
+export default combineReducers({
+  todos,
+  modal: modal({
+    classContent: 'modal-content',
+    animation: 'zoomIn',
+    duration: 200,
+    mask: true,
+    /* initial state, see API reference */
+  }),
+});
+```
+
+### Step 2:
+
+`App.js`
+
+```jsx
+import Modal from 'react-redux-modal-flex';
+
+class App extends React.Component {
+  render() {
+    return (
+      <Router>
+        <div className="App">
+          <Switch>
+            <Route path="/" exact component={Home} />
+            <Route path="/auth" component={Auth} />
+          </Switch>
+          <Modal />
+        </div>
+      </Router>
+    );
+  }
+}
+```
+
+### Step 3:
+
+Any `Container` you want to use
+
+```jsx
+import { connect } from 'react-redux';
+import { actions as ModalActions } from 'react-redux-modal-flex';
+
+class LoginModal extends React.Component {
+  render() {
+    return (
+      <form>
+        <div>
+          <label>Username</label>
+          <input type="text" name="username" />
+        </div>
+        <div>
+          <label>Password</label>
+          <input type="password" name="password" />
+        </div>
+      </form>
+    );
+  }
+}
+
+class Auth extends React.Component {
+  render() {
+    return (
+      <div>
+        <h3>Auth</h3>
+        <button
+          onClick={() =>
+            this.props.toggleModal({
+              component: LoginModal,
+              ok: {
+                text: 'Login',
+                action: () => alert('submit form'),
+              },
+            })
+          }
+        >
+          Open modal login
+        </button>
+      </div>
+    );
+  }
+}
+
+export default connect(null, { toggleModal: ModalActions.toggleModal })(Auth);
+```
+
+## API
+
+* initState: you can overwrite default initial state
+
+```js
+const initState = {
+  classContent: 'modal-content',
+  animation: 'zoomIn',
+  duration: 300,
+  mask: true,
+  closeByMask: true,
+  component: ModalDefault,
+  title: 'This is a title',
+  closeBtn: true,
+  textCancel: 'Cancel',
+  ok: {
+    text: 'OK',
+    classOk: 'modal-btn-ok',
+    disabled: false,
+    action: () => console.log('OK clicked'),
+  },
+};
+```
+
+* API
+
+```js
+import Modal, {
+  reducer as modal,
+  actions as ModalActions,
+  selectors as ModalSelectors,
+} from 'react-redux-modal-flex';
+const { toggleModal, modifyOkModal } = ModalActions;
+```
+
+* `<Modal />` is component, using in our `App.js`
+* `reducer` using in our `rootReducer.js` you can custom default initial state
+
+```js
+export default combineReducers({
+  todos,
+  modal: modal({
+    textCancel: 'Close',
+    title: 'My default title',
+  }),
+});
+```
+
+* `toggleModal` and `modifyOkModal` is action
+
+## Usage
+
+* Open Modal by action `toggleModal(options)`
+  * `options`: is object and look like the `initState` above
+  * Example:
+
+```jsx
+...
+render() {
+  return (
+    <button onClick={() => this.props.toggleModal({
+      textCancel: 'Hide',
+      component: () => <div>content modal</div>,
+      title: 'My title',
+      ok: {
+        text: 'Login',
+        action: () => alert('click OK')
+      }
+    })}>Click me</button>
+  );
+}
+...
+```
+
+* Close Modal `toggleModal(false)` or any value excepted object
+* Modify button `OK`: `modifyOkModal(options)` usage like `toggleModal`
+  * Example:
+
+```js
+onClick={() => this.props.modifyOkModal({
+  text: 'Sign up',
+  disabled: true
+})}
+```
+
+* Hide `Header` if the `title` is null or empty
+* Hide `Cancel` button if the `textCancel` is null
+* Hide `Ok` button if `ok: {text: null}`
+* Hide Footer if the `Cancel` and `Ok` is hidden
+
+## License
+
+MIT © [Nghiệp](http://nghiepit.pro)

examples/App.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { pick } from 'ramda';
+
+import { actions as ModalActions } from '../src';
+
+import ModalSample from './ModalSample';
+
+class App extends React.Component {
+  render() {
+    return (
+      <div className="App">
+        <h1>REACT-REDUX-MODAL-FLEX</h1>
+        <h4 className="text-center">Make easy a modal/popup with Redux</h4>
+        <div className="buttons">
+          <button
+            onClick={() =>
+              this.props.toggleModal({
+                component: ModalSample,
+                ok: {
+                  action: () => alert('Zoom'),
+                },
+              })
+            }
+          >
+            Zoom
+          </button>
+
+          <button
+            onClick={() =>
+              this.props.toggleModal({
+                component: ModalSample,
+                animation: 'fadeIn',
+                ok: {
+                  action: () => alert('Fade'),
+                },
+              })
+            }
+          >
+            Fade
+          </button>
+
+          <button
+            onClick={() =>
+              this.props.toggleModal({
+                component: ModalSample,
+                animation: 'bounceIn',
+                duration: 750,
+                ok: {
+                  action: () => alert('Bounce'),
+                },
+              })
+            }
+          >
+            Bounce
+          </button>
+        </div>
+
+        <div className="text-center">
+          More animations from{' '}
+          <a href="https://daneden.github.io/animate.css/" target="_blank">
+            Animate.css
+          </a>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(null, pick(['toggleModal'], ModalActions))(App);

examples/Fork.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export default () => (
+  <a
+    href="https://github.com/tronghiep92/react-redux-modal-flex"
+    style={{
+      position: 'fixed',
+      top: 0,
+      right: 0,
+      border: 0,
+      right: 0,
+    }}
+  >
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style={{
+        fill: '#fff',
+        color: '#151513',
+      }}
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="#03a9f4"
+        style={{
+          transformOrigin: '130px 106px',
+        }}
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="#03a9f4"
+      />
+    </svg>
+  </a>
+);