From 61eca4466b3f78dd908acd684ddb0dec20191852 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 11 Jul 2018 10:20:13 +0200 Subject: [PATCH] [Popper] Add a modifiers property (#12108) --- .../pages/utils/popper/ScrollPlayground.js | 49 +++++++++---------- packages/material-ui/src/Popper/Popper.d.ts | 1 + packages/material-ui/src/Popper/Popper.js | 24 ++++++++- pages/api/popper.md | 3 +- 4 files changed, 48 insertions(+), 29 deletions(-) diff --git a/docs/src/pages/utils/popper/ScrollPlayground.js b/docs/src/pages/utils/popper/ScrollPlayground.js index 3ec767d96ba3ef..3b03e1c7f94988 100644 --- a/docs/src/pages/utils/popper/ScrollPlayground.js +++ b/docs/src/pages/utils/popper/ScrollPlayground.js @@ -159,18 +159,17 @@ class AnchorPlayground extends React.Component { @@ -202,20 +201,18 @@ class AnchorPlayground extends React.Component { placement={placement} disablePortal={disablePortal} className={classes.popper} - popperOptions={{ - modifiers: { - flip: { - enabled: flip, - }, - arrow: { - enabled: arrow, - element: arrowRef, - }, - preventOverflow: { - enabled: preventOverflow !== 'disabled', - boundariesElement: - preventOverflow === 'disabled' ? 'scrollParent' : preventOverflow, - }, + modifiers={{ + flip: { + enabled: flip, + }, + arrow: { + enabled: arrow, + element: arrowRef, + }, + preventOverflow: { + enabled: preventOverflow !== 'disabled', + boundariesElement: + preventOverflow === 'disabled' ? 'scrollParent' : preventOverflow, }, }} > diff --git a/packages/material-ui/src/Popper/Popper.d.ts b/packages/material-ui/src/Popper/Popper.d.ts index eba18c9c11bc18..5ce165760eddb5 100644 --- a/packages/material-ui/src/Popper/Popper.d.ts +++ b/packages/material-ui/src/Popper/Popper.d.ts @@ -7,6 +7,7 @@ export interface PopperProps extends React.HTMLAttributes { container?: PortalProps['container']; disablePortal?: PortalProps['disablePortal']; keepMounted?: boolean; + modifiers?: Object; open: boolean; placement?: | 'bottom-end' diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 1adedec03a45c0..8d9d70cb692e34 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -52,6 +52,7 @@ class Popper extends React.Component { if ( prevProps.anchorEl !== this.props.anchorEl || prevProps.popperOptions !== this.props.popperOptions || + prevProps.modifiers !== this.props.modifiers || prevProps.disablePortal !== this.props.disablePortal || prevProps.placement !== this.props.placement ) { @@ -81,7 +82,15 @@ class Popper extends React.Component { } handleRendered = () => { - const { anchorEl, open, placement, popperOptions = {}, theme, disablePortal } = this.props; + const { + anchorEl, + modifiers, + open, + placement, + popperOptions = {}, + theme, + disablePortal, + } = this.props; const popperNode = ReactDOM.findDOMNode(this); if (this.popper) { @@ -105,6 +114,7 @@ class Popper extends React.Component { boundariesElement: 'viewport', }, }), + ...modifiers, ...popperOptions.modifiers, }, // We could have been using a custom modifier like react-popper is doing. @@ -193,7 +203,7 @@ Popper.propTypes = { /** * Popper render function or node. */ - children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired, /** * A node, component instance, or function that returns either. * The `container` will passed to the Modal component. @@ -212,6 +222,16 @@ Popper.propTypes = { * when you want to maximize the responsiveness of the Popper. */ keepMounted: PropTypes.bool, + /** + * Popper.js is based on a "plugin-like" architecture, + * most of its features are fully encapsulated "modifiers". + * + * A modifier is a function that is called each time Popper.js needs to + * compute the position of the popper. + * For this reason, modifiers should be very performant to avoid bottlenecks. + * To learn how to create a modifier, [read the modifiers documentation](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiers--object). + */ + modifiers: PropTypes.object, /** * If `true`, the popper is visible. */ diff --git a/pages/api/popper.md b/pages/api/popper.md index 97cc861a300c5c..92864e788d2762 100644 --- a/pages/api/popper.md +++ b/pages/api/popper.md @@ -16,10 +16,11 @@ Poppers rely on the 3rd party library [Popper.js](https://github.com/FezVrasta/p | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | anchorEl | union: object |
 func
|   | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. | -| children | union: node |
 func
|   | Popper render function or node. | +| children * | union: node |
 func
|   | Popper render function or node. | | container | union: object |
 func
|   | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it uses the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. | | disablePortal | bool | false | Disable the portal behavior. The children stay within it's parent DOM hierarchy. | | keepMounted | bool |   | Always keep the children in the DOM. This property can be useful in SEO situation or when you want to maximize the responsiveness of the Popper. | +| modifiers | object |   | Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".
A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, [read the modifiers documentation](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiers--object). | | open * | bool |   | If `true`, the popper is visible. | | placement | enum: 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'
| 'bottom' | Popper placement. | | popperOptions | object |   | Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance. |