Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(core): Make HoverablePopover flip sides if there is not room to render on the provided side #4173

Merged
merged 4 commits into from
Sep 28, 2017
Merged

feat(core): Make HoverablePopover flip sides if there is not room to render on the provided side #4173

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5a714a3
feat(core): Make HoverablePopover flip sides if there is not room to …
Sep 28, 2017
39c0c4c
Merge branch 'master' into auto-position
Sep 28, 2017
487a58f
Merge branch 'master' into auto-position
christopherthielen Sep 28, 2017
366ca5e
Merge branch 'master' into auto-position
Sep 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 33 additions & 4 deletions app/scripts/modules/core/src/presentation/HoverablePopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ export interface IHoverablePopoverProps {
}

export interface IHoverablePopoverState {
placementOverride?: Placement;
popoverIsOpen: boolean;
target?: any;
PopoverRenderer?: React.ComponentClass<PopoverProps> | React.StatelessComponent<PopoverProps>;
}

Expand All @@ -49,6 +49,8 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
delayHide: 300,
};

private target: Element;

private mouseEvents$: Subject<React.SyntheticEvent<any>>;
private showHide$: Observable<boolean>;
private showHideSubscription: Subscription;
Expand Down Expand Up @@ -141,8 +143,34 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
this.mouseEvents$.next(e);
}

private refCallback(ref: any): void {
this.setState({ target: ref });
private refCallback(ref: Element): void {
this.target = ref;
}

private rendererRefCallback(ref: React.Component): void {
if (ref) {
const { clientWidth, clientHeight } = ReactDOM.findDOMNode(ref);
const bounds = this.target.getBoundingClientRect();
const bottomSpace = window.innerHeight - bounds.bottom;
const rightSpace = window.innerWidth - bounds.right;

let placementOverride: Placement;
switch (this.props.placement) {
case 'top':
placementOverride = clientHeight > bounds.top && bounds.top < bottomSpace ? 'bottom' : undefined;
break;
case 'bottom':
placementOverride = clientHeight > bottomSpace && bottomSpace < bounds.top ? 'top' : undefined;
break;
case 'left':
placementOverride = clientWidth > bounds.left && bounds.left < rightSpace ? 'right' : undefined;
break;
case 'right':
placementOverride = clientWidth > rightSpace && rightSpace < bounds.left ? 'left' : undefined;
break;
}
this.setState({ placementOverride });
}
}

public render() {
Expand All @@ -152,8 +180,9 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
return (
<g onMouseEnter={this.handleMouseEvent} onMouseLeave={this.handleMouseEvent} ref={this.refCallback}>
{this.props.children}
<Overlay show={this.state.popoverIsOpen} placement={this.props.placement} target={this.state.target} container={this.props.container}>
<Overlay show={this.state.popoverIsOpen} placement={this.state.placementOverride || this.props.placement} target={this.target as any} container={this.props.container}>
<PopoverRenderer
ref={this.rendererRefCallback}
onMouseOver={this.handleMouseEvent}
onMouseLeave={this.handleMouseEvent}
id={this.props.id}
Expand Down