aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-08-29 06:07:29 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-08-29 06:07:29 +0800
commit55fab3d98f8714d09906745922b59afbdc0de00d (patch)
tree7d88545279dfe48ef9b47f8f32bd167db5122fd6
parentde11b62e30270ec72ad42c510989b5698339e590 (diff)
downloaddexon-sol-tools-55fab3d98f8714d09906745922b59afbdc0de00d.tar
dexon-sol-tools-55fab3d98f8714d09906745922b59afbdc0de00d.tar.gz
dexon-sol-tools-55fab3d98f8714d09906745922b59afbdc0de00d.tar.bz2
dexon-sol-tools-55fab3d98f8714d09906745922b59afbdc0de00d.tar.lz
dexon-sol-tools-55fab3d98f8714d09906745922b59afbdc0de00d.tar.xz
dexon-sol-tools-55fab3d98f8714d09906745922b59afbdc0de00d.tar.zst
dexon-sol-tools-55fab3d98f8714d09906745922b59afbdc0de00d.zip
Revert "Simplify dropdown component"
This reverts commit 91a9014a50cca8e0d42634666fe409839aeae8cf.
-rw-r--r--packages/website/ts/components/ui/drop_down.tsx40
1 files changed, 25 insertions, 15 deletions
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 752c92e02..4d5caef08 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -25,7 +25,6 @@ export interface DropDownProps {
interface DropDownState {
isDropDownOpen: boolean;
- isHovering: boolean;
anchorEl?: HTMLInputElement;
}
@@ -36,21 +35,11 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
activateEvent: DropdownMouseEvent.Hover,
closeEvent: DropdownMouseEvent.Hover,
};
+ private _isHovering: boolean;
private _popoverCloseCheckIntervalId: number;
- public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
- switch (props.activateEvent) {
- case DropdownMouseEvent.Click:
- return { isDropDownOpen: state.isDropDownOpen };
- case DropdownMouseEvent.Hover:
- return { isDropDownOpen: state.isHovering };
- default:
- return {};
- }
- }
constructor(props: DropDownProps) {
super(props);
this.state = {
- isHovering: false,
isDropDownOpen: false,
};
}
@@ -62,6 +51,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
public componentWillUnmount(): void {
window.clearInterval(this._popoverCloseCheckIntervalId);
}
+ public componentWillReceiveProps(_nextProps: DropDownProps): void {
+ // HACK: If the popoverContent is updated to a different dimension and the users
+ // mouse is no longer above it, the dropdown can enter an inconsistent state where
+ // it believes the user is still hovering over it. In order to remedy this, we
+ // call hoverOff whenever the dropdown receives updated props. This is a hack
+ // because it will effectively close the dropdown on any prop update, barring
+ // dropdowns from having dynamic content.
+ this._onHoverOff();
+ }
public render(): React.ReactNode {
return (
<div
@@ -100,16 +98,28 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
}
}
private _onHover(event: React.FormEvent<HTMLInputElement>): void {
- this.setState({ isHovering: true });
+ this._isHovering = true;
+ if (this.props.activateEvent === DropdownMouseEvent.Hover) {
+ this._checkIfShouldOpenPopover(event);
+ }
}
private _onHoverOff(): void {
- this.setState({ isHovering: false });
+ this._isHovering = false;
+ }
+ private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
+ if (this.state.isDropDownOpen) {
+ return; // noop
+ }
+ this.setState({
+ isDropDownOpen: true,
+ anchorEl: event.currentTarget,
+ });
}
private _checkIfShouldClosePopover(): void {
if (!this.state.isDropDownOpen) {
return; // noop
}
- if (this.props.closeEvent === DropdownMouseEvent.Hover && !this.state.isHovering) {
+ if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
this._closePopover();
}
}