prettier

README.md

@@ -28,7 +28,13 @@ import todos from './todos';
 
 export default combineReducers({
   todos,
-  modal: modal({/* default initial state, see below in API */})
+  modal: modal({
+    classContent: 'modal-content',
+    animation: 'zoomIn',
+    duration: 200,
+    mask: true,
+    /* default initial state, see below in API */
+  })
 });
 ```
 

package.json

@@ -1,7 +1,8 @@
 {
   "name": "react-redux-modal-flex",
-  "version": "0.1.9",
-  "description": "Accessible modal dialog component for React Redux, Easy to install and use with Redux",
+  "version": "0.1.10",
+  "description":
+    "Accessible modal dialog component for React Redux, Easy to install and use with Redux",
   "keywords": [
     "react",
     "redux",
@@ -77,9 +78,11 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
-    "lib": "cross-env NODE_ENV=production ./node_modules/.bin/webpack --config config/webpack.lib.config.js --progress --profile",
+    "lib":
+      "cross-env NODE_ENV=production ./node_modules/.bin/webpack --config config/webpack.lib.config.js --progress --profile",
     "prepare": "npm run lib",
-    "surge": "npm run build && cp build/index.html build/200.html && surge build --domain react-redux-modal-flex.surge.sh"
+    "surge":
+      "npm run build && cp build/index.html build/200.html && surge build --domain react-redux-modal-flex.surge.sh"
   },
   "jest": {
     "collectCoverageFrom": ["src/**/*.{js,jsx}"],

src/components/ModalSample/index.jsx

@@ -13,11 +13,7 @@ class ModalSample extends React.Component {
   };
 
   render() {
-    return (
-      <div style={this.state.style}>
-        {this.props.content}
-      </div>
-    );
+    return <div style={this.state.style}>{this.props.content}</div>;
   }
 }
 

src/package/Modal.jsx

@@ -62,11 +62,12 @@ class Modal extends React.Component {
           {...this.props}
         >
           {show &&
-            is(Function, Component) &&
+          is(Function, Component) && (
             <Component
               toggleModal={toggleModal}
               modifyOkModal={modifyOkModal}
-            />}
+            />
+          )}
         </Content>
       </Wrapper>
     );

src/package/components/Content/components/Footer/components/Button/index.jsx

@@ -9,7 +9,7 @@ const Wrapper = styled.span`
   cursor: pointer;
   padding: 8px 12px;
   text-transform: uppercase;
-  transition: all .2s;
+  transition: all 0.2s;
   &:hover {
     background: #f2fbff;
     color: #6d7379;
@@ -23,13 +23,14 @@ const Wrapper = styled.span`
   }
 `;
 
-const Button = ({ children, isDisabled, onClick, primary, className }) =>
+const Button = ({ children, isDisabled, onClick, primary, className }) => (
   <Wrapper
     className={cls(className, { isDisabled, primary })}
     onClick={onClick}
   >
     {children}
-  </Wrapper>;
+  </Wrapper>
+);
 
 Button.propTypes = {
   children: PropTypes.node.isRequired,

src/package/components/Content/components/Footer/index.jsx

@@ -19,22 +19,23 @@ const Footer = ({
   toggleModal,
   disabledOk,
   actionOk,
-}) =>
+}) => (
   <Wrapper>
-    {textCancel &&
-      <Button onClick={() => toggleModal(false)}>
-        {textCancel}
-      </Button>}
-    {textOk &&
+    {textCancel && (
+      <Button onClick={() => toggleModal(false)}>{textCancel}</Button>
+    )}
+    {textOk && (
       <Button
         primary
         isDisabled={disabledOk}
         onClick={() => actionOk()}
         className={classOk}
       >
         {textOk}
-      </Button>}
-  </Wrapper>;
+      </Button>
+    )}
+  </Wrapper>
+);
 
 Footer.propTypes = {
   textOk: PropTypes.string.isRequired,

src/package/components/Content/components/Header/index.jsx

@@ -33,7 +33,7 @@ const Close = styled.span`
     margin-top: -1px;
     background: #999;
     border-radius: 100%;
-    transition: background .2s;
+    transition: background 0.2s;
   }
   &:before {
     transform: rotate(45deg);
@@ -47,13 +47,12 @@ const Close = styled.span`
   }
 `;
 
-const Header = ({ title, toggleModal, closeBtn }) =>
+const Header = ({ title, toggleModal, closeBtn }) => (
   <Wrapper>
-    <span>
-      {title}
-    </span>
+    <span>{title}</span>
     {closeBtn && <Close onClick={() => toggleModal(false)} />}
-  </Wrapper>;
+  </Wrapper>
+);
 
 Header.propTypes = {
   title: PropTypes.string.isRequired,

src/package/components/Content/components/Main/index.jsx

@@ -11,10 +11,7 @@ const Wrapper = styled.section`
   }
 `;
 
-const Main = ({ children }) =>
-  <Wrapper>
-    {children}
-  </Wrapper>;
+const Main = ({ children }) => <Wrapper>{children}</Wrapper>;
 
 Main.propTypes = {
   children: PropTypes.node,

src/package/components/Content/index.jsx

@@ -16,18 +16,18 @@ const Wrapper = styled.section`
   justify-content: center;
   align-items: center;
   background: ${props => (props.mask ? 'rgba(0, 0, 0, 0.5)' : 'transparent')};
-  animation-duration: .2s;
+  animation-duration: 0.2s;
   & > div.animated {
     display: flex;
     flex-direction: column;
     min-width: 320px;
     min-height: 200px;
-    max-width: 90vw;
+    max-width: 95vw;
     max-height: 80vh;
     background: #fff;
     border-radius: 2px;
     border: 1px solid #ebebee;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
     animation-duration: ${props => props.duration}ms;
   }
 `;
@@ -61,9 +61,7 @@ class Content extends React.Component {
       >
         <div className={className}>
           <Header {...this.props} />
-          <Main>
-            {children}
-          </Main>
+          <Main>{children}</Main>
           {isFooter && <Footer {...this.props} />}
         </div>
       </Wrapper>