mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 11:23:05 +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 './LayoutNotificationAlertView';
|
||||||
export * from './LayoutNotificationBubbleView';
|
export * from './LayoutNotificationBubbleView';
|
||||||
export * from './LayoutPetImageView';
|
export * from './LayoutPetImageView';
|
||||||
|
export * from './LayoutProgressBar';
|
||||||
export * from './LayoutRarityLevelView';
|
export * from './LayoutRarityLevelView';
|
||||||
export * from './LayoutRoomPreviewerView';
|
export * from './LayoutRoomPreviewerView';
|
||||||
export * from './LayoutRoomThumbnailView';
|
export * from './LayoutRoomThumbnailView';
|
||||||
|
Loading…
Reference in New Issue
Block a user