@devtools-ui/object-inspector 0.1.2--canary.26.1302 → 0.1.2--canary.27.1325

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.
@@ -41,9 +41,67 @@ 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
+ border: "1px solid #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
+ };
44
102
  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(
103
+ 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 && /* @__PURE__ */ import_react.default.createElement(FilterResults, { ...props, style: { margin: "16px" } }), /* @__PURE__ */ import_react.default.createElement(
47
105
  import_object_inspector.ObjectInspector,
48
106
  {
49
107
  data,
@@ -51,7 +109,7 @@ var ObjectInspectorComponent = (props) => {
51
109
  expandLevel: 7,
52
110
  id
53
111
  }
54
- ) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
112
+ )) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
55
113
  };
56
114
 
57
115
  // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
@@ -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 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"]}
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, background } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { DataModel } 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(\"Path result will display here\");\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: DataModel, 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)\n return \"No result for the given path\";\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 \"No result for the given index\";\n } else {\n result = result[key];\n }\n }\n return result;\n };\n\n const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n setFilterCriteria(e.target.value);\n\n const result = getPathvalue(data as DataModel, e.target.value);\n setResultData(result);\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 {isObject(resultData) ? (\n <ObjectorInspectorDS\n data={resultData}\n includePrototypes={false}\n expandLevel={3}\n id={`filter-${id}`}\n />\n ) : (\n <Text style={{ padding: \"0 16px\" }}>{resultData}</Text>\n )}\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 && <FilterResults {...props} style={{ margin: \"16px\" }} />}\n <ObjectorInspectorDS\n data={data}\n includePrototypes={false}\n expandLevel={7}\n id={id}\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"]}
@@ -1,11 +1,69 @@
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("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
+ border: "1px solid #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
+ };
6
64
  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(
65
+ 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 && /* @__PURE__ */ React.createElement(FilterResults, { ...props, style: { margin: "16px" } }), /* @__PURE__ */ React.createElement(
9
67
  ObjectorInspectorDS,
10
68
  {
11
69
  data,
@@ -13,7 +71,7 @@ var ObjectInspectorComponent = (props) => {
13
71
  expandLevel: 7,
14
72
  id
15
73
  }
16
- ) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
74
+ )) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
17
75
  };
18
76
 
19
77
  // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
package/dist/index.mjs CHANGED
@@ -1,11 +1,69 @@
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("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
+ border: "1px solid #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
+ };
6
64
  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(
65
+ 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 && /* @__PURE__ */ React.createElement(FilterResults, { ...props, style: { margin: "16px" } }), /* @__PURE__ */ React.createElement(
9
67
  ObjectorInspectorDS,
10
68
  {
11
69
  data,
@@ -13,7 +71,7 @@ var ObjectInspectorComponent = (props) => {
13
71
  expandLevel: 7,
14
72
  id
15
73
  }
16
- ) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
74
+ )) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
17
75
  };
18
76
 
19
77
  // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
@@ -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 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"]}
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, background } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { DataModel } 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(\"Path result will display here\");\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: DataModel, 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)\n return \"No result for the given path\";\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 \"No result for the given index\";\n } else {\n result = result[key];\n }\n }\n return result;\n };\n\n const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n setFilterCriteria(e.target.value);\n\n const result = getPathvalue(data as DataModel, e.target.value);\n setResultData(result);\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 {isObject(resultData) ? (\n <ObjectorInspectorDS\n data={resultData}\n includePrototypes={false}\n expandLevel={3}\n id={`filter-${id}`}\n />\n ) : (\n <Text style={{ padding: \"0 16px\" }}>{resultData}</Text>\n )}\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 && <FilterResults {...props} style={{ margin: \"16px\" }} />}\n <ObjectorInspectorDS\n data={data}\n includePrototypes={false}\n expandLevel={7}\n id={id}\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.26.1302",
3
+ "version": "0.1.2--canary.27.1325",
4
4
  "main": "dist/cjs/index.cjs",
5
5
  "dependencies": {
6
- "@devtools-ui/collection": "0.1.2--canary.26.1302",
7
- "@devtools-ui/text": "0.1.2--canary.26.1302",
6
+ "@devtools-ui/collection": "0.1.2--canary.27.1325",
7
+ "@devtools-ui/text": "0.1.2--canary.27.1325",
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,100 @@
1
- import React from "react";
2
- import { Text } from "@chakra-ui/react";
1
+ import React, { useState } from "react";
2
+ import { Text, Input, background } 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";
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("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
+ border: "1px solid #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
+
7
82
  export const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {
8
- const { data, label, id } = props;
83
+ const { data, label, filter, id } = props;
9
84
 
10
85
  return (
11
86
  <>
12
87
  {label && <ReactAsset {...label} />}
13
88
  {data ? (
14
- <ObjectorInspectorDS
15
- data={data}
16
- includePrototypes={false}
17
- expandLevel={7}
18
- id={id}
19
- />
89
+ <>
90
+ {filter && <FilterResults {...props} style={{ margin: "16px" }} />}
91
+ <ObjectorInspectorDS
92
+ data={data}
93
+ includePrototypes={false}
94
+ expandLevel={7}
95
+ id={id}
96
+ />
97
+ </>
20
98
  ) : (
21
99
  <Text>No data available</Text>
22
100
  )}
@@ -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
  });
@@ -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 {
@@ -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 */