import * as React from "react" ; import { useEffect , useState , useRef } from "react" ; import { SectionList , View , Text , SectionListData } from "react-native" ; import sectionListGetItemLayout from "react-native-section-list-get-item-layout" ; import { getSectionData } from "../../utils/getSectionData" ; import { ListLetterIndex } from "../ListLetterIndex" ; import { IData , ISectionData , AlphabetListProps } from "./types" ; import { styles } from "./styles" ; import { sizes } from "../../values/sizes" ; import { DEFAULT_CHAR_INDEX } from "../../values/consts" ; export const AlphabetList = ( props ) => { const { data , index = DEFAULT_CHAR_INDEX , style , indexContainerStyle , indexLetterStyle , indexLetterContainerStyle , letterListContainerStyle , getItemHeight : onGetItemHeight = ( ) => sizes . itemHeight , sectionHeaderHeight = sizes . itemHeight , listHeaderHeight = sizes . listHeaderHeight , uncategorizedAtTop = false , renderCustomSectionHeader , renderCustomItem , renderCustomListHeader , renderCustomIndexLetter , ... sectionListProps } = props ; const sectionListRef = useRef ( null ) ; const [ sectionData , setSectionData ] = useState < ISectionData [ ] > ( [ ] ) ; useEffect ( ( ) => { setSectionData ( getSectionData ( data , index , uncategorizedAtTop ) ) ; } , [ data ] ) ; const onScrollToSection = ( sectionIndex ) => { const sectionList = sectionListRef . current ! as SectionList ; if ( ! sectionList ) return ; sectionList . scrollToLocation ( { sectionIndex , itemIndex : 0 , } ) ; } ; const onGetItemLayout = sectionListGetItemLayout ( { getItemHeight : ( _rowData , sectionIndex , rowIndex ) => { return onGetItemHeight ( sectionIndex , rowIndex ) ; } , getSectionHeaderHeight : ( ) => sectionHeaderHeight , getSectionFooterHeight : ( ) => 0 , listHeaderHeight , } ) ; const onRenderSectionHeader = ( { section } ) => { if ( renderCustomSectionHeader ) return renderCustomSectionHeader ( section ) ; return ( < View testID = "header" style = { styles . sectionHeaderContainer } > < Text testID = "header__label" style = { styles . sectionHeaderLabel } > { section . title } < /Text> < /View>); } ; const onRenderItem = ( { item } ) => { if ( renderCustomItem ) return renderCustomItem ( item ) ; return ( < View testID = "cell" style = { styles . listItemContainer } > < Text testID = "cell__label" style = { styles . listItemLabel } > { item . value } < /Text> < /View>); } ; return ( < View style = { [ styles . container , style ] } > < SectionList { ... sectionListProps } testID = "sectionList" ref = { sectionListRef } sections = { sectionData } keyExtractor = { ( item ) => item . key } renderItem = { onRenderItem } renderSectionHeader = { onRenderSectionHeader } ListHeaderComponent = { renderCustomListHeader } getItemLayout = { onGetItemLayout } / > < ListLetterIndex sectionData = { sectionData } onPressLetter = { onScrollToSection } indexContainerStyle = { indexContainerStyle } indexLetterStyle = { indexLetterStyle } indexLetterContainerStyle = { indexLetterContainerStyle } letterListContainerStyle = { letterListContainerStyle } renderCustomIndexLetter = { renderCustomIndexLetter } / > < /View>); } ;