@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
30 lines • 2.23 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { useMediaDevice } from '../../hooks/useMediaDevice/useMediaDevice';
import { ROLES } from '../../types/role/role';
import { BarContainerStyled, BarStyled, ParentContainerStyled, ProgressBarStyled, } from './mediaProgressBar.styled';
import { buildMediaProgessBarAriaLabel, mediaProgressBarIndex, } from './utils/mediaProgressBarUtils';
const MediaProgressBarStandaloneComponent = ({ dataTestIdBar = 'bar', dataTestIdProgressBar = 'progress-bar', barsNum, ...props }, ref) => {
const device = useMediaDevice();
const bars = Array.from({ length: barsNum }, (_, index) => {
const newIndex = mediaProgressBarIndex({
index,
barsNum,
currentBar: props.currentBar,
device,
maxBars: props.maxBars,
});
if (newIndex === undefined)
return;
return (_jsx(BarContainerStyled, { ref: props.barRef, "aria-current": newIndex === props.currentBar, "aria-label": buildMediaProgessBarAriaLabel(newIndex, barsNum, props.barAriaLabel), barFocused: newIndex === props.currentBar, clickableBars: props.clickableBars, role: ROLES.BUTTON, styles: props.styles, tabIndex: 0, onClick: e => props.onBarClick?.(newIndex, e), onKeyDown: e => props.onBarKeyDown?.(newIndex, e), children: _jsx(BarStyled, { barFocused: newIndex === props.currentBar, "data-testid": `${dataTestIdBar}-${newIndex}`, styles: props.styles, children: newIndex === props.currentBar && (_jsx(ProgressBarStyled, { ref: props.progressBarRef, barFocused: newIndex === props.currentBar, barProgressDuration: props.barProgressDuration, "data-testid": `${dataTestIdProgressBar}-${newIndex}`, playing: props.playing, styles: props.styles })) }) }, newIndex));
});
return (_jsx(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}
*/
export const MediaProgressBarStandalone = React.forwardRef(MediaProgressBarStandaloneComponent);
//# sourceMappingURL=mediaProgressBarStandAlone.js.map