Structured metadata list color fix and update to typescript DRAFT (#656)

* Fix Structure Metadata Table and change to .tsx

* Change StructuredMetadataTable to typescript

* Oops forgot to actually fix the font color

* Fixing some more type issues

* changed padding to theme.spacing()

* fixes some more types

packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx

@@ -21,44 +21,55 @@ import {
   TableCell,
   TableRow,
   withStyles,
+  createStyles,
+  WithStyles,
+  Theme,
 } from '@material-ui/core';
-
-const tableTitleCellStyles = theme => ({
-  root: {
-    fontWeight: 'bolder',
-    whiteSpace: 'nowrap',
-    paddingRight: theme.spacing(4),
-    border: '0',
-    verticalAlign: 'top',
-  },
-});
+const tableTitleCellStyles = (theme: Theme) =>
+  createStyles({
+    root: {
+      fontWeight: 'bolder',
+      whiteSpace: 'nowrap',
+      paddingRight: theme.spacing(4),
+      border: '0',
+      verticalAlign: 'top',
+    },
+  });
 
 const tableContentCellStyles = {
   root: {
-    color: 'rgba(0, 0, 0, 0.6)',
     border: '0',
     verticalAlign: 'top',
   },
 };
 
-const listStyles = theme => ({
-  root: {
-    listStyle: 'none',
-    margin: theme.spacing(0, 0, -1, 0),
-    padding: '0',
-  },
-});
+const listStyles = (theme: Theme) =>
+  createStyles({
+    root: {
+      listStyle: 'none',
+      margin: theme.spacing(0, 0, -1, 0),
+      padding: '0',
+    },
+  });
 
-const listItemStyles = theme => ({
-  root: {
-    padding: theme.spacing(0, 0, 1, 0),
-  },
-});
+const listItemStyles = (theme: Theme) =>
+  createStyles({
+    root: {
+      padding: theme.spacing(0, 0, 1, 0),
+    },
+    random: {},
+  });
 
 const TitleCell = withStyles(tableTitleCellStyles)(TableCell);
 const ContentCell = withStyles(tableContentCellStyles)(TableCell);
 
-export const MetadataTable = ({ dense, children }) => (
+export const MetadataTable = ({
+  dense,
+  children,
+}: {
+  dense?: boolean;
+  children: React.ReactNode;
+}) => (
   <Table>
     {!dense && (
       <colgroup>
@@ -70,7 +81,14 @@ export const MetadataTable = ({ dense, children }) => (
   </Table>
 );
 
-export const MetadataTableItem = ({ title, children, ...rest }) => (
+export const MetadataTableItem = ({
+  title,
+  children,
+  ...rest
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
   <TableRow>
     {title && <TitleCell>{title}</TitleCell>}
     <ContentCell colSpan={title ? 1 : 2} {...rest}>
@@ -79,10 +97,18 @@ export const MetadataTableItem = ({ title, children, ...rest }) => (
   </TableRow>
 );
 
-export const MetadataList = withStyles(listStyles)(({ classes, children }) => (
+interface StyleProps extends WithStyles {
+  children?: React.ReactNode;
+}
+
+export const MetadataList = withStyles(
+  listStyles,
+)(({ classes, children }: StyleProps) => (
   <ul className={classes.root}>{children}</ul>
 ));
 
 export const MetadataListItem = withStyles(
   listItemStyles,
-)(({ classes, children }) => <li className={classes.root}>{children}</li>);
+)(({ classes, children }: StyleProps) => (
+  <li className={classes.root}>{children}</li>
+));

packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import React, { Component, Fragment } from 'react';
-import { withStyles } from '@material-ui/core';
+import React, { Component, Fragment, ReactElement } from 'react';
+import { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core';
 import startCase from 'lodash/startCase';
 
 import {
@@ -25,22 +25,23 @@ import {
   MetadataListItem,
 } from './MetadataTable';
 
-const listStyle = {
+const listStyle = createStyles({
   root: {
     margin: '0 0',
     listStyleType: 'none',
   },
-};
+});
 
-const nestedListStyle = {
-  root: {
-    ...listStyle.root,
-    paddingLeft: '8px',
-  },
-};
+const nestedListStyle = (theme: Theme) =>
+  createStyles({
+    root: {
+      ...listStyle.root,
+      paddingLeft: theme.spacing(1),
+    },
+  });
 
-function renderList(list, options, nested) {
-  const values = list.map((item, index) => (
+function renderList(list: Array<any>, nested?: boolean) {
+  const values = list.map((item: any, index: number) => (
     <MetadataListItem key={index}>{toValue(item)}</MetadataListItem>
   ));
   return nested ? (
@@ -50,8 +51,12 @@ function renderList(list, options, nested) {
   );
 }
 
-function renderMap(map, options, nested) {
-  const values = Object.keys(map).map(key => {
+function renderMap(
+  map: { [key: string]: any },
+  nested?: boolean,
+  options?: any,
+) {
+  const values = Object.keys(map).map((key) => {
     const value = toValue(map[key], true);
     const fmtKey =
       options && options.titleFormat
@@ -72,7 +77,11 @@ function renderMap(map, options, nested) {
   );
 }
 
-function toValue(value, options, nested) {
+function toValue(
+  value: ReactElement | object | Array<any>,
+  options?: any,
+  nested?: boolean,
+) {
   if (React.isValidElement(value)) {
     return <Fragment>{value}</Fragment>;
   }
@@ -82,31 +91,44 @@ function toValue(value, options, nested) {
   }
 
   if (Array.isArray(value)) {
-    return renderList(value, options, nested);
+    return renderList(value, nested);
   }
 
   return <Fragment>{value}</Fragment>;
 }
 
-function mapToItems(info, options) {
-  return Object.keys(info).map(key => (
+function mapToItems(info: { [key: string]: string }, options: any) {
+  return Object.keys(info).map((key) => (
     <TableItem key={key} title={key} value={info[key]} options={options} />
   ));
 }
 
+interface StyleProps extends WithStyles {
+  children?: React.ReactNode;
+}
 // Sub Components
-const StyledList = withStyles(listStyle)(({ classes, children }) => (
+const StyledList = withStyles(
+  listStyle,
+)(({ classes, children }: StyleProps) => (
   <MetadataList classes={classes}>{children}</MetadataList>
 ));
 const StyledNestedList = withStyles(
   nestedListStyle,
-)(({ classes, children }) => (
+)(({ classes, children }: StyleProps) => (
   <MetadataList classes={classes}>{children}</MetadataList>
 ));
-const ItemValue = ({ value, options }) => (
+const ItemValue = ({ value, options }: { value: any; options: any }) => (
   <Fragment>{toValue(value, options)}</Fragment>
 );
-const TableItem = ({ title, value, options }) => {
+const TableItem = ({
+  title,
+  value,
+  options,
+}: {
+  title: string;
+  value: any;
+  options: any;
+}) => {
   return (
     <MetadataTableItem
       title={
@@ -120,7 +142,12 @@ const TableItem = ({ title, value, options }) => {
   );
 };
 
-export default class StructuredMetadataTable extends Component {
+interface ComponentProps {
+  metadata: { [key: string]: any };
+  dense?: boolean;
+  options?: any;
+}
+export default class StructuredMetadataTable extends Component<ComponentProps> {
   render() {
     const { metadata, dense, options } = this.props;
     const metadataItems = mapToItems(metadata, options || {});