@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
67 lines • 2.3 kB
JavaScript
import React, { useCallback } from 'react';
import { StyledHighlightSliderItem, StyledHighlightSliderItemBackground, StyledHighlightSliderItemProgress } from './HighlightSliderItem.styles';
import { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';
import { useUuid } from '../../../hooks/uuid';
const HighlightSliderItem = ({
colors,
isActive,
isFinished,
onFinish,
index,
onClick,
duration,
isInteractive,
shouldEnableKeyboardHighlighting,
shouldShowKeyboardHighlighting = false
}) => {
const uuid = useUuid();
const isKeyboardFocusable = isInteractive && shouldEnableKeyboardHighlighting;
const handleKeyDown = useCallback(event => {
if (!isInteractive) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClick(index);
}
}, [index, isInteractive, onClick]);
return /*#__PURE__*/React.createElement(StyledHighlightSliderItem, {
onClick: isInteractive ? () => onClick(index) : undefined,
onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
tabIndex: isKeyboardFocusable ? 0 : -1,
role: isInteractive ? 'button' : undefined,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, isActive && /*#__PURE__*/React.createElement(StyledHighlightSliderItemProgress, {
key: `highlight-slider-item-active--${uuid}`,
initial: {
width: '100%',
left: '-100%'
},
animate: {
width: '100%',
left: '0%'
},
exit: {
width: '100%',
left: '0%'
},
onAnimationComplete: () => onFinish(index),
$backgroundColor: colors.fillColor,
transition: {
ease: 'linear',
duration
}
}), isFinished && /*#__PURE__*/React.createElement(StyledHighlightSliderItemProgress, {
key: `highlight-slider-item-finished--${uuid}`,
style: {
width: '100%',
left: '0%'
},
$backgroundColor: colors.fillColor
}), /*#__PURE__*/React.createElement(StyledHighlightSliderItemBackground, {
$backgroundColor: colors.backgroundColor
})));
};
HighlightSliderItem.displayName = 'HighlightSliderItem';
export default HighlightSliderItem;
//# sourceMappingURL=HighlightSliderItem.js.map