Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Input/Input.js.flow

@@ -1,11 +1,7 @@
-// @flow weak
-
 import React from 'react';
-import type { Node, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
-import { isMuiComponent } from '../utils/reactHelpers';
 import Textarea from './Textarea';
 
 // Supports determination of isControlled().
@@ -14,8 +10,8 @@ import Textarea from './Textarea';
 // @see https://facebook.github.io/react/docs/forms.html#controlled-components
 // @param value
 // @returns {boolean} true if string (including '') or number (including zero)
-export function hasValue(value: ?(number | string | Array<*>)) {
-  return value !== undefined && value !== null && !(Array.isArray(value) && value.length === 0);
+export function hasValue(value) {
+  return value != null && !(Array.isArray(value) && value.length === 0);
 }
 
 // Determine if field is dirty (a.k.a. filled).
@@ -44,31 +40,32 @@ export function isAdornedStart(obj) {
   return obj.startAdornment;
 }
 
-export const styles = (theme: Object) => {
+export const styles = theme => {
+  const light = theme.palette.type === 'light';
   const placeholder = {
     color: 'currentColor',
-    opacity: theme.palette.type === 'light' ? 0.42 : 0.5,
+    opacity: light ? 0.42 : 0.5,
     transition: theme.transitions.create('opacity', {
       duration: theme.transitions.duration.shorter,
-      easing: theme.transitions.easing.ease,
     }),
   };
   const placeholderHidden = {
     opacity: 0,
   };
   const placeholderVisible = {
-    opacity: theme.palette.type === 'light' ? 0.42 : 0.5,
+    opacity: light ? 0.42 : 0.5,
   };
+  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
   return {
     root: {
       // Mimics the default input display property used by browsers for an input.
       display: 'inline-flex',
-      alignItems: 'baseline',
       position: 'relative',
       fontFamily: theme.typography.fontFamily,
-      color: theme.palette.input.inputText,
+      color: light ? 'rgba(0, 0, 0, 0.87)' : theme.palette.common.white,
       fontSize: theme.typography.pxToRem(16),
+      lineHeight: '1.1875em', // Reset (19px), match the native input line-height
     },
     formControl: {
       'label + &': {
@@ -77,7 +74,7 @@ export const styles = (theme: Object) => {
     },
     inkbar: {
       '&:after': {
-        backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'],
+        backgroundColor: theme.palette.primary[light ? 'dark' : 'light'],
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -98,21 +95,61 @@ export const styles = (theme: Object) => {
     },
     error: {
       '&:after': {
-        backgroundColor: theme.palette.error.A400,
+        backgroundColor: theme.palette.error.main,
         transform: 'scaleX(1)', // error is always underlined in red
       },
     },
+    focused: {},
+    disabled: {
+      color: theme.palette.text.disabled,
+    },
+    underline: {
+      '&:before': {
+        backgroundColor: bottomLineColor,
+        left: 0,
+        bottom: 0,
+        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+        content: '""',
+        height: 1,
+        position: 'absolute',
+        right: 0,
+        transition: theme.transitions.create('background-color', {
+          duration: theme.transitions.duration.shorter,
+        }),
+        pointerEvents: 'none', // Transparent to the hover style.
+      },
+      '&:hover:not($disabled):before': {
+        backgroundColor: theme.palette.text.primary,
+        height: 2,
+      },
+      '&$disabled:before': {
+        background: 'transparent',
+        backgroundImage: `linear-gradient(to right, ${bottomLineColor} 33%, transparent 0%)`,
+        backgroundPosition: 'left top',
+        backgroundRepeat: 'repeat-x',
+        backgroundSize: '5px 1px',
+      },
+    },
+    multiline: {
+      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+    },
+    fullWidth: {
+      width: '100%',
+    },
     input: {
       font: 'inherit',
       color: 'currentColor',
-      // slight alteration to spec spacing to match visual spec result
-      padding: `${theme.spacing.unit - 1}px 0 ${theme.spacing.unit + 1}px`,
+      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
       border: 0,
       boxSizing: 'content-box',
       verticalAlign: 'middle',
       background: 'none',
       margin: 0, // Reset for Safari
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
       display: 'block',
+      // Make the flex item shrink with Firefox
+      minWidth: 0,
       width: '100%',
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
@@ -127,7 +164,7 @@ export const styles = (theme: Object) => {
       },
       '&::-webkit-search-decoration': {
         // Remove the padding when type=search.
-        appearance: 'none',
+        '-webkit-appearance': 'none',
       },
       // Show and hide the placeholder logic
       'label[data-shrink=false] + $formControl &': {
@@ -142,254 +179,103 @@ export const styles = (theme: Object) => {
       },
     },
     inputDense: {
-      paddingTop: theme.spacing.unit / 2,
-    },
-    disabled: {
-      color: theme.palette.text.disabled,
-    },
-    focused: {},
-    underline: {
-      '&:before': {
-        backgroundColor: theme.palette.input.bottomLine,
-        left: 0,
-        bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-        content: '""',
-        height: 1,
-        position: 'absolute',
-        right: 0,
-        transition: theme.transitions.create('background-color', {
-          duration: theme.transitions.duration.shorter,
-          easing: theme.transitions.easing.ease,
-        }),
-        pointerEvents: 'none', // Transparent to the hover style.
-      },
-      '&:hover:not($disabled):before': {
-        backgroundColor: theme.palette.text.primary,
-        height: 2,
-      },
-      '&$disabled:before': {
-        background: 'transparent',
-        backgroundImage: `linear-gradient(to right, ${theme.palette.input
-          .bottomLine} 33%, transparent 0%)`,
-        backgroundPosition: 'left top',
-        backgroundRepeat: 'repeat-x',
-        backgroundSize: '5px 1px',
-      },
-    },
-    multiline: {
-      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+      paddingTop: theme.spacing.unit / 2 - 1,
     },
     inputDisabled: {
       opacity: 1, // Reset iOS opacity
     },
-    inputSingleline: {
-      height: '1em',
-    },
-    inputSearch: {
-      appearance: 'textfield', // Improve type search style.
+    inputType: {
+      // type="date" or type="time", etc. have specific styles we need to reset.
+      height: '1.1875em', // Reset (19px), match the native input line-height
     },
     inputMultiline: {
       resize: 'none',
       padding: 0,
     },
-    fullWidth: {
-      width: '100%',
+    inputSearch: {
+      // Improve type search style.
+      '-moz-appearance': 'textfield',
+      '-webkit-appearance': 'textfield',
     },
   };
 };
 
-type ProvidedProps = {
-  classes: Object,
-  disableUnderline: boolean,
-  fullWidth: boolean,
-  multiline: boolean,
-  type: string,
-};
+function formControlState(props, context) {
+  let disabled = props.disabled;
+  let error = props.error;
+  let margin = props.margin;
 
-export type Props = {
-  /**
-   * This property helps users to fill forms faster, especially on mobile devices.
-   * The name can be confusing, it's more like an autofill.
-   * You can learn more about it in this article
-   * https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
-   */
-  autoComplete?: string,
-  /**
-   * If `true`, the input will be focused during the first mount.
-   */
-  autoFocus?: boolean,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * The CSS class name of the wrapper element.
-   */
-  className?: string,
-  /**
-   * The default input value, useful when not controlling the component.
-   */
-  defaultValue?: string | number,
-  /**
-   * If `true`, the input will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * If `true`, the input will not have an underline.
-   */
-  disableUnderline?: boolean,
-  /**
-   * End `InputAdornment` for this component.
-   */
-  endAdornment?: Node,
-  /**
-   * If `true`, the input will indicate an error. This is normally obtained via context from
-   * FormControl.
-   */
-  error?: boolean,
-  /**
-   * If `true`, the input will take up the full width of its container.
-   */
-  fullWidth?: boolean,
-  /**
-   * The id of the `input` element.
-   */
-  id?: string,
-  /**
-   * The component used for the input node.
-   * Either a string to use a DOM element or a component.
-   * It's an `input` by default.
-   */
-  inputComponent?: string | ComponentType<*>,
-  /**
-   * Properties applied to the `input` element.
-   */
-  inputProps?: Object,
-  /**
-   * Use that property to pass a ref callback to the native input component.
-   */
-  inputRef?: Function,
-  /**
-   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
-   * FormControl.
-   */
-  margin?: 'dense' | 'none',
-  /**
-   * If `true`, a textarea element will be rendered.
-   */
-  multiline?: boolean,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name?: string,
-  /**
-   * @ignore
-   */
-  readOnly?: boolean,
-  /**
-   * @ignore
-   */
-  onBlur?: (event: SyntheticFocusEvent<>) => void,
-  /**
-   * Callback fired when the value is changed.
-   *
-   * @param {object} event The event source of the callback
-   */
-  onChange?: (event: SyntheticInputEvent<>) => void,
-  /**
-   * TODO
-   */
-  onClean?: () => void,
-  /**
-   * TODO
-   */
-  onDirty?: () => void,
-  /**
-   * @ignore
-   */
-  onFocus?: (event: SyntheticFocusEvent<>) => void,
-  /**
-   * @ignore
-   */
-  onKeyDown?: (event: SyntheticKeyboardEvent<>) => void,
-  /**
-   * @ignore
-   */
-  onKeyUp?: (event: SyntheticKeyboardEvent<>) => void,
-  /**
-   * The short hint displayed in the input before the user enters a value.
-   */
-  placeholder?: string,
-  /**
-   * Number of rows to display when multiline option is set to true.
-   */
-  rows?: string | number,
-  /**
-   * Maximum number of rows to display when multiline option is set to true.
-   */
-  rowsMax?: string | number,
-  /**
-   * Start `InputAdornment` for this component.
-   */
-  startAdornment?: Node,
-  /**
-   * Type of the input element. It should be a valid HTML5 input type.
-   */
-  type?: string,
-  /**
-   * The input value, required for a controlled component.
-   */
-  value?: string | number | Array<string | number>,
-};
+  if (context && context.muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = context.muiFormControl.disabled;
+    }
 
-type State = {
-  focused: boolean,
-};
+    if (typeof error === 'undefined') {
+      error = context.muiFormControl.error;
+    }
 
-class Input extends React.Component<ProvidedProps & Props, State> {
-  static muiName = 'Input';
+    if (typeof margin === 'undefined') {
+      margin = context.muiFormControl.margin;
+    }
+  }
 
-  static defaultProps = {
-    disableUnderline: false,
-    fullWidth: false,
-    multiline: false,
-    type: 'text',
+  return {
+    disabled,
+    error,
+    margin,
   };
+}
 
+class Input extends React.Component {
   state = {
     focused: false,
   };
 
+  getChildContext() {
+    // We are consuming the parent muiFormControl context.
+    // We don't want a child to consume it a second time.
+    return {
+      muiFormControl: null,
+    };
+  }
+
   componentWillMount() {
-    if (this.isControlled()) {
+    this.isControlled = this.props.value != null;
+
+    if (this.isControlled) {
       this.checkDirty(this.props);
     }
   }
 
   componentDidMount() {
-    if (!this.isControlled()) {
+    if (!this.isControlled) {
       this.checkDirty(this.input);
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps, nextContext) {
     // The blur won't fire when the disabled state is set on a focused input.
     // We need to book keep the focused state manually.
-    if (!this.props.disabled && nextProps.disabled) {
+    if (
+      !formControlState(this.props, this.context).disabled &&
+      formControlState(nextProps, nextContext).disabled
+    ) {
       this.setState({
         focused: false,
       });
     }
   }
 
-  componentWillUpdate(nextProps) {
-    if (this.isControlled(nextProps)) {
+  componentWillUpdate(nextProps, nextState, nextContext) {
+    if (this.isControlled) {
       this.checkDirty(nextProps);
     } // else performed in the onChange
 
     // Book keep the focused state.
-    if (!this.props.disabled && nextProps.disabled) {
+    if (
+      !formControlState(this.props, this.context).disabled &&
+      formControlState(nextProps, nextContext).disabled
+    ) {
       const { muiFormControl } = this.context;
       if (muiFormControl && muiFormControl.onBlur) {
         muiFormControl.onBlur();
@@ -400,22 +286,29 @@ class Input extends React.Component<ProvidedProps & Props, State> {
   // Holds the input reference
   input = null;
 
-  handleFocus = (event: SyntheticFocusEvent<>) => {
+  handleFocus = event => {
+    // Fix an bug with IE11 where the focus/blur events are triggered
+    // while the input is disabled.
+    if (formControlState(this.props, this.context).disabled) {
+      event.stopPropagation();
+      return;
+    }
+
     this.setState({ focused: true });
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
   };
 
-  handleBlur = (event: SyntheticFocusEvent<>) => {
+  handleBlur = event => {
     this.setState({ focused: false });
     if (this.props.onBlur) {
       this.props.onBlur(event);
     }
   };
 
-  handleChange = (event: SyntheticInputEvent<>) => {
-    if (!this.isControlled()) {
+  handleChange = event => {
+    if (!this.isControlled) {
       this.checkDirty(this.input);
     }
 
@@ -427,19 +320,14 @@ class Input extends React.Component<ProvidedProps & Props, State> {
 
   handleRefInput = node => {
     this.input = node;
+
     if (this.props.inputRef) {
       this.props.inputRef(node);
+    } else if (this.props.inputProps && this.props.inputProps.ref) {
+      this.props.inputProps.ref(node);
     }
   };
 
-  // A controlled input accepts its current value as a prop.
-  //
-  // @see https://facebook.github.io/react/docs/forms.html#controlled-components
-  // @returns {boolean} true if string (including '') or number (including zero)
-  isControlled(props = this.props) {
-    return hasValue(props.value);
-  }
-
   checkDirty(obj) {
     const { muiFormControl } = this.context;
 
@@ -479,43 +367,26 @@ class Input extends React.Component<ProvidedProps & Props, State> {
       inputRef,
       margin: marginProp,
       multiline,
+      name,
       onBlur,
-      onFocus,
       onChange,
       onClean,
       onDirty,
+      onFocus,
       onKeyDown,
       onKeyUp,
       placeholder,
-      name,
       readOnly,
       rows,
       rowsMax,
       startAdornment,
       type,
-      // $FlowFixMe
       value,
       ...other
     } = this.props;
 
     const { muiFormControl } = this.context;
-    let disabled = disabledProp;
-    let error = errorProp;
-    let margin = marginProp;
-
-    if (muiFormControl) {
-      if (typeof disabled === 'undefined') {
-        disabled = muiFormControl.disabled;
-      }
-
-      if (typeof error === 'undefined') {
-        error = muiFormControl.error;
-      }
-
-      if (typeof margin === 'undefined') {
-        margin = muiFormControl.margin;
-      }
-    }
+    const { disabled, error, margin } = formControlState(this.props, this.context);
 
     const className = classNames(
       classes.root,
@@ -536,9 +407,9 @@ class Input extends React.Component<ProvidedProps & Props, State> {
       classes.input,
       {
         [classes.inputDisabled]: disabled,
-        [classes.inputSingleline]: !multiline,
-        [classes.inputSearch]: type === 'search',
+        [classes.inputType]: type !== 'text',
         [classes.inputMultiline]: multiline,
+        [classes.inputSearch]: type === 'search',
         [classes.inputDense]: margin === 'dense',
       },
       inputPropsClassName,
@@ -548,20 +419,19 @@ class Input extends React.Component<ProvidedProps & Props, State> {
 
     let InputComponent = 'input';
     let inputProps = {
-      ref: this.handleRefInput,
       ...inputPropsProp,
+      ref: this.handleRefInput,
     };
 
     if (inputComponent) {
       InputComponent = inputComponent;
-
-      if (isMuiComponent(InputComponent, ['SelectInput'])) {
-        inputProps = {
-          selectRef: this.handleRefInput,
-          ...inputProps,
-          ref: null,
-        };
-      }
+      inputProps = {
+        // Rename ref to inputRef as we don't know the
+        // provided `inputComponent` structure.
+        inputRef: this.handleRefInput,
+        ...inputProps,
+        ref: null,
+      };
     } else if (multiline) {
       if (rows && !rowsMax) {
         InputComponent = 'textarea';
@@ -596,6 +466,8 @@ class Input extends React.Component<ProvidedProps & Props, State> {
           type={type}
           readOnly={readOnly}
           rows={rows}
+          aria-required={required}
+          aria-invalid={error}
           {...inputProps}
         />
         {endAdornment}
@@ -604,8 +476,160 @@ class Input extends React.Component<ProvidedProps & Props, State> {
   }
 }
 
+Input.propTypes = {
+  /**
+   * This property helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it here:
+   * https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * If `true`, the input will be focused during the first mount.
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The CSS class name of the wrapper element.
+   */
+  className: PropTypes.string,
+  /**
+   * The default input value, useful when not controlling the component.
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the input will not have an underline.
+   */
+  disableUnderline: PropTypes.bool,
+  /**
+   * End `InputAdornment` for this component.
+   */
+  endAdornment: PropTypes.node,
+  /**
+   * If `true`, the input will indicate an error. This is normally obtained via context from
+   * FormControl.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+  /**
+   * The component used for the native input.
+   * Either a string to use a DOM element or a component.
+   */
+  inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Properties applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Use that property to pass a ref callback to the native input component.
+   */
+  inputRef: PropTypes.func,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense', 'none']),
+  /**
+   * If `true`, a textarea element will be rendered.
+   */
+  multiline: PropTypes.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onChange: PropTypes.func,
+  /**
+   * TODO
+   */
+  onClean: PropTypes.func,
+  /**
+   * TODO
+   */
+  onDirty: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: PropTypes.func,
+  /**
+   * The short hint displayed in the input before the user enters a value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * @ignore
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: PropTypes.node,
+  /**
+   * Type of the input element. It should be a valid HTML5 input type.
+   */
+  type: PropTypes.string,
+  /**
+   * The input value, required for a controlled component.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  ]),
+};
+
+Input.muiName = 'Input';
+
+Input.defaultProps = {
+  disableUnderline: false,
+  fullWidth: false,
+  multiline: false,
+  type: 'text',
+};
+
 Input.contextTypes = {
   muiFormControl: PropTypes.object,
 };
 
+Input.childContextTypes = {
+  muiFormControl: PropTypes.object,
+};
+
 export default withStyles(styles, { name: 'MuiInput' })(Input);