import { DefaultButton , Icon , IStyle , Stack , mergeStyles } from '@fluentui/react' ; import React , { useMemo , useState } from 'react' ; import { useTheme } from '../theming' ; import { BaseCustomStyles } from '../types' ; import { rootStyle , childrenContainerStyle , leftRightButtonStyles } from './styles/HorizontalGallery.styles' ; /**
 *  HorizontalGallery default children per page
  const DEFAULT_CHILDREN_PER_PAGE = 5 ; /**
 *  HorizontalGallery Component Styles.
 *  public export interface HorizontalGalleryStyles extends BaseCustomStyles { /** Styles for each child of  HorizontalGallery children ? : IStyle ; /** Styles for navigation button to go to previous page */ previousButton ? : IStyle ; /** Styles for navigation button to go to next page */ nextButton ? : IStyle ; } /**
 *  HorizontalGallery Component Props.
  export interface HorizontalGalleryProps { children : React . ReactNode ; /**
     * Styles for HorizontalGallery
     */ styles ? : HorizontalGalleryStyles ; defaultValue childrenPerPage ? : number ; } param props - HorizontalGalleryProps  {@link @azure/communication-react#HorizontalGalleryProps} returns export const HorizontalGallery = ( props ) : JSX . Element => { const { children , childrenPerPage = DEFAULT_CHILDREN_PER_PAGE , styles } = props ; const [ page , setPage ] = useState ( 0 ) ; const numberOfChildren = React . Children . count ( children ) ; const lastPage = Math . ceil ( numberOfChildren / childrenPerPage ) - 1 ; const paginatedChildren = useMemo ( ( ) => { return bucketize ( React . Children . toArray ( children ) , childrenPerPage ) ; } , [ children , childrenPerPage ] ) ; if ( childrenPerPage <= 0 ) { return < > < />; } const firstIndexOfCurrentPage = page * childrenPerPage ; const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage ; const childrenOnCurrentPage = paginatedChildren [ clippedPage ] ; const showButtons = numberOfChildren > childrenPerPage ; const disablePreviousButton = page === 0 ; const disableNextButton = page === lastPage ; return ( < Stack horizontal className = { mergeStyles ( rootStyle , props . styles ?. root ) } > { showButtons && ( < HorizontalGalleryNavigationButton key = "previous-nav-button" icon = { < Icon iconName = "HorizontalGalleryLeftButton" / > } styles = { styles ?. previousButton } onClick = { ( ) => setPage ( Math . max ( 0 , Math . min ( lastPage , page - 1 ) ) ) } disabled = { disablePreviousButton } / > ) } < Stack horizontal className = { mergeStyles ( childrenContainerStyle , { '> *' : props . styles ?. children } ) } > { childrenOnCurrentPage } < /Stack> { showButtons && ( < HorizontalGalleryNavigationButton key = "next-nav-button" icon = { < Icon iconName = "HorizontalGalleryRightButton" / > } styles = { styles ?. nextButton } onClick = { ( ) => setPage ( Math . min ( lastPage , page + 1 ) ) } disabled = { disableNextButton } / > ) } < /Stack>); } ; const HorizontalGalleryNavigationButton = ( props ) : JSX . Element => { const theme = useTheme ( ) ; return ( < DefaultButton className = { mergeStyles ( leftRightButtonStyles ( theme ) , props . styles ) } onClick = { props . onClick } disabled = { props . disabled } > { props . icon } < /DefaultButton>); } ; function bucketize < T > ( arr , bucketSize ) { const bucketArray = [ ] ; if ( bucketSize <= 0 ) { return bucketArray ; } for ( let i = 0 ; i < arr . length ; i += bucketSize ) { bucketArray . push ( arr . slice ( i , i + bucketSize ) ) ; } return bucketArray ; }