import { PureComponent, createRef } from 'react';
import { Tooltip } from 'components/Elements';
import EventBus from 'utils/eventbus';
import './quicklinks.scss';
class QuickLinks extends PureComponent {
constructor() {
super();
this.state = {
items: JSON.parse(localStorage.getItem('quicklinks')),
};
this.quicklinksContainer = createRef();
}
// widget zoom
setZoom(element) {
const zoom = localStorage.getItem('zoomQuicklinks') || 100;
for (const link of element.getElementsByTagName('span')) {
link.style.fontSize = `${14 * Number(zoom / 100)}px`;
}
if (localStorage.getItem('quickLinksStyle') !== 'text') {
for (const img of element.getElementsByTagName('img')) {
img.style.height = `${30 * Number(zoom / 100)}px`;
}
}
}
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'quicklinks') {
if (localStorage.getItem('quicklinksenabled') === 'false') {
return (this.quicklinksContainer.current.style.display = 'none');
}
this.quicklinksContainer.current.style.display = 'block';
this.setZoom(this.quicklinksContainer.current);
this.setState({
items: JSON.parse(localStorage.getItem('quicklinks')),
});
}
});
this.setZoom(this.quicklinksContainer.current);
}
componentWillUnmount() {
EventBus.off('refresh');
}
render() {
let target,
rel = null;
if (localStorage.getItem('quicklinksnewtab') === 'true') {
target = '_blank';
rel = 'noopener noreferrer';
}
const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
const quickLink = (item) => {
if (localStorage.getItem('quickLinksStyle') === 'text') {
return (
{item.name}
);
}
const img =
item.icon ||
'https://icon.horse/icon/ ' + item.url.replace('https://', '').replace('http://', '');
if (localStorage.getItem('quickLinksStyle') === 'metro') {
return (
{item.name}
);
}
const link = (
);
return tooltipEnabled === 'true' ? (