Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/Popover/Popover.d.ts

@@ -1,42 +1,45 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 import { PaperProps } from '../Paper';
-import { TransitionDuration, TransitionHandlers } from '../internal/transition';
-import { ModalProps, ModalClassKey } from '../internal/Modal';
+import { ModalProps, ModalClassKey } from '../Modal';
+import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
 
-export interface Origin {
+export interface PopoverOrigin {
   horizontal: 'left' | 'center' | 'right' | number;
   vertical: 'top' | 'center' | 'bottom' | number;
 }
 
-export interface PopoverProps extends StandardProps<
-  ModalProps & Partial<TransitionHandlers>,
-  PopoverClassKey,
-  'onRequestClose'
-> {
-  anchorEl?: Object;
-  anchorOrigin?: Origin;
-  elevation?: number;
-  enteredClassName?: string;
-  enteringClassName?: string;
-  exitedClassName?: string;
-  exitingClassName?: string;
-  getContentAnchorEl?: Function;
-  marginThreshold?: number;
-  modal?: boolean;
-  onRequestClose?: Function;
-  open?: boolean;
-  role?: string;
-  transformOrigin?: Origin;
-  transitionDuration?: TransitionDuration;
-  theme?: Object;
-  PaperProps?: Partial<PaperProps>;
+export interface PopoverPosition {
+  top: number;
+  left: number;
 }
 
-export type PopoverClassKey =
-  | ModalClassKey
-  | 'paper'
-  ;
+export type PopoverReference = 'anchorEl' | 'anchorPosition';
+
+export interface PopoverProps
+  extends StandardProps<ModalProps & Partial<TransitionHandlerProps>, PopoverClassKey, 'children'> {
+  action?: (actions: PopoverActions) => void;
+  anchorEl?: HTMLElement;
+  anchorOrigin?: PopoverOrigin;
+  anchorPosition?: PopoverPosition;
+  anchorReference?: PopoverReference;
+  children?: React.ReactNode;
+  elevation?: number;
+  getContentAnchorEl?: (element: HTMLElement) => HTMLElement;
+  marginThreshold?: number;
+  modal?: boolean;
+  PaperProps?: Partial<PaperProps>;
+  role?: string;
+  transformOrigin?: PopoverOrigin;
+  transition?: React.ReactType;
+  transitionDuration?: TransitionProps['timeout'] | 'auto';
+}
+
+export type PopoverClassKey = ModalClassKey | 'paper';
+
+export interface PopoverActions {
+  updatePosition(): void;
+}
 
 declare const Popover: React.ComponentType<PopoverProps>;
 

goTorrentWebUI/node_modules/material-ui/es/Popover/Popover.js

@@ -1,17 +1,18 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Modal
 
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import warning from 'warning';
 import contains from 'dom-helpers/query/contains';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import ownerWindow from 'dom-helpers/ownerWindow';
 import debounce from 'lodash/debounce';
 import EventListener from 'react-event-listener';
 import withStyles from '../styles/withStyles';
-import Modal from '../internal/Modal';
-
+import Modal from '../Modal';
 import Grow from '../transitions/Grow';
 import Paper from '../Paper';
 
@@ -61,6 +62,10 @@ function getScrollParent(parent, child) {
   return scrollTop;
 }
 
+function getAnchorEl(anchorEl) {
+  return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+}
+
 export const styles = {
   paper: {
     position: 'absolute',
@@ -87,13 +92,12 @@ class Popover extends React.Component {
     }, this.setPositioningStyles = element => {
       if (element && element.style) {
         const positioning = this.getPositioningStyle(element);
-
         element.style.top = positioning.top;
         element.style.left = positioning.left;
         element.style.transformOrigin = positioning.transformOrigin;
       }
     }, this.getPositioningStyle = element => {
-      const { marginThreshold } = this.props;
+      const { anchorEl, marginThreshold } = this.props;
 
       // Check if the parent has requested anchoring on an inner content node
       const contentAnchorOffset = this.getContentAnchorOffset(element);
@@ -113,9 +117,12 @@ class Popover extends React.Component {
       const bottom = top + elemRect.height;
       const right = left + elemRect.width;
 
+      // Use the parent window of the anchorEl if provided
+      const containerWindow = ownerWindow(getAnchorEl(anchorEl));
+
       // Window thresholds taking required margin into account
-      const heightThreshold = window.innerHeight - marginThreshold;
-      const widthThreshold = window.innerWidth - marginThreshold;
+      const heightThreshold = containerWindow.innerHeight - marginThreshold;
+      const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
       // Check if the vertical axis needs shifting
       if (top < marginThreshold) {
@@ -128,7 +135,7 @@ class Popover extends React.Component {
         transformOrigin.vertical += diff;
       }
 
-      warning(elemRect.height < heightThreshold || !elemRect.height || !heightThreshold, ['Material-UI: the popover component is too tall.', `Some part of it can not be seen on the screen (${elemRect.height - heightThreshold}px).`, 'Please consider adding a `max-height` to improve the user-experience.'].join('\n'));
+      process.env.NODE_ENV !== "production" ? warning(elemRect.height < heightThreshold || !elemRect.height || !heightThreshold, ['Material-UI: the popover component is too tall.', `Some part of it can not be seen on the screen (${elemRect.height - heightThreshold}px).`, 'Please consider adding a `max-height` to improve the user-experience.'].join('\n')) : void 0;
 
       // Check if the horizontal axis needs shifting
       if (left < marginThreshold) {
@@ -158,12 +165,25 @@ class Popover extends React.Component {
     }, 166), _temp;
   }
 
+  componentDidMount() {
+    if (this.props.action) {
+      this.props.action({
+        updatePosition: this.handleResize
+      });
+    }
+  }
+
   // Returns the top/left offset of the position
   // to attach to on the anchor element (or body if none is provided)
   getAnchorOffset(contentAnchorOffset) {
-    // $FlowFixMe
-    const { anchorEl, anchorOrigin } = this.props;
-    const anchorElement = anchorEl || document.body;
+    const { anchorEl, anchorOrigin, anchorReference, anchorPosition } = this.props;
+
+    if (anchorReference === 'anchorPosition') {
+      return anchorPosition;
+    }
+
+    // If an anchor element wasn't provided, just use the parent body element of this Popover
+    const anchorElement = getAnchorEl(anchorEl) || ownerDocument(ReactDOM.findDOMNode(this.transitionEl)).body;
     const anchorRect = anchorElement.getBoundingClientRect();
     const anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';
 
@@ -175,10 +195,11 @@ class Popover extends React.Component {
 
   // Returns the vertical offset of inner content to anchor the transform on if provided
   getContentAnchorOffset(element) {
+    const { getContentAnchorEl, anchorReference } = this.props;
     let contentAnchorOffset = 0;
 
-    if (this.props.getContentAnchorEl) {
-      const contentAnchorEl = this.props.getContentAnchorEl(element);
+    if (getContentAnchorEl && anchorReference === 'anchorEl') {
+      const contentAnchorEl = getContentAnchorEl(element);
 
       if (contentAnchorEl && contains(element, contentAnchorEl)) {
         const scrollTop = getScrollParent(element, contentAnchorEl);
@@ -186,7 +207,7 @@ class Popover extends React.Component {
       }
 
       // != the default value
-      warning(this.props.anchorOrigin.vertical === 'top', ['Material-UI: you can not change the default `anchorOrigin.vertical` value when also ', 'providing the `getContentAnchorEl` property to the popover component.', 'Only use one of the two properties', 'Set `getContentAnchorEl` to null or left `anchorOrigin.vertical` unchanged'].join());
+      process.env.NODE_ENV !== "production" ? warning(this.props.anchorOrigin.vertical === 'top', ['Material-UI: you can not change the default `anchorOrigin.vertical` value ', 'when also providing the `getContentAnchorEl` property to the popover component.', 'Only use one of the two properties.', 'Set `getContentAnchorEl` to null or left `anchorOrigin.vertical` unchanged.'].join('\n')) : void 0;
     }
 
     return contentAnchorOffset;
@@ -205,54 +226,67 @@ class Popover extends React.Component {
   render() {
     const _props = this.props,
           {
+      action,
       anchorEl,
       anchorOrigin,
+      anchorPosition,
+      anchorReference,
       children,
       classes,
+      container: containerProp,
       elevation,
       getContentAnchorEl,
       marginThreshold,
       onEnter,
-      onEntering,
       onEntered,
+      onEntering,
       onExit,
-      onExiting,
       onExited,
+      onExiting,
       open,
       PaperProps,
       role,
       transformOrigin,
-      transitionClasses,
+      transition: TransitionProp,
       transitionDuration
     } = _props,
-          other = _objectWithoutProperties(_props, ['anchorEl', 'anchorOrigin', 'children', 'classes', 'elevation', 'getContentAnchorEl', 'marginThreshold', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'open', 'PaperProps', 'role', 'transformOrigin', 'transitionClasses', 'transitionDuration']);
+          other = _objectWithoutProperties(_props, ['action', 'anchorEl', 'anchorOrigin', 'anchorPosition', 'anchorReference', 'children', 'classes', 'container', 'elevation', 'getContentAnchorEl', 'marginThreshold', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'role', 'transformOrigin', 'transition', 'transitionDuration']);
+
+    // If the container prop is provided, use that
+    // If the anchorEl prop is provided, use its parent body element as the container
+    // If neither are provided let the Modal take care of choosing the container
+    const container = containerProp || (anchorEl ? ownerDocument(getAnchorEl(anchorEl)).body : undefined);
+
+    const transitionProps = {};
+    // The provided transition might not support the auto timeout value.
+    if (TransitionProp === Grow) {
+      transitionProps.timeout = transitionDuration;
+    }
 
     return React.createElement(
       Modal,
-      _extends({ show: open, BackdropInvisible: true }, other),
+      _extends({ container: container, open: open, BackdropProps: { invisible: true } }, other),
       React.createElement(
-        Grow,
-        {
+        TransitionProp,
+        _extends({
           appear: true,
           'in': open,
           onEnter: this.handleEnter,
-          onEntering: onEntering,
           onEntered: onEntered,
+          onEntering: onEntering,
           onExit: onExit,
-          onExiting: onExiting,
           onExited: onExited,
+          onExiting: onExiting,
           role: role,
-          transitionClasses: transitionClasses,
-          timeout: transitionDuration,
-          rootRef: node => {
+          ref: node => {
             this.transitionEl = node;
           }
-        },
+        }, transitionProps),
         React.createElement(
           Paper,
           _extends({
-            'data-mui-test': 'Popover',
             className: classes.paper,
+
             elevation: elevation
           }, PaperProps),
           React.createElement(EventListener, { target: 'window', onResize: this.handleResize }),
@@ -263,17 +297,159 @@ class Popover extends React.Component {
   }
 }
 
+Popover.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * This is callback property. It's called by the component on mount.
+   * This is useful when you want to trigger an action programmatically.
+   * It currently only supports updatePosition() action.
+   *
+   * @param {object} actions This object contains all posible actions
+   * that can be triggered programmatically.
+   */
+  action: PropTypes.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.
+   */
+  anchorEl: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  /**
+   * This is the point on the anchor where the popover's
+   * `anchorEl` will attach to. This is not used when the
+   * anchorReference is 'anchorPosition'.
+   *
+   * Options:
+   * vertical: [top, center, bottom];
+   * horizontal: [left, center, right].
+   */
+  anchorOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['left', 'center', 'right'])]),
+    vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])])
+  }),
+  /**
+   * This is the position that may be used
+   * to set the position of the popover.
+   * The coordinates are relative to
+   * the application's client area.
+   */
+  anchorPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }),
+  /*
+   * This determines which anchor prop to refer to to set
+   * the position of the popover.
+   */
+  anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition']),
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * A node, component instance, or function that returns either.
+   * The `container` will passed to the Modal component.
+   * By default, it's using the body of the anchorEl's top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  /**
+   * The elevation of the popover.
+   */
+  elevation: PropTypes.number,
+  /**
+   * This function is called in order to retrieve the content anchor element.
+   * It's the opposite of the `anchorEl` property.
+   * The content anchor element should be an element inside the popover.
+   * It's used to correctly scroll and set the position of the popover.
+   * The positioning strategy tries to make the content anchor element just above the
+   * anchor element.
+   */
+  getContentAnchorEl: PropTypes.func,
+  /**
+   * Specifies how close to the edge of the window the popover can appear.
+   */
+  marginThreshold: PropTypes.number,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback.
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired before the component is entering.
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired when the component has entered.
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired when the component is entering.
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired before the component is exiting.
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired when the component has exited.
+   */
+  onExited: PropTypes.func,
+  /**
+   * Callback fired when the component is exiting.
+   */
+  onExiting: PropTypes.func,
+  /**
+   * If `true`, the popover is visible.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * Properties applied to the `Paper` element.
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  role: PropTypes.string,
+  /**
+   * This is the point on the popover which
+   * will attach to the anchor's origin.
+   *
+   * Options:
+   * vertical: [top, center, bottom, x(px)];
+   * horizontal: [left, center, right, x(px)].
+   */
+  transformOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['left', 'center', 'right'])]),
+    vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])])
+  }),
+  /**
+   * Transition component.
+   */
+  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Set to 'auto' to automatically calculate transition time based on height.
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto'])])
+} : {};
+
 Popover.defaultProps = {
+  anchorReference: 'anchorEl',
   anchorOrigin: {
     vertical: 'top',
     horizontal: 'left'
   },
+  elevation: 8,
+  marginThreshold: 16,
   transformOrigin: {
     vertical: 'top',
     horizontal: 'left'
   },
-  transitionDuration: 'auto',
-  elevation: 8,
-  marginThreshold: 16
+  transition: Grow,
+  transitionDuration: 'auto'
 };
+
 export default withStyles(styles, { name: 'MuiPopover' })(Popover);

goTorrentWebUI/node_modules/material-ui/es/Popover/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Popover';
-export * from './Popover';
+export * from './Popover';