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

React component to render dynamic bracket UI

import React, { useState, useEffect, Fragment } from 'react';
import styled from 'styled-components';
import SwipeableViews from 'react-swipeable-views';

function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}
function _taggedTemplateLiteralLoose(e, t) {
  return t || (t = e.slice(0)), e.raw = t, e;
}

var _templateObject, _templateObject2;
var Bracket = styled.div(function (props) {
  return "\n  display: flex;\n  flex-direction: row;\n  @media (max-width: " + props.mobileBreakpoint + "px) {\n    flex-direction: column;\n  }\n  ";
});
var Round = styled.div(function (props) {
  return "\n  flex: 0;\n  // min-width:300px;\n  display:flex;\n  flex-direction:column;\n  @media (max-width: " + props.mobileBreakpoint + "px) {\n    min-width:0;\n  }\n  ";
});
var RoundTitle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  color: #8f8f8f;\n  font-weight: 400;\n  text-align: center;\n"])));
var SeedsList = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  flex-flow: row wrap;\n  justify-content: center;\n  height: 100%;\n  list-style: none;\n"])));

function useMedia(breakPoint) {
  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth <= breakPoint : false),
    isSmaller = _useState[0],
    setIsSmaller = _useState[1];
  useEffect(function () {
    function screenResized() {
      if (isSmaller && window.innerWidth > breakPoint) {
        setIsSmaller(false);
      } else if (!isSmaller && window.innerWidth <= breakPoint) {
        setIsSmaller(true);
      }
    }
    if (typeof window !== 'undefined') window.addEventListener('resize', screenResized);
    return function () {
      if (typeof window !== 'undefined') window.removeEventListener('resize', screenResized);
    };
  }, [isSmaller]);
  return isSmaller;
}

var _templateObject$1, _templateObject2$1;
var SeedItem = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  color: #fff;\n  width: 100%;\n  background-color: #1a1d2e;\n  padding: 0;\n  border-radius: 0.2em;\n  box-shadow: 0 2px 4px -2px #111630;\n  text-align: center;\n  position: relative;\n"])));
var SeedTeam = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  padding: 0.3rem 0.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 0.2em;\n  align-items: center;\n"])));
var SeedTime = styled.div(function (props) {
  return "\nmargin-top: 2px;\nfont-size: 12px;\ncolor: #8f8f8f;\nheight: 0;\n@media (max-width: " + props.mobileBreakpoint + "px) {\n  height:auto;\n}\n";
});
var SingleLineSeed = styled.div(function (props) {
  return "\npadding: 1em 1.5em;\nmin-width: 225px;\nwidth:100%;\nposition: relative;\ndisplay: flex;\nalign-items: center;\nflex: 0 1 auto;\nflex-direction: column;\njustify-content: center;\nfont-size: 14px;\n@media (max-width: " + props.mobileBreakpoint + "px) {\n  width:100%;\n}\n@media (min-width: " + ((props.mobileBreakpoint || 0) + 1) + "px) {\n  &::after {\n      content: \"\";\n      position: absolute;\n      height: 50%;\n      width: 3em;\n    [dir=\"rtl\"] & {\n      left: -1.5em;\n    }\n    [dir=\"twoSided\"] & {\n      left: -1.5em;\n    }\n    [dir=\"ltr\"] & {\n      right: -1.5em;\n    }\n  }\n  &:nth-child(even)::after {\n    border-bottom: 1px solid #707070;\n    top: -0.5px;\n  }\n  &:nth-child(odd)::after {\n    border-top: 1px solid #707070;\n    top: calc(50% - 0.5px);\n  }\n}\n";
});
var Seed = styled.div(function (props) {
  return "\n  padding: 1em 1.5em;\n  min-width: 225px;\n  width:100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: 0 1 auto;\n  flex-direction: column;\n  justify-content: center;\n  font-size: 14px;\n  @media (max-width: " + props.mobileBreakpoint + "px) {\n    width:100%;\n  }\n  @media (min-width: " + ((props.mobileBreakpoint || 0) + 1) + "px) {\n    &::after {\n        content: \"\";\n        position: absolute;\n        height: 50%;\n        width: 1.5em;\n      [dir=\"rtl\"] & {\n        left: 0px;\n      }\n      [dir=\"ltr\"] & {\n        right: 0px;\n      }\n    }\n\n    &:nth-child(even)::before{\n      content:'';\n      border-top: 1px solid #707070;\n      position:absolute;\n      top: -0.5px;\n      width:1.5em;\n      [dir=\"rtl\"] & {\n        left:-1.5em;\n        }\n      [dir=\"ltr\"] & {\n        right:-1.5em;\n      }\n    }\n\n    &:nth-child(even)::after {\n      border-bottom: 1px solid #707070;\n      top: -0.5px;\n     [dir=\"rtl\"] & {\n        border-left: 1px solid #707070;\n        }\n      [dir=\"ltr\"] & {\n        border-right: 1px solid #707070;\n      }\n    }\n    &:nth-child(odd):not(:last-child)::after {\n      border-top: 1px solid #707070;\n      top: calc(50% - 0.5px);\n      [dir=\"rtl\"] & {\n        border-left: 1px solid #707070;\n        }\n      [dir=\"ltr\"] & {\n        border-right: 1px solid #707070;\n      }\n    }\n}\n";
});

var renderTitle = function renderTitle(title) {
  return React.createElement(RoundTitle, null, title);
};
var renderSeed = function renderSeed(_ref) {
  var _seed$teams, _seed$teams$, _seed$teams2, _seed$teams2$;
  var seed = _ref.seed,
    breakpoint = _ref.breakpoint,
    isMiddleOfTwoSided = _ref.isMiddleOfTwoSided;
  var Wrapper = isMiddleOfTwoSided ? SingleLineSeed : Seed;
  return React.createElement(Wrapper, {
    mobileBreakpoint: breakpoint
  }, React.createElement(SeedItem, null, React.createElement("div", null, React.createElement(SeedTeam, null, ((_seed$teams = seed.teams) === null || _seed$teams === void 0 ? void 0 : (_seed$teams$ = _seed$teams[0]) === null || _seed$teams$ === void 0 ? void 0 : _seed$teams$.name) || '-----------'), React.createElement(SeedTeam, null, ((_seed$teams2 = seed.teams) === null || _seed$teams2 === void 0 ? void 0 : (_seed$teams2$ = _seed$teams2[1]) === null || _seed$teams2$ === void 0 ? void 0 : _seed$teams2$.name) || '-----------'))), React.createElement(SeedTime, {
    mobileBreakpoint: breakpoint
  }, seed === null || seed === void 0 ? void 0 : seed.date));
};

var _excluded = ["ref"];
var SingleElimination = function SingleElimination(_ref) {
  var rounds = _ref.rounds,
    _ref$rtl = _ref.rtl,
    rtl = _ref$rtl === void 0 ? false : _ref$rtl,
    roundClassName = _ref.roundClassName,
    bracketClassName = _ref.bracketClassName,
    _ref$swipeableProps = _ref.swipeableProps,
    swipeableProps = _ref$swipeableProps === void 0 ? {} : _ref$swipeableProps,
    _ref$mobileBreakpoint = _ref.mobileBreakpoint,
    mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 992 : _ref$mobileBreakpoint,
    _ref$twoSided = _ref.twoSided,
    twoSided = _ref$twoSided === void 0 ? false : _ref$twoSided,
    _ref$renderSeedCompon = _ref.renderSeedComponent,
    renderSeedComponent = _ref$renderSeedCompon === void 0 ? renderSeed : _ref$renderSeedCompon,
    _ref$roundTitleCompon = _ref.roundTitleComponent,
    roundTitleComponent = _ref$roundTitleCompon === void 0 ? renderTitle : _ref$roundTitleCompon;
  var isResponsive = useMedia(mobileBreakpoint);
  var getFragment = function getFragment(seed, roundIdx, idx, rounds, isMiddleOfTwoSided) {
    return React.createElement(Fragment, {
      key: seed.id
    }, renderSeedComponent({
      seed: seed,
      breakpoint: mobileBreakpoint,
      roundIndex: roundIdx,
      seedIndex: idx,
      rounds: rounds,
      isMiddleOfTwoSided: isMiddleOfTwoSided
    }));
  };
  var data = rounds.map(function (round, roundIdx) {
    return React.createElement(Round, {
      key: round.title,
      className: roundClassName,
      mobileBreakpoint: mobileBreakpoint
    }, round.title && roundTitleComponent(round.title, roundIdx), React.createElement(SeedsList, null, round.seeds.map(function (seed, idx) {
      return getFragment(seed, roundIdx, idx, rounds, false);
    })));
  });
  if (isResponsive) {
    var _ref2 = swipeableProps || {},
      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
    return React.createElement(Bracket, {
      className: bracketClassName,
      dir: rtl ? 'rtl' : 'ltr',
      mobileBreakpoint: mobileBreakpoint
    }, React.createElement(SwipeableViews, Object.assign({
      style: {
        minHeight: '500px'
      },
      axis: rtl ? 'x-reverse' : 'x'
    }, rest), data));
  }
  var getRenderedRounds = function getRenderedRounds(roundsStartIndex, roundsEndIndex, renderFirstHalfOfRoundsSeeds, rounds, dir) {
    return rounds.slice(roundsStartIndex, roundsEndIndex).map(function (round, roundIdx) {
      return 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(function (seed, idx) {
        return getFragment(seed, roundIdx, idx, rounds, false);
      }) : round.seeds.slice(round.seeds.length / 2, round.seeds.length).map(function (seed, idx) {
        return 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, [].concat(rounds).reverse(), 'rtl')]);
  }
  return React.createElement(Bracket, {
    className: bracketClassName,
    dir: rtl ? 'rtl' : 'ltr',
    mobileBreakpoint: mobileBreakpoint
  }, data);
};

export { SingleElimination as Bracket, Seed, SeedItem, SeedTeam, SeedTime, SingleLineSeed };
//# sourceMappingURL=index.modern.js.map