LivePagination.jsx

Enable keyboard shortcuts

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this

 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

// eslint-disable-next-line no-unused-vars

import React from "react";

import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";

// Pager for the Now tab when 2+ live games are happening at once. Chevron

// buttons step through the live matches (already sorted followed-first); dot

// indicators show position and let the user jump directly to a match.

// Chevron icon direction is mirrored under RTL via CSS (`:dir(rtl)`).

function LivePagination({

  dispatch,

  liveIndex,

  liveCount,

  size,

  handleInteraction,

}) {

  const buttonSize = size === "medium" ? "small" : undefined;

  const goTo = nextIndex => {

    dispatch(

      ac.AlsoToMain({

        type: at.WIDGETS_SPORTS_CHANGE_LIVE_INDEX,

        data: nextIndex,

})

);

    handleInteraction();

};

  const goPrev = () => goTo((liveIndex - 1 + liveCount) % liveCount);

  const goNext = () => goTo((liveIndex + 1) % liveCount);

  return (

    <div className="sports-live-pagination" role="group">

      <moz-button

        type="ghost"

        size={buttonSize}

        className="sports-live-pagination-prev"

        iconSrc="chrome://global/skin/icons/arrow-left.svg"

        data-l10n-id="newtab-sports-widget-pagination-previous"

        onClick={goPrev}

      ></moz-button>

      <div className="sports-live-pagination-dots">

        {Array.from({ length: liveCount }, (_, i) => (

          <button

            key={i}

            type="button"

            className={`sports-live-pagination-dot${i === liveIndex ? " is-active" : ""}`}

            aria-current={i === liveIndex ? "true" : undefined}

            data-l10n-id="newtab-sports-widget-pagination-dot"

            data-l10n-args={JSON.stringify({

              index: i + 1,

              total: liveCount,

})}

            onClick={() => goTo(i)}

/>

))}

      </div>

      <moz-button

        type="ghost"

        size={buttonSize}

        className="sports-live-pagination-next"

        iconSrc="chrome://global/skin/icons/arrow-right.svg"

        data-l10n-id="newtab-sports-widget-pagination-next"

        onClick={goNext}

      ></moz-button>

    </div>

);

export { LivePagination };