react-brackets - npm Package Compare versions

Comparing version 0.4.6 to 0.4.7

dist/types/Rounds.d.ts

+import { ISeedProps } from './Seed';
+export declare type IRoundProps = {
+    seeds: ISeedProps[];
+    title: string;
+    [key: string]: any;
+};

dist/types/Seed.d.ts

+import { IRoundProps } from './Rounds';
+export declare type ISeedProps = {
+    id: number | string;
+    teams: Array<{
+        name?: string;
+        [key: string]: any;
+    }>;
+    date?: string;
+    mobileBreakpoint?: number;
+    [key: string]: any;
+};
+export interface IRenderSeedProps {
+    seed: ISeedProps;
+    breakpoint: number;
+    roundIndex: number;
+    seedIndex: number;
+    rounds?: IRoundProps[];
+}

dist/types/SingleElimination.d.ts

+/// <reference types="react" />
+import { SwipeableViewsProps } from 'react-swipeable-views';
+import { IRenderSeedProps } from '../types/Seed';
+import { IRoundProps } from './Rounds';
+export interface ISingleEliminationProps {
+    rtl?: boolean;
+    rounds: IRoundProps[];
+    roundClassName?: string;
+    /** @default 992, if you don't want a mobile breakpoint, pass 0 */
+    mobileBreakpoint?: number;
+    bracketClassName?: string;
+    /** {@link https://github.com/oliviertassinari/react-swipeable-views} to read about it's props  */
+    swipeableProps?: SwipeableViewsProps;
+    /**
+     * @param {string} title string or component passed with each round
+     * @param {number} round the current round index
+     */
+    roundTitleComponent?: (title: string | JSX.Element, roundIdx: number) => JSX.Element;
+    /**
+     * @param {object} seed the current seed
+     * @param {number} breakpoint the breakpoint used to determine responsive size
+     * @param {number} roundIdx the current round index
+     */
+    renderSeedComponent?: (props: IRenderSeedProps) => JSX.Element;
+}

dist/brackets/index.d.ts

@@ -1,32 +0,4 @@
-import { ReactNode } from 'react';
-import { RoundProps } from '../components/round';
-import { SwipeableViewsProps } from 'react-swipeable-views';
-export interface RenderSeedProps {
-    seed: any;
-    breakpoint: number;
-    roundIndex: number;
-    seedIndex: number;
-}
-export interface SingleEliminationProps {
-    rtl?: boolean;
-    rounds: RoundProps[];
-    roundClassName?: string;
-    /** @default 992, if you don't want a mobile breakpoint, pass 0 */
-    mobileBreakpoint?: number;
-    bracketClassName?: string;
-    /** {@link https://github.com/oliviertassinari/react-swipeable-views} to read about it's props  */
-    swipeableProps?: SwipeableViewsProps;
-    /**
-     * @param {ReactNode} title string or component passed with each round
-     * @param {number} round the current round index
-     */
-    roundTitleComponent?: (title: ReactNode, roundIdx: number) => any;
-    /**
-     * @param {object} seed the current seed
-     * @param {number} breakpoint the breakpoint used to determine responsive size
-     * @param {number} roundIdx the current round index
-     */
-    renderSeedComponent?: ({ seed, breakpoint, roundIndex, seedIndex }: RenderSeedProps) => any;
-}
-declare const SingleElimination: ({ rounds, rtl, roundClassName, bracketClassName, swipeableProps, mobileBreakpoint, renderSeedComponent, roundTitleComponent, }: SingleEliminationProps) => JSX.Element;
-export default SingleElimination;
+/// <reference types="react" />
+import { ISingleEliminationProps } from '../types/SingleElimination';
+declare const SingleElimination: ({ rounds, rtl, roundClassName, bracketClassName, swipeableProps, mobileBreakpoint, renderSeedComponent, roundTitleComponent, }: ISingleEliminationProps) => JSX.Element;
+export { SingleElimination };

dist/components/round.d.ts

@@ -1,13 +0,5 @@
-export interface RoundProps {
-    seeds: any[];
-    title: string;
-    [key: string]: any;
-}
-interface BreakPoint {
-    mobileBreakpoint?: number;
-}
-export declare const Bracket: import("styled-components").StyledComponent<"div", any, BreakPoint, never>;
-export declare const Round: import("styled-components").StyledComponent<"div", any, BreakPoint, never>;
+import { ISeedProps } from '../types/Seed';
+export declare const Bracket: import("styled-components").StyledComponent<"div", any, ISeedProps, never>;
+export declare const Round: import("styled-components").StyledComponent<"div", any, ISeedProps, never>;
 export declare const RoundTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SeedsList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

dist/components/seed.d.ts

@@ -1,11 +0,6 @@
-export interface SeedProps {
-    mobileBreakpoint?: number;
-}
-export interface SeedTimeProps {
-    mobileBreakpoint?: number;
-}
+import { ISeedProps } from '../types/Seed';
 export declare const SeedItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SeedTeam: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SeedTime: import("styled-components").StyledComponent<"div", any, SeedTimeProps, never>;
-export declare const SingleLineSeed: import("styled-components").StyledComponent<"div", any, SeedProps, never>;
-export declare const Seed: import("styled-components").StyledComponent<"div", any, SeedProps, never>;
+export declare const SeedTime: import("styled-components").StyledComponent<"div", any, ISeedProps, never>;
+export declare const SingleLineSeed: import("styled-components").StyledComponent<"div", any, ISeedProps, never>;
+export declare const Seed: import("styled-components").StyledComponent<"div", any, ISeedProps, never>;

dist/index.d.ts

@@ -1,5 +0,5 @@
-export { default as Bracket } from './brackets';
+export { SingleElimination as Bracket } from './brackets';
 export { Seed, SeedTeam, SeedItem, SeedTime, SingleLineSeed } from './components/seed';
-export type { SingleEliminationProps, RenderSeedProps } from './brackets';
-export type { SeedProps, SeedTimeProps } from './components/seed';
-export type { RoundProps } from './components/round';
+export type { ISingleEliminationProps } from './types/SingleElimination';
+export type { ISeedProps, IRenderSeedProps } from './types/Seed';
+export type { IRoundProps } from './types/Rounds';

dist/index.js

@@ -32,21 +32,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-function _templateObject2() {
-  var data = _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"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  color: #8f8f8f;\n  font-weight: 400;\n  text-align: center;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 var Bracket = styled.div(function (props) {
@@ -58,4 +40,4 @@ return "\n  display: flex;\n  flex-direction: row;\n  @media (max-width: " + props.mobileBreakpoint + "px) {\n    flex-direction: column;\n  }\n  ";
 });
-var RoundTitle = styled.div(_templateObject());
-var SeedsList = styled.div(_templateObject2());
+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"])));
 
@@ -84,23 +66,5 @@ function useMedia(breakPoint) {
 
-function _templateObject2$1() {
-  var data = _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"]);
-
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$1() {
-  var data = _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"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var SeedItem = styled.div(_templateObject$1());
-var SeedTeam = styled.div(_templateObject2$1());
+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) {
@@ -128,5 +92,7 @@ return "\nmargin-top: 2px;\nfont-size: 12px;\ncolor: #8f8f8f;\nheight: 0;\n@media (max-width: " + props.mobileBreakpoint + "px) {\n  height:auto;\n}\n";
     mobileBreakpoint: breakpoint
-  }, seed.date));
+  }, seed === null || seed === void 0 ? void 0 : seed.date));
 };
 
+var _excluded = ["ref"];
+
 var SingleElimination = function SingleElimination(_ref) {
@@ -149,3 +115,3 @@ var rounds = _ref.rounds,
     return React__default.createElement(Round, {
-      key: roundIdx,
+      key: round.title,
       className: roundClassName,
@@ -155,3 +121,3 @@ mobileBreakpoint: mobileBreakpoint
       return React__default.createElement(React.Fragment, {
-        key: idx
+        key: seed.id
       }, renderSeedComponent({
@@ -161,3 +127,4 @@ seed: seed,
         roundIndex: roundIdx,
-        seedIndex: idx
+        seedIndex: idx,
+        rounds: rounds
       }));
@@ -168,3 +135,3 @@ })));
   if (isResponsive) {
-    var rest = _objectWithoutPropertiesLoose(swipeableProps, ["ref"]);
+    var rest = _objectWithoutPropertiesLoose(swipeableProps, _excluded);
 
@@ -171,0 +138,0 @@ return React__default.createElement(Bracket, {

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/components/round.ts","../src/hooks/useMedia.tsx","../src/components/seed.ts","../src/utils/renders.tsx","../src/brackets/index.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport interface RoundProps {\n  seeds: any[];\n  title: string;\n  [key: string]: any;\n}\n\ninterface BreakPoint {\n  mobileBreakpoint?: number;\n}\n\nexport const Bracket = styled.div<BreakPoint>(\n  (props) => `\n  display: flex;\n  flex-direction: row;\n  @media (max-width: ${props.mobileBreakpoint}px) {\n    flex-direction: column;\n  }\n  `\n);\n\nexport const Round = styled.div<BreakPoint>(\n  (props) => `\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  `\n);\n\nexport const RoundTitle = styled.div`\n  color: #8f8f8f;\n  font-weight: 400;\n  text-align: center;\n`;\nexport const SeedsList = styled.div`\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`;\n","import { useState, useEffect } from 'react';\n\nexport default function useMedia(breakPoint: number) {\n  // checking window object to support server side rendering.\n  const [isSmaller, setIsSmaller] = useState(typeof window !== 'undefined' ? window.innerWidth <= breakPoint : false);\n\n  useEffect(() => {\n    function screenResized() {\n      // To make sure that the state is only being updated when it has to be\n      if (isSmaller && window.innerWidth > breakPoint) {\n        setIsSmaller(false);\n      } else if (!isSmaller && window.innerWidth <= breakPoint) {\n        setIsSmaller(true);\n      }\n    }\n    if (typeof window !== 'undefined') window.addEventListener('resize', screenResized);\n\n    // to remove the event listener when this component is unmounted.\n    return () => {\n      if (typeof window !== 'undefined') window.removeEventListener('resize', screenResized);\n    };\n  }, [isSmaller]);\n\n  // the return value should be true or false\n  return isSmaller;\n}\n","import styled from 'styled-components';\n\nexport interface SeedProps {\n  mobileBreakpoint?: number;\n}\nexport interface SeedTimeProps {\n  mobileBreakpoint?: number;\n}\n\nexport const SeedItem = styled.div`\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`;\n\nexport const SeedTeam = styled.div`\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`;\n\nexport const SeedTime = styled.div<SeedTimeProps>(\n  (props) => `\nmargin-top: 2px;\nfont-size: 12px;\ncolor: #8f8f8f;\nheight: 0;\n@media (max-width: ${props.mobileBreakpoint}px) {\n  height:auto;\n}\n`\n);\n\n/*\n * Difference between \"SingleLineSeed\" and \"Seed\" is that single line seed\n * will directly connect to the next node, it's good for double elimination losing brackets.\n *\n * The best behavior in such case is, to check if the next round seeds matches the current round seeds\n */\n\nexport const SingleLineSeed = styled.div<SeedProps>(\n  (props) => `\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=\"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`\n);\n\nexport const Seed = styled.div<SeedProps>(\n  (props) => `\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`\n);\n","import React, { ReactNode } from 'react';\r\nimport { Seed, SeedItem, SeedTeam, SeedTime } from '../components/seed';\r\nimport { RoundTitle } from '../components/round';\r\nimport { RenderSeedProps } from '../brackets';\r\n\r\n/* ------------------------- default title component ------------------------ */\r\nexport const renderTitle = (title: ReactNode) => <RoundTitle>{title}</RoundTitle>;\r\n\r\n/* ------------------------- default seed component ------------------------- */\r\nexport const renderSeed = ({ seed, breakpoint }: RenderSeedProps) => {\r\n  return (\r\n    <Seed mobileBreakpoint={breakpoint}>\r\n      <SeedItem>\r\n        <div>\r\n          <SeedTeam>{seed.teams?.[0]?.name || '-----------'}</SeedTeam>\r\n          <SeedTeam>{seed.teams?.[1]?.name || '-----------'}</SeedTeam>\r\n        </div>\r\n      </SeedItem>\r\n      <SeedTime mobileBreakpoint={breakpoint}>{seed.date}</SeedTime>\r\n    </Seed>\r\n  );\r\n};\r\n","import React, { Fragment, ReactNode } from 'react';\nimport { Round, Bracket, SeedsList, RoundProps } from '../components/round';\nimport SwipeableViews, { SwipeableViewsProps } from 'react-swipeable-views';\nimport useMedia from '../hooks/useMedia';\nimport { renderSeed, renderTitle } from '../utils/renders';\n\nexport interface RenderSeedProps {\n  seed: any;\n  breakpoint: number;\n  roundIndex: number;\n  seedIndex: number;\n}\n\nexport interface SingleEliminationProps {\n  // If true, the component direction will be set to RTL\n  rtl?: boolean;\n  // Array of rounds matching RoundProps shape,\n  rounds: RoundProps[];\n  // Single round className\n  roundClassName?: string;\n  /** @default 992, if you don't want a mobile breakpoint, pass 0 */\n  mobileBreakpoint?: number;\n  // The whole bracket className\n  bracketClassName?: string;\n  /** {@link https://github.com/oliviertassinari/react-swipeable-views} to read about it's props  */\n  swipeableProps?: SwipeableViewsProps;\n  /**\n   * @param {ReactNode} title string or component passed with each round\n   * @param {number} round the current round index\n   */\n  roundTitleComponent?: (title: ReactNode, roundIdx: number) => any;\n  /**\n   * @param {object} seed the current seed\n   * @param {number} breakpoint the breakpoint used to determine responsive size\n   * @param {number} roundIdx the current round index\n   */\n  renderSeedComponent?: ({ seed, breakpoint, roundIndex, seedIndex }: RenderSeedProps) => any;\n}\n\nconst SingleElimination = ({\n  rounds,\n  rtl = false,\n  roundClassName,\n  bracketClassName,\n  swipeableProps = {},\n  mobileBreakpoint = 992,\n  renderSeedComponent = renderSeed,\n  roundTitleComponent = renderTitle,\n}: SingleEliminationProps) => {\n  // Checking responsive size\n  const isResponsive = useMedia(mobileBreakpoint);\n\n  const data = rounds.map((round, roundIdx) => (\n    <Round key={roundIdx} className={roundClassName} mobileBreakpoint={mobileBreakpoint}>\n      {round.title && roundTitleComponent(round.title, roundIdx)}\n      <SeedsList>\n        {round.seeds.map((seed, idx) => (\n          <Fragment key={idx}>\n            {renderSeedComponent({ seed, breakpoint: mobileBreakpoint, roundIndex: roundIdx, seedIndex: idx })}\n          </Fragment>\n        ))}\n      </SeedsList>\n    </Round>\n  ));\n\n  if (isResponsive) {\n    // Since SwipeableViewsProps have an issue that it uses ref inside of it, We need to remove ref from the object\n    const { ref, ...rest } = swipeableProps;\n    return (\n      <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n        <SwipeableViews style={{ minHeight: '500px' }} axis={rtl ? 'x-reverse' : 'x'} {...rest}>\n          {data}\n        </SwipeableViews>\n      </Bracket>\n    );\n  }\n  return (\n    <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n      {data}\n    </Bracket>\n  );\n};\n\nexport default SingleElimination;\n"],"names":["Bracket","styled","div","props","mobileBreakpoint","Round","RoundTitle","SeedsList","useMedia","breakPoint","useState","window","innerWidth","isSmaller","setIsSmaller","useEffect","screenResized","addEventListener","removeEventListener","SeedItem","SeedTeam","SeedTime","SingleLineSeed","Seed","renderTitle","title","React","renderSeed","seed","breakpoint","teams","name","date","SingleElimination","rounds","rtl","roundClassName","bracketClassName","swipeableProps","renderSeedComponent","roundTitleComponent","isResponsive","data","map","round","roundIdx","key","className","seeds","idx","Fragment","roundIndex","seedIndex","rest","dir","SwipeableViews","style","minHeight","axis"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/components/round.ts","../src/hooks/useMedia.tsx","../src/components/seed.ts","../src/utils/renders.tsx","../src/brackets/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ISeedProps } from '../types/Seed';\n\nexport const Bracket = styled.div<ISeedProps>(\n  (props) => `\n  display: flex;\n  flex-direction: row;\n  @media (max-width: ${props.mobileBreakpoint}px) {\n    flex-direction: column;\n  }\n  `\n);\n\nexport const Round = styled.div<ISeedProps>(\n  (props) => `\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  `\n);\n\nexport const RoundTitle = styled.div`\n  color: #8f8f8f;\n  font-weight: 400;\n  text-align: center;\n`;\n\nexport const SeedsList = styled.div`\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`;\n","import { useState, useEffect } from 'react';\n\nexport default function useMedia(breakPoint: number) {\n  // checking window object to support server side rendering.\n  const [isSmaller, setIsSmaller] = useState(typeof window !== 'undefined' ? window.innerWidth <= breakPoint : false);\n\n  useEffect(() => {\n    function screenResized() {\n      // To make sure that the state is only being updated when it has to be\n      if (isSmaller && window.innerWidth > breakPoint) {\n        setIsSmaller(false);\n      } else if (!isSmaller && window.innerWidth <= breakPoint) {\n        setIsSmaller(true);\n      }\n    }\n    if (typeof window !== 'undefined') window.addEventListener('resize', screenResized);\n\n    // to remove the event listener when this component is unmounted.\n    return () => {\n      if (typeof window !== 'undefined') window.removeEventListener('resize', screenResized);\n    };\n  }, [isSmaller]);\n\n  // the return value should be true or false\n  return isSmaller;\n}\n","import styled from 'styled-components';\nimport { ISeedProps } from '../types/Seed';\n\nexport const SeedItem = styled.div`\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`;\n\nexport const SeedTeam = styled.div`\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`;\n\nexport const SeedTime = styled.div<ISeedProps>(\n  (props) => `\nmargin-top: 2px;\nfont-size: 12px;\ncolor: #8f8f8f;\nheight: 0;\n@media (max-width: ${props.mobileBreakpoint}px) {\n  height:auto;\n}\n`\n);\n\n/*\n * Difference between \"SingleLineSeed\" and \"Seed\" is that single line seed\n * will directly connect to the next node, it's good for double elimination losing brackets.\n *\n * The best behavior in such case is, to check if the next round seeds matches the current round seeds\n */\n\nexport const SingleLineSeed = styled.div<ISeedProps>(\n  (props) => `\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=\"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`\n);\n\nexport const Seed = styled.div<ISeedProps>(\n  (props) => `\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`\n);\n","import React from 'react';\nimport { Seed, SeedItem, SeedTeam, SeedTime } from '../components/seed';\nimport { RoundTitle } from '../components/round';\nimport { IRenderSeedProps } from '../types/Seed';\n\n/* ------------------------- default title component ------------------------ */\nexport const renderTitle = (title: string | JSX.Element) => <RoundTitle>{title}</RoundTitle>;\n\n/* ------------------------- default seed component ------------------------- */\nexport const renderSeed = ({ seed, breakpoint }: IRenderSeedProps) => {\n  return (\n    <Seed mobileBreakpoint={breakpoint}>\n      <SeedItem>\n        <div>\n          <SeedTeam>{seed.teams?.[0]?.name || '-----------'}</SeedTeam>\n          <SeedTeam>{seed.teams?.[1]?.name || '-----------'}</SeedTeam>\n        </div>\n      </SeedItem>\n      <SeedTime mobileBreakpoint={breakpoint}>{seed?.date}</SeedTime>\n    </Seed>\n  );\n};\n","import React, { Fragment } from 'react';\nimport { Round, Bracket, SeedsList } from '../components/round';\nimport SwipeableViews from 'react-swipeable-views';\nimport useMedia from '../hooks/useMedia';\nimport { renderSeed, renderTitle } from '../utils/renders';\nimport { ISingleEliminationProps } from '../types/SingleElimination';\n\nconst SingleElimination = ({\n  rounds,\n  rtl = false,\n  roundClassName,\n  bracketClassName,\n  swipeableProps = {},\n  mobileBreakpoint = 992,\n  renderSeedComponent = renderSeed,\n  roundTitleComponent = renderTitle,\n}: ISingleEliminationProps) => {\n  // Checking responsive size\n  const isResponsive = useMedia(mobileBreakpoint);\n\n  const data = rounds.map((round, roundIdx) => (\n    <Round key={round.title} className={roundClassName} mobileBreakpoint={mobileBreakpoint}>\n      {round.title && roundTitleComponent(round.title, roundIdx)}\n      <SeedsList>\n        {round.seeds.map((seed, idx) => {\n          return (\n            <Fragment key={seed.id}>\n              {renderSeedComponent({\n                seed,\n                breakpoint: mobileBreakpoint,\n                roundIndex: roundIdx,\n                seedIndex: idx,\n                rounds,\n              })}\n            </Fragment>\n          );\n        })}\n      </SeedsList>\n    </Round>\n  ));\n\n  if (isResponsive) {\n    // Since SwipeableViewsProps have an issue that it uses ref inside of it, We need to remove ref from the object\n    const { ref, ...rest } = swipeableProps;\n    return (\n      <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n        <SwipeableViews style={{ minHeight: '500px' }} axis={rtl ? 'x-reverse' : 'x'} {...rest}>\n          {data}\n        </SwipeableViews>\n      </Bracket>\n    );\n  }\n  return (\n    <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n      {data}\n    </Bracket>\n  );\n};\n\nexport { SingleElimination };\n"],"names":["Bracket","styled","div","props","mobileBreakpoint","Round","RoundTitle","SeedsList","useMedia","breakPoint","useState","window","innerWidth","isSmaller","setIsSmaller","useEffect","screenResized","addEventListener","removeEventListener","SeedItem","SeedTeam","SeedTime","SingleLineSeed","Seed","renderTitle","title","React","renderSeed","seed","breakpoint","teams","name","date","SingleElimination","rounds","rtl","roundClassName","bracketClassName","swipeableProps","renderSeedComponent","roundTitleComponent","isResponsive","data","map","round","roundIdx","key","className","seeds","idx","Fragment","id","roundIndex","seedIndex","rest","dir","SwipeableViews","style","minHeight","axis"],"mappings":"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"}

dist/index.modern.js

@@ -29,21 +29,3 @@ import React, { useState, useEffect, Fragment } from 'react';
 
-function _templateObject2() {
-  var data = _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"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  color: #8f8f8f;\n  font-weight: 400;\n  text-align: center;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 var Bracket = styled.div(function (props) {
@@ -55,4 +37,4 @@ return "\n  display: flex;\n  flex-direction: row;\n  @media (max-width: " + props.mobileBreakpoint + "px) {\n    flex-direction: column;\n  }\n  ";
 });
-var RoundTitle = styled.div(_templateObject());
-var SeedsList = styled.div(_templateObject2());
+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"])));
 
@@ -81,23 +63,5 @@ function useMedia(breakPoint) {
 
-function _templateObject2$1() {
-  var data = _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"]);
-
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$1() {
-  var data = _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"]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var SeedItem = styled.div(_templateObject$1());
-var SeedTeam = styled.div(_templateObject2$1());
+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) {
@@ -125,5 +89,7 @@ return "\nmargin-top: 2px;\nfont-size: 12px;\ncolor: #8f8f8f;\nheight: 0;\n@media (max-width: " + props.mobileBreakpoint + "px) {\n  height:auto;\n}\n";
     mobileBreakpoint: breakpoint
-  }, seed.date));
+  }, seed === null || seed === void 0 ? void 0 : seed.date));
 };
 
+var _excluded = ["ref"];
+
 var SingleElimination = function SingleElimination(_ref) {
@@ -146,3 +112,3 @@ var rounds = _ref.rounds,
     return React.createElement(Round, {
-      key: roundIdx,
+      key: round.title,
       className: roundClassName,
@@ -152,3 +118,3 @@ mobileBreakpoint: mobileBreakpoint
       return React.createElement(Fragment, {
-        key: idx
+        key: seed.id
       }, renderSeedComponent({
@@ -158,3 +124,4 @@ seed: seed,
         roundIndex: roundIdx,
-        seedIndex: idx
+        seedIndex: idx,
+        rounds: rounds
       }));
@@ -165,3 +132,3 @@ })));
   if (isResponsive) {
-    var rest = _objectWithoutPropertiesLoose(swipeableProps, ["ref"]);
+    var rest = _objectWithoutPropertiesLoose(swipeableProps, _excluded);
 
@@ -168,0 +135,0 @@ return React.createElement(Bracket, {

dist/index.modern.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/components/round.ts","../src/hooks/useMedia.tsx","../src/components/seed.ts","../src/utils/renders.tsx","../src/brackets/index.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport interface RoundProps {\n  seeds: any[];\n  title: string;\n  [key: string]: any;\n}\n\ninterface BreakPoint {\n  mobileBreakpoint?: number;\n}\n\nexport const Bracket = styled.div<BreakPoint>(\n  (props) => `\n  display: flex;\n  flex-direction: row;\n  @media (max-width: ${props.mobileBreakpoint}px) {\n    flex-direction: column;\n  }\n  `\n);\n\nexport const Round = styled.div<BreakPoint>(\n  (props) => `\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  `\n);\n\nexport const RoundTitle = styled.div`\n  color: #8f8f8f;\n  font-weight: 400;\n  text-align: center;\n`;\nexport const SeedsList = styled.div`\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`;\n","import { useState, useEffect } from 'react';\n\nexport default function useMedia(breakPoint: number) {\n  // checking window object to support server side rendering.\n  const [isSmaller, setIsSmaller] = useState(typeof window !== 'undefined' ? window.innerWidth <= breakPoint : false);\n\n  useEffect(() => {\n    function screenResized() {\n      // To make sure that the state is only being updated when it has to be\n      if (isSmaller && window.innerWidth > breakPoint) {\n        setIsSmaller(false);\n      } else if (!isSmaller && window.innerWidth <= breakPoint) {\n        setIsSmaller(true);\n      }\n    }\n    if (typeof window !== 'undefined') window.addEventListener('resize', screenResized);\n\n    // to remove the event listener when this component is unmounted.\n    return () => {\n      if (typeof window !== 'undefined') window.removeEventListener('resize', screenResized);\n    };\n  }, [isSmaller]);\n\n  // the return value should be true or false\n  return isSmaller;\n}\n","import styled from 'styled-components';\n\nexport interface SeedProps {\n  mobileBreakpoint?: number;\n}\nexport interface SeedTimeProps {\n  mobileBreakpoint?: number;\n}\n\nexport const SeedItem = styled.div`\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`;\n\nexport const SeedTeam = styled.div`\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`;\n\nexport const SeedTime = styled.div<SeedTimeProps>(\n  (props) => `\nmargin-top: 2px;\nfont-size: 12px;\ncolor: #8f8f8f;\nheight: 0;\n@media (max-width: ${props.mobileBreakpoint}px) {\n  height:auto;\n}\n`\n);\n\n/*\n * Difference between \"SingleLineSeed\" and \"Seed\" is that single line seed\n * will directly connect to the next node, it's good for double elimination losing brackets.\n *\n * The best behavior in such case is, to check if the next round seeds matches the current round seeds\n */\n\nexport const SingleLineSeed = styled.div<SeedProps>(\n  (props) => `\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=\"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`\n);\n\nexport const Seed = styled.div<SeedProps>(\n  (props) => `\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`\n);\n","import React, { ReactNode } from 'react';\r\nimport { Seed, SeedItem, SeedTeam, SeedTime } from '../components/seed';\r\nimport { RoundTitle } from '../components/round';\r\nimport { RenderSeedProps } from '../brackets';\r\n\r\n/* ------------------------- default title component ------------------------ */\r\nexport const renderTitle = (title: ReactNode) => <RoundTitle>{title}</RoundTitle>;\r\n\r\n/* ------------------------- default seed component ------------------------- */\r\nexport const renderSeed = ({ seed, breakpoint }: RenderSeedProps) => {\r\n  return (\r\n    <Seed mobileBreakpoint={breakpoint}>\r\n      <SeedItem>\r\n        <div>\r\n          <SeedTeam>{seed.teams?.[0]?.name || '-----------'}</SeedTeam>\r\n          <SeedTeam>{seed.teams?.[1]?.name || '-----------'}</SeedTeam>\r\n        </div>\r\n      </SeedItem>\r\n      <SeedTime mobileBreakpoint={breakpoint}>{seed.date}</SeedTime>\r\n    </Seed>\r\n  );\r\n};\r\n","import React, { Fragment, ReactNode } from 'react';\nimport { Round, Bracket, SeedsList, RoundProps } from '../components/round';\nimport SwipeableViews, { SwipeableViewsProps } from 'react-swipeable-views';\nimport useMedia from '../hooks/useMedia';\nimport { renderSeed, renderTitle } from '../utils/renders';\n\nexport interface RenderSeedProps {\n  seed: any;\n  breakpoint: number;\n  roundIndex: number;\n  seedIndex: number;\n}\n\nexport interface SingleEliminationProps {\n  // If true, the component direction will be set to RTL\n  rtl?: boolean;\n  // Array of rounds matching RoundProps shape,\n  rounds: RoundProps[];\n  // Single round className\n  roundClassName?: string;\n  /** @default 992, if you don't want a mobile breakpoint, pass 0 */\n  mobileBreakpoint?: number;\n  // The whole bracket className\n  bracketClassName?: string;\n  /** {@link https://github.com/oliviertassinari/react-swipeable-views} to read about it's props  */\n  swipeableProps?: SwipeableViewsProps;\n  /**\n   * @param {ReactNode} title string or component passed with each round\n   * @param {number} round the current round index\n   */\n  roundTitleComponent?: (title: ReactNode, roundIdx: number) => any;\n  /**\n   * @param {object} seed the current seed\n   * @param {number} breakpoint the breakpoint used to determine responsive size\n   * @param {number} roundIdx the current round index\n   */\n  renderSeedComponent?: ({ seed, breakpoint, roundIndex, seedIndex }: RenderSeedProps) => any;\n}\n\nconst SingleElimination = ({\n  rounds,\n  rtl = false,\n  roundClassName,\n  bracketClassName,\n  swipeableProps = {},\n  mobileBreakpoint = 992,\n  renderSeedComponent = renderSeed,\n  roundTitleComponent = renderTitle,\n}: SingleEliminationProps) => {\n  // Checking responsive size\n  const isResponsive = useMedia(mobileBreakpoint);\n\n  const data = rounds.map((round, roundIdx) => (\n    <Round key={roundIdx} className={roundClassName} mobileBreakpoint={mobileBreakpoint}>\n      {round.title && roundTitleComponent(round.title, roundIdx)}\n      <SeedsList>\n        {round.seeds.map((seed, idx) => (\n          <Fragment key={idx}>\n            {renderSeedComponent({ seed, breakpoint: mobileBreakpoint, roundIndex: roundIdx, seedIndex: idx })}\n          </Fragment>\n        ))}\n      </SeedsList>\n    </Round>\n  ));\n\n  if (isResponsive) {\n    // Since SwipeableViewsProps have an issue that it uses ref inside of it, We need to remove ref from the object\n    const { ref, ...rest } = swipeableProps;\n    return (\n      <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n        <SwipeableViews style={{ minHeight: '500px' }} axis={rtl ? 'x-reverse' : 'x'} {...rest}>\n          {data}\n        </SwipeableViews>\n      </Bracket>\n    );\n  }\n  return (\n    <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n      {data}\n    </Bracket>\n  );\n};\n\nexport default SingleElimination;\n"],"names":["Bracket","styled","div","props","mobileBreakpoint","Round","RoundTitle","SeedsList","useMedia","breakPoint","useState","window","innerWidth","isSmaller","setIsSmaller","useEffect","screenResized","addEventListener","removeEventListener","SeedItem","SeedTeam","SeedTime","SingleLineSeed","Seed","renderTitle","title","React","renderSeed","seed","breakpoint","teams","name","date","SingleElimination","rounds","rtl","roundClassName","bracketClassName","swipeableProps","renderSeedComponent","roundTitleComponent","isResponsive","data","map","round","roundIdx","key","className","seeds","idx","Fragment","roundIndex","seedIndex","rest","dir","SwipeableViews","style","minHeight","axis"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/components/round.ts","../src/hooks/useMedia.tsx","../src/components/seed.ts","../src/utils/renders.tsx","../src/brackets/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { ISeedProps } from '../types/Seed';\n\nexport const Bracket = styled.div<ISeedProps>(\n  (props) => `\n  display: flex;\n  flex-direction: row;\n  @media (max-width: ${props.mobileBreakpoint}px) {\n    flex-direction: column;\n  }\n  `\n);\n\nexport const Round = styled.div<ISeedProps>(\n  (props) => `\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  `\n);\n\nexport const RoundTitle = styled.div`\n  color: #8f8f8f;\n  font-weight: 400;\n  text-align: center;\n`;\n\nexport const SeedsList = styled.div`\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`;\n","import { useState, useEffect } from 'react';\n\nexport default function useMedia(breakPoint: number) {\n  // checking window object to support server side rendering.\n  const [isSmaller, setIsSmaller] = useState(typeof window !== 'undefined' ? window.innerWidth <= breakPoint : false);\n\n  useEffect(() => {\n    function screenResized() {\n      // To make sure that the state is only being updated when it has to be\n      if (isSmaller && window.innerWidth > breakPoint) {\n        setIsSmaller(false);\n      } else if (!isSmaller && window.innerWidth <= breakPoint) {\n        setIsSmaller(true);\n      }\n    }\n    if (typeof window !== 'undefined') window.addEventListener('resize', screenResized);\n\n    // to remove the event listener when this component is unmounted.\n    return () => {\n      if (typeof window !== 'undefined') window.removeEventListener('resize', screenResized);\n    };\n  }, [isSmaller]);\n\n  // the return value should be true or false\n  return isSmaller;\n}\n","import styled from 'styled-components';\nimport { ISeedProps } from '../types/Seed';\n\nexport const SeedItem = styled.div`\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`;\n\nexport const SeedTeam = styled.div`\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`;\n\nexport const SeedTime = styled.div<ISeedProps>(\n  (props) => `\nmargin-top: 2px;\nfont-size: 12px;\ncolor: #8f8f8f;\nheight: 0;\n@media (max-width: ${props.mobileBreakpoint}px) {\n  height:auto;\n}\n`\n);\n\n/*\n * Difference between \"SingleLineSeed\" and \"Seed\" is that single line seed\n * will directly connect to the next node, it's good for double elimination losing brackets.\n *\n * The best behavior in such case is, to check if the next round seeds matches the current round seeds\n */\n\nexport const SingleLineSeed = styled.div<ISeedProps>(\n  (props) => `\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=\"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`\n);\n\nexport const Seed = styled.div<ISeedProps>(\n  (props) => `\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`\n);\n","import React from 'react';\nimport { Seed, SeedItem, SeedTeam, SeedTime } from '../components/seed';\nimport { RoundTitle } from '../components/round';\nimport { IRenderSeedProps } from '../types/Seed';\n\n/* ------------------------- default title component ------------------------ */\nexport const renderTitle = (title: string | JSX.Element) => <RoundTitle>{title}</RoundTitle>;\n\n/* ------------------------- default seed component ------------------------- */\nexport const renderSeed = ({ seed, breakpoint }: IRenderSeedProps) => {\n  return (\n    <Seed mobileBreakpoint={breakpoint}>\n      <SeedItem>\n        <div>\n          <SeedTeam>{seed.teams?.[0]?.name || '-----------'}</SeedTeam>\n          <SeedTeam>{seed.teams?.[1]?.name || '-----------'}</SeedTeam>\n        </div>\n      </SeedItem>\n      <SeedTime mobileBreakpoint={breakpoint}>{seed?.date}</SeedTime>\n    </Seed>\n  );\n};\n","import React, { Fragment } from 'react';\nimport { Round, Bracket, SeedsList } from '../components/round';\nimport SwipeableViews from 'react-swipeable-views';\nimport useMedia from '../hooks/useMedia';\nimport { renderSeed, renderTitle } from '../utils/renders';\nimport { ISingleEliminationProps } from '../types/SingleElimination';\n\nconst SingleElimination = ({\n  rounds,\n  rtl = false,\n  roundClassName,\n  bracketClassName,\n  swipeableProps = {},\n  mobileBreakpoint = 992,\n  renderSeedComponent = renderSeed,\n  roundTitleComponent = renderTitle,\n}: ISingleEliminationProps) => {\n  // Checking responsive size\n  const isResponsive = useMedia(mobileBreakpoint);\n\n  const data = rounds.map((round, roundIdx) => (\n    <Round key={round.title} className={roundClassName} mobileBreakpoint={mobileBreakpoint}>\n      {round.title && roundTitleComponent(round.title, roundIdx)}\n      <SeedsList>\n        {round.seeds.map((seed, idx) => {\n          return (\n            <Fragment key={seed.id}>\n              {renderSeedComponent({\n                seed,\n                breakpoint: mobileBreakpoint,\n                roundIndex: roundIdx,\n                seedIndex: idx,\n                rounds,\n              })}\n            </Fragment>\n          );\n        })}\n      </SeedsList>\n    </Round>\n  ));\n\n  if (isResponsive) {\n    // Since SwipeableViewsProps have an issue that it uses ref inside of it, We need to remove ref from the object\n    const { ref, ...rest } = swipeableProps;\n    return (\n      <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n        <SwipeableViews style={{ minHeight: '500px' }} axis={rtl ? 'x-reverse' : 'x'} {...rest}>\n          {data}\n        </SwipeableViews>\n      </Bracket>\n    );\n  }\n  return (\n    <Bracket className={bracketClassName} dir={rtl ? 'rtl' : 'ltr'} mobileBreakpoint={mobileBreakpoint}>\n      {data}\n    </Bracket>\n  );\n};\n\nexport { SingleElimination };\n"],"names":["Bracket","styled","div","props","mobileBreakpoint","Round","RoundTitle","SeedsList","useMedia","breakPoint","useState","window","innerWidth","isSmaller","setIsSmaller","useEffect","screenResized","addEventListener","removeEventListener","SeedItem","SeedTeam","SeedTime","SingleLineSeed","Seed","renderTitle","title","React","renderSeed","seed","breakpoint","teams","name","date","SingleElimination","rounds","rtl","roundClassName","bracketClassName","swipeableProps","renderSeedComponent","roundTitleComponent","isResponsive","data","map","round","roundIdx","key","className","seeds","idx","Fragment","id","roundIndex","seedIndex","rest","dir","SwipeableViews","style","minHeight","axis"],"mappings":"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"}

dist/utils/renders.d.ts

@@ -1,4 +0,4 @@
-import { ReactNode } from 'react';
-import { RenderSeedProps } from '../brackets';
-export declare const renderTitle: (title: ReactNode) => JSX.Element;
-export declare const renderSeed: ({ seed, breakpoint }: RenderSeedProps) => JSX.Element;
+/// <reference types="react" />
+import { IRenderSeedProps } from '../types/Seed';
+export declare const renderTitle: (title: string | JSX.Element) => JSX.Element;
+export declare const renderSeed: ({ seed, breakpoint }: IRenderSeedProps) => JSX.Element;

package.json

 {
   "name": "react-brackets",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "React component to render dynamic bracket UI",
@@ -20,3 +20,3 @@ "author": "mohux",
     "test:build": "run-s build",
-    "test:lint": "eslint .",
+    "test:lint": "eslint './src/**/*.{ts,tsx}'",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
@@ -28,3 +28,3 @@ "test:watch": "react-scripts test --env=jsdom",
   "peerDependencies": {
-    "react": "^16.0.0",
+    "react": "^17.0.0",
     "react-swipeable-views": "^0.13.9",
@@ -31,0 +31,0 @@ "styled-components": "^5.1.1"

README.md

@@ -81,3 +81,3 @@ # react-brackets
       rounds={rounds}
-      renderTitleComponent={(title: React.ReactNode, roundIndex: number) => {
+      roundTitleComponent={(title: React.ReactNode, roundIndex: number) => {
         return <div style={{ textAlign: 'center', color: 'red' }}>{title}</div>;
@@ -125,3 +125,3 @@ }}
 ```jsx
-import { Bracket, RoundProps, Seed, SingleLineSeed, SeedItem, SeedTeam } from 'react-brackets';
+import { Bracket, RoundProps, Seed, SingleLineSeed, SeedItem, SeedTeam, RenderSeedProps } from 'react-brackets';
 import React from 'react';
@@ -128,0 +128,0 @@

dist/brackets/double-elimination.d.ts

-/// <reference types="react" />
-declare const DoubleElimination: () => JSX.Element;
-export default DoubleElimination;

dist/brackets/losing-bracket.d.ts

-/// <reference types="react" />
-import { SwipeableViewsProps } from 'react-swipeable-views';
-import { RoundProps } from '../components/round';
-export interface SingleEliminationProps {
-    rtl?: boolean;
-    rounds: RoundProps[];
-    roundClassName?: string;
-    mobileBreakpoint?: number;
-    bracketClassName?: string;
-    swipeableProps?: SwipeableViewsProps;
-    roundTitleComponent?: (title: string, round?: RoundProps) => any;
-    renderSeedComponent?: (seed: any, breakpoint: number, roundIdx: number) => any;
-}
-declare const DoubleElimination: ({ rtl, rounds, roundClassName, bracketClassName, mobileBreakpoint, swipeableProps, renderSeedComponent, roundTitleComponent, }: SingleEliminationProps) => JSX.Element;
-export default DoubleElimination;

dist/brackets/single-elimination.d.ts

-/// <reference types="react" />
-import { RoundProps } from '../components/round';
-import { SwipeableViewsProps } from 'react-swipeable-views';
-export interface SingleEliminationProps {
-    rtl?: boolean;
-    rounds: RoundProps[];
-    roundClassName?: string;
-    mobileBreakpoint?: number;
-    bracketClassName?: string;
-    swipeableProps?: SwipeableViewsProps;
-    roundTitleComponent?: (title: string, round?: RoundProps) => any;
-    renderSeedComponent?: (seed: any, breakpoint: number, roundIdx: number) => any;
-}
-declare const SingleElimination: ({ rounds, rtl, roundClassName, bracketClassName, swipeableProps, mobileBreakpoint, renderSeedComponent, roundTitleComponent, }: SingleEliminationProps) => JSX.Element;
-export default SingleElimination;

dist/components/single-elimination.d.ts

-/// <reference types="react" />
-export interface SingleEliminationProps {
-    rounds: RoundProps[];
-    roundTitleComponent?: (title: string, round?: RoundProps) => JSX.Element;
-}
-export interface RoundProps {
-    title: string;
-    [key: string]: any;
-}
-declare const SingleElimination: ({ rounds, roundTitleComponent }: SingleEliminationProps) => JSX.Element;
-export default SingleElimination;

dist/index.css

-._3iALI {
-  display: flex;
-  flex-direction: row;
-  @media (max-width: 992px) {
-    flex-direction: column;
-  }
-}

dist/index.test.d.ts

-export {};

dist/interfaces/single-elimination.d.ts

-/// <reference types="react" />
-export interface SingleEliminationProps {
-    rounds: any[];
-    roundTitle?: () => JSX.Element;
-}

dist/types/single-elimination.d.ts

-/// <reference types="react" />
-export interface SingleEliminationProps {
-    rounds: any[];
-    roundComponent: () => JSX.Element;
-}

dist/utils/nextPowerOfTwo.d.ts

-export declare const nextPowerOfTwo: (value: number) => number;

dist/utils/validate-single-elimination.d.ts

-export default function ValidateRoundsFormat(rounds: any[]): void;

No alert changes

Worsened metrics

Total package byte prevSize

55056

-8.96%

Number of package files

16

-30.43%

Lines of code

357

-22.22%

No dependency changes