Commit 3c984997 authored by Pavel Kuzmenko's avatar Pavel Kuzmenko

Merge branch 'issue_474/fix_focus_tooltip' into 'master'

Fix tooltip event in safari

See merge request !541
parents e14a962d 48beebaf
......@@ -72,7 +72,7 @@ function AuctionPageContent(props) {
titleTopBar =
<>Ви маєте переважне право в цьому аукціоні&#160;
<Tooltip contentText={t('tooltipTitle.priorityText')}>
<div className={'tooltip-priority'}><QuestionSvg className={'observer-tooltip-priority'} /></div>
<QuestionSvg className={'observer-tooltip-priority'} />
</Tooltip>
</>;
classTopBar = 'main-priority';
......
......@@ -51,8 +51,8 @@ const Timeline = () => {
([PRE_PRECEDENCE_PAUSE_STATE, PRECEDENCE_ROUND_STATE, DONE_STATE].includes(state.current_state) ||
(state.initialBids?.[state.bidderId]?.isCurrentTenant || false));
const priorityTimelineTooltip = isPriorityTimeline ?
<Tooltip contentText={t('tooltipTitle.priorityText')}>
<div className={'tooltip-priority timeline-tooltip-priority'}><QuestionSvg /></div>
<Tooltip contentText={t('tooltipTitle.priorityText')} classNamesTooltip={'timeline-tooltip-priority'}>
<QuestionSvg />
</Tooltip> : '';
if (!isShowPeriodTimeline) {
......
......@@ -2,9 +2,16 @@ import React from 'react';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
import './Tooltip.scss';
import { isMobile, isIOS } from 'react-device-detect';
function Tooltip(prop) {
const [showPopover, setShowPopover] = React.useState(true);
const [showPopover, _setShowPopover] = React.useState(true);
const showPopoverStateRef = React.useRef(showPopover);
const setShowPopover = data => {
showPopoverStateRef.current = data;
_setShowPopover(data);
};
const ref = React.useRef(null);
const popover = (
<Popover id="popover-basic">
<Popover.Content className="tooltip-content-text">
......@@ -17,15 +24,43 @@ function Tooltip(prop) {
setShowPopover(false);
},[]);
if(isMobile){
if(isIOS){
document.body.setAttribute('style', 'cursor: pointer;');
}
document.body.addEventListener('click', function(e) {
if(showPopoverStateRef.current){
setShowPopover(false);
ref.current.querySelector('rect')?.setAttribute('style', 'stroke:#BCC9CB;');
ref.current.querySelector('path')?.setAttribute('style', 'fill:#BCC9CB;');
if(ref.current.contains(e.target)){
e.stopImmediatePropagation();
}
}
}, false);
}
return (
<OverlayTrigger
onToggle={()=>setShowPopover(!showPopover)}
show={showPopover}
trigger={['focus', 'hover']}
trigger={isMobile ? 'click' : ['focus', 'hover']}
placement={'auto'}
overlay={popover}
>
{prop.children}
<div
ref={ref}
className={`tooltip-priority ${prop.classNamesTooltip || ''}`}
onClick={() => {
if(isMobile) {
ref.current.querySelector('rect')?.setAttribute('style', 'stroke:#0797C5;');
ref.current.querySelector('path')?.setAttribute('style', 'fill:#0797C5;');
}
}}
>
{prop.children}
</div>
</OverlayTrigger>
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment