Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/Table/TableCell.js

@@ -1,27 +1,39 @@
-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 withStyles from '../styles/withStyles';
-import { capitalizeFirstLetter } from '../utils/helpers';
+import { capitalize } from '../utils/helpers';
+import { darken, fade, lighten } from '../styles/colorManipulator';
 
 export const styles = theme => ({
   root: {
-    borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
+    // Workaround for a rendering bug with spanned columns in Chrome 62.0.
+    // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
+    borderBottom: `1px solid
+    ${theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.8)}`,
     textAlign: 'left'
   },
   numeric: {
     textAlign: 'right',
     flexDirection: 'row-reverse' // can be dynamically inherited at runtime by contents
   },
-  head: {
+  typeHead: {
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.pxToRem(12),
     fontWeight: theme.typography.fontWeightMedium,
     position: 'relative' // Workaround for Tooltip positioning issue.
   },
+  typeBody: {
+    fontSize: theme.typography.pxToRem(13),
+    color: theme.palette.text.primary
+  },
+  typeFooter: {
+    borderBottom: 0,
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.pxToRem(12)
+  },
   paddingDefault: {
     padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`,
     '&:last-child': {
@@ -33,23 +45,22 @@ export const styles = theme => ({
   },
   paddingCheckbox: {
     padding: '0 12px'
-  },
-  footer: {
-    borderBottom: 0
   }
 });
 
 function TableCell(props, context) {
   const {
+    children,
     classes,
     className: classNameProp,
-    children,
+    component,
+    sortDirection,
     numeric,
     padding,
-    component
+    scope: scopeProp,
+    variant
   } = props,
-        other = _objectWithoutProperties(props, ['classes', 'className', 'children', 'numeric', 'padding', 'component']);
-
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'component', 'sortDirection', 'numeric', 'padding', 'scope', 'variant']);
   const { table } = context;
   let Component;
   if (component) {
@@ -58,21 +69,73 @@ function TableCell(props, context) {
     Component = table && table.head ? 'th' : 'td';
   }
 
+  let scope = scopeProp;
+  if (!scope && table && table.head) {
+    scope = 'col';
+  }
+
   const className = classNames(classes.root, {
     [classes.numeric]: numeric,
-    [classes[`padding${capitalizeFirstLetter(padding)}`]]: padding !== 'none' && padding !== 'default',
+    [classes[`padding${capitalize(padding)}`]]: padding !== 'none' && padding !== 'default',
     [classes.paddingDefault]: padding !== 'none',
-    [classes.head]: table && table.head,
-    [classes.footer]: table && table.footer
+    [classes.typeHead]: variant ? variant === 'head' : table && table.head,
+    [classes.typeBody]: variant ? variant === 'body' : table && table.body,
+    [classes.typeFooter]: variant ? variant === 'footer' : table && table.footer
   }, classNameProp);
 
+  let ariaSort = null;
+  if (sortDirection) {
+    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+
   return React.createElement(
     Component,
-    _extends({ className: className }, other),
+    _extends({ className: className, 'aria-sort': ariaSort, scope: scope }, other),
     children
   );
 }
 
+TableCell.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The table cell contents.
+   */
+  children: PropTypes.node,
+  /**
+   * 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]),
+  /**
+   * If `true`, content will align to the right.
+   */
+  numeric: PropTypes.bool,
+  /**
+   * Sets the padding applied to the cell.
+   */
+  padding: PropTypes.oneOf(['default', 'checkbox', 'dense', 'none']),
+  /**
+   * Set scope attribute.
+   */
+  scope: PropTypes.string,
+  /**
+   * Set aria-sort direction.
+   */
+  sortDirection: PropTypes.oneOf(['asc', 'desc', false]),
+  /**
+   * Specify the cell type.
+   * By default, the TableHead, TableBody or TableFooter parent component set the value.
+   */
+  variant: PropTypes.oneOf(['head', 'body', 'footer'])
+} : {};
+
 TableCell.defaultProps = {
   numeric: false,
   padding: 'default'