All children (e.g. toolips) on FormatBalance (#3227)

This commit is contained in:
Jaco Greeff 2020-07-18 10:23:32 +02:00 committed by GitHub
parent b704023472
commit 413db9fca4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 5 deletions

View File

@ -7,8 +7,6 @@ import ReactDOM from 'react-dom';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { classes } from './util';
const rootElement = typeof document === 'undefined'
? null // This hack is required for server side rendering
: document.getElementById('tooltips');
@ -45,7 +43,7 @@ function Tooltip ({ className = '', effect = 'solid', offset, place = 'top', tex
return ReactDOM.createPortal(
<ReactTooltip
className={classes('ui--Tooltip', className)}
className={`ui--Tooltip ${className}`}
effect={effect}
id={trigger}
offset={offset}

View File

@ -11,6 +11,7 @@ import { formatBalance } from '@polkadot/util';
import { useTranslation } from './translate';
interface Props {
children?: React.ReactNode;
className?: string;
isShort?: boolean;
label?: React.ReactNode;
@ -35,7 +36,7 @@ function format (value: Compact<any> | BN | string, currency: string, withSi?: b
return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)} {`${currency}${labelPost || ''}`}</>;
}
function FormatBalance ({ className = '', isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const [currency] = useState(formatBalance.getDefaults().unit);
@ -48,7 +49,7 @@ function FormatBalance ({ className = '', isShort, label, labelPost, value, with
? t<string>('everything{{labelPost}}', { replace: { labelPost } })
: format(value, currency, withSi, isShort, labelPost)
: `-${labelPost || ''}`
}</span>
}</span>{children}
</div>
);
}