Completely updated React, fixed #11, (hopefully)

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

@@ -1,26 +1,24 @@
-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 _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import React 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 => {
   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,
@@ -28,7 +26,6 @@ export const styles = theme => {
       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',
@@ -38,7 +35,7 @@ export const styles = theme => {
     },
     clickable: {
       // Remove grey highlight
-      WebkitTapHighlightColor: theme.palette.common.transparent,
+      WebkitTapHighlightColor: 'transparent',
       cursor: 'pointer',
       '&:hover, &:focus': {
         backgroundColor: emphasize(backgroundColor, 0.08)
@@ -55,8 +52,9 @@ export const styles = theme => {
     },
     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: {
@@ -74,7 +72,7 @@ export const styles = theme => {
     },
     deleteIcon: {
       // Remove grey highlight
-      WebkitTapHighlightColor: theme.palette.common.transparent,
+      WebkitTapHighlightColor: 'transparent',
       color: deleteIconColor,
       cursor: 'pointer',
       height: 'auto',
@@ -96,20 +94,25 @@ class Chip extends React.Component {
     return _temp = super(...args), this.chipRef = null, this.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);
       }
     }, this.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) {
@@ -129,30 +132,28 @@ class Chip extends React.Component {
       avatar: avatarProp,
       classes,
       className: classNameProp,
+      component: Component,
+      deleteIcon: deleteIconProp,
       label,
       onClick,
+      onDelete,
       onKeyDown,
-      onRequestDelete,
-      deleteIcon: deleteIconProp,
       tabIndex: tabIndexProp
     } = _props,
-          other = _objectWithoutProperties(_props, ['avatar', 'classes', 'className', 'label', 'onClick', 'onKeyDown', 'onRequestDelete', 'deleteIcon', 'tabIndex']);
+          other = _objectWithoutProperties(_props, ['avatar', 'classes', 'className', 'component', 'deleteIcon', 'label', 'onClick', 'onDelete', 'onKeyDown', 'tabIndex']);
 
-    const className = classNames(classes.root, { [classes.clickable]: onClick }, { [classes.deletable]: onRequestDelete }, classNameProp);
+    const className = classNames(classes.root, { [classes.clickable]: onClick }, { [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 = React.createElement(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
+      }) : React.createElement(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)
@@ -162,22 +163,21 @@ class Chip extends React.Component {
     let tabIndex = tabIndexProp;
 
     if (!tabIndex) {
-      tabIndex = onClick || onRequestDelete ? 0 : -1;
+      tabIndex = onClick || onDelete ? 0 : -1;
     }
 
     return React.createElement(
-      'div',
+      Component,
       _extends({
         role: 'button',
         className: className,
         tabIndex: tabIndex,
         onClick: onClick,
-        onKeyDown: this.handleKeyDown
-      }, other, {
+        onKeyDown: this.handleKeyDown,
         ref: node => {
           this.chipRef = node;
         }
-      }),
+      }, other),
       avatar,
       React.createElement(
         'span',
@@ -189,4 +189,53 @@ class Chip extends React.Component {
   }
 }
 
+Chip.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * 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);