@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
67 lines • 2.31 kB
JavaScript
import React, { useEffect, useMemo, useState } from 'react';
import { useUuid } from '../../hooks/uuid';
import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
const ProgressBar = _ref => {
let {
percentage,
label,
shouldHideProgress = false
} = _ref;
const [internalPercentage, setInternalPercentage] = useState(0);
const uuid = useUuid();
useEffect(() => {
if (typeof percentage !== 'number') {
return;
}
if (percentage >= 0 && percentage <= 100) {
setInternalPercentage(percentage);
}
}, [percentage]);
const progressBar = useMemo(() => {
if (shouldHideProgress) {
return null;
}
if (typeof percentage !== 'number') {
return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
key: `progress-bar-loop__${uuid}`,
initial: {
width: '200px',
left: '-200px'
},
animate: {
width: '200px',
left: '100%'
},
exit: {
width: '200px',
left: '100%'
},
transition: {
type: 'tween',
repeat: Infinity,
repeatDelay: 0,
duration: 1
}
}), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
}
return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
key: `progress-bar__${uuid}`,
initial: {
width: '0%'
},
animate: {
width: `${internalPercentage}%`
},
exit: {
width: '0%'
},
transition: {
type: 'tween'
}
}), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
}, [internalPercentage, percentage, shouldHideProgress, uuid]);
return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, null, label)), [progressBar, label]);
};
ProgressBar.displayName = 'ProgressBar';
export default ProgressBar;
//# sourceMappingURL=ProgressBar.js.map