@devtools-ui/object-inspector 0.1.2--canary.27.1325 → 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 +16 -6
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/index.legacy-esm.js +16 -6
- package/dist/index.mjs +16 -6
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/ObjectInspectorComponent.tsx +31 -20
package/dist/cjs/index.cjs
CHANGED
|
@@ -44,7 +44,7 @@ var import_react3 = require("@player-ui/react");
|
|
|
44
44
|
var FilterResults = (props) => {
|
|
45
45
|
const { data, id } = props;
|
|
46
46
|
const [filterCriteria, setFilterCriteria] = (0, import_react.useState)("");
|
|
47
|
-
const [resultData, setResultData] = (0, import_react.useState)(
|
|
47
|
+
const [resultData, setResultData] = (0, import_react.useState)(data);
|
|
48
48
|
const isObject = (value) => {
|
|
49
49
|
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
50
50
|
};
|
|
@@ -54,23 +54,32 @@ var FilterResults = (props) => {
|
|
|
54
54
|
for (const key of keys) {
|
|
55
55
|
const arrayIndex = key.search(/\[\d+\]$/);
|
|
56
56
|
if (!result[key] && arrayIndex === -1)
|
|
57
|
-
return
|
|
57
|
+
return 0;
|
|
58
58
|
if (arrayIndex > -1) {
|
|
59
59
|
const subkey = key.substring(0, arrayIndex);
|
|
60
60
|
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
61
61
|
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
62
62
|
if (!result)
|
|
63
|
-
return
|
|
63
|
+
return -1;
|
|
64
64
|
} else {
|
|
65
65
|
result = result[key];
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
return result;
|
|
69
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
|
+
};
|
|
70
79
|
const onChangeHandler = (e) => {
|
|
71
80
|
setFilterCriteria(e.target.value);
|
|
72
81
|
const result = getPathvalue(data, e.target.value);
|
|
73
|
-
setResultData(result);
|
|
82
|
+
setResultData(e.target.value.length ? result : data);
|
|
74
83
|
};
|
|
75
84
|
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
76
85
|
import_react2.Input,
|
|
@@ -88,6 +97,7 @@ var FilterResults = (props) => {
|
|
|
88
97
|
padding: "8px"
|
|
89
98
|
}
|
|
90
99
|
},
|
|
100
|
+
/* @__PURE__ */ import_react.default.createElement(import_react2.Text, { style: { padding: "0 16px" } }, getResultTag(resultData)),
|
|
91
101
|
isObject(resultData) ? /* @__PURE__ */ import_react.default.createElement(
|
|
92
102
|
import_object_inspector.ObjectInspector,
|
|
93
103
|
{
|
|
@@ -96,12 +106,12 @@ var FilterResults = (props) => {
|
|
|
96
106
|
expandLevel: 3,
|
|
97
107
|
id: `filter-${id}`
|
|
98
108
|
}
|
|
99
|
-
) :
|
|
109
|
+
) : null
|
|
100
110
|
));
|
|
101
111
|
};
|
|
102
112
|
var ObjectInspectorComponent = (props) => {
|
|
103
113
|
const { data, label, filter, id } = props;
|
|
104
|
-
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
|
|
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(
|
|
105
115
|
import_object_inspector.ObjectInspector,
|
|
106
116
|
{
|
|
107
117
|
data,
|
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, { useState } from \"react\";\nimport { Text, Input
|
|
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
|
@@ -6,7 +6,7 @@ import { ReactAsset } from "@player-ui/react";
|
|
|
6
6
|
var FilterResults = (props) => {
|
|
7
7
|
const { data, id } = props;
|
|
8
8
|
const [filterCriteria, setFilterCriteria] = useState("");
|
|
9
|
-
const [resultData, setResultData] = useState(
|
|
9
|
+
const [resultData, setResultData] = useState(data);
|
|
10
10
|
const isObject = (value) => {
|
|
11
11
|
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
12
12
|
};
|
|
@@ -16,23 +16,32 @@ var FilterResults = (props) => {
|
|
|
16
16
|
for (const key of keys) {
|
|
17
17
|
const arrayIndex = key.search(/\[\d+\]$/);
|
|
18
18
|
if (!result[key] && arrayIndex === -1)
|
|
19
|
-
return
|
|
19
|
+
return 0;
|
|
20
20
|
if (arrayIndex > -1) {
|
|
21
21
|
const subkey = key.substring(0, arrayIndex);
|
|
22
22
|
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
23
23
|
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
24
24
|
if (!result)
|
|
25
|
-
return
|
|
25
|
+
return -1;
|
|
26
26
|
} else {
|
|
27
27
|
result = result[key];
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
return result;
|
|
31
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
|
+
};
|
|
32
41
|
const onChangeHandler = (e) => {
|
|
33
42
|
setFilterCriteria(e.target.value);
|
|
34
43
|
const result = getPathvalue(data, e.target.value);
|
|
35
|
-
setResultData(result);
|
|
44
|
+
setResultData(e.target.value.length ? result : data);
|
|
36
45
|
};
|
|
37
46
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
38
47
|
Input,
|
|
@@ -50,6 +59,7 @@ var FilterResults = (props) => {
|
|
|
50
59
|
padding: "8px"
|
|
51
60
|
}
|
|
52
61
|
},
|
|
62
|
+
/* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px" } }, getResultTag(resultData)),
|
|
53
63
|
isObject(resultData) ? /* @__PURE__ */ React.createElement(
|
|
54
64
|
ObjectorInspectorDS,
|
|
55
65
|
{
|
|
@@ -58,12 +68,12 @@ var FilterResults = (props) => {
|
|
|
58
68
|
expandLevel: 3,
|
|
59
69
|
id: `filter-${id}`
|
|
60
70
|
}
|
|
61
|
-
) :
|
|
71
|
+
) : null
|
|
62
72
|
));
|
|
63
73
|
};
|
|
64
74
|
var ObjectInspectorComponent = (props) => {
|
|
65
75
|
const { data, label, filter, id } = props;
|
|
66
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter
|
|
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(
|
|
67
77
|
ObjectorInspectorDS,
|
|
68
78
|
{
|
|
69
79
|
data,
|
package/dist/index.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import { ReactAsset } from "@player-ui/react";
|
|
|
6
6
|
var FilterResults = (props) => {
|
|
7
7
|
const { data, id } = props;
|
|
8
8
|
const [filterCriteria, setFilterCriteria] = useState("");
|
|
9
|
-
const [resultData, setResultData] = useState(
|
|
9
|
+
const [resultData, setResultData] = useState(data);
|
|
10
10
|
const isObject = (value) => {
|
|
11
11
|
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
12
12
|
};
|
|
@@ -16,23 +16,32 @@ var FilterResults = (props) => {
|
|
|
16
16
|
for (const key of keys) {
|
|
17
17
|
const arrayIndex = key.search(/\[\d+\]$/);
|
|
18
18
|
if (!result[key] && arrayIndex === -1)
|
|
19
|
-
return
|
|
19
|
+
return 0;
|
|
20
20
|
if (arrayIndex > -1) {
|
|
21
21
|
const subkey = key.substring(0, arrayIndex);
|
|
22
22
|
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
23
23
|
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
24
24
|
if (!result)
|
|
25
|
-
return
|
|
25
|
+
return -1;
|
|
26
26
|
} else {
|
|
27
27
|
result = result[key];
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
return result;
|
|
31
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
|
+
};
|
|
32
41
|
const onChangeHandler = (e) => {
|
|
33
42
|
setFilterCriteria(e.target.value);
|
|
34
43
|
const result = getPathvalue(data, e.target.value);
|
|
35
|
-
setResultData(result);
|
|
44
|
+
setResultData(e.target.value.length ? result : data);
|
|
36
45
|
};
|
|
37
46
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
38
47
|
Input,
|
|
@@ -50,6 +59,7 @@ var FilterResults = (props) => {
|
|
|
50
59
|
padding: "8px"
|
|
51
60
|
}
|
|
52
61
|
},
|
|
62
|
+
/* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px" } }, getResultTag(resultData)),
|
|
53
63
|
isObject(resultData) ? /* @__PURE__ */ React.createElement(
|
|
54
64
|
ObjectorInspectorDS,
|
|
55
65
|
{
|
|
@@ -58,12 +68,12 @@ var FilterResults = (props) => {
|
|
|
58
68
|
expandLevel: 3,
|
|
59
69
|
id: `filter-${id}`
|
|
60
70
|
}
|
|
61
|
-
) :
|
|
71
|
+
) : null
|
|
62
72
|
));
|
|
63
73
|
};
|
|
64
74
|
var ObjectInspectorComponent = (props) => {
|
|
65
75
|
const { data, label, filter, id } = props;
|
|
66
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter
|
|
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(
|
|
67
77
|
ObjectorInspectorDS,
|
|
68
78
|
{
|
|
69
79
|
data,
|
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, { useState } from \"react\";\nimport { Text, Input
|
|
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":";AAAA,OAAO,SAAS,gBAAgB;AAChC,SAAS,MAAM,aAAa;AAC5B,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,kBAAkB;AAI3B,IAAM,gBAAgB,CAAC,UAAgC;AACrD,QAAM,EAAE,MAAM,GAAG,IAAI;AAErB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AAEjD,QAAM,WAAW,CAAC,UAAwB;AACxC,WACE,SAAS,SACR,MAAM,gBAAgB,UACpB,CAAC,MAAM,eAAe,OAAO,UAAU,YACxC,MAAM,QAAQ,KAAK;AAAA,EAEzB;AAEA,QAAM,eAAe,CAAC,QAAc,SAAiB;AACnD,UAAM,OAAO,KAAK,MAAM,GAAG;AAC3B,QAAI,SAAc;AAClB,eAAW,OAAO,MAAM;AACtB,YAAM,aAAa,IAAI,OAAO,UAAU;AAExC,UAAI,CAAC,OAAO,GAAG,KAAK,eAAe;AAAI,eAAO;AAG9C,UAAI,aAAa,IAAI;AACnB,cAAM,SAAS,IAAI,UAAU,GAAG,UAAU;AAC1C,cAAM,gBAAgB,IAAI,MAAM,kBAAkB;AAElD,iBAAS,OAAO,MAAM,EAAE,gBAAgB,cAAc,CAAC,IAAI,CAAC;AAC5D,YAAI,CAAC;AAAQ,iBAAO;AAAA,MACtB,OAAO;AACL,iBAAS,OAAO,GAAG;AAAA,MACrB;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,CAAC,WAAgB;AACpC,QAAI,WAAW,IAAI;AACjB,aAAO;AAAA,IACT,WAAW,WAAW,GAAG;AACvB,aAAO;AAAA,IACT,WAAW,CAAC,SAAS,MAAM,GAAG;AAC5B,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,kBAA8D,CAAC,MAAM;AACzE,sBAAkB,EAAE,OAAO,KAAK;AAEhC,UAAM,SAAS,aAAa,MAAc,EAAE,OAAO,KAAK;AACxD,kBAAc,EAAE,OAAO,MAAM,SAAS,SAAS,IAAI;AAAA,EACrD;AAEA,SACE,0DACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,EACZ,GACA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,SAAS;AAAA,MACX;AAAA;AAAA,IAEA,oCAAC,QAAK,OAAO,EAAE,SAAS,SAAS,KAAI,aAAa,UAAU,CAAE;AAAA,IAC7D,SAAS,UAAU,IAClB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,mBAAmB;AAAA,QACnB,aAAa;AAAA,QACb,IAAI,UAAU,EAAE;AAAA;AAAA,IAClB,IACE;AAAA,EACN,CACF;AAEJ;AAEO,IAAM,2BAA2B,CAAC,UAAgC;AACvE,QAAM,EAAE,MAAM,OAAO,QAAQ,GAAG,IAAI;AAEpC,SACE,0DACG,SAAS,oCAAC,cAAY,GAAG,OAAO,GAChC,OACC,0DACG,SACC,oCAAC,iBAAe,GAAG,OAAO,OAAO,EAAE,QAAQ,OAAO,GAAG,IAErD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb;AAAA;AAAA,EACF,CAEJ,IAEA,oCAAC,YAAK,mBAAiB,CAE3B;AAEJ;;;ACjHA,OAAOA,YAAW;AAClB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,QAAAC,aAAY;AACrB,SAAS,kBAAkB;AAGpB,IAAM,kBAAkB,CAC7B,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,gBAAAD,OAAA,cAAC,SAAM,MAAK,oBAAoB,GAAG,QAChC,WAAW,gBAAAA,OAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GACvD,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,gBAAAA,OAAA,cAAC,kBACC,gBAAAA,OAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,gBAAgB,QAAQ,WAAW;AAAA,EACjC,MAAM;AAAA,EACN,UAAUC;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;;;ACpCM,IAAM,2BAGT,CAAC,OAAO,YAAY;AACtB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MACE,MAAM,YAAY,SACd,SACA,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC;AAAA,EACT;AACF;","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.27.
|
|
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.27.
|
|
7
|
-
"@devtools-ui/text": "0.1.2--canary.27.
|
|
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,15 +1,15 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
|
-
import { Text, Input
|
|
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 {
|
|
5
|
+
import { Flow } from "@player-ui/types";
|
|
6
6
|
import { ObjectInspectorAsset } from "../types";
|
|
7
7
|
|
|
8
8
|
const FilterResults = (props: ObjectInspectorAsset) => {
|
|
9
9
|
const { data, id } = props;
|
|
10
10
|
|
|
11
11
|
const [filterCriteria, setFilterCriteria] = useState("");
|
|
12
|
-
const [resultData, setResultData] = useState(
|
|
12
|
+
const [resultData, setResultData] = useState(data);
|
|
13
13
|
|
|
14
14
|
const isObject = (value: any): boolean => {
|
|
15
15
|
return (
|
|
@@ -20,14 +20,13 @@ const FilterResults = (props: ObjectInspectorAsset) => {
|
|
|
20
20
|
);
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
-
const getPathvalue = (object:
|
|
23
|
+
const getPathvalue = (object: Flow, path: string) => {
|
|
24
24
|
const keys = path.split(".");
|
|
25
25
|
let result: any = object;
|
|
26
26
|
for (const key of keys) {
|
|
27
27
|
const arrayIndex = key.search(/\[\d+\]$/);
|
|
28
28
|
|
|
29
|
-
if (!result[key] && arrayIndex === -1)
|
|
30
|
-
return "No result for the given path";
|
|
29
|
+
if (!result[key] && arrayIndex === -1) return 0;
|
|
31
30
|
|
|
32
31
|
// If key has a numeric index, e.g. for Multi-copy and/or array values.
|
|
33
32
|
if (arrayIndex > -1) {
|
|
@@ -35,7 +34,7 @@ const FilterResults = (props: ObjectInspectorAsset) => {
|
|
|
35
34
|
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
36
35
|
|
|
37
36
|
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
38
|
-
if (!result) return
|
|
37
|
+
if (!result) return -1;
|
|
39
38
|
} else {
|
|
40
39
|
result = result[key];
|
|
41
40
|
}
|
|
@@ -43,11 +42,21 @@ const FilterResults = (props: ObjectInspectorAsset) => {
|
|
|
43
42
|
return result;
|
|
44
43
|
};
|
|
45
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
|
+
|
|
46
55
|
const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
47
56
|
setFilterCriteria(e.target.value);
|
|
48
57
|
|
|
49
|
-
const result = getPathvalue(data as
|
|
50
|
-
setResultData(result);
|
|
58
|
+
const result = getPathvalue(data as Flow, e.target.value);
|
|
59
|
+
setResultData(e.target.value.length ? result : data);
|
|
51
60
|
};
|
|
52
61
|
|
|
53
62
|
return (
|
|
@@ -64,16 +73,15 @@ const FilterResults = (props: ObjectInspectorAsset) => {
|
|
|
64
73
|
padding: "8px",
|
|
65
74
|
}}
|
|
66
75
|
>
|
|
76
|
+
<Text style={{ padding: "0 16px" }}>{getResultTag(resultData)}</Text>
|
|
67
77
|
{isObject(resultData) ? (
|
|
68
78
|
<ObjectorInspectorDS
|
|
69
|
-
data={resultData}
|
|
79
|
+
data={resultData as Flow}
|
|
70
80
|
includePrototypes={false}
|
|
71
81
|
expandLevel={3}
|
|
72
82
|
id={`filter-${id}`}
|
|
73
83
|
/>
|
|
74
|
-
) :
|
|
75
|
-
<Text style={{ padding: "0 16px" }}>{resultData}</Text>
|
|
76
|
-
)}
|
|
84
|
+
) : null}
|
|
77
85
|
</div>
|
|
78
86
|
</>
|
|
79
87
|
);
|
|
@@ -87,13 +95,16 @@ export const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {
|
|
|
87
95
|
{label && <ReactAsset {...label} />}
|
|
88
96
|
{data ? (
|
|
89
97
|
<>
|
|
90
|
-
{filter
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
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
|
+
)}
|
|
97
108
|
</>
|
|
98
109
|
) : (
|
|
99
110
|
<Text>No data available</Text>
|