mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 03:13:06 +02:00
Update layout components
This commit is contained in:
parent
d04819f6ae
commit
9fe4b3d9ba
@ -539,4 +539,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-progress-bar {
|
||||
border: 1px solid $white;
|
||||
padding: 2px;
|
||||
height: 20px;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
background: $primary;
|
||||
|
||||
&.large {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.nitro-progress-bar-inner {
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
transition: all 1s;
|
||||
border-radius: calc(#{$border-radius} / 2);
|
||||
background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%);
|
||||
}
|
||||
|
||||
.nitro-progress-bar-text {
|
||||
text-shadow: 0px 4px 4px rgba($black, 0.25);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@import './card/NitroCardView';
|
||||
|
23
src/common/layout/LayoutBackgroundImage.tsx
Normal file
23
src/common/layout/LayoutBackgroundImage.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { Base, BaseProps } from '../Base';
|
||||
|
||||
export interface LayoutBackgroundImageProps extends BaseProps<HTMLDivElement>
|
||||
{
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
export const LayoutBackgroundImage: FC<LayoutBackgroundImageProps> = props =>
|
||||
{
|
||||
const { imageUrl = null, fit = true, style = null, ...rest } = props;
|
||||
|
||||
const getStyle = useMemo(() =>
|
||||
{
|
||||
const newStyle = { ...style };
|
||||
|
||||
if(imageUrl) newStyle.background = `url(${ imageUrl }) center no-repeat`;
|
||||
|
||||
return newStyle;
|
||||
}, [ style, imageUrl ]);
|
||||
|
||||
return <Base fit={ fit } style={ getStyle } { ...rest } />;
|
||||
}
|
@ -1,23 +1,13 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { Base, BaseProps } from '../Base';
|
||||
import { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
|
||||
|
||||
export interface LayoutImageProps extends BaseProps<HTMLDivElement>
|
||||
export interface LayoutImageProps extends DetailedHTMLProps<HTMLAttributes<HTMLImageElement>, HTMLImageElement>
|
||||
{
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
export const LayoutImage: FC<LayoutImageProps> = props =>
|
||||
{
|
||||
const { imageUrl = null, fit = true, style = null, ...rest } = props;
|
||||
const { imageUrl = null, style = null, ...rest } = props;
|
||||
|
||||
const getStyle = useMemo(() =>
|
||||
{
|
||||
const newStyle = { ...style };
|
||||
|
||||
if(imageUrl) newStyle.background = `url(${ imageUrl }) center no-repeat`;
|
||||
|
||||
return newStyle;
|
||||
}, [ style, imageUrl ]);
|
||||
|
||||
return <Base fit={ fit } style={ getStyle } { ...rest } />;
|
||||
return <img src={ imageUrl } alt="" { ...rest } />;
|
||||
}
|
||||
|
@ -1,20 +1,20 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { Base, BaseProps, Flex } from '..';
|
||||
import { Base, Column, ColumnProps, Flex } from '..';
|
||||
|
||||
interface LayoutProgressBarProps extends BaseProps<HTMLDivElement>
|
||||
interface LayoutProgressBarProps extends ColumnProps
|
||||
{
|
||||
text: string;
|
||||
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 { text = '', progress = 0, maxProgress = 100, position = 'relative', justifyContent = 'center', classNames = [], children = null, ...rest } = props;
|
||||
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
const newClassNames: string[] = [ 'progress', 'text-black' ];
|
||||
const newClassNames: string[] = [ 'nitro-progress-bar', 'text-white' ];
|
||||
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
@ -22,10 +22,11 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
|
||||
}, [ 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) + '%') }} />
|
||||
<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> }
|
||||
<Base className="nitro-progress-bar-inner" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') }} />
|
||||
{ children }
|
||||
</Base>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
export * from './LayoutAvatarImageView';
|
||||
export * from './LayoutBackgroundImage';
|
||||
export * from './LayoutBadgeImageView';
|
||||
export * from './LayoutCurrencyIcon';
|
||||
export * from './LayoutFurniImageView';
|
||||
|
Loading…
Reference in New Issue
Block a user