diff --git a/frontend/package.json b/frontend/package.json index 7120cc5d..a54bf67d 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index 2771f859..4a49bf62 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -1,107 +1,109 @@ 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 { - // people = [], - handleToggle, - // platformMembers - } = props; +const Invite = React.createClass({ - // const InputStyle = { - // float: 'left', - // width: '75%' - // }; + propTypes: { + // UI: React.PropTypes.object, + handleToggle: React.PropTypes.func, + // people: React.PropTypes.array, + platformMembers: React.PropTypes.array, + }, - const AddButtonStyle = { - float: 'right', - width: '20%' - }; + getInitialState() { + return { + selectValue: '', + members: [] + }; + }, - const styleInline = { - display: 'inline-block' - }; + getFormattedPlatformMembers() { + return this.props.platformMembers.map((m) => ({ + value: m.email, + label: m.name + })); + }, - // const selectData = [ - // { - // value: 'one', - // label: 'One' - // }, - // { - // value: 'two', - // label: 'Two' - // }, - // { - // value: 'three', - // label: 'Three' - // }, - // { - // value: 'four', - // label: 'Four' - // }, - // { - // value: 'five', - // label: 'Five' - // }, - // { - // value: 'six', - // label: 'Six' - // } - // ]; + render() { - return ( - - -

Search for a person by name or email or enter an email address - to invite someone new.

+ const { + handleToggle, + // UI = {}, + // people = [], + } = this.props; - - - {/*TODO: Fix why there are issues with webpack and nodemodules*/} - {/**/} - - - + const InputStyle = { + float: 'left', + width: '75%' + }; - + const AddButtonStyle = { + float: 'right', + width: '20%' + }; - -
-
- ); -}; + const styleInline = { + display: 'inline-block' + }; -Invite.propTypes = { - handleToggle: React.PropTypes.func, - // orgUI: React.PropTypes.obj, - // people: React.PropTypes.arrayOf(PropTypes.person) -}; + const selectData = this.getFormattedPlatformMembers(); + + const handleSelectChange = (v) => { + this.setState({ + selectValue: v + }); + }; + + return ( + + +

Search for a person by name or email or enter an email address + to invite someone new.

+ + + + {/*TODO: Fix why there are issues with webpack and nodemodules*/} +