hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-18 07:23:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert ReactObjectTableViewer to tsx, remove horizontal option

Browse Source
This commit is contained in:
Simon Li
2023-04-14 19:39:20 +01:00
parent 8a3f5d8f2e
commit 8c10fb285e
4 changed files with 64 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
jsx/package.json
View File

@@ -37,7 +37,6 @@
"react-dom": "^17.0.1",
"react-icons": "^4.1.0",
"react-multi-select-component": "^3.0.7",
"react-object-table-viewer": "^1.0.7",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

63
jsx/src/components/ReactObjectTableViewer/ReactObjectTableViewer.jsx Normal file
View File

@@ -0,0 +1,63 @@
// Originally copied from
// https://github.com/jinkwon/react-object-table-viewer/blob/f29827028fad547a0a17e044567cf1486849fb7a/src/ReactObjectTableViewer.tsx
import React from "react";
import PropTypes from "prop-types";
const ReactObjectTableViewer = (props) => {
const opt = props;
const data = opt.data;
const keys = Object.keys(data || {}) || [];
return (
<table
className={opt.className}
style={{
...opt.style,
}}
>
<tbody>
{keys.map((k, key) => {
const val = data[k];
const isObject = typeof val === "object";
return (
<tr key={key}>
<th
style={{
...opt.keyStyle,
}}
>
{k}
</th>
{isObject && (
<td>
<ReactObjectTableViewer {...opt} data={val} />
</td>
)}
{!isObject && (
<td
style={{
whiteSpace: "nowrap",
...opt.valueStyle,
}}
>{`${val}`}</td>
)}
</tr>
);
})}
</tbody>
</table>
);
};
ReactObjectTableViewer.propTypes = {
data: PropTypes.object,
style: PropTypes.CSSProperties,
keyStyle: PropTypes.CSSProperties,
valueStyle: PropTypes.CSSProperties,
className: PropTypes.string,
layout: PropTypes.string,
};
export default ReactObjectTableViewer;

89
jsx/src/components/ReactObjectTableViewer/ReactObjectTableViewer.tsx
View File

@@ -1,89 +0,0 @@
import React, {
CSSProperties,
FC
} from 'react';
import { TableViewerLayoutType } from './types';
export interface PropTypes {
data?: Record<string, unknown>;
style?: CSSProperties;
keyStyle?: CSSProperties;
valueStyle?: CSSProperties;
className?: string;
layout?: TableViewerLayoutType;
}
const ReactObjectTableViewer: FC<PropTypes> = (props: PropTypes) => {
const opt = {
layout: 'vertical' as TableViewerLayoutType,
...props,
};
const data: any = opt.data;
const keys: string[] = Object.keys(data || {}) || [];
return (
<table
className={opt.className}
style={{
...opt.style,
}}
>
{opt.layout === 'vertical' && (
<tbody>
{keys.map((k, key) => {
const val: any = data[k];
const isObject: boolean = typeof val === 'object';
return <tr key={key}>
<th
style={{
...opt.keyStyle,
}}
>{k}</th>
{isObject && <td><ReactObjectTableViewer {...opt} data={val}/></td>}
{!isObject && <td
style={{
whiteSpace: 'nowrap',
...opt.valueStyle,
}}
>{`${val}`}</td>}
</tr>;
})}
</tbody>
)}
{opt.layout === 'horizontal' && (
<tbody>
<tr>
{keys.map((k, key) => (<th
key={key}
style={{
...opt.keyStyle,
}}
>{k}</th>))}
</tr>
<tr>
{keys.map((k, key) => {
const val: any = data[k];
const isObject: boolean = typeof val === 'object';
return <React.Fragment key={key}>
{isObject && <td><ReactObjectTableViewer {...opt} data={val}/></td>}
{!isObject && <td
key={key}
style={{
whiteSpace: 'nowrap',
...opt.valueStyle,
}}
>{`${val}`}</td>}
</React.Fragment>;
})}
</tr>
</tbody>
)}
</table>
);
};
export default ReactObjectTableViewer;

2
jsx/src/components/ServerDashboard/ServerDashboard.jsx
View File

@@ -12,7 +12,7 @@ import {
CardGroup,
Collapse,
} from "react-bootstrap";
import ReactObjectTableViewer from "react-object-table-viewer";
import ReactObjectTableViewer from "../ReactObjectTableViewer/ReactObjectTableViewer";
import { Link } from "react-router-dom";
import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";