40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
import { Box, LinearProgress as MuiLinearProgress } from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
|
|
const PREFIX = "MuiLinearProgress";
|
|
|
|
const classes = {
|
|
chip: `${PREFIX}-bar`,
|
|
};
|
|
|
|
const StyledMuiLinearProgress = styled(MuiLinearProgress, {
|
|
shouldForwardProp: (prop) => prop !== "barBackground" && prop !== 'barColor' && prop !== 'height'
|
|
})(({ theme, barColor, barBackground, height }) => ({
|
|
height: height || 8,
|
|
borderRadius: 4,
|
|
backgroundColor: barBackground || theme.palette.grey[300],
|
|
'& .MuiLinearProgress-bar': {
|
|
backgroundColor: barColor || theme.palette.primary.main
|
|
}
|
|
}));
|
|
|
|
const LinearProgressBar = (props) => {
|
|
return (
|
|
<Box sx={{ position: 'relative', width: '100%', py: 1 }}>
|
|
<StyledMuiLinearProgress {...props} />
|
|
{props.target && <Box
|
|
sx={{
|
|
position: 'absolute',
|
|
left: `${Math.min(Math.max(props.target, 0), 100)}%`,
|
|
top: props.targetTop || 0,
|
|
bottom: props.targetBottom || 0,
|
|
width: props.targetWidth || "2px",
|
|
backgroundColor: props.targetBackgroundColor || 'white',
|
|
}}
|
|
></Box>}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default LinearProgressBar;
|