working on custom dropdown and pulling in platform members as datas

frontend/package.json

@@ -43,6 +43,7 @@
     "react-redux": "^5.0.2",
     "react-router": "4.0.0-alpha.6",
     "reduce-reducers": "^0.1.2",
+    "react-select": "^1.0.0-rc.2",
     "redux": "^3.6.0",
     "redux-actions": "^1.2.0",
     "redux-batched-actions": "^0.1.5",

frontend/src/components/people-list/invite.js

@@ -1,23 +1,48 @@
 const React = require('react');
 
-// const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
 const Column = require('@ui/components/column');
 const Button = require('@ui/components/button');
-// const SelectCustom = require('@ui/components/select-custom');
 
-const Invite = (props) => {
+// TOOD: Require from UI Components - causes issue ATM.
+const Select = require('react-select');
+require('react-select/dist/react-select.css');
+
+const Invite = React.createClass({
+
+  propTypes: {
+    // UI: React.PropTypes.object,
+    handleToggle: React.PropTypes.func,
+    // people: React.PropTypes.array,
+    platformMembers: React.PropTypes.array,
+  },
+
+  getInitialState() {
+    return {
+      selectValue: '',
+      members: []
+    };
+  },
+
+  getFormattedPlatformMembers() {
+    return this.props.platformMembers.map((m) => ({
+      value: m.email,
+      label: m.name
+    }));
+  },
+
+  render() {
 
     const {
-    // people = [],
       handleToggle,
-    // platformMembers
+      // UI = {},
-  } = props;
+      // people = [],
+    } = this.props;
 
-  // const InputStyle = {
+    const InputStyle = {
-  //   float: 'left',
+      float: 'left',
-  //   width: '75%'
+      width: '75%'
-  // };
+    };
 
     const AddButtonStyle = {
       float: 'right',
@@ -28,32 +53,13 @@ const Invite = (props) => {
       display: 'inline-block'
     };
 
-  // const selectData = [
+    const selectData = this.getFormattedPlatformMembers();
-  //   {
+
-  //     value: 'one',
+    const handleSelectChange = (v) => {
-  //     label: 'One'
+      this.setState({
-  //   },
+        selectValue: v
-  //   {
+      });
-  //     value: 'two',
+    };
-  //     label: 'Two'
-  //   },
-  //   {
-  //     value: 'three',
-  //     label: 'Three'
-  //   },
-  //   {
-  //     value: 'four',
-  //     label: 'Four'
-  //   },
-  //   {
-  //     value: 'five',
-  //     label: 'Five'
-  //   },
-  //   {
-  //     value: 'six',
-  //     label: 'Six'
-  //   }
-  // ];
 
     return (
       <Row>
@@ -64,13 +70,14 @@ const Invite = (props) => {
           <Row>
             <Column xs={12}>
               {/*TODO: Fix why there are issues with webpack and nodemodules*/}
-            {/*<SelectCustom*/}
+              <Select
-            {/*multi*/}
+
-            {/*onChange={function noop() {}}*/}
+                onChange={handleSelectChange}
-            {/*options={selectData}*/}
+                options={selectData}
-            {/*placeholder="Enter an email address or password"*/}
+                placeholder="Enter an email address or password"
-            {/*style={InputStyle}*/}
+                style={InputStyle}
-            {/*/>*/}
+                value={this.state.selectValue}
+              />
               <Button
                 secondary
                 style={AddButtonStyle}
@@ -96,12 +103,7 @@ const Invite = (props) => {
         </Column>
       </Row>
     );
-};
+  },
-
+});
-Invite.propTypes = {
-  handleToggle: React.PropTypes.func,
-  // orgUI: React.PropTypes.obj,
-  // people: React.PropTypes.arrayOf(PropTypes.person)
-};
 
 module.exports = Invite;

frontend/src/mock-state.json

@@ -535,6 +535,9 @@
   },
   "projects": {
     "ui": {
+      "invite_toggled": true,
+      "member_status_tooltip": false,
+      "member_role_tooltip": false,
       "sections": [
         "services",
         "instances",