diff --git a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
index 2b18f6ad19..108ddbe926 100644
--- a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
+++ b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
@@ -65,9 +65,11 @@ const StyledNestedList = withStyles(nestedListStyle, {
{children}
));
-function renderList(list: Array, nested?: boolean) {
+function renderList(list: Array, options: Options, nested: boolean) {
const values = list.map((item: any, index: number) => (
- {toValue(item)}
+
+ {toValue(item, options, nested)}
+
));
return nested ? (
{values}
@@ -78,15 +80,12 @@ function renderList(list: Array, nested?: boolean) {
function renderMap(
map: { [key: string]: any },
- nested?: boolean,
- options?: any,
+ options: Options,
+ nested: boolean,
) {
const values = Object.keys(map).map(key => {
- const value = toValue(map[key], true);
- const fmtKey =
- options && options.titleFormat
- ? options.titleFormat(key)
- : startCase(key);
+ const value = toValue(map[key], options, true);
+ const fmtKey = options.titleFormat?.(key) ?? startCase(key);
return (
@@ -106,8 +105,8 @@ function renderMap(
function toValue(
value: ReactElement | object | Array | boolean,
- options?: any,
- nested?: boolean,
+ options: Options,
+ nested: boolean,
) {
if (React.isValidElement(value)) {
return {value};
@@ -118,7 +117,7 @@ function toValue(
}
if (Array.isArray(value)) {
- return renderList(value, nested);
+ return renderList(value, options, nested);
}
if (typeof value === 'boolean') {
@@ -131,8 +130,8 @@ function toValue(
);
}
-const ItemValue = ({ value, options }: { value: any; options: any }) => (
- {toValue(value, options)}
+const ItemValue = ({ value, options }: { value: any; options: Options }) => (
+ {toValue(value, options, false)}
);
const TableItem = ({
@@ -142,31 +141,29 @@ const TableItem = ({
}: {
title: string;
value: any;
- options: any;
+ options: Options;
}) => {
return (
-
+
);
};
-function mapToItems(info: { [key: string]: string }, options: any) {
+function mapToItems(info: { [key: string]: string }, options: Options) {
return Object.keys(info).map(key => (
));
}
+interface Options {
+ titleFormat?: (key: string) => string;
+}
+
type Props = {
metadata: { [key: string]: any };
dense?: boolean;
- options?: any;
+ options?: Options;
};
export function StructuredMetadataTable(props: Props) {