import React , { Fragment , ReactNode } from 'react' ; import { Round , Bracket , SeedsList , RoundProps } from '../components/round' ; import SwipeableViews , { SwipeableViewsProps } from 'react-swipeable-views' ; import useMedia from '../hooks/useMedia' ; import { renderSeed , renderTitle } from '../utils/renders' ; export interface RenderSeedProps { seed : any ; breakpoint : number ; roundIndex : number ; seedIndex : number ; } export interface SingleEliminationProps { rtl ? : boolean ; rounds : RoundProps [ ] ; roundClassName ? : string ; default mobileBreakpoint ? : number ; bracketClassName ? : string ; /**  https to read about it's props   swipeableProps ? : SwipeableViewsProps ; param { ReactNode } title param { number } round roundTitleComponent ? : ( title : ReactNode , roundIdx : number ) => any ; param { object } seed param { number } breakpoint param { number } roundIdx renderSeedComponent ? : ( { seed , breakpoint , roundIndex , seedIndex } : RenderSeedProps ) => any ; } const SingleElimination = ( { rounds , rtl = false , roundClassName , bracketClassName , swipeableProps = { } , mobileBreakpoint = 992 , renderSeedComponent = renderSeed , roundTitleComponent = renderTitle , } ) => { const isResponsive = useMedia ( mobileBreakpoint ) ; const data = rounds . map ( ( round , roundIdx ) => ( < Round key = { roundIdx } className = { roundClassName } mobileBreakpoint = { mobileBreakpoint } > { round . title && roundTitleComponent ( round . title , roundIdx ) } < SeedsList > { round . seeds . map ( ( seed , idx ) => ( < Fragment key = { idx } > { renderSeedComponent ( { seed , breakpoint : mobileBreakpoint , roundIndex : roundIdx , seedIndex : idx } ) } < /Fragment>))} < /SeedsList> < /Round>)); if ( isResponsive ) { const { ref , ... rest } = swipeableProps ; return ( < Bracket className = { bracketClassName } dir = { rtl ? 'rtl' : 'ltr' } mobileBreakpoint = { mobileBreakpoint } > < SwipeableViews style = { { minHeight : '500px' } } axis = { rtl ? 'x-reverse' : 'x' } { ... rest } > { data } < /SwipeableViews> < /Bracket>); } return ( < Bracket className = { bracketClassName } dir = { rtl ? 'rtl' : 'ltr' } mobileBreakpoint = { mobileBreakpoint } > { data } < /Bracket>); } ; export default SingleElimination ;