2 files changed, 114 insertions, 2 deletions

diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
new file mode 100644
index 000000000..9359a3c6c
--- /dev/null
+++ b/src/components/ui/FAB.js
@@ -0,0 +1,72 @@
+/**
+ * Floating Action Button (FAB)
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, inject } from 'mobx-react';
+import classnames from 'classnames';
+
+export default @inject('stores') @observer class Button extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    type: PropTypes.string,
+    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',
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const {
+      className,
+      disabled,
+      onClick,
+      type,
+      children,
+      htmlForm,
+    } = this.props;
+
+    const buttonProps = {
+      className: classnames({
+        ferdi__fab: true,
+        [`${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`
+      <button {...buttonProps} type="button">
+        {children}
+      </button>
+    );
+  }
+}
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index da52243ca..b4511433c 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -10,22 +10,60 @@ export default @observer class Select extends Component {
     className: PropTypes.string,
     showLabel: PropTypes.bool,
     disabled: PropTypes.bool,
+    multiple: PropTypes.bool,
   };
 
   static defaultProps = {
     className: null,
     showLabel: true,
     disabled: false,
+    multiple: false,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.element = React.createRef();
+  }
+
+  multipleChange() {
+    const element = this.element.current;
+
+    const result = [];
+    const options = element && element.options;
+
+    for (const option of options) {
+      if (option.selected) {
+        result.push(option.value || option.text);
+      }
+    }
+
+    const { field } = this.props;
+    field.value = result;
+  }
+
   render() {
     const {
       field,
       className,
       showLabel,
       disabled,
+      multiple,
     } = this.props;
 
+    let selected = field.value;
+
+    if (multiple) {
+      if (typeof field.value === 'string' && field.value.substr(0, 1) === '[') {
+        // Value is JSON encoded
+        selected = JSON.parse(field.value);
+      } else if (typeof field.value === 'object') {
+        selected = field.value;
+      } else {
+        selected = [field.value];
+      }
+    }
+
     return (
       <div
         className={classnames({
@@ -44,11 +82,13 @@ export default @observer class Select extends Component {
           </label>
         )}
         <select
-          onChange={field.onChange}
+          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
           id={field.id}
-          defaultValue={field.value}
+          defaultValue={selected}
           className="franz-form__select"
           disabled={field.disabled || disabled}
+          multiple={multiple}
+          ref={this.element}
         >
           {field.options.map(type => (
             <option