import React , { FunctionComponent , useRef } from 'react' ; import classNames from 'classnames' ; import { SelectListContext } from '../../contexts' ; import BackHeader , { BackHeaderProps } from '../BackHeaderV2' ; import { SearchPanel , SearchPanelProps } from '../SearchPanel' ; import styles from './styles.scss' ; export type SelectListV2Props = { classes ? : { root ? : string ; search ? : SearchPanelProps [ 'classes' ] ; backHeader ? : BackHeaderProps [ 'className' ] ; } ; } & Pick < SearchPanelProps , 'currentLocale' | 'options' | 'searchOption' | 'renderListItem' | 'placeholder' > & Pick < BackHeaderProps , 'onBackClick' | 'title' | 'rightIcon' > ; export const SelectListV2 = ( { searchOption , currentLocale , onBackClick , rightIcon , title , renderListItem , options , children , classes , placeholder , } ) => { const scrollElmRef = useRef ( ) ; return ( < SelectListContext . Provider value = { { scrollElmRef } } > < div className = { classNames ( styles . root , classes . root ) } > < BackHeader currentLocale = { currentLocale } title = { title } onBackClick = { onBackClick } className = { classes . backHeader } rightIcon = { rightIcon } / > < SearchPanel options = { options } searchOption = { searchOption } currentLocale = { currentLocale } renderListItem = { renderListItem } classes = { classes . search } placeholder = { placeholder } / > { children } < /div> < /SelectListContext.Provider>); } ; SelectListV2 . defaultProps = { onBackClick ( ) { } , classes : { } , } ;