Refactoring

minutemailer · May 8, 2018 · 8a83907 · 8a83907
1 parent 2668aae
commit 8a83907
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ The popup and overlay is now two separate layers to allow more customization. Se
 
 ## Install
 
-For now this component is only available as a CommonJS module. Install it with npm (`npm install react-popup --save`). The module exports a react component with static methods. Here's a simple example:
+Install it with npm (or yarn) (`npm install react-popup --save`). The component is API driven and means that you only render it once, on a global level. Here's a simple example:
 
 ```jsx
 import React from 'react';

diff --git a/__tests__/popup.test.js b/__tests__/popup.test.js
@@ -1,16 +1,16 @@
 import test from 'ava';
 import React from 'react';
+import { shallow } from 'enzyme';
 import Popup from '../src/Popup.react';
-import {shallow} from 'enzyme';
 
-test('Initialization works', t => {
+test('Initialization works', (t) => {
     const component = shallow(<Popup className="popup" />);
 
     t.true(component.hasClass('popup'));
     t.is(component.find('.popup__overlay').length, 1);
 });
 
-test('Display and hide popup', t => {
+test('Display and hide popup', (t) => {
     const component = shallow(<Popup className="popup" />);
 
     Popup.create({});

diff --git a/src/ActionButton.react.js b/src/ActionButton.react.js
@@ -1,7 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-class Component extends React.Component {
+class PopupAction extends React.Component {
+    static defaultProps = {
+        onClick: () => {},
+        className: 'btn',
+        url: null,
+    };
+
     handleClick() {
         return this.props.onClick();
     }
@@ -21,17 +27,11 @@ class Component extends React.Component {
     }
 }
 
-Component.displayName = 'PopupAction';
-Component.propTypes = {
+PopupAction.propTypes = {
     onClick: PropTypes.func,
     className: PropTypes.string,
     children: PropTypes.node.isRequired,
     url: PropTypes.string,
 };
-Component.defaultProps = {
-    onClick: () => {},
-    className: 'btn',
-    url: null,
-};
 
-export default Component;
+export default PopupAction;
diff --git a/src/Bem.js b/src/Bem.js
@@ -0,0 +1,18 @@
+const element = (el, base) => `${base}__${el}`;
+
+const modifier = (modifiers, base) => {
+    if (!modifiers) {
+        return null;
+    }
+
+    const finalClass = [];
+    const classNames = modifiers.split(' ');
+
+    classNames.forEach((singleClass) => {
+        finalClass.push(`${base}--${singleClass}`);
+    });
+
+    return finalClass.join(' ');
+};
+
+export { modifier, element };
diff --git a/src/ButtonsSpace.react.js b/src/ButtonsSpace.react.js
@@ -1,9 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ActionButton from './ActionButton.react';
-
-export default class ButtonsSpace extends React.Component {
-    static displayName = 'PopupFooterButtons';
+import { modifier } from './Bem';
+
+export default class PopupFooterButtons extends React.Component {
+    static defaultProps = {
+        buttons: null,
+        className: null,
+        onOk: () => {},
+        onClose: () => {},
+        buttonClick: () => {},
+        btnClass: null,
+        defaultOk: null,
+        defaultCancel: null,
+    };
 
     onOk() {
         return this.props.onOk();
@@ -17,25 +27,6 @@ export default class ButtonsSpace extends React.Component {
         return this.props.buttonClick(action);
     }
 
-    wildClass(className, base) {
-        if (!className) {
-            return null;
-        }
-
-        if (this.props.wildClasses) {
-            return className;
-        }
-
-        const finalClass = [];
-        const classNames = className.split(' ');
-
-        classNames.forEach((singleClass) => {
-            finalClass.push(`${base}--${singleClass}`);
-        });
-
-        return finalClass.join(' ');
-    }
-
     render() {
         if (!this.props.buttons) {
             return null;
@@ -54,7 +45,7 @@ export default class ButtonsSpace extends React.Component {
                     btns.push(<ActionButton className={`${this.props.btnClass} ${this.props.btnClass}--cancel`} key={key} onClick={() => this.onClose()}>{this.props.defaultCancel}</ActionButton>);
                 }
             } else {
-                const className = `${this.props.btnClass} ${this.wildClass(btn.className, this.props.btnClass)}`;
+                const className = `${this.props.btnClass} ${modifier(btn.className, this.props.btnClass)}`;
                 const btnComponent = (
                     <ActionButton
                         className={className}
@@ -78,7 +69,7 @@ export default class ButtonsSpace extends React.Component {
     }
 }
 
-ButtonsSpace.propTypes = {
+PopupFooterButtons.propTypes = {
     buttons: PropTypes.arrayOf(PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.object,
@@ -88,19 +79,6 @@ ButtonsSpace.propTypes = {
     onClose: PropTypes.func,
     buttonClick: PropTypes.func,
     btnClass: PropTypes.string,
-    wildClasses: PropTypes.bool,
     defaultOk: PropTypes.string,
     defaultCancel: PropTypes.string,
 };
-
-ButtonsSpace.defaultProps = {
-    buttons: null,
-    className: null,
-    onOk: () => {},
-    onClose: () => {},
-    buttonClick: () => {},
-    btnClass: null,
-    wildClasses: false,
-    defaultOk: null,
-    defaultCancel: null,
-};
diff --git a/src/Footer.react.js b/src/Footer.react.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ButtonsSpace from './ButtonsSpace.react';
 
-const Component = (props) => {
+const PopupFooter = (props) => {
     if (!props.buttons) {
         return null;
     }
@@ -14,7 +14,6 @@ const Component = (props) => {
                 onOk={props.onOk}
                 onClose={props.onClose}
                 className={`${props.className}__left-space`}
-                wildClasses={props.wildClasses}
                 btnClass={props.btnClass}
                 defaultOk={props.defaultOk}
                 defaultCancel={props.defaultCancel}
@@ -26,7 +25,6 @@ const Component = (props) => {
                 onOk={props.onOk}
                 onClose={props.onClose}
                 className={`${props.className}__right-space`}
-                wildClasses={props.wildClasses}
                 btnClass={props.btnClass}
                 defaultOk={props.defaultOk}
                 defaultCancel={props.defaultCancel}
@@ -36,8 +34,7 @@ const Component = (props) => {
     );
 };
 
-Component.displayName = 'PopupFooter';
-Component.propTypes = {
+PopupFooter.propTypes = {
     buttons: PropTypes.shape({
         left: PropTypes.arrayOf(PropTypes.oneOfType([
             PropTypes.string,
@@ -49,18 +46,17 @@ Component.propTypes = {
         ])),
     }),
     className: PropTypes.string,
-    wildClasses: PropTypes.bool,
     btnClass: PropTypes.string,
     onOk: PropTypes.func,
     onClose: PropTypes.func,
     buttonClick: PropTypes.func,
     defaultOk: PropTypes.string,
     defaultCancel: PropTypes.string,
 };
-Component.defaultProps = {
+
+PopupFooter.defaultProps = {
     buttons: null,
     className: null,
-    wildClasses: false,
     btnClass: null,
     defaultOk: null,
     defaultCancel: null,
@@ -69,4 +65,4 @@ Component.defaultProps = {
     onClose: () => {},
 };
 
-export default Component;
+export default PopupFooter;
diff --git a/src/Header.react.js b/src/Header.react.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Component = (props) => {
+const PopupHeader = (props) => {
     if (!props.title) {
         return null;
     }
@@ -13,14 +13,14 @@ const Component = (props) => {
     );
 };
 
-Component.displayName = 'PopupHeader';
-Component.defaultProps = {
+PopupHeader.defaultProps = {
     title: null,
     className: null,
 };
-Component.propTypes = {
+
+PopupHeader.propTypes = {
     title: PropTypes.string,
     className: PropTypes.string,
 };
 
-export default Component;
+export default PopupHeader;