import React from 'react' ; import { components } from 'react-select' ; import styled from 'styled-components' ; import { Box , Flex , Text } from 'design' ; import { SelectAsync , DarkStyledSelect } from 'shared/components/Select' ; const ValueContainer = ( { children , ... props } ) => ( < components . ValueContainer { ... props } > < Flex alignItems = "center" color = "text.primary" > < Text typography = "h6" fontWeight = "regular" mr = "2" > CLUSTER : < /Text> { children } < /Flex> < /components.ValueContainer>); export default function ClusterSelector ( { value , onChange , onLoad , defaultMenuIsOpen = false , ... styles } ) { const [ errorMessage , setError ] = React . useState ( null ) ; const [ options , setOptions ] = React . useState < Option [ ] > ( [ ] ) ; const selectedOption = { value , label : value , } ; function onChangeOption ( option ) { onChange ( option . value ) ; } function onLoadOptions ( inputValue ) { let promise = Promise . resolve ( options ) ; if ( options . length === 0 ) { promise = onLoad ( ) . then ( clusters => clusters . map ( o => ( { value : o . clusterId , label : o . clusterId , } ) ) ) . then ( options => { setOptions ( options ) ; return options ; } ) ; } return promise . then ( options => filterOptions ( inputValue , options ) ) . catch ( ( err ) => { setError ( err . message ) ; } ) ; } function getNoOptionsMessage ( ) { if ( errorMessage ) { return `Error: ${ errorMessage }` ; } return 'No leaf clusters found' ; } return ( < Box { ... styles } > < StyledSelect > < SelectAsync components = { { ValueContainer } } noOptionsMessage = { getNoOptionsMessage } value = { selectedOption } onChange = { onChangeOption } loadOptions = { onLoadOptions } defaultMenuIsOpen = { defaultMenuIsOpen } hasError = { false } maxMenuHeight = { 600 } menuPosition = "fixed" isSearchable isSimpleValue = { false } isClearable = { false } defaultOptions cacheOptions / > < /StyledSelect> < /Box>); } function filterOptions ( value = '' , options = [ ] ) { value = value . toLocaleLowerCase ( ) ; return options . filter ( o => { return o . value . toLocaleLowerCase ( ) . indexOf ( value ) !== - 1 ; } ) ; } type Option = { value : string ; label : string ; } ; const StyledSelect = styled ( DarkStyledSelect ) `
  .react-select__single-value {
    transform: none;
    position: absolute;
    left: 78px;
    top: 4px;
    width: 270px;
    text-overflow: ellipsis;
  }
` ;