diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-08-25 07:48:48 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-08-25 07:48:48 +0800 |
commit | 91a9014a50cca8e0d42634666fe409839aeae8cf (patch) | |
tree | 999fb63df7176129a72b6ed81fdb725d91b5ffa3 /packages/website/ts/components/ui | |
parent | ad161a973e5453ec267510f54d88621517254039 (diff) | |
download | dexon-0x-contracts-91a9014a50cca8e0d42634666fe409839aeae8cf.tar dexon-0x-contracts-91a9014a50cca8e0d42634666fe409839aeae8cf.tar.gz dexon-0x-contracts-91a9014a50cca8e0d42634666fe409839aeae8cf.tar.bz2 dexon-0x-contracts-91a9014a50cca8e0d42634666fe409839aeae8cf.tar.lz dexon-0x-contracts-91a9014a50cca8e0d42634666fe409839aeae8cf.tar.xz dexon-0x-contracts-91a9014a50cca8e0d42634666fe409839aeae8cf.tar.zst dexon-0x-contracts-91a9014a50cca8e0d42634666fe409839aeae8cf.zip |
Simplify dropdown component
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/drop_down.tsx | 40 |
1 files changed, 15 insertions, 25 deletions
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 4d5caef08..752c92e02 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -25,6 +25,7 @@ export interface DropDownProps { interface DropDownState { isDropDownOpen: boolean; + isHovering: boolean; anchorEl?: HTMLInputElement; } @@ -35,11 +36,21 @@ 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, }; } @@ -51,15 +62,6 @@ 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 @@ -98,28 +100,16 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { } } private _onHover(event: React.FormEvent<HTMLInputElement>): void { - this._isHovering = true; - if (this.props.activateEvent === DropdownMouseEvent.Hover) { - this._checkIfShouldOpenPopover(event); - } + this.setState({ isHovering: true }); } private _onHoverOff(): void { - this._isHovering = false; - } - private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void { - if (this.state.isDropDownOpen) { - return; // noop - } - this.setState({ - isDropDownOpen: true, - anchorEl: event.currentTarget, - }); + this.setState({ isHovering: false }); } private _checkIfShouldClosePopover(): void { if (!this.state.isDropDownOpen) { return; // noop } - if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) { + if (this.props.closeEvent === DropdownMouseEvent.Hover && !this.state.isHovering) { this._closePopover(); } } |