Remove duplicated Button.js component (#176)

2 files changed, 11 insertions, 97 deletions

diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
deleted file mode 100644
index 882b39e69..000000000
--- a/src/components/ui/Button.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, inject } from 'mobx-react';
-import Loader from 'react-loader';
-import classnames from 'classnames';
-
-// Can this file be merged into the './/button/index.tsx' file?
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    buttonType: PropTypes.string,
-    loaded: PropTypes.bool,
-    htmlForm: PropTypes.string,
-    stores: PropTypes.shape({
-      settings: PropTypes.shape({
-        app: PropTypes.shape({
-          accentColor: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  };
-
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    buttonType: '',
-    loaded: true,
-    htmlForm: '',
-  };
-
-  render() {
-    const {
-      label,
-      className,
-      disabled,
-      onClick,
-      type,
-      buttonType,
-      loaded,
-      htmlForm,
-    } = this.props;
-
-    const buttonProps = {
-      className: classnames({
-        'franz-form__button': true,
-        [`franz-form__button--${buttonType}`]: buttonType,
-        [`${className}`]: className,
-      }),
-      type,
-    };
-
-    if (disabled) {
-      buttonProps.disabled = true;
-    }
-
-    if (onClick) {
-      buttonProps.onClick = onClick;
-    }
-
-    if (htmlForm) {
-      buttonProps.form = htmlForm;
-    }
-
-    return (
-      // disabling rule as button has type defined in `buttonProps`
-      /* eslint-disable react/button-has-type */
-      <button {...buttonProps}>
-        <Loader
-          loaded={loaded}
-          lines={10}
-          scale={0.4}
-          color={
-            buttonType !== 'secondary'
-              ? '#FFF'
-              : this.props.stores.settings.app.accentColor
-          }
-          component="span"
-        />
-        {label}
-      </button>
-      /* eslint-enable react/button-has-type */
-    );
-  }
-}
-
-export default inject('stores')(observer(Button));
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 11369dcbd..9c64e909a 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -30,12 +30,17 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> {
   icon?: string;
   href?: string;
   target?: string;
+  htmlForm?: string;
 }
 
 let buttonTransition: string = 'none';
 let loaderContainerTransition: string = 'none';
 
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+if (
+  typeof window !== 'undefined' &&
+  window &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)')
+) {
   buttonTransition = 'background .5s, opacity 0.3s';
   loaderContainerTransition = 'all 0.3s';
 }
@@ -187,10 +192,10 @@ class ButtonComponent extends Component<IProps> {
       icon,
       href,
       target,
+      htmlForm,
     } = this.props;
 
     const { busy } = this.state;
-
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
@@ -235,6 +240,7 @@ class ButtonComponent extends Component<IProps> {
         })}
         disabled={disabled}
         data-type="franz-button"
+        {...(htmlForm && { form: htmlForm })}
       >
         {content}
       </button>
@@ -259,6 +265,6 @@ class ButtonComponent extends Component<IProps> {
   }
 }
 
-export const Button = injectStyle(styles, { injectTheme: true })(
-  ButtonComponent,
-);
+const Button = injectStyle(styles, { injectTheme: true })(ButtonComponent);
+
+export default Button;