import React , { ChangeEventHandler , Component , ComponentProps , ComponentType , } from 'react' ; import Select , { MenuPlacement } from 'react-select' ; import { H1 , Note } from './styled-components' ; import { colourOptions , groupedOptions , optionLength } from './data' ; import * as animatedComponents from 'react-select/animated' ; interface SuiteProps { readonly selectComponent : ComponentType < ComponentProps < typeof Select > > ; readonly idSuffix : string ; } interface SuiteState { readonly isDisabled : boolean ; readonly isFixed : boolean ; readonly isLoading : boolean ; readonly escapeClearsValue : boolean ; readonly blockScroll : boolean ; readonly portalPlacement : MenuPlacement ; } const AnimatedSelect = ( props ) => ( < Select { ... props } components = { { ... animatedComponents , ... props . components , } } />); class TestSuite extends Component < SuiteProps , SuiteState > { state : SuiteState = { isDisabled : false , isFixed : false , isLoading : false , escapeClearsValue : false , portalPlacement : 'top' , blockScroll : true , } ; toggleDisabled = ( ) => { this . setState ( ( state ) => ( { isDisabled : ! state . isDisabled } ) ) ; } ; toggleLoading = ( ) => { this . setState ( ( state ) => ( { isLoading : ! state . isLoading } ) ) ; } ; toggleScroll = ( ) => { this . setState ( ( state ) => ( { blockScroll : ! state . blockScroll } ) ) ; } ; toggleMode = ( ) => { this . setState ( ( state ) => ( { isFixed : ! state . isFixed } ) ) ; } ; toggleEscapeClearsValue = ( ) => { this . setState ( ( state ) => ( { escapeClearsValue : ! state . escapeClearsValue } ) ) ; } ; setPlacement : ChangeEventHandler < HTMLSelectElement > = ( { currentTarget } ) => { const portalPlacement = currentTarget && ( currentTarget . value as MenuPlacement ) ; this . setState ( { portalPlacement } ) ; } ; render ( ) { const { isFixed , portalPlacement , blockScroll } = this . state ; const { selectComponent : SelectComp , idSuffix } = this . props ; const menuPortalTarget = ! isFixed ? document . body : null ; return ( < div id = { `cypress-container-${ idSuffix }` } > < div id = { `cypress-${ idSuffix }` } > < SelectComp autoFocus id = { `basic-select-${ idSuffix }` } instanceId = { `basic-select-${ idSuffix }` } classNamePrefix = "react-select" defaultValue = { colourOptions [ 0 ] } styles = { { menuPortal : ( base ) => ( { ... base , zIndex : 999 } ) , } } isDisabled = { this . state . isDisabled } isLoading = { this . state . isLoading } options = { colourOptions } / > < Note Tag = "label" > < input type = "checkbox" onChange = { this . toggleDisabled } className = "disable-checkbox" id = { `cypress-${ idSuffix }__disabled-checkbox` } /> Disabled < /Note> < Note Tag = "label" style = { { marginLeft : '1em' } } > < input type = "checkbox" onChange = { this . toggleLoading } id = { `cypress-${ idSuffix }__loading-checkbox` } /> Loading < /Note> < /div> < h4 > Grouped < /h4> < div id = { `cypress-${ idSuffix }-grouped` } > < SelectComp id = { `grouped-options-${ idSuffix }` } classNamePrefix = "react-select" defaultValue = { colourOptions [ 1 ] } options = { groupedOptions } / > < /div> < h4 > Clearable < /h4> < div id = { `cypress-${ idSuffix }-clearable` } > < SelectComp id = { `clearable-select-${ idSuffix }` } isClearable escapeClearsValue = { this . state . escapeClearsValue } classNamePrefix = "react-select" defaultValue = { colourOptions [ 1 ] } options = { groupedOptions } / > < Note Tag = "label" > < input type = "checkbox" onChange = { this . toggleEscapeClearsValue } className = "escape-clears-value-checkbox" / > escapeClearsValue < /Note> < /div> < h4 > Portalled < /h4> < div id = { `cypress-${ idSuffix }-portalled` } style = { { backgroundColor : 'papayaWhip' , borderRadius : 5 , boxSizing : 'border-box' , height : 200 , overflow : 'auto' , padding : 15 , width : '100%' , } } > < div style = { { height : 100 } } /> < pre > { 'overflow: hidden; position: absolute;' } < /pre> < SelectComp id = { `portalled-select-${ idSuffix }` } instanceId = { `portalled-select-${ idSuffix }` } classNamePrefix = "react-select" defaultValue = { colourOptions [ 0 ] } options = { colourOptions } menuPortalTarget = { menuPortalTarget } menuShouldBlockScroll = { blockScroll } menuShouldScrollIntoView menuPlacement = { portalPlacement } menuPosition = { isFixed ? 'fixed' : 'absolute' } / > < Note Tag = "label" > < select onChange = { this . setPlacement } value = { portalPlacement } id = "cypress-portalled__radio-bottom" > < option value = "auto" > auto < /option> < option value = "bottom" > bottom < /option> < option value = "top" > top < /option> < /select> < /Note> < Note Tag = "label" style = { { marginLeft : '1em' } } > < input type = "radio" onChange = { this . toggleMode } value = "fixed" checked = { isFixed } id = "cypress-portalled__fixed" / > Fixed < /Note> < Note Tag = "label" style = { { marginLeft : '1em' } } > < input type = "radio" onChange = { this . toggleMode } value = "portal" checked = { ! isFixed } id = "cypress-portalled__portal" / > Portal < /Note> < Note Tag = "label" style = { { marginLeft : '1em' } } > < input type = "checkbox" onChange = { this . toggleScroll } value = "blockScroll" checked = { blockScroll } id = "cypress-portalled__scroll" / > Block Scroll < /Note> < div style = { { height : 100 } } /> < /div> < /div>); } } export default function Tests ( ) { return ( < div style = { { margin : 'auto' , maxWidth : 440 , padding : 20 , position : 'relative' , } } > < H1 > Test Page for Cypress < /H1> < h2 > Single Select < /h2> < TestSuite selectComponent = { Select } idSuffix = "single" / > < h3 > Animated components < /h3> < TestSuite selectComponent = { AnimatedSelect } idSuffix = "animated" / > < h2 > Multi Select < /h2> < div id = "cypress-multi" > < Select id = "multi-select" instanceId = "multi-select" classNamePrefix = "react-select" defaultValue = { [ colourOptions [ 2 ] , colourOptions [ 3 ] ] } isMulti options = { colourOptions } / > < /div> < div style = { { height : 400 } } /> < h3 > Long Values < /h3> < div id = { 'cypress-long-values' } > < Select id = "long-value-select" instanceId = "long-value-select" classNamePrefix = "react-select" defaultValue = { optionLength [ 3 ] } options = { optionLength } / > < /div> < /div>); }