@devtools-ui/object-inspector 0.1.2--canary.26.1312 → 0.1.2--canary.27.1341
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs +71 -3
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/index.legacy-esm.js +73 -5
- package/dist/index.mjs +73 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/ObjectInspectorComponent.tsx +98 -9
- package/src/dsl/__tests__/ObjectInspector.test.tsx +22 -0
- package/src/types/index.ts +3 -0
- package/types/types/index.d.ts +2 -0
package/dist/cjs/index.cjs
CHANGED
|
@@ -41,9 +41,77 @@ var import_react = __toESM(require("react"));
|
|
|
41
41
|
var import_react2 = require("@chakra-ui/react");
|
|
42
42
|
var import_object_inspector = require("@devtools-ds/object-inspector");
|
|
43
43
|
var import_react3 = require("@player-ui/react");
|
|
44
|
+
var FilterResults = (props) => {
|
|
45
|
+
const { data, id } = props;
|
|
46
|
+
const [filterCriteria, setFilterCriteria] = (0, import_react.useState)("");
|
|
47
|
+
const [resultData, setResultData] = (0, import_react.useState)(data);
|
|
48
|
+
const isObject = (value) => {
|
|
49
|
+
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
50
|
+
};
|
|
51
|
+
const getPathvalue = (object, path) => {
|
|
52
|
+
const keys = path.split(".");
|
|
53
|
+
let result = object;
|
|
54
|
+
for (const key of keys) {
|
|
55
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
56
|
+
if (!result[key] && arrayIndex === -1)
|
|
57
|
+
return 0;
|
|
58
|
+
if (arrayIndex > -1) {
|
|
59
|
+
const subkey = key.substring(0, arrayIndex);
|
|
60
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
61
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
62
|
+
if (!result)
|
|
63
|
+
return -1;
|
|
64
|
+
} else {
|
|
65
|
+
result = result[key];
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return result;
|
|
69
|
+
};
|
|
70
|
+
const getResultTag = (result) => {
|
|
71
|
+
if (result === -1) {
|
|
72
|
+
return "No result for the given index";
|
|
73
|
+
} else if (result === 0) {
|
|
74
|
+
return "No result for the given path";
|
|
75
|
+
} else if (!isObject(result)) {
|
|
76
|
+
return result;
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const onChangeHandler = (e) => {
|
|
80
|
+
setFilterCriteria(e.target.value);
|
|
81
|
+
const result = getPathvalue(data, e.target.value);
|
|
82
|
+
setResultData(e.target.value.length ? result : data);
|
|
83
|
+
};
|
|
84
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
85
|
+
import_react2.Input,
|
|
86
|
+
{
|
|
87
|
+
placeholder: "Search path...",
|
|
88
|
+
value: filterCriteria,
|
|
89
|
+
onChange: onChangeHandler
|
|
90
|
+
}
|
|
91
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
style: {
|
|
95
|
+
border: "1px solid #e0e0e0",
|
|
96
|
+
borderRadius: "8px",
|
|
97
|
+
padding: "8px"
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
/* @__PURE__ */ import_react.default.createElement(import_react2.Text, { style: { padding: "0 16px" } }, getResultTag(resultData)),
|
|
101
|
+
isObject(resultData) ? /* @__PURE__ */ import_react.default.createElement(
|
|
102
|
+
import_object_inspector.ObjectInspector,
|
|
103
|
+
{
|
|
104
|
+
data: resultData,
|
|
105
|
+
includePrototypes: false,
|
|
106
|
+
expandLevel: 3,
|
|
107
|
+
id: `filter-${id}`
|
|
108
|
+
}
|
|
109
|
+
) : null
|
|
110
|
+
));
|
|
111
|
+
};
|
|
44
112
|
var ObjectInspectorComponent = (props) => {
|
|
45
|
-
const { data, label, id } = props;
|
|
46
|
-
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label && /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...label }), data ? /* @__PURE__ */ import_react.default.createElement(
|
|
113
|
+
const { data, label, filter, id } = props;
|
|
114
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label && /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...label }), data ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, filter ? /* @__PURE__ */ import_react.default.createElement(FilterResults, { ...props, style: { margin: "16px" } }) : /* @__PURE__ */ import_react.default.createElement(
|
|
47
115
|
import_object_inspector.ObjectInspector,
|
|
48
116
|
{
|
|
49
117
|
data,
|
|
@@ -51,7 +119,7 @@ var ObjectInspectorComponent = (props) => {
|
|
|
51
119
|
expandLevel: 7,
|
|
52
120
|
id
|
|
53
121
|
}
|
|
54
|
-
) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
|
|
122
|
+
)) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
|
|
55
123
|
};
|
|
56
124
|
|
|
57
125
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./types\";\nexport * from \"./transformer\";\n","import React from \"react\";\nimport { Text } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n const { data, label, id } = props;\n\n return (\n <>\n {label && <ReactAsset {...label} />}\n {data ? (\n <ObjectorInspectorDS\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./types\";\nexport * from \"./transformer\";\n","import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nconst FilterResults = (props: ObjectInspectorAsset) => {\n const { data, id } = props;\n\n const [filterCriteria, setFilterCriteria] = useState(\"\");\n const [resultData, setResultData] = useState(data);\n\n const isObject = (value: any): boolean => {\n return (\n value != null &&\n (value.constructor === Object ||\n (!value.constructor && typeof value === \"object\") ||\n Array.isArray(value))\n );\n };\n\n const getPathvalue = (object: Flow, path: string) => {\n const keys = path.split(\".\");\n let result: any = object;\n for (const key of keys) {\n const arrayIndex = key.search(/\\[\\d+\\]$/);\n\n if (!result[key] && arrayIndex === -1) return 0;\n\n // If key has a numeric index, e.g. for Multi-copy and/or array values.\n if (arrayIndex > -1) {\n const subkey = key.substring(0, arrayIndex);\n const subIndexMatch = key.match(/(?<=\\[)\\d+(?=\\])/);\n\n result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];\n if (!result) return -1;\n } else {\n result = result[key];\n }\n }\n return result;\n };\n\n const getResultTag = (result: any) => {\n if (result === -1) {\n return \"No result for the given index\";\n } else if (result === 0) {\n return \"No result for the given path\";\n } else if (!isObject(result)) {\n return result;\n }\n };\n\n const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n setFilterCriteria(e.target.value);\n\n const result = getPathvalue(data as Flow, e.target.value);\n setResultData(e.target.value.length ? result : data);\n };\n\n return (\n <>\n <Input\n placeholder=\"Search path...\"\n value={filterCriteria}\n onChange={onChangeHandler}\n />\n <div\n style={{\n border: \"1px solid #e0e0e0\",\n borderRadius: \"8px\",\n padding: \"8px\",\n }}\n >\n <Text style={{ padding: \"0 16px\" }}>{getResultTag(resultData)}</Text>\n {isObject(resultData) ? (\n <ObjectorInspectorDS\n data={resultData as Flow}\n includePrototypes={false}\n expandLevel={3}\n id={`filter-${id}`}\n />\n ) : null}\n </div>\n </>\n );\n};\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n const { data, label, filter, id } = props;\n\n return (\n <>\n {label && <ReactAsset {...label} />}\n {data ? (\n <>\n {filter ? (\n <FilterResults {...props} style={{ margin: \"16px\" }} />\n ) : (\n <ObjectorInspectorDS\n data={data}\n includePrototypes={false}\n expandLevel={7}\n id={id}\n />\n )}\n </>\n ) : (\n <Text>No data available</Text>\n )}\n </>\n );\n};\n","import React from \"react\";\nimport {\n AssetPropsWithChildren,\n Asset,\n createSlot,\n BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n /** The binding */\n binding?: BindingTemplateInstance;\n }\n) => {\n const { children, binding, ...rest } = props;\n\n return (\n <Asset type=\"object-inspector\" {...rest}>\n {binding && <property name=\"binding\">{binding.toValue()}</property>}\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nObjectInspector.Label = createSlot({\n name: \"label\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n ObjectInspectorAsset,\n TransformedObjectInspector\n> = (asset, options) => {\n return {\n ...asset,\n data:\n asset.binding === undefined\n ? undefined\n : options.data.model.get(asset.binding, {\n includeInvalid: true,\n formatted: false,\n }),\n };\n};\n"],"mappings":"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","names":["import_react","React","ObjectorInspectorDS","import_react","React"]}
|
package/dist/index.legacy-esm.js
CHANGED
|
@@ -1,11 +1,79 @@
|
|
|
1
1
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Text } from "@chakra-ui/react";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import { Text, Input } from "@chakra-ui/react";
|
|
4
4
|
import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
|
|
5
5
|
import { ReactAsset } from "@player-ui/react";
|
|
6
|
+
var FilterResults = (props) => {
|
|
7
|
+
const { data, id } = props;
|
|
8
|
+
const [filterCriteria, setFilterCriteria] = useState("");
|
|
9
|
+
const [resultData, setResultData] = useState(data);
|
|
10
|
+
const isObject = (value) => {
|
|
11
|
+
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
12
|
+
};
|
|
13
|
+
const getPathvalue = (object, path) => {
|
|
14
|
+
const keys = path.split(".");
|
|
15
|
+
let result = object;
|
|
16
|
+
for (const key of keys) {
|
|
17
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
18
|
+
if (!result[key] && arrayIndex === -1)
|
|
19
|
+
return 0;
|
|
20
|
+
if (arrayIndex > -1) {
|
|
21
|
+
const subkey = key.substring(0, arrayIndex);
|
|
22
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
23
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
24
|
+
if (!result)
|
|
25
|
+
return -1;
|
|
26
|
+
} else {
|
|
27
|
+
result = result[key];
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
const getResultTag = (result) => {
|
|
33
|
+
if (result === -1) {
|
|
34
|
+
return "No result for the given index";
|
|
35
|
+
} else if (result === 0) {
|
|
36
|
+
return "No result for the given path";
|
|
37
|
+
} else if (!isObject(result)) {
|
|
38
|
+
return result;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const onChangeHandler = (e) => {
|
|
42
|
+
setFilterCriteria(e.target.value);
|
|
43
|
+
const result = getPathvalue(data, e.target.value);
|
|
44
|
+
setResultData(e.target.value.length ? result : data);
|
|
45
|
+
};
|
|
46
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
47
|
+
Input,
|
|
48
|
+
{
|
|
49
|
+
placeholder: "Search path...",
|
|
50
|
+
value: filterCriteria,
|
|
51
|
+
onChange: onChangeHandler
|
|
52
|
+
}
|
|
53
|
+
), /* @__PURE__ */ React.createElement(
|
|
54
|
+
"div",
|
|
55
|
+
{
|
|
56
|
+
style: {
|
|
57
|
+
border: "1px solid #e0e0e0",
|
|
58
|
+
borderRadius: "8px",
|
|
59
|
+
padding: "8px"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
/* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px" } }, getResultTag(resultData)),
|
|
63
|
+
isObject(resultData) ? /* @__PURE__ */ React.createElement(
|
|
64
|
+
ObjectorInspectorDS,
|
|
65
|
+
{
|
|
66
|
+
data: resultData,
|
|
67
|
+
includePrototypes: false,
|
|
68
|
+
expandLevel: 3,
|
|
69
|
+
id: `filter-${id}`
|
|
70
|
+
}
|
|
71
|
+
) : null
|
|
72
|
+
));
|
|
73
|
+
};
|
|
6
74
|
var ObjectInspectorComponent = (props) => {
|
|
7
|
-
const { data, label, id } = props;
|
|
8
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
|
|
75
|
+
const { data, label, filter, id } = props;
|
|
76
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter ? /* @__PURE__ */ React.createElement(FilterResults, { ...props, style: { margin: "16px" } }) : /* @__PURE__ */ React.createElement(
|
|
9
77
|
ObjectorInspectorDS,
|
|
10
78
|
{
|
|
11
79
|
data,
|
|
@@ -13,7 +81,7 @@ var ObjectInspectorComponent = (props) => {
|
|
|
13
81
|
expandLevel: 7,
|
|
14
82
|
id
|
|
15
83
|
}
|
|
16
|
-
) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
84
|
+
)) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
17
85
|
};
|
|
18
86
|
|
|
19
87
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,79 @@
|
|
|
1
1
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Text } from "@chakra-ui/react";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import { Text, Input } from "@chakra-ui/react";
|
|
4
4
|
import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
|
|
5
5
|
import { ReactAsset } from "@player-ui/react";
|
|
6
|
+
var FilterResults = (props) => {
|
|
7
|
+
const { data, id } = props;
|
|
8
|
+
const [filterCriteria, setFilterCriteria] = useState("");
|
|
9
|
+
const [resultData, setResultData] = useState(data);
|
|
10
|
+
const isObject = (value) => {
|
|
11
|
+
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
12
|
+
};
|
|
13
|
+
const getPathvalue = (object, path) => {
|
|
14
|
+
const keys = path.split(".");
|
|
15
|
+
let result = object;
|
|
16
|
+
for (const key of keys) {
|
|
17
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
18
|
+
if (!result[key] && arrayIndex === -1)
|
|
19
|
+
return 0;
|
|
20
|
+
if (arrayIndex > -1) {
|
|
21
|
+
const subkey = key.substring(0, arrayIndex);
|
|
22
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
23
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
24
|
+
if (!result)
|
|
25
|
+
return -1;
|
|
26
|
+
} else {
|
|
27
|
+
result = result[key];
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
const getResultTag = (result) => {
|
|
33
|
+
if (result === -1) {
|
|
34
|
+
return "No result for the given index";
|
|
35
|
+
} else if (result === 0) {
|
|
36
|
+
return "No result for the given path";
|
|
37
|
+
} else if (!isObject(result)) {
|
|
38
|
+
return result;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const onChangeHandler = (e) => {
|
|
42
|
+
setFilterCriteria(e.target.value);
|
|
43
|
+
const result = getPathvalue(data, e.target.value);
|
|
44
|
+
setResultData(e.target.value.length ? result : data);
|
|
45
|
+
};
|
|
46
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
47
|
+
Input,
|
|
48
|
+
{
|
|
49
|
+
placeholder: "Search path...",
|
|
50
|
+
value: filterCriteria,
|
|
51
|
+
onChange: onChangeHandler
|
|
52
|
+
}
|
|
53
|
+
), /* @__PURE__ */ React.createElement(
|
|
54
|
+
"div",
|
|
55
|
+
{
|
|
56
|
+
style: {
|
|
57
|
+
border: "1px solid #e0e0e0",
|
|
58
|
+
borderRadius: "8px",
|
|
59
|
+
padding: "8px"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
/* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px" } }, getResultTag(resultData)),
|
|
63
|
+
isObject(resultData) ? /* @__PURE__ */ React.createElement(
|
|
64
|
+
ObjectorInspectorDS,
|
|
65
|
+
{
|
|
66
|
+
data: resultData,
|
|
67
|
+
includePrototypes: false,
|
|
68
|
+
expandLevel: 3,
|
|
69
|
+
id: `filter-${id}`
|
|
70
|
+
}
|
|
71
|
+
) : null
|
|
72
|
+
));
|
|
73
|
+
};
|
|
6
74
|
var ObjectInspectorComponent = (props) => {
|
|
7
|
-
const { data, label, id } = props;
|
|
8
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
|
|
75
|
+
const { data, label, filter, id } = props;
|
|
76
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter ? /* @__PURE__ */ React.createElement(FilterResults, { ...props, style: { margin: "16px" } }) : /* @__PURE__ */ React.createElement(
|
|
9
77
|
ObjectorInspectorDS,
|
|
10
78
|
{
|
|
11
79
|
data,
|
|
@@ -13,7 +81,7 @@ var ObjectInspectorComponent = (props) => {
|
|
|
13
81
|
expandLevel: 7,
|
|
14
82
|
id
|
|
15
83
|
}
|
|
16
|
-
) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
84
|
+
)) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
17
85
|
};
|
|
18
86
|
|
|
19
87
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n const { data, label, id } = props;\n\n return (\n <>\n {label && <ReactAsset {...label} />}\n {data ? (\n <ObjectorInspectorDS\n
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nconst FilterResults = (props: ObjectInspectorAsset) => {\n const { data, id } = props;\n\n const [filterCriteria, setFilterCriteria] = useState(\"\");\n const [resultData, setResultData] = useState(data);\n\n const isObject = (value: any): boolean => {\n return (\n value != null &&\n (value.constructor === Object ||\n (!value.constructor && typeof value === \"object\") ||\n Array.isArray(value))\n );\n };\n\n const getPathvalue = (object: Flow, path: string) => {\n const keys = path.split(\".\");\n let result: any = object;\n for (const key of keys) {\n const arrayIndex = key.search(/\\[\\d+\\]$/);\n\n if (!result[key] && arrayIndex === -1) return 0;\n\n // If key has a numeric index, e.g. for Multi-copy and/or array values.\n if (arrayIndex > -1) {\n const subkey = key.substring(0, arrayIndex);\n const subIndexMatch = key.match(/(?<=\\[)\\d+(?=\\])/);\n\n result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];\n if (!result) return -1;\n } else {\n result = result[key];\n }\n }\n return result;\n };\n\n const getResultTag = (result: any) => {\n if (result === -1) {\n return \"No result for the given index\";\n } else if (result === 0) {\n return \"No result for the given path\";\n } else if (!isObject(result)) {\n return result;\n }\n };\n\n const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n setFilterCriteria(e.target.value);\n\n const result = getPathvalue(data as Flow, e.target.value);\n setResultData(e.target.value.length ? result : data);\n };\n\n return (\n <>\n <Input\n placeholder=\"Search path...\"\n value={filterCriteria}\n onChange={onChangeHandler}\n />\n <div\n style={{\n border: \"1px solid #e0e0e0\",\n borderRadius: \"8px\",\n padding: \"8px\",\n }}\n >\n <Text style={{ padding: \"0 16px\" }}>{getResultTag(resultData)}</Text>\n {isObject(resultData) ? (\n <ObjectorInspectorDS\n data={resultData as Flow}\n includePrototypes={false}\n expandLevel={3}\n id={`filter-${id}`}\n />\n ) : null}\n </div>\n </>\n );\n};\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n const { data, label, filter, id } = props;\n\n return (\n <>\n {label && <ReactAsset {...label} />}\n {data ? (\n <>\n {filter ? (\n <FilterResults {...props} style={{ margin: \"16px\" }} />\n ) : (\n <ObjectorInspectorDS\n data={data}\n includePrototypes={false}\n expandLevel={7}\n id={id}\n />\n )}\n </>\n ) : (\n <Text>No data available</Text>\n )}\n </>\n );\n};\n","import React from \"react\";\nimport {\n AssetPropsWithChildren,\n Asset,\n createSlot,\n BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n /** The binding */\n binding?: BindingTemplateInstance;\n }\n) => {\n const { children, binding, ...rest } = props;\n\n return (\n <Asset type=\"object-inspector\" {...rest}>\n {binding && <property name=\"binding\">{binding.toValue()}</property>}\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nObjectInspector.Label = createSlot({\n name: \"label\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n ObjectInspectorAsset,\n TransformedObjectInspector\n> = (asset, options) => {\n return {\n ...asset,\n data:\n asset.binding === undefined\n ? undefined\n : options.data.model.get(asset.binding, {\n includeInvalid: true,\n formatted: false,\n }),\n };\n};\n"],"mappings":"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","names":["React","Text"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devtools-ui/object-inspector",
|
|
3
|
-
"version": "0.1.2--canary.
|
|
3
|
+
"version": "0.1.2--canary.27.1341",
|
|
4
4
|
"main": "dist/cjs/index.cjs",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@devtools-ui/collection": "0.1.2--canary.
|
|
7
|
-
"@devtools-ui/text": "0.1.2--canary.
|
|
6
|
+
"@devtools-ui/collection": "0.1.2--canary.27.1341",
|
|
7
|
+
"@devtools-ui/text": "0.1.2--canary.27.1341",
|
|
8
8
|
"@types/react": "^18.2.51",
|
|
9
9
|
"react": "^18.2.0",
|
|
10
10
|
"@devtools-ds/object-inspector": "^1.1.2",
|
|
@@ -1,22 +1,111 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Text } from "@chakra-ui/react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Text, Input } from "@chakra-ui/react";
|
|
3
3
|
import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
|
|
4
4
|
import { ReactAsset } from "@player-ui/react";
|
|
5
|
+
import { Flow } from "@player-ui/types";
|
|
5
6
|
import { ObjectInspectorAsset } from "../types";
|
|
6
7
|
|
|
8
|
+
const FilterResults = (props: ObjectInspectorAsset) => {
|
|
9
|
+
const { data, id } = props;
|
|
10
|
+
|
|
11
|
+
const [filterCriteria, setFilterCriteria] = useState("");
|
|
12
|
+
const [resultData, setResultData] = useState(data);
|
|
13
|
+
|
|
14
|
+
const isObject = (value: any): boolean => {
|
|
15
|
+
return (
|
|
16
|
+
value != null &&
|
|
17
|
+
(value.constructor === Object ||
|
|
18
|
+
(!value.constructor && typeof value === "object") ||
|
|
19
|
+
Array.isArray(value))
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const getPathvalue = (object: Flow, path: string) => {
|
|
24
|
+
const keys = path.split(".");
|
|
25
|
+
let result: any = object;
|
|
26
|
+
for (const key of keys) {
|
|
27
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
28
|
+
|
|
29
|
+
if (!result[key] && arrayIndex === -1) return 0;
|
|
30
|
+
|
|
31
|
+
// If key has a numeric index, e.g. for Multi-copy and/or array values.
|
|
32
|
+
if (arrayIndex > -1) {
|
|
33
|
+
const subkey = key.substring(0, arrayIndex);
|
|
34
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
35
|
+
|
|
36
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
37
|
+
if (!result) return -1;
|
|
38
|
+
} else {
|
|
39
|
+
result = result[key];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return result;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const getResultTag = (result: any) => {
|
|
46
|
+
if (result === -1) {
|
|
47
|
+
return "No result for the given index";
|
|
48
|
+
} else if (result === 0) {
|
|
49
|
+
return "No result for the given path";
|
|
50
|
+
} else if (!isObject(result)) {
|
|
51
|
+
return result;
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
56
|
+
setFilterCriteria(e.target.value);
|
|
57
|
+
|
|
58
|
+
const result = getPathvalue(data as Flow, e.target.value);
|
|
59
|
+
setResultData(e.target.value.length ? result : data);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<>
|
|
64
|
+
<Input
|
|
65
|
+
placeholder="Search path..."
|
|
66
|
+
value={filterCriteria}
|
|
67
|
+
onChange={onChangeHandler}
|
|
68
|
+
/>
|
|
69
|
+
<div
|
|
70
|
+
style={{
|
|
71
|
+
border: "1px solid #e0e0e0",
|
|
72
|
+
borderRadius: "8px",
|
|
73
|
+
padding: "8px",
|
|
74
|
+
}}
|
|
75
|
+
>
|
|
76
|
+
<Text style={{ padding: "0 16px" }}>{getResultTag(resultData)}</Text>
|
|
77
|
+
{isObject(resultData) ? (
|
|
78
|
+
<ObjectorInspectorDS
|
|
79
|
+
data={resultData as Flow}
|
|
80
|
+
includePrototypes={false}
|
|
81
|
+
expandLevel={3}
|
|
82
|
+
id={`filter-${id}`}
|
|
83
|
+
/>
|
|
84
|
+
) : null}
|
|
85
|
+
</div>
|
|
86
|
+
</>
|
|
87
|
+
);
|
|
88
|
+
};
|
|
89
|
+
|
|
7
90
|
export const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {
|
|
8
|
-
const { data, label, id } = props;
|
|
91
|
+
const { data, label, filter, id } = props;
|
|
9
92
|
|
|
10
93
|
return (
|
|
11
94
|
<>
|
|
12
95
|
{label && <ReactAsset {...label} />}
|
|
13
96
|
{data ? (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
97
|
+
<>
|
|
98
|
+
{filter ? (
|
|
99
|
+
<FilterResults {...props} style={{ margin: "16px" }} />
|
|
100
|
+
) : (
|
|
101
|
+
<ObjectorInspectorDS
|
|
102
|
+
data={data}
|
|
103
|
+
includePrototypes={false}
|
|
104
|
+
expandLevel={7}
|
|
105
|
+
id={id}
|
|
106
|
+
/>
|
|
107
|
+
)}
|
|
108
|
+
</>
|
|
20
109
|
) : (
|
|
21
110
|
<Text>No data available</Text>
|
|
22
111
|
)}
|
|
@@ -24,4 +24,26 @@ describe("DSL: Object Inspector", () => {
|
|
|
24
24
|
},
|
|
25
25
|
});
|
|
26
26
|
});
|
|
27
|
+
|
|
28
|
+
test("with filter", async () => {
|
|
29
|
+
const rendered = await render(
|
|
30
|
+
<ObjectInspector binding={b`foo`} filter>
|
|
31
|
+
<ObjectInspector.Label>With Filter</ObjectInspector.Label>
|
|
32
|
+
</ObjectInspector>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
expect(rendered.jsonValue).toStrictEqual({
|
|
36
|
+
id: "root",
|
|
37
|
+
type: "object-inspector",
|
|
38
|
+
binding: "foo",
|
|
39
|
+
filter: true,
|
|
40
|
+
label: {
|
|
41
|
+
asset: {
|
|
42
|
+
id: "label",
|
|
43
|
+
type: "text",
|
|
44
|
+
value: "With Filter",
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
});
|
|
27
49
|
});
|
package/src/types/index.ts
CHANGED
|
@@ -7,6 +7,9 @@ export interface ObjectInspectorAsset<AnyTextAsset extends Asset = Asset>
|
|
|
7
7
|
|
|
8
8
|
/** A text-like asset for the action's label */
|
|
9
9
|
label?: AssetWrapper<AnyTextAsset>;
|
|
10
|
+
|
|
11
|
+
/** Flag if a path-to-prop filter is to get included */
|
|
12
|
+
filter?: boolean;
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
export interface TransformedObjectInspector extends ObjectInspectorAsset {
|
package/types/types/index.d.ts
CHANGED
|
@@ -4,6 +4,8 @@ export interface ObjectInspectorAsset<AnyTextAsset extends Asset = Asset> extend
|
|
|
4
4
|
binding?: string;
|
|
5
5
|
/** A text-like asset for the action's label */
|
|
6
6
|
label?: AssetWrapper<AnyTextAsset>;
|
|
7
|
+
/** Flag if a path-to-prop filter is to get included */
|
|
8
|
+
filter?: boolean;
|
|
7
9
|
}
|
|
8
10
|
export interface TransformedObjectInspector extends ObjectInspectorAsset {
|
|
9
11
|
/** A stateful instance of an action */
|