From 5b0e808204544a2274323f54428d8cdb7da457fd Mon Sep 17 00:00:00 2001 From: Jose Balanza Martinez <62359443+braulio-balanza@users.noreply.github.com> Date: Wed, 6 May 2020 00:36:10 -0500 Subject: [PATCH] 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 --- .../{MetadataTable.js => MetadataTable.tsx} | 80 ++++++++++++------- ...taTable.js => StructuredMetadataTable.tsx} | 73 +++++++++++------ .../{index.js => index.tsx} | 0 3 files changed, 103 insertions(+), 50 deletions(-) rename packages/core/src/components/StructuredMetadataTable/{MetadataTable.js => MetadataTable.tsx} (57%) rename packages/core/src/components/StructuredMetadataTable/{StructuredMetadataTable.js => StructuredMetadataTable.tsx} (63%) rename packages/core/src/components/StructuredMetadataTable/{index.js => index.tsx} (100%) diff --git a/packages/core/src/components/StructuredMetadataTable/MetadataTable.js b/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx similarity index 57% rename from packages/core/src/components/StructuredMetadataTable/MetadataTable.js rename to packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx index dce6b63946..9ef9196966 100644 --- a/packages/core/src/components/StructuredMetadataTable/MetadataTable.js +++ b/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; +}) => ( {!dense && ( @@ -70,7 +81,14 @@ export const MetadataTable = ({ dense, children }) => (
); -export const MetadataTableItem = ({ title, children, ...rest }) => ( +export const MetadataTableItem = ({ + title, + children, + ...rest +}: { + title: string; + children: React.ReactNode; +}) => ( {title && {title}} @@ -79,10 +97,18 @@ export const MetadataTableItem = ({ title, children, ...rest }) => ( ); -export const MetadataList = withStyles(listStyles)(({ classes, children }) => ( +interface StyleProps extends WithStyles { + children?: React.ReactNode; +} + +export const MetadataList = withStyles( + listStyles, +)(({ classes, children }: StyleProps) => ( )); export const MetadataListItem = withStyles( listItemStyles, -)(({ classes, children }) =>
  • {children}
    • ); +)(({ classes, children }: StyleProps) => ( +
  • {children}
    • +)); diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.js b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx similarity index 63% rename from packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.js rename to packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx index 60516a56f1..cebf3581d4 100644 --- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.js +++ b/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, nested?: boolean) { + const values = list.map((item: any, index: number) => ( {toValue(item)} )); 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, + options?: any, + nested?: boolean, +) { if (React.isValidElement(value)) { return {value}; } @@ -82,31 +91,44 @@ function toValue(value, options, nested) { } if (Array.isArray(value)) { - return renderList(value, options, nested); + return renderList(value, nested); } return {value}; } -function mapToItems(info, options) { - return Object.keys(info).map(key => ( +function mapToItems(info: { [key: string]: string }, options: any) { + return Object.keys(info).map((key) => ( )); } +interface StyleProps extends WithStyles { + children?: React.ReactNode; +} // Sub Components -const StyledList = withStyles(listStyle)(({ classes, children }) => ( +const StyledList = withStyles( + listStyle, +)(({ classes, children }: StyleProps) => ( {children} )); const StyledNestedList = withStyles( nestedListStyle, -)(({ classes, children }) => ( +)(({ classes, children }: StyleProps) => ( {children} )); -const ItemValue = ({ value, options }) => ( +const ItemValue = ({ value, options }: { value: any; options: any }) => ( {toValue(value, options)} ); -const TableItem = ({ title, value, options }) => { +const TableItem = ({ + title, + value, + options, +}: { + title: string; + value: any; + options: any; +}) => { return ( { ); }; -export default class StructuredMetadataTable extends Component { +interface ComponentProps { + metadata: { [key: string]: any }; + dense?: boolean; + options?: any; +} +export default class StructuredMetadataTable extends Component { render() { const { metadata, dense, options } = this.props; const metadataItems = mapToItems(metadata, options || {}); diff --git a/packages/core/src/components/StructuredMetadataTable/index.js b/packages/core/src/components/StructuredMetadataTable/index.tsx similarity index 100% rename from packages/core/src/components/StructuredMetadataTable/index.js rename to packages/core/src/components/StructuredMetadataTable/index.tsx