Completely updated React, fixed #11, (hopefully)

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

@@ -1,65 +1,41 @@
-// @flow
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import type { ElementType, Node } from 'react';
 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 type Context = {
-  table: Object,
-};
-
-export type Padding = 'default' | 'checkbox' | 'dense' | 'none';
-
-type ProvidedProps = {
-  classes: Object,
-  padding: Padding,
-  numeric: boolean,
-};
-
-export type Props = {
-  /**
-   * The table cell contents.
-   */
-  children?: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   */
-  component?: ElementType,
-  /**
-   * If `true`, content will align to the right.
-   */
-  numeric?: boolean,
-  /**
-   * Sets the padding applied to the cell.
-   */
-  padding?: Padding,
-};
-
-export const styles = (theme: Object) => ({
+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`,
@@ -73,22 +49,21 @@ export const styles = (theme: Object) => ({
   paddingCheckbox: {
     padding: '0 12px',
   },
-  footer: {
-    borderBottom: 0,
-  },
 });
 
-function TableCell(props: ProvidedProps & Props, context: Context) {
+function TableCell(props, context) {
   const {
+    children,
     classes,
     className: classNameProp,
-    children,
+    component,
+    sortDirection,
     numeric,
     padding,
-    component,
+    scope: scopeProp,
+    variant,
     ...other
   } = props;
-
   const { table } = context;
   let Component;
   if (component) {
@@ -97,26 +72,77 @@ function TableCell(props: ProvidedProps & Props, context: 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 (
-    <Component className={className} {...other}>
+    <Component className={className} aria-sort={ariaSort} scope={scope} {...other}>
       {children}
     </Component>
   );
 }
 
+TableCell.propTypes = {
+  /**
+   * 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',