Completely updated React, fixed #11, (hopefully)

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

@@ -1,139 +1,71 @@
-// @flow
-
 import React from 'react';
-import type { Element, Node } 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';
-
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * 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: boolean,
-  /**
-   * The option elements to populate the select with.
-   * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
-   */
-  children: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * The CSS class name of the select element.
-   */
-  className?: string,
-  /**
-   * If `true`, the select will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * 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: boolean,
-  /**
-   * If `true`, the component will be using a native `select` element.
-   */
-  native: boolean,
-  /**
-   * 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: boolean,
-  /**
-   * Properties applied to the `Menu` element.
-   */
-  MenuProps?: Object,
-  /**
-   * Name attribute of the `select` or hidden `input` element.
-   */
-  name?: string,
-  /**
-   * @ignore
-   */
-  onBlur?: Function,
-  /**
-   * 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?: (event: SyntheticUIEvent<*>, child: Element<any>) => void,
-  /**
-   * @ignore
-   */
-  onFocus?: Function,
-  /**
-   * @ignore
-   */
-  readOnly?: boolean,
-  /**
-   * Render the selected value.
-   * You can only use it when the `native` property is `false` (default).
-   */
-  renderValue?: Function,
-  /**
-   * Use that property to pass a ref callback to the native select element.
-   */
-  selectRef?: Function,
-  /**
-   * The value of the component, required for a controlled component.
-   */
-  value?: string | number | $ReadOnlyArray<string | number>,
-};
-
-type State = {
-  open: boolean,
-  anchorEl: ?HTMLElement,
-};
 
 /**
  * @ignore - internal component.
  */
-class SelectInput extends React.Component<ProvidedProps & Props, State> {
-  static muiName = 'SelectInput';
-
+class SelectInput extends React.Component {
   state = {
-    anchorEl: null,
     open: false,
   };
 
-  ignoreNextBlur = false;
+  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();
+    }
+  }
 
-  handleClick = (event: SyntheticMouseEvent<HTMLElement>) => {
+  ignoreNextBlur = false;
+  displayNode = null;
+  isControlled = this.props.open !== undefined;
+
+  update = this.isControlled
+    ? ({ event, open }) => {
+        if (open) {
+          this.props.onOpen(event);
+        } else {
+          this.props.onClose(event);
+        }
+      }
+    : ({ open }) => this.setState({ open });
+
+  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,
     });
   };
 
-  handleRequestClose = () => {
-    this.setState({
+  handleClose = event => {
+    this.update({
       open: false,
+      event,
     });
   };
 
-  handleItemClick = (child: Element<any>) => (event: SyntheticMouseEvent<> & { target?: any }) => {
+  handleItemClick = child => event => {
     if (!this.props.multiple) {
-      this.setState({
+      this.update({
         open: false,
+        event,
       });
     }
 
-    if (this.props.onChange) {
-      const { onChange } = this.props;
+    const { onChange, name } = this.props;
+
+    if (onChange) {
       let value;
       let target;
 
@@ -154,13 +86,13 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
       }
 
       event.persist();
-      event.target = { ...target, value };
+      event.target = { ...target, value, name };
 
       onChange(event, child);
     }
   };
 
-  handleBlur = (event: SyntheticFocusEvent<>) => {
+  handleBlur = event => {
     if (this.ignoreNextBlur === true) {
       // The parent components are relying on the bubbling of the event.
       event.stopPropagation();
@@ -173,7 +105,7 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
     }
   };
 
-  handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
+  handleKeyDown = event => {
     if (this.props.readOnly) {
       return;
     }
@@ -182,19 +114,19 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
       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,
       });
     }
   };
 
-  handleSelectRef = (node: ?HTMLElement) => {
-    if (!this.props.selectRef) {
+  handleSelectRef = node => {
+    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,
@@ -205,23 +137,30 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
     const {
       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,
       ...other
     } = this.props;
+    const open = this.isControlled && this.displayNode ? openProp : this.state.open;
 
     if (native) {
       warning(
@@ -255,8 +194,8 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
             onFocus={onFocus}
             value={value}
             readOnly={readOnly}
+            ref={inputRef}
             {...other}
-            ref={selectRef}
           >
             {children}
           </select>
@@ -322,8 +261,14 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
       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 (
       <div className={classes.root}>
@@ -336,42 +281,49 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
             },
             classNameProp,
           )}
+          ref={node => {
+            this.displayNode = node;
+          }}
           data-mui-test="SelectDisplay"
-          aria-pressed={this.state.open ? 'true' : 'false'}
-          tabIndex={disabled ? null : 0}
+          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}
         >
+          {/* So the vertical align positioning algorithm quicks in. */}
+          {/* eslint-disable-next-line react/no-danger */}
+          <span dangerouslySetInnerHTML={{ __html: '&#8203' }} />
           {display}
         </div>
         <input
           value={Array.isArray(value) ? value.join(',') : value}
           name={name}
           readOnly={readOnly}
-          {...other}
           ref={this.handleSelectRef}
-          type="hidden"
+          type={type}
+          {...other}
         />
         <ArrowDropDownIcon className={classes.icon} />
         <Menu
           id={`menu-${name || ''}`}
-          anchorEl={this.state.anchorEl}
-          open={this.state.open}
-          onRequestClose={this.handleRequestClose}
+          anchorEl={this.displayNode}
+          open={open}
+          onClose={this.handleClose}
           {...MenuProps}
           MenuListProps={{
-            ...MenuProps.MenuListProps,
             role: 'listbox',
+            ...MenuProps.MenuListProps,
           }}
           PaperProps={{
             ...MenuProps.PaperProps,
             style: {
-              minWidth: minimumMenuWidth,
+              minWidth: MenuMinWidth,
               ...(MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null),
             },
           }}
@@ -383,4 +335,118 @@ class SelectInput extends React.Component<ProvidedProps & Props, State> {
   }
 }
 
+SelectInput.propTypes = {
+  /**
+   * 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;