mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 19:53:05 +02:00
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { CSSProperties, FC, useMemo } from 'react';
|
|
import { GetConfiguration } from '../../../api';
|
|
import { Base, BaseProps } from '../../../common/Base';
|
|
|
|
export interface CurrencyIconProps extends BaseProps<HTMLDivElement>
|
|
{
|
|
type: number | string;
|
|
}
|
|
|
|
export const CurrencyIcon: FC<CurrencyIconProps> = props =>
|
|
{
|
|
const { type = '', classNames = [], style = {}, ...rest } = props;
|
|
|
|
const getClassNames = useMemo(() =>
|
|
{
|
|
const newClassNames: string[] = [ 'nitro-currency-icon' ];
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
return newClassNames;
|
|
}, [ classNames ]);
|
|
|
|
const urlString = useMemo(() =>
|
|
{
|
|
let url = GetConfiguration<string>('currency.asset.icon.url', '');
|
|
|
|
url = url.replace('%type%', type.toString());
|
|
|
|
return `url(${ url })`;
|
|
}, [ type ]);
|
|
|
|
const getStyle = useMemo(() =>
|
|
{
|
|
let newStyle: CSSProperties = {};
|
|
|
|
newStyle.backgroundImage = urlString;
|
|
|
|
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
|
|
|
|
return newStyle;
|
|
}, [ style, urlString ]);
|
|
|
|
return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />
|
|
}
|