Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/Select/SelectInput.js

@@ -1,15 +1,13 @@
-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 _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode';
 import warning from 'warning';
+import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import Menu from '../Menu/Menu';
 import { isDirty } from '../Input/Input';
-import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';
 
 /**
  * @ignore - internal component.
@@ -19,28 +17,36 @@ class SelectInput extends React.Component {
     var _temp;
 
     return _temp = super(...args), this.state = {
-      anchorEl: null,
       open: false
-    }, this.ignoreNextBlur = false, this.handleClick = event => {
+    }, this.ignoreNextBlur = false, this.displayNode = null, this.isControlled = this.props.open !== undefined, this.update = this.isControlled ? ({ event, open }) => {
+      if (open) {
+        this.props.onOpen(event);
+      } else {
+        this.props.onClose(event);
+      }
+    } : ({ open }) => this.setState({ open }), this.handleClick = event => {
       // Opening the menu is going to blur the. It will be focused back when closed.
       this.ignoreNextBlur = true;
-      this.setState({
+      this.update({
         open: true,
-        anchorEl: event.currentTarget
+        event
       });
-    }, this.handleRequestClose = () => {
-      this.setState({
-        open: false
+    }, this.handleClose = event => {
+      this.update({
+        open: false,
+        event
       });
     }, this.handleItemClick = child => event => {
       if (!this.props.multiple) {
-        this.setState({
-          open: false
+        this.update({
+          open: false,
+          event
         });
       }
 
-      if (this.props.onChange) {
-        const { onChange } = this.props;
+      const { onChange, name } = this.props;
+
+      if (onChange) {
         let value;
         let target;
 
@@ -61,7 +67,7 @@ class SelectInput extends React.Component {
         }
 
         event.persist();
-        event.target = _extends({}, target, { value });
+        event.target = _extends({}, target, { value, name });
 
         onChange(event, child);
       }
@@ -85,17 +91,17 @@ class SelectInput extends React.Component {
         event.preventDefault();
         // Opening the menu is going to blur the. It will be focused back when closed.
         this.ignoreNextBlur = true;
-        this.setState({
+        this.update({
           open: true,
-          anchorEl: event.currentTarget
+          event
         });
       }
     }, this.handleSelectRef = node => {
-      if (!this.props.selectRef) {
+      if (!this.props.inputRef) {
         return;
       }
 
-      this.props.selectRef({
+      this.props.inputRef({
         node,
         // By pass the native input as we expose a rich object (array).
         value: this.props.value
@@ -103,33 +109,50 @@ class SelectInput extends React.Component {
     }, _temp;
   }
 
+  componentDidMount() {
+    if (this.isControlled && this.props.open) {
+      // Focus the display node so the focus is restored on this element once
+      // the menu is closed.
+      this.displayNode.focus();
+      // Rerender with the resolve `displayNode` reference.
+      this.forceUpdate();
+    }
+  }
+
   render() {
     const _props = this.props,
           {
       autoWidth,
       children,
-      className: classNameProp,
       classes,
+      className: classNameProp,
       disabled,
       displayEmpty,
+      inputRef,
+      MenuProps = {},
+      multiple,
       name,
       native,
-      multiple,
-      MenuProps = {},
       onBlur,
       onChange,
+      onClose,
       onFocus,
+      onOpen,
+      open: openProp,
       readOnly,
       renderValue,
-      selectRef,
+      SelectDisplayProps,
+      tabIndex: tabIndexProp,
+      type = 'hidden',
       value
     } = _props,
-          other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'className', 'classes', 'disabled', 'displayEmpty', 'name', 'native', 'multiple', 'MenuProps', 'onBlur', 'onChange', 'onFocus', 'readOnly', 'renderValue', 'selectRef', 'value']);
+          other = _objectWithoutProperties(_props, ['autoWidth', 'children', 'classes', 'className', 'disabled', 'displayEmpty', 'inputRef', 'MenuProps', 'multiple', 'name', 'native', 'onBlur', 'onChange', 'onClose', 'onFocus', 'onOpen', 'open', 'readOnly', 'renderValue', 'SelectDisplayProps', 'tabIndex', 'type', 'value']);
+    const open = this.isControlled && this.displayNode ? openProp : this.state.open;
 
     if (native) {
-      warning(multiple === false, 'Material-UI: you can not use the `native` and `multiple` properties ' + 'at the same time on a `Select` component.');
-      warning(!renderValue, 'Material-UI: the `renderValue` property is not used by the native implementation.');
-      warning(!displayEmpty, 'Material-UI: the `displayEmpty` property is not used by the native implementation.');
+      process.env.NODE_ENV !== "production" ? warning(multiple === false, 'Material-UI: you can not use the `native` and `multiple` properties ' + 'at the same time on a `Select` component.') : void 0;
+      process.env.NODE_ENV !== "production" ? warning(!renderValue, 'Material-UI: the `renderValue` property is not used by the native implementation.') : void 0;
+      process.env.NODE_ENV !== "production" ? warning(!displayEmpty, 'Material-UI: the `displayEmpty` property is not used by the native implementation.') : void 0;
 
       return React.createElement(
         'div',
@@ -146,10 +169,9 @@ class SelectInput extends React.Component {
             onChange: onChange,
             onFocus: onFocus,
             value: value,
-            readOnly: readOnly
-          }, other, {
-            ref: selectRef
-          }),
+            readOnly: readOnly,
+            ref: inputRef
+          }, other),
           children
         ),
         React.createElement(ArrowDropDownIcon, { className: classes.icon })
@@ -207,53 +229,63 @@ class SelectInput extends React.Component {
       display = multiple ? displayMultiple.join(', ') : displaySingle;
     }
 
-    const minimumMenuWidth = this.state.anchorEl != null && !autoWidth ? this.state.anchorEl.clientWidth : undefined;
+    const MenuMinWidth = this.displayNode && !autoWidth ? this.displayNode.clientWidth : undefined;
+
+    let tabIndex;
+    if (typeof tabIndexProp !== 'undefined') {
+      tabIndex = tabIndexProp;
+    } else {
+      tabIndex = disabled ? null : 0;
+    }
 
     return React.createElement(
       'div',
       { className: classes.root },
       React.createElement(
         'div',
-        {
+        _extends({
           className: classNames(classes.select, classes.selectMenu, {
             [classes.disabled]: disabled
           }, classNameProp),
-          'data-mui-test': 'SelectDisplay',
-          'aria-pressed': this.state.open ? 'true' : 'false',
-          tabIndex: disabled ? null : 0,
+          ref: node => {
+            this.displayNode = node;
+          },
+
+          'aria-pressed': open ? 'true' : 'false',
+          tabIndex: tabIndex,
           role: 'button',
-          'aria-owns': this.state.open ? `menu-${name || ''}` : null,
+          'aria-owns': open ? `menu-${name || ''}` : null,
           'aria-haspopup': 'true',
           onKeyDown: this.handleKeyDown,
           onBlur: this.handleBlur,
           onClick: disabled || readOnly ? null : this.handleClick,
           onFocus: onFocus
-        },
+        }, SelectDisplayProps),
+        React.createElement('span', { dangerouslySetInnerHTML: { __html: '&#8203' } }),
         display
       ),
       React.createElement('input', _extends({
         value: Array.isArray(value) ? value.join(',') : value,
         name: name,
-        readOnly: readOnly
-      }, other, {
+        readOnly: readOnly,
         ref: this.handleSelectRef,
-        type: 'hidden'
-      })),
+        type: type
+      }, other)),
       React.createElement(ArrowDropDownIcon, { className: classes.icon }),
       React.createElement(
         Menu,
         _extends({
           id: `menu-${name || ''}`,
-          anchorEl: this.state.anchorEl,
-          open: this.state.open,
-          onRequestClose: this.handleRequestClose
+          anchorEl: this.displayNode,
+          open: open,
+          onClose: this.handleClose
         }, MenuProps, {
-          MenuListProps: _extends({}, MenuProps.MenuListProps, {
+          MenuListProps: _extends({
             role: 'listbox'
-          }),
+          }, MenuProps.MenuListProps),
           PaperProps: _extends({}, MenuProps.PaperProps, {
             style: _extends({
-              minWidth: minimumMenuWidth
+              minWidth: MenuMinWidth
             }, MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null)
           })
         }),
@@ -263,5 +295,114 @@ class SelectInput extends React.Component {
   }
 }
 
-SelectInput.muiName = 'SelectInput';
+SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If true, the width of the popover will automatically be set according to the items inside the
+   * menu, otherwise it will be at least the width of the select input.
+   */
+  autoWidth: PropTypes.bool,
+  /**
+   * The option elements to populate the select with.
+   * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The CSS class name of the select element.
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the select will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the selected item is displayed even if its value is empty.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  displayEmpty: PropTypes.bool,
+  /**
+   * Use that property to pass a ref callback to the native select element.
+   */
+  inputRef: PropTypes.func,
+  /**
+   * Properties applied to the `Menu` element.
+   */
+  MenuProps: PropTypes.object,
+  /**
+   * If true, `value` must be an array and the menu will support multiple selections.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  multiple: PropTypes.bool,
+  /**
+   * Name attribute of the `select` or hidden `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * If `true`, the component will be using a native `select` element.
+   */
+  native: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Callback function fired when a menu item is selected.
+   *
+   * @param {object} event The event source of the callback
+   * @param {object} child The react element that was selected
+   */
+  onChange: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   * Useful in controlled mode (see open).
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be opened.
+   * Useful in controlled mode (see open).
+   *
+   * @param {object} event The event source of the callback
+   */
+  onOpen: PropTypes.func,
+  /**
+   * Control `select` open state.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  open: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * Render the selected value.
+   * You can only use it when the `native` property is `false` (default).
+   */
+  renderValue: PropTypes.func,
+  /**
+   * Properties applied to the clickable div element.
+   */
+  SelectDisplayProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.string,
+  /**
+   * The value of the component, required for a controlled component.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))])
+} : {};
+
 export default SelectInput;