[new] ResizeSensor component #2745
Conversation
don't expose external typesPreview: documentation | landing | table |
| @@ -350,7 +335,11 @@ export class Popover extends AbstractPureComponent<IPopoverProps, IPopoverState> | |||
| disabled: isOpen && Utils.isElementOfType(rawTarget, Tooltip) ? true : rawTarget.props.disabled, | |||
| tabIndex: this.props.openOnTargetFocus && isHoverInteractionKind ? tabIndex : undefined, | |||
| }); | |||
| return React.createElement(targetTagName, targetProps, clonedTarget); | |||
| return ( | |||
| <ResizeSensor onResize={this.handlePopoverResize}> | |||
There was a problem hiding this comment.
this is new and awesome and so simple. measures the target too!
| "es5", | ||
| "es2015.collection", | ||
| "es2015.iterable", | ||
| "es2015.promise" |
There was a problem hiding this comment.
added Promise types to tests to simplify the nested timeouts
|
|
||
| function resize(size: ISizeProps) { | ||
| wrapper.setProps(size); | ||
| return new Promise(resolve => setTimeout(resolve, 30)); |
There was a problem hiding this comment.
sooo resizes need time to propagate (more than a frame, typically), so we must wrap each one in this brief timeout. fortunately, async/await make this rather nice to use instead of callback hell.
There was a problem hiding this comment.
oh.... this seems like a pretty big gotcha
There was a problem hiding this comment.
if this is going to be relevant to users of this component, you should add a comment to the onResize prop.
add docs pagePreview: documentation | landing | table |
fix isotestPreview: documentation | landing | table |
| /** | ||
| * If `true`, all parent DOM elements of the container will also be | ||
| * observed. If changes to a parent's size is detected, the overflow will be | ||
| * recalculated. |
There was a problem hiding this comment.
the overflow part doesn't belong here
| * | ||
| * Only enable this prop if the overflow should be recalculated when a | ||
| * parent element resizes in a way that does not also cause the | ||
| * `OverflowList` to resize. |
| } | ||
|
|
||
| export class ResizeSensor extends React.PureComponent<IResizeSensorProps> { | ||
| public static displayName = `${DISPLAYNAME_PREFIX}.Resize`; |
| document.documentElement.appendChild(testsContainerElement); | ||
|
|
||
| afterEach(() => { | ||
| // clean up list after each test, if it was used |
docs per commentsPreview: documentation | landing | table |
|
|
||
| @# Resize sensor | ||
|
|
||
| `ResizeSensor` is a higher-order component that effectively provides a |
There was a problem hiding this comment.
nit: this is a little wordy and im not sure it's even correct. Maybe rephrase:
`ResizeSensor` is a component that provides a `"resize"` event for its single child.
But even then it's not "providing an event" in the sense of .addEventListener.
|
|
||
| function resize(size: ISizeProps) { | ||
| wrapper.setProps(size); | ||
| return new Promise(resolve => setTimeout(resolve, 30)); |
There was a problem hiding this comment.
oh.... this seems like a pretty big gotcha
|
|
||
| function resize(size: ISizeProps) { | ||
| wrapper.setProps(size); | ||
| return new Promise(resolve => setTimeout(resolve, 30)); |
There was a problem hiding this comment.
if this is going to be relevant to users of this component, you should add a comment to the onResize prop.
docs cleanupPreview: documentation | landing | table |
<ResizeSensor>provides a React interface toResizeObserverwith a requiredonResizecallback.OverflowListandPopoverto use this new guy.