@devtools-ui/object-inspector 0.1.2--canary.27.1288 → 0.1.2--canary.26.1312
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 +3 -61
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/index.legacy-esm.js +5 -63
- package/dist/index.mjs +5 -63
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/ObjectInspectorComponent.tsx +9 -87
- package/src/dsl/__tests__/ObjectInspector.test.tsx +0 -22
- package/src/types/index.ts +0 -3
- package/types/types/index.d.ts +0 -2
package/dist/cjs/index.cjs
CHANGED
|
@@ -41,67 +41,9 @@ 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)("Path result will display here");
|
|
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 "No result for the given path";
|
|
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 "No result for the given index";
|
|
64
|
-
} else {
|
|
65
|
-
result = result[key];
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
return result;
|
|
69
|
-
};
|
|
70
|
-
const onChangeHandler = (e) => {
|
|
71
|
-
setFilterCriteria(e.target.value);
|
|
72
|
-
const result = getPathvalue(data, e.target.value);
|
|
73
|
-
setResultData(result);
|
|
74
|
-
};
|
|
75
|
-
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
76
|
-
import_react2.Input,
|
|
77
|
-
{
|
|
78
|
-
placeholder: "Search path...",
|
|
79
|
-
value: filterCriteria,
|
|
80
|
-
onChange: onChangeHandler
|
|
81
|
-
}
|
|
82
|
-
), /* @__PURE__ */ import_react.default.createElement(
|
|
83
|
-
"div",
|
|
84
|
-
{
|
|
85
|
-
style: {
|
|
86
|
-
backgroundColor: "#e0e0e0",
|
|
87
|
-
borderRadius: "8px",
|
|
88
|
-
padding: "8px"
|
|
89
|
-
}
|
|
90
|
-
},
|
|
91
|
-
isObject(resultData) ? /* @__PURE__ */ import_react.default.createElement(
|
|
92
|
-
import_object_inspector.ObjectInspector,
|
|
93
|
-
{
|
|
94
|
-
data: resultData,
|
|
95
|
-
includePrototypes: false,
|
|
96
|
-
expandLevel: 3,
|
|
97
|
-
id: `filter-${id}`
|
|
98
|
-
}
|
|
99
|
-
) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, { style: { padding: "0 16px" } }, resultData)
|
|
100
|
-
));
|
|
101
|
-
};
|
|
102
44
|
var ObjectInspectorComponent = (props) => {
|
|
103
|
-
const { data, label,
|
|
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(
|
|
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(
|
|
105
47
|
import_object_inspector.ObjectInspector,
|
|
106
48
|
{
|
|
107
49
|
data,
|
|
@@ -109,7 +51,7 @@ var ObjectInspectorComponent = (props) => {
|
|
|
109
51
|
expandLevel: 7,
|
|
110
52
|
id
|
|
111
53
|
}
|
|
112
|
-
)
|
|
54
|
+
) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
|
|
113
55
|
};
|
|
114
56
|
|
|
115
57
|
// ../../../../../../../../../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
|
|
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 data={data}\n includePrototypes={false}\n expandLevel={7}\n id={id}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,gBAAqB;AACrB,8BAAuD;AACvD,IAAAA,gBAA2B;AAGpB,IAAM,2BAA2B,CAAC,UAAgC;AACvE,QAAM,EAAE,MAAM,OAAO,GAAG,IAAI;AAE5B,SACE,6BAAAC,QAAA,2BAAAA,QAAA,gBACG,SAAS,6BAAAA,QAAA,cAAC,4BAAY,GAAG,OAAO,GAChC,OACC,6BAAAA,QAAA;AAAA,IAAC,wBAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb;AAAA;AAAA,EACF,IAEA,6BAAAD,QAAA,cAAC,0BAAK,mBAAiB,CAE3B;AAEJ;;;ACxBA,IAAAE,gBAAkB;AAClB,iBAKO;AAEP,kBAAqB;AACrB,wBAA2B;AAGpB,IAAM,kBAAkB,CAC7B,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AAEvC,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,oBAAoB,GAAG,QAChC,WAAW,8BAAAA,QAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GACvD,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,8BAAAA,QAAA,cAAC,oCACC,8BAAAA,QAAA,cAAC,6BAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,gBAAgB,YAAQ,uBAAW;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;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":["import_react","React","ObjectorInspectorDS","import_react","React"]}
|
package/dist/index.legacy-esm.js
CHANGED
|
@@ -1,69 +1,11 @@
|
|
|
1
1
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx
|
|
2
|
-
import React
|
|
3
|
-
import { Text
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { Text } 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("Path result will display here");
|
|
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 "No result for the given path";
|
|
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 "No result for the given index";
|
|
26
|
-
} else {
|
|
27
|
-
result = result[key];
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return result;
|
|
31
|
-
};
|
|
32
|
-
const onChangeHandler = (e) => {
|
|
33
|
-
setFilterCriteria(e.target.value);
|
|
34
|
-
const result = getPathvalue(data, e.target.value);
|
|
35
|
-
setResultData(result);
|
|
36
|
-
};
|
|
37
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
38
|
-
Input,
|
|
39
|
-
{
|
|
40
|
-
placeholder: "Search path...",
|
|
41
|
-
value: filterCriteria,
|
|
42
|
-
onChange: onChangeHandler
|
|
43
|
-
}
|
|
44
|
-
), /* @__PURE__ */ React.createElement(
|
|
45
|
-
"div",
|
|
46
|
-
{
|
|
47
|
-
style: {
|
|
48
|
-
backgroundColor: "#e0e0e0",
|
|
49
|
-
borderRadius: "8px",
|
|
50
|
-
padding: "8px"
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
isObject(resultData) ? /* @__PURE__ */ React.createElement(
|
|
54
|
-
ObjectorInspectorDS,
|
|
55
|
-
{
|
|
56
|
-
data: resultData,
|
|
57
|
-
includePrototypes: false,
|
|
58
|
-
expandLevel: 3,
|
|
59
|
-
id: `filter-${id}`
|
|
60
|
-
}
|
|
61
|
-
) : /* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px" } }, resultData)
|
|
62
|
-
));
|
|
63
|
-
};
|
|
64
6
|
var ObjectInspectorComponent = (props) => {
|
|
65
|
-
const { data, label,
|
|
66
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
|
|
7
|
+
const { data, label, id } = props;
|
|
8
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
|
|
67
9
|
ObjectorInspectorDS,
|
|
68
10
|
{
|
|
69
11
|
data,
|
|
@@ -71,7 +13,7 @@ var ObjectInspectorComponent = (props) => {
|
|
|
71
13
|
expandLevel: 7,
|
|
72
14
|
id
|
|
73
15
|
}
|
|
74
|
-
)
|
|
16
|
+
) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
75
17
|
};
|
|
76
18
|
|
|
77
19
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
package/dist/index.mjs
CHANGED
|
@@ -1,69 +1,11 @@
|
|
|
1
1
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx
|
|
2
|
-
import React
|
|
3
|
-
import { Text
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { Text } 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("Path result will display here");
|
|
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 "No result for the given path";
|
|
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 "No result for the given index";
|
|
26
|
-
} else {
|
|
27
|
-
result = result[key];
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return result;
|
|
31
|
-
};
|
|
32
|
-
const onChangeHandler = (e) => {
|
|
33
|
-
setFilterCriteria(e.target.value);
|
|
34
|
-
const result = getPathvalue(data, e.target.value);
|
|
35
|
-
setResultData(result);
|
|
36
|
-
};
|
|
37
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
38
|
-
Input,
|
|
39
|
-
{
|
|
40
|
-
placeholder: "Search path...",
|
|
41
|
-
value: filterCriteria,
|
|
42
|
-
onChange: onChangeHandler
|
|
43
|
-
}
|
|
44
|
-
), /* @__PURE__ */ React.createElement(
|
|
45
|
-
"div",
|
|
46
|
-
{
|
|
47
|
-
style: {
|
|
48
|
-
backgroundColor: "#e0e0e0",
|
|
49
|
-
borderRadius: "8px",
|
|
50
|
-
padding: "8px"
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
isObject(resultData) ? /* @__PURE__ */ React.createElement(
|
|
54
|
-
ObjectorInspectorDS,
|
|
55
|
-
{
|
|
56
|
-
data: resultData,
|
|
57
|
-
includePrototypes: false,
|
|
58
|
-
expandLevel: 3,
|
|
59
|
-
id: `filter-${id}`
|
|
60
|
-
}
|
|
61
|
-
) : /* @__PURE__ */ React.createElement(Text, { style: { padding: "0 16px" } }, resultData)
|
|
62
|
-
));
|
|
63
|
-
};
|
|
64
6
|
var ObjectInspectorComponent = (props) => {
|
|
65
|
-
const { data, label,
|
|
66
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
|
|
7
|
+
const { data, label, id } = props;
|
|
8
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(
|
|
67
9
|
ObjectorInspectorDS,
|
|
68
10
|
{
|
|
69
11
|
data,
|
|
@@ -71,7 +13,7 @@ var ObjectInspectorComponent = (props) => {
|
|
|
71
13
|
expandLevel: 7,
|
|
72
14
|
id
|
|
73
15
|
}
|
|
74
|
-
)
|
|
16
|
+
) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
75
17
|
};
|
|
76
18
|
|
|
77
19
|
// ../../../../../../../../../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
|
|
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 data={data}\n includePrototypes={false}\n expandLevel={7}\n id={id}\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,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,kBAAkB;AAGpB,IAAM,2BAA2B,CAAC,UAAgC;AACvE,QAAM,EAAE,MAAM,OAAO,GAAG,IAAI;AAE5B,SACE,0DACG,SAAS,oCAAC,cAAY,GAAG,OAAO,GAChC,OACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb;AAAA;AAAA,EACF,IAEA,oCAAC,YAAK,mBAAiB,CAE3B;AAEJ;;;ACxBA,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.
|
|
3
|
+
"version": "0.1.2--canary.26.1312",
|
|
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.26.1312",
|
|
7
|
+
"@devtools-ui/text": "0.1.2--canary.26.1312",
|
|
8
8
|
"@types/react": "^18.2.51",
|
|
9
9
|
"react": "^18.2.0",
|
|
10
10
|
"@devtools-ds/object-inspector": "^1.1.2",
|
|
@@ -1,100 +1,22 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import { Text
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Text } 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 { DataModel } from "@player-ui/types";
|
|
6
5
|
import { ObjectInspectorAsset } from "../types";
|
|
7
6
|
|
|
8
|
-
const FilterResults = (props: ObjectInspectorAsset) => {
|
|
9
|
-
const { data, id } = props;
|
|
10
|
-
|
|
11
|
-
const [filterCriteria, setFilterCriteria] = useState("");
|
|
12
|
-
const [resultData, setResultData] = useState("Path result will display here");
|
|
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: DataModel, 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)
|
|
30
|
-
return "No result for the given path";
|
|
31
|
-
|
|
32
|
-
// If key has a numeric index, e.g. for Multi-copy and/or array values.
|
|
33
|
-
if (arrayIndex > -1) {
|
|
34
|
-
const subkey = key.substring(0, arrayIndex);
|
|
35
|
-
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
36
|
-
|
|
37
|
-
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
38
|
-
if (!result) return "No result for the given index";
|
|
39
|
-
} else {
|
|
40
|
-
result = result[key];
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
return result;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
47
|
-
setFilterCriteria(e.target.value);
|
|
48
|
-
|
|
49
|
-
const result = getPathvalue(data as DataModel, e.target.value);
|
|
50
|
-
setResultData(result);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<>
|
|
55
|
-
<Input
|
|
56
|
-
placeholder="Search path..."
|
|
57
|
-
value={filterCriteria}
|
|
58
|
-
onChange={onChangeHandler}
|
|
59
|
-
/>
|
|
60
|
-
<div
|
|
61
|
-
style={{
|
|
62
|
-
backgroundColor: "#e0e0e0",
|
|
63
|
-
borderRadius: "8px",
|
|
64
|
-
padding: "8px",
|
|
65
|
-
}}
|
|
66
|
-
>
|
|
67
|
-
{isObject(resultData) ? (
|
|
68
|
-
<ObjectorInspectorDS
|
|
69
|
-
data={resultData}
|
|
70
|
-
includePrototypes={false}
|
|
71
|
-
expandLevel={3}
|
|
72
|
-
id={`filter-${id}`}
|
|
73
|
-
/>
|
|
74
|
-
) : (
|
|
75
|
-
<Text style={{ padding: "0 16px" }}>{resultData}</Text>
|
|
76
|
-
)}
|
|
77
|
-
</div>
|
|
78
|
-
</>
|
|
79
|
-
);
|
|
80
|
-
};
|
|
81
|
-
|
|
82
7
|
export const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {
|
|
83
|
-
const { data, label,
|
|
8
|
+
const { data, label, id } = props;
|
|
84
9
|
|
|
85
10
|
return (
|
|
86
11
|
<>
|
|
87
12
|
{label && <ReactAsset {...label} />}
|
|
88
13
|
{data ? (
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
id={id}
|
|
96
|
-
/>
|
|
97
|
-
</>
|
|
14
|
+
<ObjectorInspectorDS
|
|
15
|
+
data={data}
|
|
16
|
+
includePrototypes={false}
|
|
17
|
+
expandLevel={7}
|
|
18
|
+
id={id}
|
|
19
|
+
/>
|
|
98
20
|
) : (
|
|
99
21
|
<Text>No data available</Text>
|
|
100
22
|
)}
|
|
@@ -24,26 +24,4 @@ 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
|
-
});
|
|
49
27
|
});
|
package/src/types/index.ts
CHANGED
|
@@ -7,9 +7,6 @@ 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;
|
|
13
10
|
}
|
|
14
11
|
|
|
15
12
|
export interface TransformedObjectInspector extends ObjectInspectorAsset {
|
package/types/types/index.d.ts
CHANGED
|
@@ -4,8 +4,6 @@ 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;
|
|
9
7
|
}
|
|
10
8
|
export interface TransformedObjectInspector extends ObjectInspectorAsset {
|
|
11
9
|
/** A stateful instance of an action */
|