Advertisement
Guest User

Untitled

a guest
Apr 24th, 2018
70
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import { withStyles } from 'material-ui/styles'
  4. import Typography from 'material-ui/Typography'
  5. import Input from 'material-ui/Input'
  6. import { MenuItem } from 'material-ui/Menu'
  7. import ArrowDropDownIcon from 'material-ui-icons/ArrowDropDown'
  8. import CancelIcon from 'material-ui-icons/Cancel'
  9. import ArrowDropUpIcon from 'material-ui-icons/ArrowDropUp'
  10. import ClearIcon from 'material-ui-icons/Clear'
  11. import Chip from 'material-ui/Chip'
  12. import Select from 'react-select'
  13. import 'react-select/dist/react-select.css'
  14. import config from '../../../config'
  15. import { getAllTags } from '../../../api/tags'
  16.  
  17. class Option extends React.Component {
  18.   handleClick = (event) => {
  19.     this.props.onSelect(this.props.option, event)
  20.   }
  21.  
  22.   render() {
  23.     const { children, isFocused, isSelected, onFocus } = this.props
  24.  
  25.     return (
  26.       <MenuItem
  27.         onFocus={onFocus}
  28.         selected={isFocused}
  29.         onClick={this.handleClick}
  30.         component="div"
  31.         style={{
  32.           fontWeight: isSelected ? 500 : 400,
  33.         }}
  34.       >
  35.         {children}
  36.       </MenuItem>
  37.     )
  38.   }
  39. }
  40.  
  41. function SelectWrapped(props) {
  42.   const { classes, ...other } = props
  43.  
  44.   return (
  45.     <Select
  46.       optionComponent={Option}
  47.       noResultsText={<Typography>{'No results found'}</Typography>}
  48.       arrowRenderer={arrowProps => {
  49.         return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />
  50.       }}
  51.       clearRenderer={() => <ClearIcon />}
  52.       valueComponent={(valueProps) => {
  53.         const { value, children, onRemove } = valueProps
  54.  
  55.         const onDelete = (event) => {
  56.           event.preventDefault()
  57.           event.stopPropagation()
  58.           onRemove(value)
  59.         }
  60.  
  61.         if (onRemove) {
  62.           return (
  63.             <Chip
  64.               tabIndex={-1}
  65.               label={children}
  66.               className={classes.chip}
  67.               deleteIcon={<CancelIcon onTouchEnd={onDelete} />}
  68.               onDelete={onDelete}
  69.             />
  70.           )
  71.         }
  72.  
  73.         return <div className="Select-value">{children}</div>
  74.       }}
  75.       {...other}
  76.     />
  77.   )
  78. }
  79.  
  80. const ITEM_HEIGHT = 48
  81.  
  82. const styles = theme => ({
  83.   root: {
  84.     flexGrow: 1,
  85.     width: '100%',
  86.     marginBottom: 15,
  87.     backgroundColor: 'rgba(246, 246, 246, 1)',
  88.     border: '10px solid rgba(246, 246, 246, 1)',
  89.     borderRadius: 5,
  90.     marginTop: 15,
  91.   },
  92.   chip: {
  93.     margin: theme.spacing.unit / 4,
  94.   },
  95.   // We had to use a lot of global selectors in order to style react-select.
  96.   // We are waiting on https://github.com/JedWatson/react-select/issues/1679
  97.   // to provide a much better implementation.
  98.   // Also, we had to reset the default style injected by the library.
  99.   '@global': {
  100.     '.Select-control': {
  101.       display: 'flex',
  102.       alignItems: 'center',
  103.       border: 0,
  104.       height: 'auto',
  105.       background: 'transparent',
  106.       '&:hover': {
  107.         boxShadow: 'none',
  108.       },
  109.     },
  110.     '.Select-multi-value-wrapper': {
  111.       flexGrow: 1,
  112.       display: 'flex',
  113.       flexWrap: 'wrap',
  114.     },
  115.     '.Select--multi .Select-input': {
  116.       margin: 0,
  117.     },
  118.     '.Select.has-value.is-clearable.Select--single > .Select-control .Select-value': {
  119.       padding: 0,
  120.     },
  121.     '.Select-noresults': {
  122.       padding: theme.spacing.unit * 2,
  123.     },
  124.     '.Select-input': {
  125.       display: 'inline-flex !important',
  126.       padding: 0,
  127.       height: 'auto',
  128.     },
  129.     '.Select-input input': {
  130.       background: 'transparent',
  131.       border: 0,
  132.       padding: 0,
  133.       cursor: 'default',
  134.       display: 'inline-block',
  135.       fontFamily: 'inherit',
  136.       fontSize: 'inherit',
  137.       margin: 0,
  138.       outline: 0,
  139.     },
  140.     '.Select-placeholder, .Select--single .Select-value': {
  141.       position: 'absolute',
  142.       top: 0,
  143.       left: 0,
  144.       right: 0,
  145.       bottom: 0,
  146.       display: 'flex',
  147.       alignItems: 'center',
  148.       fontFamily: theme.typography.fontFamily,
  149.       fontSize: 16,
  150.       padding: 0,
  151.     },
  152.     '.Select-placeholder': {
  153.       opacity: 0.42,
  154.       color: theme.palette.common.black,
  155.     },
  156.     '.Select-menu-outer': {
  157.       backgroundColor: theme.palette.background.paper,
  158.       boxShadow: theme.shadows[2],
  159.       position: 'absolute',
  160.       left: 0,
  161.       top: `calc(100% + ${theme.spacing.unit}px)`,
  162.       width: '100%',
  163.       zIndex: 2,
  164.       maxHeight: ITEM_HEIGHT * 4.5,
  165.     },
  166.     '.Select.is-focused:not(.is-open) > .Select-control': {
  167.       boxShadow: 'none',
  168.     },
  169.     '.Select-menu': {
  170.       maxHeight: ITEM_HEIGHT * 4.5,
  171.       overflowY: 'auto',
  172.     },
  173.     '.Select-menu div': {
  174.       boxSizing: 'content-box',
  175.     },
  176.     '.Select-arrow-zone, .Select-clear-zone': {
  177.       color: theme.palette.action.active,
  178.       cursor: 'pointer',
  179.       height: 21,
  180.       width: 21,
  181.       zIndex: 1,
  182.     },
  183.     // Only for screen readers. We can't use display none.
  184.     '.Select-aria-only': {
  185.       position: 'absolute',
  186.       overflow: 'hidden',
  187.       clip: 'rect(0 0 0 0)',
  188.       height: 1,
  189.       width: 1,
  190.       margin: -1,
  191.     },
  192.   },
  193. })
  194.  
  195. class ClipTags extends React.Component {
  196.   state = {
  197.     tagsList: [],
  198.   }
  199.  
  200.   componentWillMount() {
  201.     getAllTags({ size: config.tableWithoutPagination, sort: 'name' }).then((res) => {
  202.       this.setState({ tagsList: res.content.map(suggestion => ({ value: suggestion.name, label: suggestion.name })) })
  203.     })
  204.   }
  205.  
  206.   handleChange = () => (value) => {
  207.     this.setState({
  208.       tags: value.map(e => e.value),
  209.     })
  210.   }
  211.  
  212.   render() {
  213.     const { classes } = this.props
  214.  
  215.     return (
  216.       <div className={classes.root}>
  217.         <Input
  218.           fullWidth
  219.           inputComponent={SelectWrapped}
  220.           value={this.state.tags}
  221.           onChange={this.handleChange()}
  222.           placeholder="Wybierz tagi"
  223.           name="react-select-chip"
  224.           inputProps={{
  225.             classes,
  226.             multi: true,
  227.             instanceId: 'react-select-chip',
  228.             id: 'react-select-chip',
  229.             options: this.state.tagsList,
  230.           }}
  231.         />
  232.       </div>
  233.     )
  234.   }
  235. }
  236.  
  237. ClipTags.propTypes = {
  238.   classes: PropTypes.object.isRequired,
  239. }
  240.  
  241. export default withStyles(styles)(ClipTags)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement