mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixed visits count not handling separated tooltiups

Browse source
This commit is contained in:
Alejandro Celaya 2020-04-18 11:03:49 +02:00
parent a22a1938c1
commit 91488ae294
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/short-urls/helpers/ShortUrlVisitsCount.js
View file

@ -1,10 +1,11 @@
import React from 'react'; import React, { useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { UncontrolledTooltip } from 'reactstrap'; import { UncontrolledTooltip } from 'reactstrap';
import classNames from 'classnames'; import classNames from 'classnames';
import { serverType } from '../../servers/prop-types'; import { serverType } from '../../servers/prop-types';
import { prettify } from '../../utils/helpers/numbers';
import { shortUrlType } from '../reducers/shortUrlsList'; import { shortUrlType } from '../reducers/shortUrlsList';
import VisitStatsLink from './VisitStatsLink'; import VisitStatsLink from './VisitStatsLink';
import './ShortUrlVisitsCount.scss'; import './ShortUrlVisitsCount.scss';
@ -23,7 +24,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
<strong <strong
className={classNames('short-url-visits-count__amount', { 'short-url-visits-count__amount--big': active })} className={classNames('short-url-visits-count__amount', { 'short-url-visits-count__amount--big': active })}
> >
{visitsCount} {prettify(visitsCount)}
</strong> </strong>
</VisitStatsLink> </VisitStatsLink>
); );
@ -32,19 +33,27 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
return visitsLink; return visitsLink;
} }
const prettifiedMaxVisits = prettify(maxVisits);
const tooltipRef = useRef();
return ( return (
<React.Fragment> <React.Fragment>
<span className="indivisible"> <span className="indivisible">
{visitsLink} {visitsLink}
<small id="maxVisitsControl" className="short-urls-visits-count__max-visits-control"> <small
{' '}/ {maxVisits}{' '} className="short-urls-visits-count__max-visits-control"
ref={(el) => {
tooltipRef.current = el;
}}
>
{' '}/ {prettifiedMaxVisits}{' '}
<sup> <sup>
<FontAwesomeIcon icon={infoIcon} /> <FontAwesomeIcon icon={infoIcon} />
</sup> </sup>
</small> </small>
</span> </span>
<UncontrolledTooltip target="maxVisitsControl" placement="bottom"> <UncontrolledTooltip target={() => tooltipRef.current} placement="bottom">
This short URL will not accept more than <b>{maxVisits}</b> visits. This short URL will not accept more than <b>{prettifiedMaxVisits}</b> visits.
</UncontrolledTooltip> </UncontrolledTooltip>
</React.Fragment> </React.Fragment>
); );