Created
June 5, 2018 19:39
-
-
Save jhonylucas74/08b6b3a6f4d9f03e5ede464737147171 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { withStyles } from '@material-ui/core/styles'; | |
import Typography from '@material-ui/core/Typography'; | |
import Input from '@material-ui/core/Input'; | |
import TextField from '@material-ui/core/TextField'; | |
import MenuItem from '@material-ui/core/MenuItem'; | |
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; | |
import CancelIcon from '@material-ui/icons/Cancel'; | |
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'; | |
import ClearIcon from '@material-ui/icons/Clear'; | |
import Chip from '@material-ui/core/Chip'; | |
import Select from 'react-select'; | |
import 'react-select/dist/react-select.css'; | |
import {styles} from './styles' // importanto CSS no JS | |
const suggestions = [ | |
{ value: 'Cardiologia', label: 'Cardiologia' }, | |
{ value: 'Pediatria', label: 'Pediatria' }, | |
{ value: 'Mastologia', label: 'Mastologia' }, | |
]; | |
/* Esse carinha aqui é a SUGESTÃO que será renderizada.. */ | |
class Option extends React.Component { | |
/* Esse método vai executar a função passa pelo props. Ou seja vai selecionar o valor escolhido.*/ | |
handleClick = event => { | |
this.props.onSelect(this.props.option, event); | |
}; | |
render() { | |
const { children, isFocused, isSelected, onFocus } = this.props; | |
return ( | |
<MenuItem | |
onFocus={onFocus} | |
selected={isFocused} | |
onClick={this.handleClick} | |
component="div" | |
style={{ | |
fontWeight: isSelected ? 500 : 400, | |
}} | |
> | |
{children} | |
</MenuItem> | |
); | |
} | |
} | |
function SelectWrapped(props) { | |
const { classes, ...other } = props; | |
return ( | |
<Select | |
optionComponent={Option} | |
noResultsText={<Typography>{'No results found'}</Typography>} | |
arrowRenderer={arrowProps => { | |
return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />; | |
}} | |
clearRenderer={() => <ClearIcon />} | |
valueComponent={valueProps => { | |
const { value, children, onRemove } = valueProps; | |
const onDelete = event => { | |
event.preventDefault(); | |
event.stopPropagation(); | |
onRemove(value); | |
}; | |
if (onRemove) { | |
return ( | |
<Chip | |
tabIndex={-1} | |
label={children} | |
className={classes.chip} | |
deleteIcon={<CancelIcon onTouchEnd={onDelete} />} | |
onDelete={onDelete} | |
/> | |
); | |
} | |
return <div className="Select-value">{children}</div>; | |
}} | |
{...other} | |
/> | |
); | |
} | |
class IntegrationReactSelect extends React.Component { | |
state = { single: null }; | |
handleChange = name => value => { | |
this.setState({ | |
[name]: value, | |
}); | |
}; | |
render() { | |
const { classes } = this.props; | |
return ( | |
<div className={classes.root}> | |
<Input | |
fullWidth | |
inputComponent={SelectWrapped} | |
value={this.state.single} | |
onChange={this.handleChange('single')} | |
placeholder="Search a country (start with a)" | |
id="react-select-single" | |
inputProps={{ | |
classes, | |
name: 'react-select-single', | |
instanceId: 'react-select-single', | |
simpleValue: true, | |
options: suggestions, | |
}} | |
/> | |
</div> | |
); | |
} | |
} | |
export default withStyles(styles)(IntegrationReactSelect); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment