@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
51 lines • 1.64 kB
JavaScript
import React from 'react';
import { StyledHighlightSliderItem, StyledHighlightSliderItemBackground, StyledHighlightSliderItemProgress } from './HighlightSliderItem.styles';
import { StyledProgressBarProgressWrapper } from '../../progress-bar/ProgressBar.styles';
import { useUuid } from '../../../hooks/uuid';
const HighlightSliderItem = _ref => {
let {
colors,
isActive,
isFinished,
onFinish,
index,
onClick,
duration
} = _ref;
const uuid = useUuid();
return /*#__PURE__*/React.createElement(StyledHighlightSliderItem, {
onClick: () => onClick(index)
}, /*#__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