fork download 
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import Select from 'react-select';
  4. import { withStyles } from '@material-ui/core/styles';
  5. import Typography from '@material-ui/core/Typography';
  6. import TextField from '@material-ui/core/TextField';
  7. import MenuItem from '@material-ui/core/MenuItem';
  8. import i18n from 'react-intl-universal';
  9.  
  10. import styles from './styles';
  11.  
  12. const _ = require('lodash');
  13.  
  14. function NoOptionsMessage(props) {
  15.   if (props.options.length) return null;
  16.   return (
  17.     <Typography
  18.       className={props.selectProps.classes.noOptionsMessage}
  19.       {...props.innerProps}
  20.     >
  21.       {i18n.get('app.commons.errors.emptySearchResult')}
  22.     </Typography>
  23.   );
  24. }
  25.  
  26. function inputComponent({ inputRef, ...props }) {
  27.   return <div ref={inputRef} {...props} />;
  28. }
  29.  
  30. function Option(props) {
  31.   return (
  32.     <MenuItem
  33.       buttonRef={props.innerRef}
  34.       selected={props.isFocused}
  35.       component="div"
  36.       style={{
  37.         fontWeight: props.isSelected ? 500 : 400
  38.       }}
  39.       {...props.innerProps}
  40.     >
  41.       {props.children}
  42.     </MenuItem>
  43.   );
  44. }
  45.  
  46. function SingleValue(props) {
  47.   return (
  48.     <Typography
  49.       className={props.selectProps.classes.singleValue}
  50.       {...props.innerProps}
  51.     >
  52.       {props.children}
  53.     </Typography>
  54.   );
  55. }
  56.  
  57. function ValueContainer(props) {
  58.   return (
  59.     <div className={props.selectProps.classes.valueContainer}>
  60.       {props.children}
  61.     </div>
  62.   );
  63. }
  64.  
  65. class SearchableSelect extends React.Component {
  66.   constructor(props) {
  67.     super(props);
  68.     this.triggerOnValueChange = _.debounce(this.triggerOnValueChange, 500);
  69.   }
  70.  
  71.   state = {
  72.     selectedOption: this.props.defaultValue
  73.   };
  74.  
  75.   handleChange = selectedOption => {
  76.     this.setState({
  77.       selectedOption: selectedOption
  78.     });
  79.  
  80.     if (this.props.setSelectedOption) {
  81.       this.props.setSelectedOption(selectedOption.value);
  82.     }
  83.   };
  84.  
  85.   placeholder = props => {
  86.     const { placeholderColor, placeholderVariant } = this.props;
  87.     return (
  88.       <Typography
  89.         color={placeholderColor ? placeholderColor : 'default'}
  90.         variant={placeholderVariant ? placeholderVariant : 'body1'}
  91.         className={props.selectProps.classes.placeholder}
  92.         {...props.innerProps}
  93.       >
  94.         {props.children}
  95.       </Typography>
  96.     );
  97.   };
  98.  
  99.   triggerOnValueChange = value => {
  100.     this.props.onValueChange(value);
  101.   };
  102.  
  103.   handleTextFieldChange = event => {
  104.     if (this.props.onValueChange) {
  105.       event.persist();
  106.       this.triggerOnValueChange(event.target.value);
  107.     }
  108.   };
  109.  
  110.   control = props => {
  111.     return (
  112.       <TextField
  113.         fullWidth
  114.         onChange={this.handleTextFieldChange}
  115.         InputProps={{
  116.           inputComponent,
  117.           inputProps: {
  118.             className: props.selectProps.classes.input,
  119.             ref: props.innerRef,
  120.             children: props.children,
  121.             ...props.innerProps
  122.           }
  123.         }}
  124.       />
  125.     );
  126.   };
  127.  
  128.   render() {
  129.     const { classes, options, searchable } = this.props;
  130.     const components = {
  131.       Option,
  132.       Control: this.control,
  133.       NoOptionsMessage,
  134.       Placeholder: this.placeholder,
  135.       SingleValue,
  136.       ValueContainer
  137.     };
  138.     return (
  139.       <div className={classes.root}>
  140.         <Select
  141.           classes={classes}
  142.           options={options}
  143.           isSearchable={searchable}
  144.           components={components}
  145.           value={this.state.selectedOption}
  146.           onChange={this.handleChange}
  147.           placeholder={this.props.placeholder}
  148.         />
  149.       </div>
  150.     );
  151.   }
  152. }
  153.  
  154. SearchableSelect.propTypes = {
  155.   classes: PropTypes.object.isRequired
  156. };
  157.  
  158. export default withStyles(styles)(SearchableSelect);
  159.  
Runtime error #stdin #stdout #stderr 0.34s 2314752KB
comments (?)
stdin 
Standard input is empty
stdout 
Standard output is empty
stderr 
js: "prog.js", line 1: missing ; before statement
js: import React from 'react';
js: ............^
js: "prog.js", line 2: missing ; before statement
js: import PropTypes from 'prop-types';
js: ................^
js: "prog.js", line 3: missing ; before statement
js: import Select from 'react-select';
js: .............^
js: "prog.js", line 4: missing ; before statement
js: import { withStyles } from '@material-ui/core/styles';
js: .......^
js: "prog.js", line 5: missing ; before statement
js: import Typography from '@material-ui/core/Typography';
js: .................^
js: "prog.js", line 6: missing ; before statement
js: import TextField from '@material-ui/core/TextField';
js: ................^
js: "prog.js", line 7: missing ; before statement
js: import MenuItem from '@material-ui/core/MenuItem';
js: ...............^
js: "prog.js", line 8: missing ; before statement
js: import i18n from 'react-intl-universal';
js: ...........^
js: "prog.js", line 10: missing ; before statement
js: import styles from './styles';
js: .............^
js: "prog.js", line 19: syntax error
js:       {...props.innerProps}
js: ........^
js: "prog.js", line 22: illegally formed XML syntax
js:     </Typography>
js: .....^
js: "prog.js", line 22: syntax error
js:     </Typography>
js: .....^
js: "prog.js", line 26: invalid property id
js: function inputComponent({ inputRef, ...props }) {
js: .....................................^
js: "prog.js", line 1: Compilation produced 13 syntax errors.
https://ideone.com/hcDnoS
language:
JavaScript (rhino 1.7.9)
created:
7 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!