Merge pull request #3 from AmberEngine/select-modal

Select modal

src/components/SelectModal/SelectModal.scss

@@ -0,0 +1,9 @@
+.formWrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.submitButton {
+  align-self: center;
+  justify-self: center;
+}

src/components/SelectModal/index.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+
+import { Form, FormGroup, Fields, Submit } from '../Form';
+import Modal from '../Modal';
+import { required } from '../Form/Validation';
+
+import stylesheet from './SelectModal.scss';
+
+class SelectModal extends Component {
+  render() {
+    const {
+      onSubmit,
+      options,
+      toggleModal,
+      visible,
+      label,
+      title,
+      name
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={visible}
+        onClose={toggleModal}
+        label={label}
+        className={stylesheet.modalContainer}
+      >
+        <Form
+          onSubmit={onSubmit}
+          className={stylesheet.formWrapper}
+        >
+          <FormGroup
+            title={title}
+            name={name}
+            className="form-control"
+            validate={[required]}
+            FieldComponent={Fields.ValidatedDropDownField}
+            options={options}
+          />
+          <Submit
+            type="submit"
+            className={stylesheet.submitButton}
+          >
+            SUBMIT
+          </Submit>
+        </Form>
+      </Modal>
+    );
+  }
+}
+
+export default SelectModal;

src/components/index.js

@@ -9,6 +9,7 @@ export IconButton from './IconButton';
 export Modal from './Modal';
 export Pagination from './Pagination';
 export RoundRectangle from './RoundRectangle';
+export SelectModal from './SelectModal';
 export SquareSelect from './SquareSelect';
 export * as Table from './Table';