You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import styled from 'styled-components';
|
|
import { THEME_GLOBALS } from '../../../themes/globals';
|
|
import { Flex } from '../../basic/Flex';
|
|
import { SpacerMD, SpacerXL } from '../../basic/Text';
|
|
|
|
const ProgressContainer = styled.div<{ color: string }>`
|
|
background: ${({ color }) => color};
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
`;
|
|
|
|
const Progress = styled(motion.div)<{ color: string }>`
|
|
background: ${({ color }) => color};
|
|
border-radius: 10px;
|
|
height: 17px;
|
|
`;
|
|
|
|
const StyledText = styled.span`
|
|
margin: 0;
|
|
`;
|
|
|
|
const StyledTitle = styled(StyledText)`
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
`;
|
|
|
|
type Props = {
|
|
/** a percentage value */
|
|
initialValue: number;
|
|
/** a percentage value */
|
|
progress: number;
|
|
color?: string;
|
|
backgroundColor?: string;
|
|
margin?: string;
|
|
/** pixels is preferred */
|
|
width?: string;
|
|
title?: string;
|
|
subtitle?: string;
|
|
showPercentage?: boolean;
|
|
};
|
|
|
|
export function SessionProgressBar(props: Props) {
|
|
const {
|
|
initialValue,
|
|
progress,
|
|
width = '100%',
|
|
backgroundColor = 'var(--border-color)',
|
|
color = 'var(--primary-color)',
|
|
margin,
|
|
title,
|
|
subtitle,
|
|
showPercentage,
|
|
} = props;
|
|
|
|
return (
|
|
<Flex
|
|
container={true}
|
|
width={width}
|
|
flexDirection={'column'}
|
|
alignItems={'flex-start'}
|
|
margin={margin}
|
|
>
|
|
{title ? (
|
|
<>
|
|
<StyledTitle>{title}</StyledTitle>
|
|
<SpacerMD />
|
|
</>
|
|
) : null}
|
|
<Flex container={true} width={width} justifyContent="space-between" alignItems="center">
|
|
{subtitle ? <StyledText>{subtitle}</StyledText> : null}
|
|
{showPercentage ? <StyledText>{Math.floor(progress)}%</StyledText> : null}
|
|
</Flex>
|
|
{subtitle || showPercentage ? <SpacerXL /> : null}
|
|
<ProgressContainer
|
|
aria-label="Loading animation"
|
|
color={backgroundColor}
|
|
style={{ width }}
|
|
data-testid="loading-animation"
|
|
>
|
|
<Progress
|
|
color={color}
|
|
initial={{ width: `${initialValue}%` }}
|
|
animate={{ width: `${progress}%` }}
|
|
transition={{
|
|
duration: THEME_GLOBALS['--duration-progress-bar'],
|
|
}}
|
|
/>
|
|
</ProgressContainer>
|
|
</Flex>
|
|
);
|
|
}
|