mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 03:13:06 +02:00
Add LayoutProgressBar
This commit is contained in:
parent
b5e876c22b
commit
c8ca5d2b82
31
src/common/layout/LayoutProgressBar.tsx
Normal file
31
src/common/layout/LayoutProgressBar.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { Base, BaseProps, Flex } from '..';
|
||||
|
||||
interface LayoutProgressBarProps extends BaseProps<HTMLDivElement>
|
||||
{
|
||||
text: string;
|
||||
progress: number;
|
||||
maxProgress?: number;
|
||||
}
|
||||
|
||||
export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
|
||||
{
|
||||
const { text = '', progress = 0, maxProgress = 0, position = 'relative', classNames = [], children = null, ...rest } = props;
|
||||
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
const newClassNames: string[] = [ 'progress', 'text-black' ];
|
||||
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
return newClassNames;
|
||||
}, [ classNames ]);
|
||||
|
||||
return (
|
||||
<Base position={ position } classNames={ getClassNames } { ...rest }>
|
||||
<Flex fit center position="absolute">{ text }</Flex>
|
||||
<Base className="progress-bar bg-success" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') }} />
|
||||
{ children }
|
||||
</Base>
|
||||
);
|
||||
}
|
@ -11,6 +11,7 @@ export * from './LayoutMiniCameraView';
|
||||
export * from './LayoutNotificationAlertView';
|
||||
export * from './LayoutNotificationBubbleView';
|
||||
export * from './LayoutPetImageView';
|
||||
export * from './LayoutProgressBar';
|
||||
export * from './LayoutRarityLevelView';
|
||||
export * from './LayoutRoomPreviewerView';
|
||||
export * from './LayoutRoomThumbnailView';
|
||||
|
Loading…
Reference in New Issue
Block a user