styling select dropdown

This commit is contained in:
Alex Windett 2017-01-31 14:15:59 +00:00
parent cb410b58f7
commit 1503459695
1 changed files with 29 additions and 9 deletions

View File

@ -1,13 +1,30 @@
const React = require('react');
const styled = require('styled-components');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const Button = require('@ui/components/button');
const {
default: Styled
} = styled;
// TOOD: Require from UI Components - causes issue ATM.
const Select = require('react-select');
require('react-select/dist/react-select.css');
const SelectWrapper = Styled.div`
.Select-menu-outer {
margin-top: 48px;
}
.Select-arrow {
position: relative;
top: -4px;
}
`;
const Invite = React.createClass({
propTypes: {
@ -66,6 +83,7 @@ const Invite = React.createClass({
width: '75%',
minHeight: '50px',
marginBottom: '20px',
paddingTop: '10px'
};
const AddButtonStyle = {
@ -94,15 +112,17 @@ const Invite = React.createClass({
<Row>
<Column xs={12}>
<form onSubmit={this.handleSubmit}>
<Select.Creatable
aria-label="member select"
onChange={handleSelectChange}
onNewOptionClick={handleSelectChange}
options={selectData}
placeholder="Enter an email address or password"
style={InputStyle}
value={this.state.selectValue}
/>
<SelectWrapper>
<Select.Creatable
aria-label="member select"
onChange={handleSelectChange}
onNewOptionClick={handleSelectChange}
options={selectData}
placeholder="Enter an email address or password"
style={InputStyle}
value={this.state.selectValue}
/>
</SelectWrapper>
<Button
secondary
style={AddButtonStyle}