@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
14 lines • 2.28 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { MediaButton } from '../../components/mediaButton/mediaButton';
import { MediaProgressBar } from '../../components/mediaProgressBar/mediaProgressBar';
import { ArrowLeftWrapperStyled, ArrowRightWrapperStyled, IndicatorsContainerStyled, MediaButtonWrapperStyled, PageControlAutomateContainerStyled, } from './pageControlAutomate.styled';
const dataTestIdIndicator = 'indicator';
const dataTestIdIndicatorProgress = 'indicator-progress';
const PageControlAutomateStandAloneComponent = (props, ref) => {
const showMediaButton = props.styles.mediaButton?.variant && props.styles.mediaButton?.iconSize;
return (_jsxs(PageControlAutomateContainerStyled, { ref: ref, styles: props.styles, children: [_jsx(MediaButtonWrapperStyled, { styles: props.styles, children: showMediaButton && (_jsx(MediaButton, { size: props.styles.mediaButton?.iconSize, twisted: props.playing, variant: props.styles.mediaButton?.variant, ...props.playStop, onClick: props.onPlayStopClick })) }), _jsx(ArrowLeftWrapperStyled, { styles: props.styles, children: showMediaButton && (_jsx(MediaButton, { disabled: !props.mediaProgressBar.circular && props.currentBar <= 0, size: props.styles.mediaButton?.iconSize, variant: props.styles.mediaButton?.variant, ...props.leftArrow, onClick: props.onLeftArrowClick })) }), _jsx(IndicatorsContainerStyled, { styles: props.styles, children: _jsx(MediaProgressBar, { clickableBars: true, currentBar: props.currentBar, dataTestIdBar: dataTestIdIndicator, dataTestIdProgressBar: dataTestIdIndicatorProgress, playingExternal: props.playing, variant: props.styles.mediaProgressBarVariant, ...props.mediaProgressBar }) }), _jsx(ArrowRightWrapperStyled, { styles: props.styles, children: showMediaButton && (_jsx(MediaButton, { disabled: !props.mediaProgressBar.circular &&
props.currentBar >= props.mediaProgressBar.barsNum - 1, size: props.styles.mediaButton?.iconSize, variant: props.styles.mediaButton?.variant, ...props.rightArrow, onClick: props.onRightArrowClick })) })] }));
};
export const PageControlAutomateStandAlone = React.forwardRef(PageControlAutomateStandAloneComponent);
//# sourceMappingURL=pageControlAutomateStandAlone.js.map