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