- : 0 %
- : 0 %
- : 0 %
- : 0 %
- : 0 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
- : 8 %
Source code
Revision control
Copy as Markdown
Other Tools
/* 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
// eslint-disable-next-line no-unused-vars
import React from "react";
import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs";
const USER_ACTION_TYPES = {
CHANGE_LIVE_MATCH: "change_live_match",
};
// Arrow icons are mirrored under RTL via :dir(rtl) CSS.
function LivePagination({
dispatch,
liveIndex,
liveCount,
size,
widgetSize,
handleInteraction,
}) {
const buttonSize = size === "medium" ? "small" : undefined;
const goTo = nextIndex => {
if (nextIndex === liveIndex) {
return;
}
dispatch(
ac.OnlyToMain({
type: at.WIDGETS_USER_EVENT,
data: {
widget_name: "sports",
widget_source: "widget",
user_action: USER_ACTION_TYPES.CHANGE_LIVE_MATCH,
action_value: String(nextIndex + 1),
widget_size: widgetSize,
},
})
);
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 };