2019-10-31 14:12:18 +07:00
|
|
|
import React, { forwardRef } from 'react';
|
2019-10-08 12:47:11 +07:00
|
|
|
import Info from '@material-ui/icons/Info';
|
|
|
|
import Help from '@material-ui/icons/Help';
|
|
|
|
import Search from '@material-ui/icons/Search';
|
|
|
|
|
2019-10-12 13:45:39 +07:00
|
|
|
import IconButton from '../../muiComponents/IconButton';
|
|
|
|
|
2019-10-31 14:12:18 +07:00
|
|
|
import { IconSearchButton, StyledLink } from './styles';
|
2019-10-08 12:47:11 +07:00
|
|
|
|
|
|
|
export type TooltipIconType = 'search' | 'help' | 'info';
|
|
|
|
interface Props {
|
|
|
|
tooltipIconType: TooltipIconType;
|
|
|
|
onClick?: () => void;
|
|
|
|
}
|
|
|
|
|
2019-10-31 14:12:18 +07:00
|
|
|
type HeaderToolTipIconRef = HTMLButtonElement;
|
|
|
|
|
|
|
|
/* eslint-disable react/jsx-no-undef */
|
|
|
|
/* eslint-disable react/display-name */
|
|
|
|
const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
|
|
|
|
{ tooltipIconType, onClick },
|
|
|
|
ref
|
|
|
|
) {
|
2019-10-08 12:47:11 +07:00
|
|
|
switch (tooltipIconType) {
|
|
|
|
case 'help':
|
|
|
|
return (
|
2019-10-31 14:12:18 +07:00
|
|
|
<StyledLink
|
2019-10-27 21:49:30 +07:00
|
|
|
data-testid={'header--tooltip-documentation'}
|
2019-10-31 14:12:18 +07:00
|
|
|
external={true}
|
2019-10-27 21:49:30 +07:00
|
|
|
to={'https://verdaccio.org/docs/en/installation'}>
|
2019-10-08 12:47:11 +07:00
|
|
|
<IconButton color={'inherit'}>
|
|
|
|
<Help />
|
|
|
|
</IconButton>
|
2019-10-31 14:12:18 +07:00
|
|
|
</StyledLink>
|
2019-10-08 12:47:11 +07:00
|
|
|
);
|
|
|
|
case 'info':
|
|
|
|
return (
|
2019-10-27 21:49:30 +07:00
|
|
|
<IconButton
|
|
|
|
color="inherit"
|
|
|
|
data-testid={'header--tooltip-info'}
|
|
|
|
id="header--button-registryInfo"
|
2019-10-31 14:12:18 +07:00
|
|
|
onClick={onClick}
|
|
|
|
ref={ref}>
|
2019-10-08 12:47:11 +07:00
|
|
|
<Info />
|
|
|
|
</IconButton>
|
|
|
|
);
|
|
|
|
case 'search':
|
|
|
|
return (
|
|
|
|
<IconSearchButton color="inherit" onClick={onClick}>
|
|
|
|
<Search />
|
|
|
|
</IconSearchButton>
|
|
|
|
);
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
2019-10-31 14:12:18 +07:00
|
|
|
});
|
2019-10-08 12:47:11 +07:00
|
|
|
|
|
|
|
export default HeaderToolTipIcon;
|