Completely updated React, fixed #11, (hopefully)

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);