mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
working on custom dropdown and pulling in platform members as datas
This commit is contained in:
parent
59b678a101
commit
023f7fbe04
@ -43,6 +43,7 @@
|
|||||||
"react-redux": "^5.0.2",
|
"react-redux": "^5.0.2",
|
||||||
"react-router": "4.0.0-alpha.6",
|
"react-router": "4.0.0-alpha.6",
|
||||||
"reduce-reducers": "^0.1.2",
|
"reduce-reducers": "^0.1.2",
|
||||||
|
"react-select": "^1.0.0-rc.2",
|
||||||
"redux": "^3.6.0",
|
"redux": "^3.6.0",
|
||||||
"redux-actions": "^1.2.0",
|
"redux-actions": "^1.2.0",
|
||||||
"redux-batched-actions": "^0.1.5",
|
"redux-batched-actions": "^0.1.5",
|
||||||
|
@ -1,23 +1,48 @@
|
|||||||
const React = require('react');
|
const React = require('react');
|
||||||
|
|
||||||
// const PropTypes = require('@root/prop-types');
|
|
||||||
const Row = require('@ui/components/row');
|
const Row = require('@ui/components/row');
|
||||||
const Column = require('@ui/components/column');
|
const Column = require('@ui/components/column');
|
||||||
const Button = require('@ui/components/button');
|
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 {
|
const {
|
||||||
// people = [],
|
|
||||||
handleToggle,
|
handleToggle,
|
||||||
// platformMembers
|
// UI = {},
|
||||||
} = props;
|
// people = [],
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
// const InputStyle = {
|
const InputStyle = {
|
||||||
// float: 'left',
|
float: 'left',
|
||||||
// width: '75%'
|
width: '75%'
|
||||||
// };
|
};
|
||||||
|
|
||||||
const AddButtonStyle = {
|
const AddButtonStyle = {
|
||||||
float: 'right',
|
float: 'right',
|
||||||
@ -28,32 +53,13 @@ const Invite = (props) => {
|
|||||||
display: 'inline-block'
|
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 (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
@ -64,13 +70,14 @@ const Invite = (props) => {
|
|||||||
<Row>
|
<Row>
|
||||||
<Column xs={12}>
|
<Column xs={12}>
|
||||||
{/*TODO: Fix why there are issues with webpack and nodemodules*/}
|
{/*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
|
<Button
|
||||||
secondary
|
secondary
|
||||||
style={AddButtonStyle}
|
style={AddButtonStyle}
|
||||||
@ -96,12 +103,7 @@ const Invite = (props) => {
|
|||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
};
|
},
|
||||||
|
});
|
||||||
Invite.propTypes = {
|
|
||||||
handleToggle: React.PropTypes.func,
|
|
||||||
// orgUI: React.PropTypes.obj,
|
|
||||||
// people: React.PropTypes.arrayOf(PropTypes.person)
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = Invite;
|
module.exports = Invite;
|
@ -535,6 +535,9 @@
|
|||||||
},
|
},
|
||||||
"projects": {
|
"projects": {
|
||||||
"ui": {
|
"ui": {
|
||||||
|
"invite_toggled": true,
|
||||||
|
"member_status_tooltip": false,
|
||||||
|
"member_role_tooltip": false,
|
||||||
"sections": [
|
"sections": [
|
||||||
"services",
|
"services",
|
||||||
"instances",
|
"instances",
|
||||||
|
Loading…
Reference in New Issue
Block a user