[Popover] make marginThreshold a property (#8815)

[Popover] Add a marginThreshold property
mui · Oct 24, 2017 · d2b7b08 · d2b7b08
1 parent 85ab0e3
commit d2b7b08
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 142 deletions.
diff --git a/pages/api/popover.md b/pages/api/popover.md
@@ -18,17 +18,18 @@ filename: /src/Popover/Popover.js
 | <span style="color: #31a148">children *</span> | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | elevation | number | 8 | The elevation of the popover. |
-| onEnter | TransitionCallback |  | Callback fired before the component is entering |
-| onEntered | TransitionCallback |  | Callback fired when the component has entered |
-| onEntering | TransitionCallback |  | Callback fired when the component is entering |
-| onExit | TransitionCallback |  | Callback fired before the component is exiting |
-| onExited | TransitionCallback |  | Callback fired when the component has exited |
-| onExiting | TransitionCallback |  | Callback fired when the component is exiting |
-| onRequestClose | Function |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. |
+| onEnter | TransitionCallback |  | Callback fired before the component is entering. |
+| onEntered | TransitionCallback |  | Callback fired when the component has entered. |
+| onEntering | TransitionCallback |  | Callback fired when the component is entering. |
+| onExit | TransitionCallback |  | Callback fired before the component is exiting. |
+| onExited | TransitionCallback |  | Callback fired when the component has exited. |
+| onExiting | TransitionCallback |  | Callback fired when the component is exiting. |
+| onRequestClose | Function |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span style="color: #31a148">open *</span> | boolean |  | If `true`, the popover is visible. |
 | transformOrigin | signature | {  vertical: 'top',  horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
 | transitionClasses | TransitionClasses |  | The animation classNames applied to the component as it enters or exits. This property is a direct binding to [`CSSTransition.classNames`](https://reactcommunity.org/react-transition-group/#CSSTransition-prop-classNames). |
-| transitionDuration | union:&nbsp;number<br>&nbsp;'auto'<br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height |
+| transitionDuration | union:&nbsp;number<br>&nbsp;'auto'<br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be [spread to the root element](/customization/api#spread).
 

diff --git a/src/Popover/Popover.d.ts b/src/Popover/Popover.d.ts
@@ -22,6 +22,7 @@ export interface PopoverProps extends StandardProps<
   exitedClassName?: string;
   exitingClassName?: string;
   getContentAnchorEl?: Function;
+  marginThreshold?: number;
   modal?: boolean;
   onRequestClose?: Function;
   open?: boolean;

diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
@@ -81,6 +81,7 @@ type ProvidedProps = {
   anchorOrigin: Origin,
   classes: Object,
   transformOrigin: Origin,
+  marginThreshold: number,
 };
 
 export type Props = {
@@ -115,33 +116,37 @@ export type Props = {
    */
   getContentAnchorEl?: Function,
   /**
-   * Callback fired before the component is entering
+   * Specifies how close to the edge of the window the popover can appear.
+   */
+  marginThreshold?: number,
+  /**
+   * Callback fired before the component is entering.
    */
   onEnter?: TransitionCallback,
   /**
-   * Callback fired when the component is entering
+   * Callback fired when the component is entering.
    */
   onEntering?: TransitionCallback,
   /**
-   * Callback fired when the component has entered
+   * Callback fired when the component has entered.
    */
   onEntered?: TransitionCallback,
   /**
-   * Callback fired before the component is exiting
+   * Callback fired before the component is exiting.
    */
   onExit?: TransitionCallback,
   /**
-   * Callback fired when the component is exiting
+   * Callback fired when the component is exiting.
    */
   onExiting?: TransitionCallback,
   /**
-   * Callback fired when the component has exited
+   * Callback fired when the component has exited.
    */
   onExited?: TransitionCallback,
   /**
    * Callback fired when the component requests to be closed.
    *
-   * @param {object} event The event source of the callback
+   * @param {object} event The event source of the callback.
    */
   onRequestClose?: Function,
   /**
@@ -171,7 +176,7 @@ export type Props = {
    */
   transitionClasses?: TransitionClasses,
   /**
-   * Set to 'auto' to automatically calculate transition time based on height
+   * Set to 'auto' to automatically calculate transition time based on height.
    */
   transitionDuration?: number | 'auto',
 };
@@ -188,6 +193,7 @@ class Popover extends React.Component<ProvidedProps & Props> {
     },
     transitionDuration: 'auto',
     elevation: 8,
+    marginThreshold: 16,
   };
 
   componentWillUnmount = () => {
@@ -219,9 +225,9 @@ class Popover extends React.Component<ProvidedProps & Props> {
     this.setPositioningStyles(element);
   }, 166);
 
-  marginThreshold = 16;
+  getPositioningStyle = element => {
+    const { marginThreshold } = this.props;
 
-  getPositioningStyle(element) {
     // Check if the parent has requested anchoring on an inner content node
     const contentAnchorOffset = this.getContentAnchorOffset(element);
     // Get the offset of of the anchoring element
@@ -241,12 +247,12 @@ class Popover extends React.Component<ProvidedProps & Props> {
     const right = left + elemRect.width;
 
     // Window thresholds taking required margin into account
-    const heightThreshold = window.innerHeight - this.marginThreshold;
-    const widthThreshold = window.innerWidth - this.marginThreshold;
+    const heightThreshold = window.innerHeight - marginThreshold;
+    const widthThreshold = window.innerWidth - marginThreshold;
 
     // Check if the vertical axis needs shifting
-    if (top < this.marginThreshold) {
-      const diff = top - this.marginThreshold;
+    if (top < marginThreshold) {
+      const diff = top - marginThreshold;
       top -= diff;
       transformOrigin.vertical += diff;
     } else if (bottom > heightThreshold) {
@@ -256,8 +262,8 @@ class Popover extends React.Component<ProvidedProps & Props> {
     }
 
     // Check if the horizontal axis needs shifting
-    if (left < this.marginThreshold) {
-      const diff = left - this.marginThreshold;
+    if (left < marginThreshold) {
+      const diff = left - marginThreshold;
       left -= diff;
       transformOrigin.horizontal += diff;
     } else if (right > widthThreshold) {
@@ -271,7 +277,7 @@ class Popover extends React.Component<ProvidedProps & Props> {
       left: `${left}px`,
       transformOrigin: getTransformOriginValue(transformOrigin),
     };
-  }
+  };
 
   handleGetOffsetTop = getOffsetTop;
   handleGetOffsetLeft = getOffsetLeft;
@@ -335,6 +341,7 @@ class Popover extends React.Component<ProvidedProps & Props> {
       classes,
       elevation,
       getContentAnchorEl,
+      marginThreshold,
       onEnter,
       onEntering,
       onEntered,