-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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.
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
[popover2] fix(ContextMenu2): Tooltip2 and autofocus interactions #4744
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,6 +24,7 @@ import * as Classes from "./classes"; | |
import { Popover2, Popover2InteractionKind } from "./popover2"; | ||
import { TOOLTIP_ARROW_SVG_SIZE } from "./popover2Arrow"; | ||
import { Popover2SharedProps } from "./popover2SharedProps"; | ||
import { Tooltip2Context, Tooltip2ContextState, Tooltip2Provider } from "./tooltip2Context"; | ||
|
||
// eslint-disable-next-line deprecation/deprecation | ||
export type Tooltip2Props<TProps = React.HTMLProps<HTMLElement>> = ITooltip2Props<TProps>; | ||
|
@@ -87,7 +88,24 @@ export class Tooltip2<T> extends React.PureComponent<Tooltip2Props<T>> { | |
private popover: Popover2<T> | null = null; | ||
|
||
public render() { | ||
const { children, intent, popoverClassName, ...restProps } = this.props; | ||
// if we have an ancestor Tooltip2Context, we should take its state into account in this render path, | ||
// it was likely created by a parent ContextMenu2 | ||
return ( | ||
<Tooltip2Context.Consumer> | ||
{([state]) => <Tooltip2Provider initialState={state}>{this.renderPopover}</Tooltip2Provider>} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what happens if you have nested tooltips? (acknowledging that it's not the best UX, but not ruling out that its possibility 😬 ) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't think it would be a possibility in terms of tooltips nested inside tooltip content, but nesting of tooltip targets could be possible (just like nesting of ContextMenu2 targets, as demonstrated in the ContextMenu2 docs example). I'll add a test for it There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. oops yes, i meant targets, thanks for clarifying! |
||
</Tooltip2Context.Consumer> | ||
); | ||
} | ||
|
||
public reposition() { | ||
if (this.popover != null) { | ||
this.popover.reposition(); | ||
} | ||
} | ||
|
||
// any descendant ContextMenu2s may update this ctxState | ||
private renderPopover = (ctxState: Tooltip2ContextState) => { | ||
const { children, disabled, intent, popoverClassName, ...restProps } = this.props; | ||
const classes = classNames( | ||
Classes.TOOLTIP2, | ||
{ [CoreClasses.MINIMAL]: this.props.minimal }, | ||
|
@@ -111,6 +129,7 @@ export class Tooltip2<T> extends React.PureComponent<Tooltip2Props<T>> { | |
{...restProps} | ||
autoFocus={false} | ||
canEscapeKeyClose={false} | ||
disabled={ctxState.forceDisabled ?? disabled} | ||
enforceFocus={false} | ||
lazy={true} | ||
popoverClassName={classes} | ||
|
@@ -120,11 +139,5 @@ export class Tooltip2<T> extends React.PureComponent<Tooltip2Props<T>> { | |
{children} | ||
</Popover2> | ||
); | ||
} | ||
|
||
public reposition() { | ||
if (this.popover != null) { | ||
this.popover.reposition(); | ||
} | ||
} | ||
}; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
/* | ||
* Copyright 2021 Palantir Technologies, Inc. All rights reserved. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
import * as React from "react"; | ||
|
||
export interface Tooltip2ContextState { | ||
forceDisabled?: boolean; | ||
} | ||
|
||
type Tooltip2Action = { type: "FORCE_DISABLED_STATE" } | { type: "RESET_DISABLED_STATE" }; | ||
const noOpDispatch: React.Dispatch<Tooltip2Action> = () => null; | ||
|
||
export const Tooltip2Context = React.createContext<[Tooltip2ContextState, React.Dispatch<Tooltip2Action>]>([ | ||
{}, | ||
noOpDispatch, | ||
]); | ||
|
||
const tooltip2Reducer = (state: Tooltip2ContextState, action: Tooltip2Action) => { | ||
switch (action.type) { | ||
case "FORCE_DISABLED_STATE": | ||
return { forceDisabled: true }; | ||
case "RESET_DISABLED_STATE": | ||
return {}; | ||
default: | ||
return state; | ||
} | ||
}; | ||
|
||
interface Tooltip2ProviderProps { | ||
children: React.ReactNode | ((ctxState: Tooltip2ContextState) => React.ReactNode); | ||
initialState?: Partial<Tooltip2ContextState>; | ||
} | ||
|
||
export const Tooltip2Provider = ({ children, initialState = {} }: Tooltip2ProviderProps) => { | ||
const [state, dispatch] = React.useReducer(tooltip2Reducer, initialState); | ||
return ( | ||
<Tooltip2Context.Provider value={[state, dispatch]}> | ||
{typeof children === "function" ? children(state) : children} | ||
</Tooltip2Context.Provider> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should be renamed here and below...