@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
36 lines • 2.72 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediaProgressBarStandalone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useMediaDevice_1 = require("../../hooks/useMediaDevice/useMediaDevice");
const role_1 = require("../../types/role/role");
const mediaProgressBar_styled_1 = require("./mediaProgressBar.styled");
const mediaProgressBarUtils_1 = require("./utils/mediaProgressBarUtils");
const MediaProgressBarStandaloneComponent = ({ dataTestIdBar = 'bar', dataTestIdProgressBar = 'progress-bar', barsNum, ...props }, ref) => {
const device = (0, useMediaDevice_1.useMediaDevice)();
const bars = Array.from({ length: barsNum }, (_, index) => {
const newIndex = (0, mediaProgressBarUtils_1.mediaProgressBarIndex)({
index,
barsNum,
currentBar: props.currentBar,
device,
maxBars: props.maxBars,
});
if (newIndex === undefined)
return;
return ((0, jsx_runtime_1.jsx)(mediaProgressBar_styled_1.BarContainerStyled, { ref: props.barRef, "aria-current": newIndex === props.currentBar, "aria-label": (0, mediaProgressBarUtils_1.buildMediaProgessBarAriaLabel)(newIndex, barsNum, props.barAriaLabel), barFocused: newIndex === props.currentBar, clickableBars: props.clickableBars, role: role_1.ROLES.BUTTON, styles: props.styles, tabIndex: 0, onClick: e => props.onBarClick?.(newIndex, e), onKeyDown: e => props.onBarKeyDown?.(newIndex, e), children: (0, jsx_runtime_1.jsx)(mediaProgressBar_styled_1.BarStyled, { barFocused: newIndex === props.currentBar, "data-testid": `${dataTestIdBar}-${newIndex}`, styles: props.styles, children: newIndex === props.currentBar && ((0, jsx_runtime_1.jsx)(mediaProgressBar_styled_1.ProgressBarStyled, { ref: props.progressBarRef, barFocused: newIndex === props.currentBar, barProgressDuration: props.barProgressDuration, "data-testid": `${dataTestIdProgressBar}-${newIndex}`, playing: props.playing, styles: props.styles })) }) }, newIndex));
});
return ((0, jsx_runtime_1.jsx)(mediaProgressBar_styled_1.ParentContainerStyled, { ref: ref, styles: props.styles, children: bars }));
};
/**
* @description
* MediaProgressBar component is used to show a progress bar.
* @param {React.PropsWithChildren<IMediaProgressBarStandAlone>} props
* @returns {JSX.Element}
*/
exports.MediaProgressBarStandalone = react_1.default.forwardRef(MediaProgressBarStandaloneComponent);
//# sourceMappingURL=mediaProgressBarStandAlone.js.map