@navinc/base-react-components
Version:
Nav's Pattern Library
55 lines (53 loc) • 2.25 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { clamp } from '@navinc/utils';
import { useEffect, useRef, useState } from 'react';
import { styled, css, keyframes } from 'styled-components';
const progressClamp = clamp(0, 100);
export const ProgressBarSection = styled.div.withConfig({ displayName: "brc-sc-ProgressBarSection", componentId: "brc-sc-klx6t7" }) `
height: 8px;
background-color: ${({ theme }) => theme.navNeutral100};
display: inline-block;
width: 100%;
border-radius: 8px;
`;
const advanceProgress = (prevWidth) => keyframes `
from {
width: ${progressClamp(prevWidth)}%;
}
`;
const animation = ({ prevWidth }) => css `
animation: ${advanceProgress(prevWidth)} 1s forwards;
`;
const Progress = styled.div.withConfig({ displayName: "brc-sc-Progress", componentId: "brc-sc-dzm198" }) `
background-color: ${({ bgColor, theme }) => bgColor || theme.navPrimary400};
height: 8px;
width: ${({ percent }) => progressClamp(percent)}%;
border-radius: 8px;
${animation};
`;
const UnstyledProgressBar = ({ bgColor, percent, className }) => {
const prevWidth = useRef(0);
const nextWidth = useRef(0);
const [progress, setProgress] = useState(0);
/*
Keeps track of previous percentage completion, setting 'to' and 'from' values for animation.
Updates state to set up animation for next time the percent completion changes.
*/
useEffect(() => {
prevWidth.current = progress;
}, [progress]);
useEffect(() => {
nextWidth.current = percent;
setProgress(percent);
}, [percent]);
return (_jsx(ProgressBarSection, { className: className, "data-testid": "progress-bar:container", children: _jsx(Progress, { "data-testid": "progress-bar:step-fill", bgColor: bgColor, percent: nextWidth.current, prevWidth: prevWidth.current }) }));
};
/**
`ProgressBar` is an animated progress bar.
The `percent` prop is required, `bgColor` is optional and will use the default color if not provided.
```
<ProgressBar bgColor={theme.mermaidGreen500} percent={50} />
```
*/
export const ProgressBar = styled(UnstyledProgressBar).withConfig({ displayName: "brc-sc-ProgressBar", componentId: "brc-sc-1hxgcgc" }) ``;
//# sourceMappingURL=progress-bar.js.map