2022-03-23 08:03:32 +01:00
|
|
|
import { FC, useMemo } from 'react';
|
2022-03-24 03:55:11 +01:00
|
|
|
import { Base, Column, ColumnProps, Flex } from '..';
|
2022-03-23 08:03:32 +01:00
|
|
|
|
2022-03-24 03:55:11 +01:00
|
|
|
interface LayoutProgressBarProps extends ColumnProps
|
2022-03-23 08:03:32 +01:00
|
|
|
{
|
2022-03-24 03:55:11 +01:00
|
|
|
text?: string;
|
2022-03-23 08:03:32 +01:00
|
|
|
progress: number;
|
|
|
|
maxProgress?: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
|
|
|
|
{
|
2022-03-24 03:55:11 +01:00
|
|
|
const { text = '', progress = 0, maxProgress = 100, position = 'relative', justifyContent = 'center', classNames = [], children = null, ...rest } = props;
|
2022-03-23 08:03:32 +01:00
|
|
|
|
|
|
|
const getClassNames = useMemo(() =>
|
|
|
|
{
|
2022-03-24 03:55:11 +01:00
|
|
|
const newClassNames: string[] = [ 'nitro-progress-bar', 'text-white' ];
|
2022-03-23 08:03:32 +01:00
|
|
|
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
|
|
|
|
return newClassNames;
|
|
|
|
}, [ classNames ]);
|
|
|
|
|
|
|
|
return (
|
2022-03-24 03:55:11 +01:00
|
|
|
<Column position={ position } justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
|
|
|
|
{ text && (text.length > 0) &&
|
|
|
|
<Flex fit center position="absolute" className="nitro-progress-bar-text small">{ text }</Flex> }
|
2022-04-04 02:52:34 +02:00
|
|
|
<Base className="nitro-progress-bar-inner" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
|
2022-03-23 08:03:32 +01:00
|
|
|
{ children }
|
2022-03-24 03:55:11 +01:00
|
|
|
</Column>
|
2022-03-23 08:03:32 +01:00
|
|
|
);
|
|
|
|
}
|