mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 06:40:50 +01:00
Add LayoutImage
This commit is contained in:
parent
d3908b1221
commit
2f67bb66e7
23
src/common/layout/LayoutImage.tsx
Normal file
23
src/common/layout/LayoutImage.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { Base, BaseProps } from '../Base';
|
||||
|
||||
export interface LayoutImageProps extends BaseProps<HTMLDivElement>
|
||||
{
|
||||
imageUrl: string;
|
||||
}
|
||||
|
||||
export const LayoutImage: FC<LayoutImageProps> = 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 style={ getStyle } { ...rest } />;
|
||||
}
|
Loading…
Reference in New Issue
Block a user