Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/utils/withWidth.js

@@ -1,59 +1,37 @@
-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; }
-
-//  weak
-
-// flow sanity check (DO NOT DELETE) https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoUSWOGATzCTgG84BhXSAOyS5gBUGTAL5xsuAkXQwy5OQHp5cALSq16jZuVwdccorgB3YDAAW-U0hBMAEgHk25JAA9qWAK5cMwCFyMnzS2sAHgAFHDAAZwAuFmEAPgAKcl12Tl9eGFiOcAy+QUZg1jMrJFi7ACMAKyQMOFEAMjhwiCj4gBpyAEps9J58oTCIyPiWOR00ABsUSMi4AHUAi1K4FxheABM55GkAOhzuTKHWyPaWWiCyuEqauoSx1KIuDaQoRK6H1LgiGHcoP2CBzy8GYuzBZmAkV2YGGohK1gAvMwIVDIjAUOtdvCkKJ5PEKKlhAT6ilvkhfv8FktLuRhAolFpGUy1PolMYzMtrHAAKqRFAAcyQ5CmMzmAEFVs51s9tsQYPs+kdipdytVavBGiwULEuO4QBVXmcKjq9QaoPdmHS0L40XBOUgNkD+vAEf4OZdEmKuhQDPMmBtfPh4DwHbQIHAwKK4MA-AADbGx1YAN14Fwg7n5pjgsYAsnQnZlE0QAI7uYBEOYmXbkYL2x2KvhwFBIgCMogqSIATLj4vSVMyB6lWW7TIsNmY4PZHC43LQhHAAEJSADWkBjLoIzki+DgAB8CJEQDv9-gQBtjwRJvyL-hnJNZOR6IwqePTC0onBXcxSTGTMAUJMY5mAA-LES6oKuEDrp0OjGK+oGLiua58J0dJOK40AeF4MA+H47KjsAr7vJ8mCeN4virFwpgoF4SDHFEsRAW+wxJKSqQFnwvS5M6BR0cwcFmGBSFQShcBgrs76RAkMFwD0aTcZkvH0SMYxsXAIqzFSZhMZK0pbIgcoKgpfDKaM35fGSzyvMR5kWepNogr+OEAUxZwCaYoiuii0LDGpjzkn8AIcSC4neTCJyiO5SL4Ie+A9sShIJSSak-IFWkEa+xJEuMZIUn4vDUbRFBoQYA5leow7uHygrCtMmkLrpmyynswVFO5QkQchMBnNqcC6vqhrGn1pqvBapJPC8bwfLZEwOSw7meRckI+ScKUBZSwQbMASZwHipJ0lac1MQ6wWfiOTHvIkC7esOfpwAGXBBn1SChjA4aRppMbZu5iZICmfhmOmmbZnmwVFkgpblkglbyjWx31sZ8DNswbZwB2zDdrt+JAA
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import EventListener from 'react-event-listener';
 import debounce from 'lodash/debounce';
 import wrapDisplayName from 'recompose/wrapDisplayName';
+import hoistNonReactStatics from 'hoist-non-react-statics';
 import withTheme from '../styles/withTheme';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
 
-
-/**
- * By default, returns true if screen width is the same or greater than the given breakpoint.
- *
- * @param screenWidth
- * @param breakpoint
- * @param inclusive - defaults to true
- */
-export const isWidthUp = (breakpoint, screenWidth, inclusive = true) => {
+// By default, returns true if screen width is the same or greater than the given breakpoint.
+export const isWidthUp = (breakpoint, width, inclusive = true) => {
   if (inclusive) {
-    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(screenWidth);
+    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
   }
-  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(screenWidth);
+  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
 };
 
-/**
- * By default, returns true if screen width is the same or less than the given breakpoint.
- *
- * @param screenWidth
- * @param breakpoint
- * @param inclusive - defaults to true
- */
-export const isWidthDown = (breakpoint, screenWidth, inclusive = true) => {
+// By default, returns true if screen width is the same or less than the given breakpoint.
+export const isWidthDown = (breakpoint, width, inclusive = true) => {
   if (inclusive) {
-    return breakpointKeys.indexOf(screenWidth) <= breakpointKeys.indexOf(breakpoint);
+    return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
   }
-  return breakpointKeys.indexOf(screenWidth) < breakpointKeys.indexOf(breakpoint);
+  return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
 };
 
-// optional props introduced by this HOC
-
-
-const withWidth = (
-// eslint-disable-line prettier/prettier
-options = {}) => Component => {
+const withWidth = (options = {}) => Component => {
   const {
-    resizeInterval = 166 // Corresponds to 10 frames at 60 Hz.
+    resizeInterval = 166, // Corresponds to 10 frames at 60 Hz.
+    withTheme: withThemeOption = false
   } = options;
 
-  // `theme` is injected below by withTheme
-  class Width extends React.Component {
+  class WithWidth extends React.Component {
     constructor(...args) {
       var _temp;
 
@@ -73,37 +51,35 @@ options = {}) => Component => {
     }
 
     updateWidth(innerWidth) {
-      if (this.props.theme) {
-        const breakpoints = this.props.theme.breakpoints;
-        let width = null;
+      const breakpoints = this.props.theme.breakpoints;
+      let width = null;
 
-        /**
-         * Start with the slowest value as low end devices often have a small screen.
-         *
-         * innerWidth |0      xs      sm      md      lg      xl
-         *            |-------|-------|-------|-------|-------|------>
-         * width      |  xs   |  xs   |  sm   |  md   |  lg   |  xl
-         */
-        let index = 1;
-        while (width === null && index < breakpointKeys.length) {
-          const currentWidth = breakpointKeys[index];
+      /**
+       * Start with the slowest value as low end devices often have a small screen.
+       *
+       * innerWidth |xs      sm      md      lg      xl
+       *            |-------|-------|-------|-------|------>
+       * width      |  xs   |  sm   |  md   |  lg   |  xl
+       */
+      let index = 1;
+      while (width === null && index < breakpointKeys.length) {
+        const currentWidth = breakpointKeys[index];
 
-          // @media are inclusive, so reproduce the behavior here.
-          if (innerWidth < breakpoints.values[currentWidth]) {
-            width = breakpointKeys[index - 1];
-            break;
-          }
-
-          index += 1;
+        // @media are inclusive, so reproduce the behavior here.
+        if (innerWidth < breakpoints.values[currentWidth]) {
+          width = breakpointKeys[index - 1];
+          break;
         }
 
-        width = width || 'xl';
+        index += 1;
+      }
 
-        if (width !== this.state.width) {
-          this.setState({
-            width
-          });
-        }
+      width = width || 'xl';
+
+      if (width !== this.state.width) {
+        this.setState({
+          width
+        });
       }
     }
 
@@ -114,6 +90,11 @@ options = {}) => Component => {
       const props = _extends({
         width: width || this.state.width || initialWidth
       }, other);
+      const more = {};
+
+      if (withThemeOption) {
+        more.theme = theme;
+      }
 
       // When rendering the component on the server,
       // we have no idea about the client browser screen width.
@@ -128,16 +109,39 @@ options = {}) => Component => {
       return React.createElement(
         EventListener,
         { target: 'window', onResize: this.handleResize },
-        React.createElement(Component, props)
+        React.createElement(Component, _extends({}, more, props))
       );
     }
   }
 
+  WithWidth.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * As `window.innerWidth` is unavailable on the server,
+     * we default to rendering an empty componenent during the first mount.
+     * In some situation you might want to use an heristic to approximate
+     * the screen width of the client browser screen width.
+     *
+     * For instance, you could be using the user-agent or the client-hints.
+     * http://caniuse.com/#search=client%20hint
+     */
+    initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object.isRequired,
+    /**
+     * Bypass the width calculation logic.
+     */
+    width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
+  } : {};
+
   if (process.env.NODE_ENV !== 'production') {
-    Width.displayName = wrapDisplayName(Component, 'withWidth');
+    WithWidth.displayName = wrapDisplayName(Component, 'WithWidth');
   }
 
-  return withTheme()(Width);
+  hoistNonReactStatics(WithWidth, Component);
+
+  return withTheme()(WithWidth);
 };
 
 export default withWidth;