@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
115 lines (114 loc) • 5.13 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import Grid from '@mui/material/Grid';
import React from 'react';
import { ValueLabel } from '../Label';
function Value({ value }) {
if (typeof value === 'undefined') {
return null;
}
else if (typeof value === 'string') {
return _jsx(ValueLabel, { children: value });
}
else if (Array.isArray(value)) {
return (_jsx(_Fragment, { children: value.map((val, i) => (_jsx(Value, { value: val }, i))) }));
}
else {
return value;
}
}
export default function NameValueTable(props) {
const { rows, valueCellProps: globalValueCellProps } = props;
const visibleRows = React.useMemo(() => rows.filter(({ value, hide = false }) => {
let shouldHide = false;
if (typeof hide === 'function') {
shouldHide = hide(value);
}
else {
shouldHide = hide;
}
return !shouldHide;
}), [rows]);
return (_jsx(Grid, { container: true, component: "dl" // mount a Definition List
, sx: theme => ({
border: '1px solid',
borderColor: theme.palette.tables.head.borderColor,
borderRadius: theme.shape.borderRadius + 'px',
overflow: 'hidden',
}), children: visibleRows.flatMap(({ name, value, hide = false, withHighlightStyle = false, valueCellProps = {} }, i) => {
let shouldHide = false;
if (typeof hide === 'function') {
shouldHide = hide(value);
}
else {
shouldHide = hide;
}
if (shouldHide) {
return null;
}
const last = visibleRows.length === i + 1;
const { className, ...otherValueCellProps } = globalValueCellProps || {};
const hideValueGridItem = withHighlightStyle && !value;
const items = [
_jsx(Grid, { item: true, xs: 12, sm: hideValueGridItem ? 12 : 4, component: "dt", className: className, sx: theme => {
const extra = withHighlightStyle
? {
color: theme.palette.text.primary,
fontWeight: 'bold',
background: theme.palette.background.muted,
}
: {};
return {
fontSize: '1rem',
textAlign: 'left',
maxWidth: '100%',
minWidth: '10rem',
verticalAlign: 'top',
color: theme.palette.text.secondary,
borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,
padding: '7px 12px',
[theme.breakpoints.down('sm')]: {
color: theme.palette.text.primary,
fontSize: '1.5rem',
minWidth: '100%',
width: '100%',
maxWidth: '100%',
display: 'block',
borderTop: `1px solid ${theme.palette.divider}`,
borderBottom: `none`,
},
...extra,
};
}, children: name }, i),
];
if (!hideValueGridItem) {
items.push(_jsx(Grid, { item: true, xs: 12, sm: 8, component: "dd", sx: theme => {
const extra = withHighlightStyle
? {
color: theme.palette.text.primary,
fontWeight: 'bold',
background: theme.palette.background.muted,
}
: {};
return {
width: '100%',
verticalAlign: 'top',
fontSize: '1rem',
overflowWrap: 'anywhere',
padding: '7px 12px',
borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,
[theme.breakpoints.down('sm')]: {
color: theme.palette.text.secondary,
minWidth: '100%',
width: '100%',
maxWidth: '100%',
display: 'block',
marginBottom: '2rem',
borderBottom: `none`,
},
...extra,
};
}, ...otherValueCellProps, ...valueCellProps, children: _jsx(Value, { value: value }) }, i + 10000));
}
return items;
}) }));
}