Commit 2c435975 authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza

Refactored popup hiding logic

parent 88b79d8a
......@@ -9,7 +9,6 @@ import Page from 'model/Page';
import ConfiguredTree from 'crop/ui/c/ConfiguredTree';
import Button from '@material-ui/core/Button';
import * as classnames from 'classnames';
import { throttle } from 'lodash';
import Card, { CardContent, CardHeader } from 'ui/common/Card';
import IconButton from '@material-ui/core/IconButton';
......@@ -38,9 +37,7 @@ const styles = (theme) => createStyles({
position: 'absolute',
backgroundColor: 'white',
border: 'solid 2px grey',
// visibility: 'hidden',
display: 'none',
// display: 'flex',
display: 'flex',
flexDirection: 'column',
padding: '5px',
},
......@@ -50,10 +47,6 @@ const styles = (theme) => createStyles({
popupTitle: {
textAlign: 'center',
},
visible: {
display: 'flex',
// visibility: 'visible',
},
node: {
position: 'absolute',
width: 'max-content',
......@@ -98,19 +91,23 @@ class NodeLabel extends React.PureComponent<any, any> {
};
private onClick = (e) => {
const { nodeData, clickHandler /* , expandCallback */ } = this.props;
if (this.state.count === 1) {
const { nodeData, clickHandler, expandCallback } = this.props;
if (this.state.count === 1) { // double click
console.log('expand!');
// pass click event to the node for expanding
clearTimeout(this.timeout);
// expandCallback();
expandCallback();
this.setState({ count: 0 });
return;
}
if (nodeData._collapsed) {
e.nativeEvent.stopImmediatePropagation();
}
const x = e.clientX;
const y = e.clientY;
e.stopPropagation(); // prevent expanding
e.stopPropagation(); // prevent expanding on first click
this.setState({ count: 1 });
this.timeout = setTimeout(() => {
......@@ -178,16 +175,17 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
x: x - popup.getBoundingClientRect().width / 2,
y: y - rect.getBoundingClientRect().top + this.LABEL_HEIGHT,
popupData: { name: nodeData.name, nodeKey: nodeData.fullID },
});
console.log('custom handler!', nodeData, x, y, rect.getBoundingClientRect(), popup.getBoundingClientRect());
}, this.showPopup);
};
private hidePopup = () => {
this.setState({
x: 0,
y: 0,
popupData: null,
});
if (!this.popupRef.current.classList.contains('display-none')) {
this.popupRef.current.classList.add('display-none');
}
};
private showPopup = () => {
this.popupRef.current.classList.remove('display-none');
};
private throttledHide = throttle(this.hidePopup, 1000);
......@@ -211,14 +209,13 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
private handleWrapperClick = (e) => {
console.log('wrapper click!!', e.target);
if (e.target.tagName !== 'H6' && this.state.popupData) {
setTimeout(this.hidePopup, 1); // prevents rerender on tree's drag start}
this.hidePopup();
}
};
// private onNodeExpand = () => {
// setTimeout(this.hidePopup, 1);
// // this.hidePopup();
// };
private onNodeExpand = () => {
this.hidePopup();
};
private onButtonMouseDown = (e) => e.stopPropagation();
......@@ -233,7 +230,7 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
initialZoom={ 0.25 }
zoomable
nodeLabelComponent={ {
render: <NodeLabel clickHandler={ this.handleClick } classes={ classes } /* expandCallback={ this.onNodeExpand } */ />,
render: <NodeLabel clickHandler={ this.handleClick } classes={ classes } expandCallback={ this.onNodeExpand } />,
foreignObjectWrapper: {
y: -this.LABEL_HEIGHT / 2,
x: -10,
......@@ -243,7 +240,7 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
} }
/>
<div
className={ classnames({ [classes.visible]: !!popupData, [classes.popup]: true }) }
className={ `display-none ${classes.popup}` }
style={ { top: y, left: x } }
ref={ this.popupRef }
>
......@@ -257,9 +254,11 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
</>
}
</div>
<Button onClick={ this.showList } onMouseDown={ this.onButtonMouseDown }>
{ t('divtree.public.c.treeExplorer.accessionList') }
</Button>
{ popupData && popupData.nodeKey &&
<Button onClick={this.showList} onMouseDown={this.onButtonMouseDown}>
{t('divtree.public.c.treeExplorer.accessionList')}
</Button>
}
</div>
{ accessionListIsOpen &&
<Card className={ classes.accessionList }>
......@@ -268,7 +267,7 @@ class TreeExplorer extends React.Component<ITreeExplorerProps, any> {
title={
<div className={ classes.cardTitle }>
<div>
Accession list
{ t('divtree.public.c.treeExplorer.accessionList') }
</div>
<div className={ classes.buttons }>
<IconButton onClick={ this.closeAccessionList }>
......
......@@ -1049,3 +1049,7 @@ h4 {
.modal-open {
overflow: hidden !important;
}
.display-none {
display: none !important;
}
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