import React from 'react';
import PropTypes from 'prop-types';
import { Label } from 'react-bootstrap';
import { t } from '../../locales';
import { defaultNumberFormatter } from '../../modules/utils';
import TooltipWrapper from '../../components/TooltipWrapper';
const propTypes = {
rowcount: PropTypes.number,
limit: PropTypes.number,
};
const defaultProps = {
};
export default function RowCountLabel({ rowcount, limit }) {
const limitReached = rowcount === limit;
const bsStyle = (limitReached || rowcount === 0) ? 'warning' : 'default';
const formattedRowCount = defaultNumberFormatter(rowcount);
const tooltip = (
<span>
{limitReached &&
<div>{t('Limit reached')}</div>}
{rowcount}
</span>
);
return (
<TooltipWrapper label="tt-rowcount" tooltip={tooltip}>
<Label
bsStyle={bsStyle}
style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }}
>
{formattedRowCount} rows
</Label>
</TooltipWrapper>
);
}
RowCountLabel.propTypes = propTypes;
RowCountLabel.defaultProps = defaultProps;
|