Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Chip/Chip.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface ChipProps extends StandardProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  ChipClassKey
-> {
+export interface ChipProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
   avatar?: React.ReactElement<any>;
-  label?: React.ReactNode;
-  onKeyDown?: React.EventHandler<React.KeyboardEvent<any>>;
-  onRequestDelete?: React.EventHandler<any>;
+  component?: React.ReactType<ChipProps>;
   deleteIcon?: React.ReactElement<any>;
+  label?: React.ReactNode;
+  onDelete?: React.EventHandler<any>;
+  onKeyDown?: React.EventHandler<React.KeyboardEvent<any>>;
 }
 
 export type ChipClassKey =
@@ -19,8 +18,7 @@ export type ChipClassKey =
   | 'avatar'
   | 'avatarChildren'
   | 'label'
-  | 'deleteIcon'
-  ;
+  | 'deleteIcon';
 
 declare const Chip: React.ComponentType<ChipProps>;
 

goTorrentWebUI/node_modules/material-ui/Chip/Chip.js

@@ -41,6 +41,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -49,36 +53,32 @@ var _keycode = require('keycode');
 
 var _keycode2 = _interopRequireDefault(_keycode);
 
+var _Cancel = require('../internal/svg-icons/Cancel');
+
+var _Cancel2 = _interopRequireDefault(_Cancel);
+
 var _withStyles = require('../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
 
-var _Cancel = require('../svg-icons/Cancel');
-
-var _Cancel2 = _interopRequireDefault(_Cancel);
-
 var _colorManipulator = require('../styles/colorManipulator');
 
-var _Avatar = require('../Avatar/Avatar');
-
-var _Avatar2 = _interopRequireDefault(_Avatar);
+require('../Avatar/Avatar');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
-
-var babelPluginFlowReactPropTypes_proptype_Element = require('react').babelPluginFlowReactPropTypes_proptype_Element || require('prop-types').any;
+// So we don't have any override priority issue.
 
 var styles = exports.styles = function styles(theme) {
   var height = 32;
-  var backgroundColor = (0, _colorManipulator.emphasize)(theme.palette.background.default, 0.12);
+  var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
   var deleteIconColor = (0, _colorManipulator.fade)(theme.palette.text.primary, 0.26);
 
   return {
     root: {
       fontFamily: theme.typography.fontFamily,
       fontSize: theme.typography.pxToRem(13),
-      display: 'flex',
+      display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       height: height,
@@ -86,7 +86,6 @@ var styles = exports.styles = function styles(theme) {
       backgroundColor: backgroundColor,
       borderRadius: height / 2,
       whiteSpace: 'nowrap',
-      width: 'fit-content',
       transition: theme.transitions.create(),
       // label will inherit this from root, then `clickable` class overrides this for both
       cursor: 'default',
@@ -96,7 +95,7 @@ var styles = exports.styles = function styles(theme) {
     },
     clickable: {
       // Remove grey highlight
-      WebkitTapHighlightColor: theme.palette.common.transparent,
+      WebkitTapHighlightColor: 'transparent',
       cursor: 'pointer',
       '&:hover, &:focus': {
         backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.08)
@@ -113,8 +112,9 @@ var styles = exports.styles = function styles(theme) {
     },
     avatar: {
       marginRight: -4,
-      width: 32,
-      height: 32,
+      width: height,
+      height: height,
+      color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
       fontSize: theme.typography.pxToRem(16)
     },
     avatarChildren: {
@@ -132,7 +132,7 @@ var styles = exports.styles = function styles(theme) {
     },
     deleteIcon: {
       // Remove grey highlight
-      WebkitTapHighlightColor: theme.palette.common.transparent,
+      WebkitTapHighlightColor: 'transparent',
       color: deleteIconColor,
       cursor: 'pointer',
       height: 'auto',
@@ -144,57 +144,10 @@ var styles = exports.styles = function styles(theme) {
   };
 };
 
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * Avatar element.
-   */
-  avatar: typeof babelPluginFlowReactPropTypes_proptype_Element === 'function' ? babelPluginFlowReactPropTypes_proptype_Element : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Element),
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string,
-
-  /**
-   * Custom delete icon. Will be shown only if `onRequestDelete` is set.
-   */
-  deleteIcon: typeof babelPluginFlowReactPropTypes_proptype_Element === 'function' ? babelPluginFlowReactPropTypes_proptype_Element : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Element),
-
-  /**
-   * The content of the label.
-   */
-  label: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
-
-  /**
-   * @ignore
-   */
-  onClick: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  onKeyDown: require('prop-types').func,
-
-  /**
-   * Callback function fired when the delete icon is clicked.
-   * If set, the delete icon will be shown.
-   */
-  onRequestDelete: require('prop-types').func,
-
-  /**
-   * @ignore
-   */
-  tabIndex: require('prop-types').oneOfType([require('prop-types').number, require('prop-types').string])
-};
-
 /**
  * Chips represent complex entities in small blocks, such as a contact.
  */
+
 var Chip = function (_React$Component) {
   (0, _inherits3.default)(Chip, _React$Component);
 
@@ -212,15 +165,20 @@ var Chip = function (_React$Component) {
     return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Chip.__proto__ || (0, _getPrototypeOf2.default)(Chip)).call.apply(_ref, [this].concat(args))), _this), _this.chipRef = null, _this.handleDeleteIconClick = function (event) {
       // Stop the event from bubbling up to the `Chip`
       event.stopPropagation();
-      var onRequestDelete = _this.props.onRequestDelete;
+      var onDelete = _this.props.onDelete;
 
-      if (onRequestDelete) {
-        onRequestDelete(event);
+      if (onDelete) {
+        onDelete(event);
       }
     }, _this.handleKeyDown = function (event) {
+      // Ignore events from children of `Chip`.
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+
       var _this$props = _this.props,
           onClick = _this$props.onClick,
-          onRequestDelete = _this$props.onRequestDelete,
+          onDelete = _this$props.onDelete,
           onKeyDown = _this$props.onKeyDown;
 
       var key = (0, _keycode2.default)(event);
@@ -228,9 +186,9 @@ var Chip = function (_React$Component) {
       if (onClick && (key === 'space' || key === 'enter')) {
         event.preventDefault();
         onClick(event);
-      } else if (onRequestDelete && key === 'backspace') {
+      } else if (onDelete && key === 'backspace') {
         event.preventDefault();
-        onRequestDelete(event);
+        onDelete(event);
       } else if (key === 'esc') {
         event.preventDefault();
         if (_this.chipRef) {
@@ -253,30 +211,28 @@ var Chip = function (_React$Component) {
           avatarProp = _props.avatar,
           classes = _props.classes,
           classNameProp = _props.className,
+          Component = _props.component,
+          deleteIconProp = _props.deleteIcon,
           label = _props.label,
           onClick = _props.onClick,
+          onDelete = _props.onDelete,
           onKeyDown = _props.onKeyDown,
-          onRequestDelete = _props.onRequestDelete,
-          deleteIconProp = _props.deleteIcon,
           tabIndexProp = _props.tabIndex,
-          other = (0, _objectWithoutProperties3.default)(_props, ['avatar', 'classes', 'className', 'label', 'onClick', 'onKeyDown', 'onRequestDelete', 'deleteIcon', 'tabIndex']);
+          other = (0, _objectWithoutProperties3.default)(_props, ['avatar', 'classes', 'className', 'component', 'deleteIcon', 'label', 'onClick', 'onDelete', 'onKeyDown', 'tabIndex']);
 
 
-      var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.clickable, onClick), (0, _defineProperty3.default)({}, classes.deletable, onRequestDelete), classNameProp);
+      var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.clickable, onClick), (0, _defineProperty3.default)({}, classes.deletable, onDelete), classNameProp);
 
       var deleteIcon = null;
-      if (onRequestDelete && deleteIconProp && _react2.default.isValidElement(deleteIconProp)) {
-        deleteIcon = _react2.default.cloneElement(deleteIconProp, {
-          onClick: this.handleDeleteIconClick,
-          className: (0, _classnames2.default)(classes.deleteIcon, deleteIconProp.props.className)
-        });
-      } else if (onRequestDelete) {
-        deleteIcon = _react2.default.createElement(_Cancel2.default, { className: classes.deleteIcon, onClick: this.handleDeleteIconClick });
+      if (onDelete) {
+        deleteIcon = deleteIconProp && _react2.default.isValidElement(deleteIconProp) ? _react2.default.cloneElement(deleteIconProp, {
+          className: (0, _classnames2.default)(deleteIconProp.props.className, classes.deleteIcon),
+          onClick: this.handleDeleteIconClick
+        }) : _react2.default.createElement(_Cancel2.default, { className: classes.deleteIcon, onClick: this.handleDeleteIconClick });
       }
 
       var avatar = null;
       if (avatarProp && _react2.default.isValidElement(avatarProp)) {
-        // $FlowFixMe - this looks strictly correct, not sure why it errors.
         avatar = _react2.default.cloneElement(avatarProp, {
           className: (0, _classnames2.default)(classes.avatar, avatarProp.props.className),
           childrenClassName: (0, _classnames2.default)(classes.avatarChildren, avatarProp.props.childrenClassName)
@@ -286,22 +242,21 @@ var Chip = function (_React$Component) {
       var tabIndex = tabIndexProp;
 
       if (!tabIndex) {
-        tabIndex = onClick || onRequestDelete ? 0 : -1;
+        tabIndex = onClick || onDelete ? 0 : -1;
       }
 
       return _react2.default.createElement(
-        'div',
+        Component,
         (0, _extends3.default)({
           role: 'button',
           className: className,
           tabIndex: tabIndex,
           onClick: onClick,
-          onKeyDown: this.handleKeyDown
-        }, other, {
+          onKeyDown: this.handleKeyDown,
           ref: function ref(node) {
             _this2.chipRef = node;
           }
-        }),
+        }, other),
         avatar,
         _react2.default.createElement(
           'span',
@@ -315,4 +270,53 @@ var Chip = function (_React$Component) {
   return Chip;
 }(_react2.default.Component);
 
+Chip.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Avatar element.
+   */
+  avatar: _propTypes2.default.element,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: _propTypes2.default.element,
+  /**
+   * The content of the label.
+   */
+  label: _propTypes2.default.node,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes2.default.func,
+  /**
+   * Callback function fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+} : {};
+
+Chip.defaultProps = {
+  component: 'div'
+};
+
 exports.default = (0, _withStyles2.default)(styles, { name: 'MuiChip' })(Chip);

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

@@ -1,24 +1,23 @@
-// @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 CancelIcon from '../internal/svg-icons/Cancel';
 import withStyles from '../styles/withStyles';
-import CancelIcon from '../svg-icons/Cancel';
 import { emphasize, fade } from '../styles/colorManipulator';
-import Avatar from '../Avatar/Avatar';
+import '../Avatar/Avatar'; // So we don't have any override priority issue.
 
-export const styles = (theme: Object) => {
+export const styles = theme => {
   const height = 32;
-  const backgroundColor = emphasize(theme.palette.background.default, 0.12);
+  const backgroundColor =
+    theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
   const deleteIconColor = fade(theme.palette.text.primary, 0.26);
 
   return {
     root: {
       fontFamily: theme.typography.fontFamily,
       fontSize: theme.typography.pxToRem(13),
-      display: 'flex',
+      display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       height,
@@ -26,7 +25,6 @@ export const styles = (theme: Object) => {
       backgroundColor,
       borderRadius: height / 2,
       whiteSpace: 'nowrap',
-      width: 'fit-content',
       transition: theme.transitions.create(),
       // label will inherit this from root, then `clickable` class overrides this for both
       cursor: 'default',
@@ -36,7 +34,7 @@ export const styles = (theme: Object) => {
     },
     clickable: {
       // Remove grey highlight
-      WebkitTapHighlightColor: theme.palette.common.transparent,
+      WebkitTapHighlightColor: 'transparent',
       cursor: 'pointer',
       '&:hover, &:focus': {
         backgroundColor: emphasize(backgroundColor, 0.08),
@@ -53,8 +51,9 @@ export const styles = (theme: Object) => {
     },
     avatar: {
       marginRight: -4,
-      width: 32,
-      height: 32,
+      width: height,
+      height,
+      color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
       fontSize: theme.typography.pxToRem(16),
     },
     avatarChildren: {
@@ -72,7 +71,7 @@ export const styles = (theme: Object) => {
     },
     deleteIcon: {
       // Remove grey highlight
-      WebkitTapHighlightColor: theme.palette.common.transparent,
+      WebkitTapHighlightColor: 'transparent',
       color: deleteIconColor,
       cursor: 'pointer',
       height: 'auto',
@@ -84,75 +83,36 @@ export const styles = (theme: Object) => {
   };
 };
 
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * Avatar element.
-   */
-  avatar?: Element<typeof Avatar>,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * Custom delete icon. Will be shown only if `onRequestDelete` is set.
-   */
-  deleteIcon?: Element<any>,
-  /**
-   * The content of the label.
-   */
-  label?: Node,
-  /**
-   * @ignore
-   */
-  onClick?: Function,
-  /**
-   * @ignore
-   */
-  onKeyDown?: Function,
-  /**
-   * Callback function fired when the delete icon is clicked.
-   * If set, the delete icon will be shown.
-   */
-  onRequestDelete?: (event: SyntheticEvent<>) => void,
-  /**
-   * @ignore
-   */
-  tabIndex?: number | string,
-};
-
 /**
  * Chips represent complex entities in small blocks, such as a contact.
  */
-class Chip extends React.Component<ProvidedProps & Props> {
-  chipRef: ?HTMLElement = null;
+class Chip extends React.Component {
+  chipRef = null;
 
   handleDeleteIconClick = event => {
     // Stop the event from bubbling up to the `Chip`
     event.stopPropagation();
-    const { onRequestDelete } = this.props;
-    if (onRequestDelete) {
-      onRequestDelete(event);
+    const { onDelete } = this.props;
+    if (onDelete) {
+      onDelete(event);
     }
   };
 
   handleKeyDown = event => {
-    const { onClick, onRequestDelete, onKeyDown } = this.props;
+    // Ignore events from children of `Chip`.
+    if (event.currentTarget !== event.target) {
+      return;
+    }
+
+    const { onClick, onDelete, onKeyDown } = this.props;
     const key = keycode(event);
 
     if (onClick && (key === 'space' || key === 'enter')) {
       event.preventDefault();
       onClick(event);
-    } else if (onRequestDelete && key === 'backspace') {
+    } else if (onDelete && key === 'backspace') {
       event.preventDefault();
-      onRequestDelete(event);
+      onDelete(event);
     } else if (key === 'esc') {
       event.preventDefault();
       if (this.chipRef) {
@@ -170,11 +130,12 @@ class Chip extends React.Component<ProvidedProps & Props> {
       avatar: avatarProp,
       classes,
       className: classNameProp,
+      component: Component,
+      deleteIcon: deleteIconProp,
       label,
       onClick,
+      onDelete,
       onKeyDown,
-      onRequestDelete,
-      deleteIcon: deleteIconProp,
       tabIndex: tabIndexProp,
       ...other
     } = this.props;
@@ -182,25 +143,25 @@ class Chip extends React.Component<ProvidedProps & Props> {
     const className = classNames(
       classes.root,
       { [classes.clickable]: onClick },
-      { [classes.deletable]: onRequestDelete },
+      { [classes.deletable]: onDelete },
       classNameProp,
     );
 
     let deleteIcon = null;
-    if (onRequestDelete && deleteIconProp && React.isValidElement(deleteIconProp)) {
-      deleteIcon = React.cloneElement(deleteIconProp, {
-        onClick: this.handleDeleteIconClick,
-        className: classNames(classes.deleteIcon, deleteIconProp.props.className),
-      });
-    } else if (onRequestDelete) {
-      deleteIcon = (
-        <CancelIcon className={classes.deleteIcon} onClick={this.handleDeleteIconClick} />
-      );
+    if (onDelete) {
+      deleteIcon =
+        deleteIconProp && React.isValidElement(deleteIconProp) ? (
+          React.cloneElement(deleteIconProp, {
+            className: classNames(deleteIconProp.props.className, classes.deleteIcon),
+            onClick: this.handleDeleteIconClick,
+          })
+        ) : (
+          <CancelIcon className={classes.deleteIcon} onClick={this.handleDeleteIconClick} />
+        );
     }
 
     let avatar = null;
     if (avatarProp && React.isValidElement(avatarProp)) {
-      // $FlowFixMe - this looks strictly correct, not sure why it errors.
       avatar = React.cloneElement(avatarProp, {
         className: classNames(classes.avatar, avatarProp.props.className),
         childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName),
@@ -210,27 +171,76 @@ class Chip extends React.Component<ProvidedProps & Props> {
     let tabIndex = tabIndexProp;
 
     if (!tabIndex) {
-      tabIndex = onClick || onRequestDelete ? 0 : -1;
+      tabIndex = onClick || onDelete ? 0 : -1;
     }
 
     return (
-      <div
+      <Component
         role="button"
         className={className}
         tabIndex={tabIndex}
         onClick={onClick}
         onKeyDown={this.handleKeyDown}
-        {...other}
         ref={node => {
           this.chipRef = node;
         }}
+        {...other}
       >
         {avatar}
         <span className={classes.label}>{label}</span>
         {deleteIcon}
-      </div>
+      </Component>
     );
   }
 }
 
+Chip.propTypes = {
+  /**
+   * Avatar element.
+   */
+  avatar: PropTypes.element,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: PropTypes.element,
+  /**
+   * The content of the label.
+   */
+  label: PropTypes.node,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * Callback function fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+Chip.defaultProps = {
+  component: 'div',
+};
+
 export default withStyles(styles, { name: 'MuiChip' })(Chip);

goTorrentWebUI/node_modules/material-ui/Chip/index.js.flow

@@ -1,3 +1 @@
-// @flow
-
 export { default } from './Chip';