react-brackets-vt/dist/brackets/index.js

React component to render dynamic bracket UI

import React, { Fragment } from 'react';
import { Round, Bracket, SeedsList } from '../components/round';
import SwipeableViews from 'react-swipeable-views';
import useMedia from '../hooks/useMedia';
import { renderSeed, renderTitle } from '../utils/renders';
const SingleElimination = ({ rounds, rtl = false, roundClassName, bracketClassName, swipeableProps = {}, mobileBreakpoint = 992, twoSided = false, renderSeedComponent = renderSeed, roundTitleComponent = renderTitle, }) => {
    // Checking responsive size
    const isResponsive = useMedia(mobileBreakpoint);
    const getFragment = (seed, roundIdx, idx, rounds, isMiddleOfTwoSided) => (React.createElement(Fragment, { key: seed.id }, renderSeedComponent({
        seed,
        breakpoint: mobileBreakpoint,
        roundIndex: roundIdx,
        seedIndex: idx,
        rounds,
        isMiddleOfTwoSided,
    })));
    const data = rounds.map((round, roundIdx) => (React.createElement(Round, { key: round.title, className: roundClassName, mobileBreakpoint: mobileBreakpoint },
        round.title && roundTitleComponent(round.title, roundIdx),
        React.createElement(SeedsList, null, round.seeds.map((seed, idx) => {
            return getFragment(seed, roundIdx, idx, rounds, false);
        })))));
    if (isResponsive) {
        // Since SwipeableViewsProps may include a ref internally, strip it in a type-safe way
        const { ref: _ignoredRef, ...rest } = swipeableProps || {};
        return (React.createElement(Bracket, { className: bracketClassName, dir: rtl ? 'rtl' : 'ltr', mobileBreakpoint: mobileBreakpoint },
            React.createElement(SwipeableViews, { style: { minHeight: '500px' }, axis: rtl ? 'x-reverse' : 'x', ...rest }, data)));
    }
    const getRenderedRounds = (roundsStartIndex, roundsEndIndex, renderFirstHalfOfRoundsSeeds, rounds, dir) => rounds.slice(roundsStartIndex, roundsEndIndex).map((round, roundIdx) => (React.createElement(Round, { key: round.title, className: roundClassName, mobileBreakpoint: mobileBreakpoint },
        round.title && roundTitleComponent(round.title, roundIdx),
        React.createElement(SeedsList, { dir: dir }, renderFirstHalfOfRoundsSeeds
            ? round.seeds
                .slice(0, round.seeds.length / 2)
                .map((seed, idx) => getFragment(seed, roundIdx, idx, rounds, false))
            : round.seeds
                .slice(round.seeds.length / 2, round.seeds.length)
                .map((seed, idx) => getFragment(seed, roundIdx, idx, rounds, roundIdx < roundsEndIndex - 2))))));
    if (twoSided) {
        return (React.createElement(Bracket, { className: bracketClassName, mobileBreakpoint: mobileBreakpoint }, [
            getRenderedRounds(0, rounds.length - 1, true, rounds, 'ltr'),
            getRenderedRounds(rounds.length - 1, rounds.length, false, rounds, 'twoSided'),
            getRenderedRounds(1, rounds.length, false, [...rounds].reverse(), 'rtl'),
        ]));
    }
    return (React.createElement(Bracket, { className: bracketClassName, dir: rtl ? 'rtl' : 'ltr', mobileBreakpoint: mobileBreakpoint }, data));
};
export { SingleElimination };