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