cleanup

7 files changed, 79 insertions, 60 deletions

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index b7cca7fa4..90eda21e7 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -3,7 +3,6 @@ import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import CSS from 'csstype';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import Loader from 'react-loader';
@@ -37,7 +36,7 @@ const styles = (theme: Theme) => ({
     border: 'none',
     display: 'inline-flex',
     position: 'relative' as CSS.PositionProperty,
-    transition: 'background .5s',
+    transition: 'background .5s, opacity 0.3s',
     textAlign: 'center' as CSS.TextAlignProperty,
     outline: 'none',
     alignItems: 'center',
@@ -45,6 +44,14 @@ const styles = (theme: Theme) => ({
     width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+    '&:active': {
+      opacity: 0.5,
+      transition: 'none',
+    },
   },
   label: {
     margin: '10px 20px',
@@ -126,7 +133,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class ButtonComponent extends Component<IProps> {
   public static defaultProps = {
     type: 'button',
@@ -237,6 +243,7 @@ class ButtonComponent extends Component<IProps> {
             [`${className}`]: className,
           })}
           disabled={disabled}
+          data-type="franz-button"
         >
           {content}
         </button>
@@ -253,6 +260,7 @@ class ButtonComponent extends Component<IProps> {
             [`${className}`]: className,
           })}
           rel={target === '_blank' ? 'noopener' : ''}
+          data-type="franz-button"
         >
           {content}
         </a>
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index 9d26e086d..a487bb281 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -1,6 +1,4 @@
-import classnames from 'classnames';
 import { Classes } from 'jss';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
@@ -11,7 +9,6 @@ interface IProps {
   message: string;
 }
 
-@observer
 class ErrorComponent extends Component<IProps> {
   render() {
     const {
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index cd6da3778..de7e7848e 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -1,7 +1,6 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectSheet from 'react-jss';
 
@@ -33,7 +32,6 @@ interface IState {
   passwordScore: number;
 }
 
-@observer
 class InputComponent extends Component<IProps, IState> {
   public static defaultProps = {
     focus: false,
@@ -114,6 +112,7 @@ class InputComponent extends Component<IProps, IState> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-input"
       >
         <Label
           title={label}
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index ee3268b16..36fcfbedf 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -1,6 +1,5 @@
 import classnames from 'classnames';
 import { Classes } from 'jss';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
@@ -12,7 +11,6 @@ interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement>
   classes: Classes;
 }
 
-@observer
 class LabelComponent extends Component<ILabel> {
   static defaultProps = {
     showLabel: true,
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 58bb7317a..4a9e3c56e 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -2,8 +2,6 @@ import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import debounce from 'lodash/debounce';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
@@ -86,7 +84,8 @@ const styles = (theme: Theme) => ({
     },
   },
   selected: {
-    fontWeight: 'bold',
+    background: theme.selectOptionItemActive,
+    color: theme.selectOptionItemActiveColor,
   },
   toggle: {
     marginLeft: 'auto',
@@ -133,7 +132,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class SelectComponent extends Component<IProps> {
   public static defaultProps = {
     onChange: () => {},
@@ -166,7 +164,7 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
     const {
       open,
     } = this.state;
@@ -179,41 +177,6 @@ class SelectComponent extends Component<IProps> {
   }
 
   componentDidMount() {
-    if (this.componentRef && this.componentRef.current) {
-      this.keyListener = this.componentRef.current.addEventListener('keydown', debounce((e) => {
-        const {
-          selected,
-          open,
-          options,
-        } = this.state;
-
-        if (!open) return;
-
-        if (e.keyCode === 38 && selected > 0) {
-          this.setState((state: IState) => ({
-            selected: state.selected - 1,
-          }));
-        } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
-          this.setState((state: IState) => ({
-            selected: state.selected + 1,
-          }));
-        } else if (e.keyCode === 13) {
-          this.select(Object.keys(options!)[selected]);
-        }
-
-        if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
-          const containerTopOffset = this.scrollContainerRef.current.offsetTop;
-          const optionTopOffset = this.activeOptionRef.current.offsetTop;
-
-          const topOffset = optionTopOffset - containerTopOffset;
-
-          this.scrollContainerRef.current.scrollTop = topOffset - 35;
-        }
-      },                                                                                10, {
-        leading: true,
-      }));
-    }
-
     if (this.inputRef && this.inputRef.current) {
       const {
         data,
@@ -223,10 +186,14 @@ class SelectComponent extends Component<IProps> {
         Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
       }
     }
+
+    window.addEventListener('keydown', this.arrowKeysHandler.bind(this), false);
   }
 
   componentWillMount() {
-    const { value } = this.props;
+    const {
+      value,
+    } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
       this.componentRef.current.removeEventListener('keydown', this.keyListener);
@@ -241,6 +208,10 @@ class SelectComponent extends Component<IProps> {
     this.setFilter();
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
+  }
+
   setFilter(needle: string = '') {
     const { options } = this.props;
 
@@ -277,6 +248,49 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
+  arrowKeysHandler(e: KeyboardEvent) {
+    const {
+      selected,
+      open,
+      options,
+    } = this.state;
+
+    if (!open) return;
+
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      e.preventDefault();
+    }
+
+    if (this.componentRef && this.componentRef.current) {
+      if (e.keyCode === 38 && selected > 0) {
+        this.setState((state: IState) => ({
+          selected: state.selected - 1,
+        }));
+      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+        this.setState((state: IState) => ({
+          selected: state.selected + 1,
+        }));
+      } else if (e.keyCode === 13) {
+        this.select(Object.keys(options!)[selected]);
+      }
+
+      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+        const containerTopOffset = this.scrollContainerRef.current.offsetTop;
+        const optionTopOffset = this.activeOptionRef.current.offsetTop;
+
+        const topOffset = optionTopOffset - containerTopOffset;
+
+        this.scrollContainerRef.current.scrollTop = topOffset - 35;
+      }
+    }
+
+    switch (e.keyCode){
+      case 37: case 39: case 38:  case 40: // Arrow keys
+      case 32:  break; // Space
+      default: break; // do not block other keys
+    }
+  }
+
   render() {
     const {
       actionText,
@@ -314,6 +328,7 @@ class SelectComponent extends Component<IProps> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-select"
       >
         <Label
           title={label}
@@ -366,7 +381,7 @@ class SelectComponent extends Component<IProps> {
                   <button
                     type="button"
                     className={classes.clearNeedle}
-                    onClick={() => this.setState({ needle: '', selected: -1 })}
+                    onClick={() => this.setFilter()}
                   >
                     <Icon
                       path={mdiCloseCircle}
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index 4f446ab1a..6487f1d07 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,7 +1,6 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import CSS from 'csstype';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
@@ -55,7 +54,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class ToggleComponent extends Component<IProps> {
   public static defaultProps = {
     onChange: () => {},
@@ -81,6 +79,7 @@ class ToggleComponent extends Component<IProps> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-toggle"
       >
         <Label
           title={label}
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index 87e2c6513..d9c61381d 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
@@ -9,22 +8,26 @@ import styles from './styles';
 interface IProps extends IWithStyle {
   children: React.ReactNode;
   className?: string;
+  identifier: string;
 }
 
-@observer
 class WrapperComponent extends Component<IProps> {
   render() {
     const {
       children,
       classes,
       className,
+      identifier,
     } = this.props;
 
     return (
-      <div className={classnames({
-        [`${classes.container}`]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [`${classes.container}`]: true,
+          [`${className}`]: className,
+        })}
+        data-type={identifier}
+      >
         {children}
       </div>
     );