import React from 'react' ; import Select from 'react-select' ; import styled from 'styled-components' ; import { mixin } from 'shared/utils/styles' ; import theme from 'App/ThemeStyles' ; function getBackgroundColor ( isDisabled , isSelected , isFocused ) { if ( isDisabled ) { return null ; } if ( isSelected ) { return mixin . darken ( theme . colors . bg . secondary , 0.25 ) ; } if ( isFocused ) { return mixin . darken ( theme . colors . bg . secondary , 0.15 ) ; } return null ; } export const colourStyles = { control : ( styles , data ) => { return { ... styles , backgroundColor : data . isMenuOpen ? mixin . darken ( theme . colors . bg . secondary , 0.15 ) : theme . colors . bg . secondary , boxShadow : data . menuIsOpen ? `${ theme . colors . primary } 0px 0px 0px 1px` : 'none' , borderRadius : '3px' , borderWidth : '1px' , borderStyle : 'solid' , borderImage : 'initial' , borderColor : theme . colors . alternate , ':hover' : { boxShadow : `${ theme . colors . primary } 0px 0px 0px 1px` , borderRadius : '3px' , borderWidth : '1px' , borderStyle : 'solid' , borderImage : 'initial' , borderColor : theme . colors . alternate , } , ':active' : { boxShadow : `${ theme . colors . primary } 0px 0px 0px 1px` , borderRadius : '3px' , borderWidth : '1px' , borderStyle : 'solid' , borderImage : 'initial' , borderColor : `${ theme . colors . primary }` , } , } ; } , menu : ( styles ) => { return { ... styles , backgroundColor : mixin . darken ( theme . colors . bg . secondary , 0.15 ) , } ; } , dropdownIndicator : ( styles ) => ( { ... styles , color : '#c2c6dc' , ':hover' : { color : '#c2c6dc' } } ) , indicatorSeparator : ( styles ) => ( { ... styles , color : '#c2c6dc' } ) , option : ( styles , { data , isDisabled , isFocused , isSelected } ) => { return { ... styles , backgroundColor : getBackgroundColor ( isDisabled , isSelected , isFocused ) , color : isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc' , cursor : isDisabled ? 'not-allowed' : 'default' , ':active' : { ... styles [ ':active' ] , backgroundColor : ! isDisabled && ( isSelected ? mixin . darken ( theme . colors . bg . secondary , 0.25 ) : '#fff' ) , } , ':hover' : { ... styles [ ':hover' ] , backgroundColor : ! isDisabled && ( isSelected ? theme . colors . primary : theme . colors . primary ) , } , } ; } , placeholder : ( styles ) => ( { ... styles , color : '#c2c6dc' } ) , clearIndicator : ( styles ) => ( { ... styles , color : '#c2c6dc' , ':hover' : { color : '#c2c6dc' } } ) , input : ( styles ) => ( { ... styles , color : '#fff' , } ) , singleValue : ( styles ) => { return { ... styles , color : '#fff' , } ; } , } ; export const editorColourStyles = { ... colourStyles , input : ( styles ) => ( { ... styles , color : '#000' , } ) , singleValue : ( styles ) => { return { ... styles , color : '#000' , } ; } , menu : ( styles ) => { return { ... styles , backgroundColor : '#fff' , } ; } , indicatorsContainer : ( styles ) => { return { ... styles , display : 'none' , } ; } , container : ( styles ) => { return { ... styles , display : 'flex' , flex : '1 1' , } ; } , control : ( styles , data ) => { return { ... styles , flex : '1 1' , backgroundColor : 'transparent' , boxShadow : 'none' , borderRadius : '0' , minHeight : '35px' , border : '0' , ':hover' : { boxShadow : 'none' , borderRadius : '0' , } , ':active' : { boxShadow : 'none' , borderRadius : '0' , } , } ; } , } ; const InputLabel = styled . span < { width : string ; } > `
width: ${ props => props . width };
padding-left: 0.7rem;
color: ${ props => props . theme . colors . primary };
left: 0;
top: 0;
transition: all 0.2s ease;
position: absolute;
border-radius: 5px;
overflow: hidden;
font-size: 0.85rem;
cursor: text;
font-size: 12px;
user-select: none;
pointer-events: none;
}
` ; const SelectContainer = styled . div `
  position: relative;
  padding-top: 24px;
` ; type SelectProps = { label ? : string ; onChange : ( e : any ) => void ; value : any ; options : Array < any > ; className ? : string ; } ; const SelectElement = ( { onChange , value , options , label , className } ) => { return ( < SelectContainer className = { className } > < Select onChange = { ( e ) => { onChange ( e ) ; } } value = { value } styles = { colourStyles } classNamePrefix = "teamSelect" options = { options } / > { label && < InputLabel width = "100%" > { label } < /InputLabel>} < /SelectContainer>); } ; export default SelectElement ;