Skip to content

Commit 438da84

Browse files
eps1loneps1lon
committed
[docs] Replace react-inspect with custom TreeView implementation
1 parent de3c62c commit 438da84

File tree

3 files changed

+142
-18
lines changed

3 files changed

+142
-18
lines changed

‎docs/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@
9898
"react-draggable": "^3.0.5",
9999
"react-final-form": "^6.3.0",
100100
"react-frame-component": "^4.1.1",
101-
"react-inspector": "^3.0.2",
102101
"react-number-format": "^4.0.8",
103102
"react-redux": "^7.1.1",
104103
"react-router": "^5.0.0",

‎docs/src/pages/customization/default-theme/DefaultTheme.js‎

Lines changed: 141 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,150 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { useSelector } from 'react-redux';
44
import url from 'url';
5-
import Inspector from 'react-inspector';
6-
import { withStyles, createMuiTheme, useTheme } from '@material-ui/core/styles';
5+
import ExpandIcon from '@material-ui/icons/ExpandMore';
6+
import CollapseIcon from '@material-ui/icons/ChevronRight';
7+
import TreeView from '@material-ui/lab/TreeView';
8+
import TreeItem from '@material-ui/lab/TreeItem';
9+
import clsx from 'clsx';
10+
import { makeStyles, withStyles, createMuiTheme, useTheme } from '@material-ui/core/styles';
711
import FormControlLabel from '@material-ui/core/FormControlLabel';
812
import Switch from '@material-ui/core/Switch';
913

14+
/**
15+
* @type {React.Context<keyof object>}
16+
*/
17+
const ObjectContext = React.createContext('$ROOT');
18+
19+
/**
20+
* @param {unknown} value
21+
*/
22+
function useType(value) {
23+
if (Array.isArray(value)) {
24+
return 'array';
25+
}
26+
if (value === null) {
27+
return 'null';
28+
}
29+
30+
return typeof value;
31+
}
32+
33+
/**
34+
*
35+
* @param {unknown} value
36+
* @param {ReturnType<typeof useType>} type
37+
*/
38+
function useLabel(value, type) {
39+
switch (type) {
40+
case 'array':
41+
return `Array(${value.length})`;
42+
case 'null':
43+
return 'null';
44+
case 'undefined':
45+
return 'undefined';
46+
case 'function':
47+
return `f ${value.name}()`;
48+
case 'object':
49+
return 'Object';
50+
case 'string':
51+
return `"${value}"`;
52+
case 'symbol':
53+
return `Symbol(${String(value)})`;
54+
case 'bigint':
55+
case 'boolean':
56+
case 'number':
57+
default:
58+
return String(value);
59+
}
60+
}
61+
62+
const useTreeLabelStyles = makeStyles({
63+
objectKey: {
64+
color: 'rgb(227, 110, 236)',
65+
},
66+
objectValue: {},
67+
'type-function': {
68+
fontStyle: 'italic',
69+
},
70+
'type-string': {
71+
color: 'rgb(233, 63, 59)',
72+
},
73+
'type-boolean': {
74+
color: 'rgb(153, 128, 255);',
75+
},
76+
'type-number': {
77+
color: 'rgb(153, 128, 255);',
78+
},
79+
});
80+
81+
function TreeLabel({ objectKey, objectValue }) {
82+
const type = useType(objectValue);
83+
const label = useLabel(objectValue, type);
84+
const classes = useTreeLabelStyles();
85+
86+
return (
87+
<React.Fragment>
88+
<span className={classes.objectKey}>{objectKey}: </span>
89+
<span className={clsx(classes.objectValue, classes[`type-${type}`])}>{label}</span>
90+
</React.Fragment>
91+
);
92+
}
93+
TreeLabel.propTypes = { objectKey: PropTypes.any, objectValue: PropTypes.any };
94+
95+
function ObjectTreeItem(props) {
96+
const { objectKey, objectValue } = props;
97+
98+
const keyPrefix = React.useContext(ObjectContext);
99+
100+
if (
101+
(objectValue !== null && typeof objectValue === 'object') ||
102+
typeof objectValue === 'function'
103+
) {
104+
const children = Object.keys(objectValue).map(key => {
105+
return <ObjectTreeItem key={key} objectKey={key} objectValue={objectValue[key]} />;
106+
});
107+
108+
if (objectKey === undefined) {
109+
return (
110+
<TreeView defaultCollapseIcon={<ExpandIcon />} defaultExpandIcon={<CollapseIcon />}>
111+
{children}
112+
</TreeView>
113+
);
114+
}
115+
116+
return (
117+
<TreeItem
118+
nodeId={`${keyPrefix}-${objectKey}`}
119+
label={<TreeLabel objectKey={objectKey} objectValue={objectValue} />}
120+
>
121+
<ObjectContext.Provider value={`${keyPrefix}-${objectKey}`}>
122+
{children}
123+
</ObjectContext.Provider>
124+
</TreeItem>
125+
);
126+
}
127+
128+
return (
129+
<TreeItem
130+
nodeId={`${keyPrefix}-${objectKey}`}
131+
label={<TreeLabel objectKey={objectKey} objectValue={objectValue} />}
132+
/>
133+
);
134+
}
135+
ObjectTreeItem.propTypes = { objectKey: PropTypes.any, objectValue: PropTypes.any };
136+
137+
function Inspector(props) {
138+
const { data } = props;
139+
140+
return <ObjectTreeItem objectValue={data} />;
141+
}
142+
143+
Inspector.propTypes = {
144+
data: PropTypes.any,
145+
/* expandLevel: PropTypes.number,
146+
expandPaths: PropTypes.arrayOf(PropTypes.string), */
147+
};
148+
10149
const styles = theme => ({
11150
root: {
12151
padding: theme.spacing(2),

‎yarn.lock‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8151,11 +8151,6 @@ is-directory@^0.3.1:
81518151
resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
81528152
integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
81538153

8154-
is-dom@^1.0.9:
8155-
version "1.0.9"
8156-
resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.0.9.tgz#483832d52972073de12b9fe3f60320870da8370d"
8157-
integrity sha1-SDgy1SlyBz3hK5/j9gMghw2oNw0=
8158-
81598154
is-extendable@^0.1.0, is-extendable@^0.1.1:
81608155
version "0.1.1"
81618156
resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -11815,7 +11810,7 @@ [email protected]:
1181511810
loose-envify "^1.3.1"
1181611811
object-assign "^4.1.1"
1181711812

11818-
prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
11813+
prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
1181911814
version "15.7.2"
1182011815
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
1182111816
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12183,15 +12178,6 @@ react-input-autosize@^2.2.1:
1218312178
dependencies:
1218412179
prop-types "^15.5.8"
1218512180

12186-
react-inspector@^3.0.2:
12187-
version "3.0.2"
12188-
resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-3.0.2.tgz#c530a06101f562475537e47df428e1d7aff16ed8"
12189-
integrity sha512-PSR8xDoGFN8R3LKmq1NT+hBBwhxjd9Qwz8yKY+5NXY/CHpxXHm01CVabxzI7zFwFav/M3JoC/Z0Ro2kSX6Ef2Q==
12190-
dependencies:
12191-
babel-runtime "^6.26.0"
12192-
is-dom "^1.0.9"
12193-
prop-types "^15.6.1"
12194-
1219512181
[email protected]:
1219612182
version "16.8.6"
1219712183
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"

0 commit comments

Comments
 (0)