@vuu-ui/vuu-datatable 2.1.18 → 2.1.19-beta.1

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.
Files changed (49) hide show
  1. package/package.json +14 -16
  2. package/cjs/filter-table/FilterTable.js +0 -41
  3. package/cjs/filter-table/FilterTable.js.map +0 -1
  4. package/cjs/filter-table/useFilterTable.js +0 -33
  5. package/cjs/filter-table/useFilterTable.js.map +0 -1
  6. package/cjs/filter-table/usePersistFilterState.js +0 -156
  7. package/cjs/filter-table/usePersistFilterState.js.map +0 -1
  8. package/cjs/index.js +0 -16
  9. package/cjs/index.js.map +0 -1
  10. package/cjs/json-table/JsonCell.css.js +0 -6
  11. package/cjs/json-table/JsonCell.css.js.map +0 -1
  12. package/cjs/json-table/JsonCell.js +0 -42
  13. package/cjs/json-table/JsonCell.js.map +0 -1
  14. package/cjs/json-table/JsonTable.js +0 -52
  15. package/cjs/json-table/JsonTable.js.map +0 -1
  16. package/cjs/linked-table-view/LinkedTableView.css.js +0 -6
  17. package/cjs/linked-table-view/LinkedTableView.css.js.map +0 -1
  18. package/cjs/linked-table-view/LinkedTableView.js +0 -168
  19. package/cjs/linked-table-view/LinkedTableView.js.map +0 -1
  20. package/cjs/linked-table-view/TableLayoutToggleButton.js +0 -31
  21. package/cjs/linked-table-view/TableLayoutToggleButton.js.map +0 -1
  22. package/cjs/linked-table-view/useLinkedTableView.js +0 -210
  23. package/cjs/linked-table-view/useLinkedTableView.js.map +0 -1
  24. package/cjs/tree-table/TreeTable.js +0 -55
  25. package/cjs/tree-table/TreeTable.js.map +0 -1
  26. package/esm/filter-table/FilterTable.js +0 -39
  27. package/esm/filter-table/FilterTable.js.map +0 -1
  28. package/esm/filter-table/useFilterTable.js +0 -31
  29. package/esm/filter-table/useFilterTable.js.map +0 -1
  30. package/esm/filter-table/usePersistFilterState.js +0 -154
  31. package/esm/filter-table/usePersistFilterState.js.map +0 -1
  32. package/esm/index.js +0 -6
  33. package/esm/index.js.map +0 -1
  34. package/esm/json-table/JsonCell.css.js +0 -4
  35. package/esm/json-table/JsonCell.css.js.map +0 -1
  36. package/esm/json-table/JsonCell.js +0 -40
  37. package/esm/json-table/JsonCell.js.map +0 -1
  38. package/esm/json-table/JsonTable.js +0 -50
  39. package/esm/json-table/JsonTable.js.map +0 -1
  40. package/esm/linked-table-view/LinkedTableView.css.js +0 -4
  41. package/esm/linked-table-view/LinkedTableView.css.js.map +0 -1
  42. package/esm/linked-table-view/LinkedTableView.js +0 -166
  43. package/esm/linked-table-view/LinkedTableView.js.map +0 -1
  44. package/esm/linked-table-view/TableLayoutToggleButton.js +0 -29
  45. package/esm/linked-table-view/TableLayoutToggleButton.js.map +0 -1
  46. package/esm/linked-table-view/useLinkedTableView.js +0 -208
  47. package/esm/linked-table-view/useLinkedTableView.js.map +0 -1
  48. package/esm/tree-table/TreeTable.js +0 -53
  49. package/esm/tree-table/TreeTable.js.map +0 -1
@@ -1,4 +0,0 @@
1
- var arrayCellCss = ".vuuJsonCell {\n --group-cell-spacer-width: 20px;\n align-items: center;\n border-right-style: solid;\n border-right-width: 1px;\n cursor: pointer;\n display: inline-flex;\n height: var(--row-height);\n padding-left: 20px;\n line-height: 16px;\n position: relative;\n\n .vuuToggleIconButton {\n position: absolute;\n }\n}\n";
2
-
3
- export { arrayCellCss as default };
4
- //# sourceMappingURL=JsonCell.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JsonCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,40 +0,0 @@
1
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { useComponentCssInjection } from '@salt-ds/styles';
3
- import { useWindow } from '@salt-ds/window';
4
- import { ToggleIconButton } from '@vuu-ui/vuu-ui-controls';
5
- import arrayCellCss from './JsonCell.css.js';
6
-
7
- const JsonCell = ({ column, dataRow }) => {
8
- const targetWindow = useWindow();
9
- useComponentCssInjection({
10
- testId: "vuu-array-cell",
11
- css: arrayCellCss,
12
- window: targetWindow
13
- });
14
- const { name } = column;
15
- let { isExpanded, isLeaf, [name]: value } = dataRow;
16
- const getDisplayValue = () => {
17
- if (isLeaf) {
18
- return value;
19
- } else if (typeof value === "string" && value.endsWith("{")) {
20
- value = value.slice(0, -1);
21
- if (!isNaN(parseInt(value))) {
22
- return `${value}: {...}`;
23
- } else {
24
- return `value {...}`;
25
- }
26
- } else if (typeof value === "string" && value.endsWith("[")) {
27
- value = value.slice(0, -1);
28
- return `${value} [...]`;
29
- }
30
- };
31
- const displayValue = getDisplayValue();
32
- const isEmpty = displayValue === "" || displayValue === void 0;
33
- return /* @__PURE__ */ jsxs(Fragment, { children: [
34
- isLeaf || isEmpty ? null : /* @__PURE__ */ jsx(ToggleIconButton, { isExpanded }),
35
- /* @__PURE__ */ jsx("span", { children: displayValue })
36
- ] });
37
- };
38
-
39
- export { JsonCell };
40
- //# sourceMappingURL=JsonCell.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JsonCell.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\n\n// Note the className is actually applied to containing cell\nimport arrayCellCss from \"./JsonCell.css\";\n\nexport const JsonCell = ({ column, dataRow }: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-array-cell\",\n css: arrayCellCss,\n window: targetWindow,\n });\n\n const { name } = column;\n let { isExpanded, isLeaf, [name]: value } = dataRow;\n\n const getDisplayValue = () => {\n if (isLeaf) {\n return value;\n } else if (typeof value === \"string\" && value.endsWith(\"{\")) {\n value = value.slice(0, -1);\n if (!isNaN(parseInt(value))) {\n return `${value}: {...}`;\n } else {\n return `value {...}`;\n }\n } else if (typeof value === \"string\" && value.endsWith(\"[\")) {\n value = value.slice(0, -1);\n return `${value} [...]`;\n }\n };\n\n const displayValue = getDisplayValue();\n const isEmpty = displayValue === \"\" || displayValue === undefined;\n\n return (\n <>\n {isLeaf || isEmpty ? null : <ToggleIconButton isExpanded={isExpanded} />}\n <span>{displayValue}</span>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,QAAW,GAAA,CAAC,EAAE,MAAA,EAAQ,SAA8B,KAAA;AAC/D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AACjB,EAAA,IAAI,EAAE,UAAY,EAAA,MAAA,EAAQ,CAAC,IAAI,GAAG,OAAU,GAAA,OAAA;AAE5C,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,OAAA,KAAA;AAAA,eACE,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,IAAI,CAAC,KAAA,CAAM,QAAS,CAAA,KAAK,CAAC,CAAG,EAAA;AAC3B,QAAA,OAAO,GAAG,KAAK,CAAA,OAAA,CAAA;AAAA,OACV,MAAA;AACL,QAAO,OAAA,CAAA,WAAA,CAAA;AAAA;AACT,eACS,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,OAAO,GAAG,KAAK,CAAA,MAAA,CAAA;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,eAAe,eAAgB,EAAA;AACrC,EAAM,MAAA,OAAA,GAAU,YAAiB,KAAA,EAAA,IAAM,YAAiB,KAAA,KAAA,CAAA;AAExD,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,IAAU,OAAU,GAAA,IAAA,mBAAQ,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAwB,EAAA,CAAA;AAAA,oBACtE,GAAA,CAAC,UAAM,QAAa,EAAA,YAAA,EAAA;AAAA,GACtB,EAAA,CAAA;AAEJ;;;;"}
@@ -1,50 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { registerComponent } from '@vuu-ui/vuu-utils';
3
- import { Table } from '@vuu-ui/vuu-table';
4
- import { JsonDataSource } from '@vuu-ui/vuu-data-local';
5
- import { useRef, useMemo, useEffect } from 'react';
6
- import { JsonCell } from './JsonCell.js';
7
-
8
- registerComponent("json", JsonCell, "cell-renderer");
9
- const JsonTable = ({
10
- config,
11
- source: sourceProp,
12
- ...tableProps
13
- }) => {
14
- const sourceRef = useRef(sourceProp);
15
- const dataSourceRef = useRef(void 0);
16
- useMemo(() => {
17
- dataSourceRef.current = new JsonDataSource({
18
- data: sourceRef.current
19
- });
20
- }, []);
21
- const tableConfig = useMemo(() => {
22
- return {
23
- ...config,
24
- columns: dataSourceRef.current?.columnDescriptors ?? [],
25
- columnSeparators: true,
26
- rowSeparators: true
27
- };
28
- }, [config]);
29
- useEffect(() => {
30
- if (dataSourceRef.current) {
31
- dataSourceRef.current.data = sourceProp;
32
- }
33
- }, [sourceProp]);
34
- if (dataSourceRef.current === void 0) {
35
- return null;
36
- }
37
- return /* @__PURE__ */ jsx(
38
- Table,
39
- {
40
- ...tableProps,
41
- config: tableConfig,
42
- dataSource: dataSourceRef.current,
43
- showColumnHeaderMenus: false,
44
- selectionModel: "none"
45
- }
46
- );
47
- };
48
-
49
- export { JsonTable };
50
- //# sourceMappingURL=JsonTable.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JsonTable.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { JsonData, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { JsonDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { JsonCell } from \"./JsonCell\";\n\nregisterComponent(\"json\", JsonCell, \"cell-renderer\");\n\nexport interface JsonTableProps\n extends Omit<TableProps, \"config\" | \"dataSource\"> {\n config?: Pick<\n TableConfig,\n \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n >;\n source: JsonData;\n}\n\nexport const JsonTable = ({\n config,\n source: sourceProp,\n ...tableProps\n}: JsonTableProps) => {\n const sourceRef = useRef(sourceProp);\n const dataSourceRef = useRef<JsonDataSource>(undefined);\n useMemo(() => {\n dataSourceRef.current = new JsonDataSource({\n data: sourceRef.current,\n });\n }, []);\n\n const tableConfig = useMemo<TableConfig>(() => {\n return {\n ...config,\n columns: dataSourceRef.current?.columnDescriptors ?? [],\n columnSeparators: true,\n rowSeparators: true,\n };\n }, [config]);\n\n useEffect(() => {\n if (dataSourceRef.current) {\n dataSourceRef.current.data = sourceProp;\n }\n }, [sourceProp]);\n\n if (dataSourceRef.current === undefined) {\n return null;\n }\n\n return (\n <Table\n {...tableProps}\n config={tableConfig}\n dataSource={dataSourceRef.current}\n showColumnHeaderMenus={false}\n selectionModel=\"none\"\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;AAQA,iBAAkB,CAAA,MAAA,EAAQ,UAAU,eAAe,CAAA;AAW5C,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,GAAG;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,EAAM,MAAA,aAAA,GAAgB,OAAuB,KAAS,CAAA,CAAA;AACtD,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAI,cAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA;AAAA,KACjB,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,QAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,IAAA;AAAA,MAClB,aAAe,EAAA;AAAA,KACjB;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA;AAAA;AAC/B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA;AAAA;AAAA,GACjB;AAEJ;;;;"}
@@ -1,4 +0,0 @@
1
- var css = ".vuuLinkedTableView {\n \n}\n\n.vuuLinkedTableView-header {\n align-items: center;\n \n display: flex;\n flex-basis: 28px;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: var(--salt-spacing-100);\n\n .vuuTabstrip {\n width: fit-content;\n }\n\n .vuuLinkedTableView-toolTray {\n margin-left: auto;\n }\n\n}\n\n.vuuLinkedTableView-view {\n overflow: hidden;\n padding: var(--salt-spacing-100);\n}";
2
-
3
- export { css as default };
4
- //# sourceMappingURL=LinkedTableView.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LinkedTableView.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,166 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { View, Flexbox, Stack } from '@vuu-ui/vuu-layout';
3
- import { Table } from '@vuu-ui/vuu-table';
4
- import { Tabstrip, Tab } from '@vuu-ui/vuu-ui-controls';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import cx from 'clsx';
8
- import { useLinkedTableView } from './useLinkedTableView.js';
9
- import css from './LinkedTableView.css.js';
10
- import { TableLayoutToggleButton } from './TableLayoutToggleButton.js';
11
-
12
- const classBase = "vuuLinkedTableView";
13
- const LinkedTables = ({
14
- className,
15
- linkedDataSources,
16
- ...htmlAttributes
17
- }) => {
18
- const targetWindow = useWindow();
19
- useComponentCssInjection({
20
- testId: "vuu-linked-table-view",
21
- css,
22
- window: targetWindow
23
- });
24
- const { tableConfig, ...config } = useLinkedTableView({
25
- linkedDataSources
26
- });
27
- const getLinkedTables = (tdsConfig, {
28
- activeTab,
29
- onChangeTabbedView,
30
- onTabChange,
31
- tabbedView,
32
- ...levelConfig
33
- }) => Array.isArray(tdsConfig) === false ? /* @__PURE__ */ jsx(
34
- View,
35
- {
36
- ...levelConfig,
37
- header: true,
38
- resizeable: true,
39
- style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },
40
- title: tdsConfig.title,
41
- children: /* @__PURE__ */ jsx(Table, { config: tdsConfig.config, dataSource: tdsConfig.dataSource })
42
- }
43
- ) : tabbedView === 1 ? /* @__PURE__ */ jsxs(
44
- "div",
45
- {
46
- style: {
47
- display: "flex",
48
- flexDirection: "column",
49
- flexBasis: 0,
50
- flexGrow: 1,
51
- flexShrink: 1
52
- },
53
- children: [
54
- /* @__PURE__ */ jsxs("div", { className: `${classBase}-header`, children: [
55
- /* @__PURE__ */ jsx(Tabstrip, { activeTabIndex: activeTab, onActiveChange: onTabChange, children: tdsConfig.map(({ title }, i) => /* @__PURE__ */ jsx(Tab, { label: title }, i)) }),
56
- /* @__PURE__ */ jsx("div", { className: `${classBase}-toolTray`, children: /* @__PURE__ */ jsx(
57
- TableLayoutToggleButton,
58
- {
59
- onChange: onChangeTabbedView,
60
- value: tabbedView
61
- }
62
- ) })
63
- ] }),
64
- /* @__PURE__ */ jsx(
65
- Stack,
66
- {
67
- active: activeTab,
68
- "data-resizeable": true,
69
- showTabs: false,
70
- style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },
71
- children: tdsConfig.map(({ config: config2, dataSource, title }, i) => /* @__PURE__ */ jsx(
72
- "div",
73
- {
74
- className: `${classBase}-view`,
75
- style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },
76
- title,
77
- children: /* @__PURE__ */ jsx(Table, { config: config2, dataSource })
78
- },
79
- i
80
- ))
81
- },
82
- levelConfig.key
83
- )
84
- ]
85
- }
86
- ) : /* @__PURE__ */ jsxs(
87
- "div",
88
- {
89
- style: {
90
- display: "flex",
91
- flexDirection: "column",
92
- flexBasis: 0,
93
- flexGrow: 1,
94
- flexShrink: 1
95
- },
96
- children: [
97
- /* @__PURE__ */ jsxs("div", { className: `${classBase}-header`, children: [
98
- /* @__PURE__ */ jsx("div", { className: `${classBase}-flexHeaders`, children: tdsConfig.map(({ title }, i) => /* @__PURE__ */ jsx("span", { children: title }, i)) }),
99
- /* @__PURE__ */ jsx("div", { className: `${classBase}-toolTray`, children: /* @__PURE__ */ jsx(
100
- TableLayoutToggleButton,
101
- {
102
- onChange: onChangeTabbedView,
103
- value: tabbedView
104
- }
105
- ) })
106
- ] }),
107
- /* @__PURE__ */ jsx(
108
- Flexbox,
109
- {
110
- style: {
111
- flexDirection: "row",
112
- flexBasis: 0,
113
- flexGrow: 1,
114
- flexShrink: 1
115
- },
116
- children: tdsConfig.map(({ config: config2, dataSource, title }, i) => /* @__PURE__ */ jsx(
117
- "div",
118
- {
119
- className: `${classBase}-view`,
120
- "data-resizeable": true,
121
- style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },
122
- title,
123
- children: /* @__PURE__ */ jsx(Table, { config: config2, dataSource })
124
- },
125
- i
126
- ))
127
- }
128
- )
129
- ]
130
- }
131
- );
132
- const getAllLinkedTables = (level2, level3, config2) => {
133
- const results = [getLinkedTables(level2, config2.level2)];
134
- if (level3) {
135
- results.push(getLinkedTables(level3, config2.level3));
136
- }
137
- return results;
138
- };
139
- if (tableConfig) {
140
- const { "1": level1, "2": level2, "3": level3 } = tableConfig;
141
- return /* @__PURE__ */ jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: /* @__PURE__ */ jsxs(Flexbox, { style: { flexDirection: "column", height: "100%" }, children: [
142
- /* @__PURE__ */ jsx(
143
- View,
144
- {
145
- className: `${classBase}-view`,
146
- header: true,
147
- resizeable: true,
148
- style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },
149
- title: level1.title,
150
- children: /* @__PURE__ */ jsx(Table, { config: level1.config, dataSource: level1.dataSource })
151
- }
152
- ),
153
- ...getAllLinkedTables(level2, level3, config)
154
- ] }) });
155
- } else {
156
- return null;
157
- }
158
- };
159
- const LinkedTableView = ({
160
- className,
161
- linkedDataSources,
162
- ...htmlAttributes
163
- }) => /* @__PURE__ */ jsx(View, { ...htmlAttributes, className, children: /* @__PURE__ */ jsx(LinkedTables, { linkedDataSources }) });
164
-
165
- export { LinkedTableView };
166
- //# sourceMappingURL=LinkedTableView.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LinkedTableView.js","sources":["../../../../packages/vuu-datatable/src/linked-table-view/LinkedTableView.tsx"],"sourcesContent":["import { DataSource, DataSourceConstructorProps } from \"@vuu-ui/vuu-data-types\";\nimport { Flexbox, Stack, View } from \"@vuu-ui/vuu-layout\";\nimport { VuuLink } from \"@vuu-ui/vuu-protocol-types\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { Tabstrip, Tab } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport {\n LevelConfig,\n LevelsConfig,\n type TableDataSourceConfig,\n useLinkedTableView,\n} from \"./useLinkedTableView\";\n\nimport css from \"./LinkedTableView.css\";\nimport { TableLayoutToggleButton } from \"./TableLayoutToggleButton\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\n\nconst classBase = \"vuuLinkedTableView\";\n\nexport interface LinkTableConfig {\n config?: TableConfig;\n dataSource: DataSourceConstructorProps | DataSource;\n title: string;\n}\nexport interface LinkedTableConfig extends LinkTableConfig {\n /**\n * toTable will default to the table above in hierarchy. If there are multiple\n * tables in level above, toTable should be specified.\n */\n vuuLink: Pick<VuuLink, \"fromColumn\" | \"toColumn\"> & { toTable?: string };\n}\n\n/**\n * Currently supports max of three levels of hierarchical data\n * 1 = parent (required)\n * 2 = child (required)\n * 3 = grandchild (optional)\n */\nexport type LinkedDataSources = {\n \"1\": LinkTableConfig;\n \"2\": LinkedTableConfig | LinkedTableConfig[];\n \"3\"?: LinkedTableConfig | LinkedTableConfig[];\n};\n\n/**\n * Displays a vertical 'tower' of Tables with a hierarchical relationship.\n * Currently supported levels are:\n * - tier 1 - parent table(s)\n * - tier 2 - child table(s)\n * -tier 3 (optional) - grandchild table(s)\n *\n * Selection of row(s) on tables higher in the hierarchy drives the display\n * of data in tables below. Currently this is one-way, top-down only\n */\nexport interface LinkedTableViewProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Optional filter to allow externally controlled filter to be applied. This will\n * be applied to tier 1 table(s).\n * If applicable, it will also be applied to tier2/tier3 table(s) when no selection\n * is in effect from parent table, 'If applicable' means if the filter column is\n * available on tier 2/tier 3 tables).\n * If a filter is provided and it cannot be applied - because\n * column name of filter is not available in tier 1 table, an exception will be thrown.\n */\n filter?: Filter;\n linkedDataSources: LinkedDataSources;\n}\nconst LinkedTables = ({\n className,\n linkedDataSources,\n ...htmlAttributes\n}: LinkedTableViewProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-linked-table-view\",\n css: css,\n window: targetWindow,\n });\n\n const { tableConfig, ...config } = useLinkedTableView({\n linkedDataSources,\n });\n\n const getLinkedTables = (\n tdsConfig: TableDataSourceConfig | TableDataSourceConfig[],\n {\n activeTab,\n onChangeTabbedView,\n onTabChange,\n tabbedView,\n ...levelConfig\n }: LevelConfig,\n ) =>\n Array.isArray(tdsConfig) === false ? (\n <View\n {...levelConfig}\n header\n resizeable\n style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}\n title={tdsConfig.title}\n >\n <Table config={tdsConfig.config} dataSource={tdsConfig.dataSource} />\n </View>\n ) : tabbedView === 1 ? (\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n flexBasis: 0,\n flexGrow: 1,\n flexShrink: 1,\n }}\n >\n <div className={`${classBase}-header`}>\n <Tabstrip activeTabIndex={activeTab} onActiveChange={onTabChange}>\n {tdsConfig.map(({ title }, i) => (\n <Tab key={i} label={title} />\n ))}\n </Tabstrip>\n <div className={`${classBase}-toolTray`}>\n <TableLayoutToggleButton\n onChange={onChangeTabbedView}\n value={tabbedView}\n />\n </div>\n </div>\n <Stack\n active={activeTab}\n data-resizeable\n key={levelConfig.key}\n showTabs={false}\n style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}\n >\n {tdsConfig.map(({ config, dataSource, title }, i) => (\n <div\n className={`${classBase}-view`}\n key={i}\n style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}\n title={title}\n >\n <Table config={config} dataSource={dataSource} />\n </div>\n ))}\n </Stack>\n </div>\n ) : (\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n flexBasis: 0,\n flexGrow: 1,\n flexShrink: 1,\n }}\n >\n <div className={`${classBase}-header`}>\n <div className={`${classBase}-flexHeaders`}>\n {tdsConfig.map(({ title }, i) => (\n <span key={i}>{title}</span>\n ))}\n </div>\n <div className={`${classBase}-toolTray`}>\n <TableLayoutToggleButton\n onChange={onChangeTabbedView}\n value={tabbedView}\n />\n </div>\n </div>\n <Flexbox\n style={{\n flexDirection: \"row\",\n flexBasis: 0,\n flexGrow: 1,\n flexShrink: 1,\n }}\n >\n {tdsConfig.map(({ config, dataSource, title }, i) => (\n <div\n className={`${classBase}-view`}\n data-resizeable\n key={i}\n style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}\n title={title}\n >\n <Table config={config} dataSource={dataSource} />\n </div>\n ))}\n </Flexbox>\n </div>\n );\n const getAllLinkedTables = (\n level2: TableDataSourceConfig | TableDataSourceConfig[],\n level3: TableDataSourceConfig | TableDataSourceConfig[] | undefined,\n config: LevelsConfig,\n ) => {\n const results = [getLinkedTables(level2, config.level2)];\n if (level3) {\n results.push(getLinkedTables(level3, config.level3));\n }\n return results;\n };\n\n if (tableConfig) {\n const { \"1\": level1, \"2\": level2, \"3\": level3 } = tableConfig;\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <Flexbox style={{ flexDirection: \"column\", height: \"100%\" }}>\n <View\n className={`${classBase}-view`}\n header\n resizeable\n style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}\n title={level1.title}\n >\n <Table config={level1.config} dataSource={level1.dataSource} />\n </View>\n {...getAllLinkedTables(level2, level3, config)}\n </Flexbox>\n </div>\n );\n } else {\n return null;\n }\n};\n\n// Wrap the core component in View so we have access to View Context services\nexport const LinkedTableView = ({\n className,\n linkedDataSources,\n ...htmlAttributes\n}: LinkedTableViewProps) => (\n <View {...htmlAttributes} className={className}>\n <LinkedTables linkedDataSources={linkedDataSources} />\n </View>\n);\n"],"names":["config"],"mappings":"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"}
@@ -1,29 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { Icon } from '@vuu-ui/vuu-ui-controls';
3
- import { ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
4
-
5
- const TableLayoutToggleButton = (props) => {
6
- return /* @__PURE__ */ jsxs(ToggleButtonGroup, { ...props, children: [
7
- /* @__PURE__ */ jsx(
8
- ToggleButton,
9
- {
10
- className: "vuuIconToggleButton",
11
- value: 0,
12
- "aria-label": "Tabbed View",
13
- children: /* @__PURE__ */ jsx(Icon, { name: "split-v", size: 18 })
14
- }
15
- ),
16
- /* @__PURE__ */ jsx(
17
- ToggleButton,
18
- {
19
- className: "vuuIconToggleButton",
20
- value: 1,
21
- "aria-label": "Side by side view",
22
- children: /* @__PURE__ */ jsx(Icon, { name: "tabs", size: 18 })
23
- }
24
- )
25
- ] });
26
- };
27
-
28
- export { TableLayoutToggleButton };
29
- //# sourceMappingURL=TableLayoutToggleButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TableLayoutToggleButton.js","sources":["../../../../packages/vuu-datatable/src/linked-table-view/TableLayoutToggleButton.tsx"],"sourcesContent":["import { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n ToggleButton,\n ToggleButtonGroup,\n ToggleButtonGroupProps,\n} from \"@salt-ds/core\";\n\nexport const TableLayoutToggleButton = (props: ToggleButtonGroupProps) => {\n return (\n <ToggleButtonGroup {...props}>\n <ToggleButton\n className=\"vuuIconToggleButton\"\n value={0}\n aria-label=\"Tabbed View\"\n >\n <Icon name=\"split-v\" size={18} />\n </ToggleButton>\n <ToggleButton\n className=\"vuuIconToggleButton\"\n value={1}\n aria-label=\"Side by side view\"\n >\n <Icon name=\"tabs\" size={18} />\n </ToggleButton>\n </ToggleButtonGroup>\n );\n};\n"],"names":[],"mappings":";;;;AAOa,MAAA,uBAAA,GAA0B,CAAC,KAAkC,KAAA;AACxE,EACE,uBAAA,IAAA,CAAC,iBAAmB,EAAA,EAAA,GAAG,KACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,qBAAA;AAAA,QACV,KAAO,EAAA,CAAA;AAAA,QACP,YAAW,EAAA,aAAA;AAAA,QAEX,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,SAAA,EAAU,MAAM,EAAI,EAAA;AAAA;AAAA,KACjC;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,qBAAA;AAAA,QACV,KAAO,EAAA,CAAA;AAAA,QACP,YAAW,EAAA,mBAAA;AAAA,QAEX,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,MAAA,EAAO,MAAM,EAAI,EAAA;AAAA;AAAA;AAC9B,GACF,EAAA,CAAA;AAEJ;;;;"}
@@ -1,208 +0,0 @@
1
- import { useData } from '@vuu-ui/vuu-utils';
2
- import { useState, useMemo, useCallback } from 'react';
3
-
4
- const getSchema = (schemas, { module, table }) => {
5
- const schema = schemas.find(
6
- ({ table: t }) => t.module === module && t.table === table
7
- );
8
- if (schema) {
9
- return schema;
10
- } else {
11
- throw Error(`No schema for table ${module} ${table}`);
12
- }
13
- };
14
- const getTable = (ds) => {
15
- if (ds.table) {
16
- return ds.table;
17
- } else {
18
- throw Error("No datasource table specified");
19
- }
20
- };
21
- const getTables = (linkedDataSources) => {
22
- const { "1": linked1, "2": linked2, "3": linked3 } = linkedDataSources;
23
- const tables = [];
24
- tables.push(getTable(linked1.dataSource));
25
- if (Array.isArray(linked2)) {
26
- linked2.forEach(({ dataSource }) => {
27
- tables.push(getTable(dataSource));
28
- });
29
- } else {
30
- tables.push(getTable(linked2.dataSource));
31
- }
32
- if (Array.isArray(linked3)) {
33
- linked3.forEach(({ dataSource }) => {
34
- tables.push(getTable(dataSource));
35
- });
36
- } else if (linked3) {
37
- tables.push(getTable(linked3.dataSource));
38
- }
39
- return tables;
40
- };
41
- const useLinkedTableView = ({
42
- linkedDataSources
43
- }) => {
44
- const { VuuDataSource, getServerAPI } = useData();
45
- const [tableConfig, setTableConfig] = useState();
46
- const [activeTabs, setActiveTab] = useState([
47
- 0,
48
- 0,
49
- 0
50
- ]);
51
- const [collapsed, setCollapsed] = useState([
52
- false,
53
- false
54
- ]);
55
- const [tabbedView, setTabbedView] = useState([1, 1]);
56
- useMemo(async () => {
57
- const tables = getTables(linkedDataSources);
58
- const serverAPI = await getServerAPI();
59
- const schemas = await Promise.all(tables.map(serverAPI.getTableSchema));
60
- const isDataSource = (ds) => typeof ds === typeof VuuDataSource;
61
- const getDataSource = (ds) => {
62
- if (isDataSource(ds)) {
63
- return ds;
64
- } else {
65
- return new VuuDataSource(ds);
66
- }
67
- };
68
- const createVisualLink = (vuuLink, parentDs) => {
69
- if (parentDs && parentDs.table) {
70
- const parentVpId = parentDs.viewport;
71
- const toTable = vuuLink.toTable ?? parentDs.table?.table;
72
- return {
73
- link: {
74
- ...vuuLink,
75
- toTable
76
- },
77
- parentClientVpId: parentVpId,
78
- parentVpId
79
- };
80
- } else {
81
- throw Error("visual link cannot be created without parent vp id");
82
- }
83
- };
84
- const getLinkedDataSource = (ds, vuuLink, parentDs) => {
85
- if (isDataSource(ds)) {
86
- return ds;
87
- } else {
88
- return new VuuDataSource({
89
- ...ds,
90
- visualLink: createVisualLink(vuuLink, parentDs)
91
- });
92
- }
93
- };
94
- const getTableConfig = (ds) => {
95
- const schema = getSchema(schemas, getTable(ds));
96
- return {
97
- columns: schema.columns
98
- };
99
- };
100
- const getRootConfig = ({
101
- dataSource: ds,
102
- title
103
- }) => ({
104
- config: getTableConfig(ds),
105
- dataSource: getDataSource(ds),
106
- title
107
- });
108
- const getLinkedConfig = ({ dataSource: ds, vuuLink, title }, parentDataSource) => ({
109
- config: getTableConfig(ds),
110
- dataSource: getLinkedDataSource(ds, vuuLink, parentDataSource),
111
- title
112
- });
113
- const getLinkedConfigs = (linkedTableConfig, parentDataSource) => {
114
- if (Array.isArray(linkedTableConfig)) {
115
- return linkedTableConfig.map(
116
- (config) => getLinkedConfig(config, parentDataSource)
117
- );
118
- } else {
119
- return getLinkedConfig(linkedTableConfig, parentDataSource);
120
- }
121
- };
122
- const { "1": level1, "2": level2, "3": level3 } = linkedDataSources;
123
- const configLevel1 = getRootConfig(level1);
124
- const configLevel2 = getLinkedConfigs(level2, configLevel1.dataSource);
125
- const dsLevel2 = Array.isArray(configLevel2) ? void 0 : configLevel2.dataSource;
126
- const configLevel3 = level3 ? getLinkedConfigs(level3, dsLevel2) : void 0;
127
- const results = {
128
- "1": configLevel1,
129
- "2": configLevel2,
130
- "3": configLevel3
131
- };
132
- setTableConfig(results);
133
- }, [VuuDataSource, getServerAPI, linkedDataSources]);
134
- const handleTabChangeLevel1 = useCallback((tabIndex) => {
135
- setActiveTab(([, v2, v3]) => [tabIndex, v2, v3]);
136
- }, []);
137
- const handleTabChangeLevel2 = useCallback((tabIndex) => {
138
- setActiveTab(([v1, , v3]) => [v1, tabIndex, v3]);
139
- }, []);
140
- const handleTabChangeLevel3 = useCallback((tabIndex) => {
141
- setActiveTab(([v1, v2]) => [v1, v2, tabIndex]);
142
- }, []);
143
- const handleCollapseLevel2 = useCallback(() => {
144
- setCollapsed(([, val]) => [true, val]);
145
- }, []);
146
- const handleExpandLevel2 = useCallback(() => {
147
- setCollapsed(([, val]) => [false, val]);
148
- }, []);
149
- const handleCollapseLevel3 = useCallback(() => {
150
- setCollapsed(([val]) => [val, true]);
151
- }, []);
152
- const handleExpandLevel3 = useCallback(() => {
153
- setCollapsed(([val]) => [val, false]);
154
- }, []);
155
- const handleChangeTabbedView2 = useCallback(
156
- (evt) => {
157
- const target = evt.target;
158
- const button = target?.closest("button");
159
- if (button) {
160
- const value = parseInt(button.value);
161
- setTabbedView(([, val]) => [value, val]);
162
- }
163
- },
164
- []
165
- );
166
- const handleChangeTabbedView3 = useCallback(
167
- (evt) => {
168
- const target = evt.target;
169
- const button = target?.closest("button");
170
- if (button) {
171
- const value = parseInt(button.value);
172
- setTabbedView(([val]) => [val, value]);
173
- }
174
- },
175
- []
176
- );
177
- return {
178
- level1: {
179
- activeTab: activeTabs[0],
180
- key: "level1",
181
- onTabChange: handleTabChangeLevel1
182
- },
183
- level2: {
184
- activeTab: activeTabs[1],
185
- collapsed: collapsed[0],
186
- key: "level2",
187
- onChangeTabbedView: handleChangeTabbedView2,
188
- onCollapse: handleCollapseLevel2,
189
- onExpand: handleExpandLevel2,
190
- onTabChange: handleTabChangeLevel2,
191
- tabbedView: tabbedView[0]
192
- },
193
- level3: {
194
- activeTab: activeTabs[2],
195
- collapsed: collapsed[1],
196
- key: "level3",
197
- onChangeTabbedView: handleChangeTabbedView3,
198
- onCollapse: handleCollapseLevel3,
199
- onExpand: handleExpandLevel3,
200
- onTabChange: handleTabChangeLevel3,
201
- tabbedView: tabbedView[1]
202
- },
203
- tableConfig
204
- };
205
- };
206
-
207
- export { useLinkedTableView };
208
- //# sourceMappingURL=useLinkedTableView.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useLinkedTableView.js","sources":["../../../../packages/vuu-datatable/src/linked-table-view/useLinkedTableView.ts"],"sourcesContent":["import {\n DataSource,\n DataSourceConstructorProps,\n TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useData } from \"@vuu-ui/vuu-utils\";\nimport {\n LinkedDataSources,\n LinkedTableConfig,\n LinkedTableViewProps,\n LinkTableConfig,\n} from \"./LinkedTableView\";\nimport { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { LinkDescriptorWithLabel, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n// import { useViewContext } from \"@vuu-ui/vuu-layout\";\n\nexport type TableDataSourceConfig = {\n config: TableConfig;\n dataSource: DataSource;\n title: string;\n};\n\nexport type ResolvedTableConfig = {\n \"1\": TableDataSourceConfig;\n \"2\": TableDataSourceConfig | TableDataSourceConfig[];\n \"3\"?: TableDataSourceConfig | TableDataSourceConfig[];\n};\n\nexport type LinkedTableViewHookProps = Pick<\n LinkedTableViewProps,\n \"linkedDataSources\"\n>;\n\nconst getSchema = (schemas: TableSchema[], { module, table }: VuuTable) => {\n const schema = schemas.find(\n ({ table: t }) => t.module === module && t.table === table,\n );\n if (schema) {\n return schema;\n } else {\n throw Error(`No schema for table ${module} ${table}`);\n }\n};\n\nconst getTable = (ds: DataSource | DataSourceConstructorProps): VuuTable => {\n if (ds.table) {\n return ds.table;\n } else {\n throw Error(\"No datasource table specified\");\n }\n};\n\nconst getTables = (linkedDataSources: LinkedDataSources): VuuTable[] => {\n const { \"1\": linked1, \"2\": linked2, \"3\": linked3 } = linkedDataSources;\n\n const tables: VuuTable[] = [];\n\n tables.push(getTable(linked1.dataSource));\n\n if (Array.isArray(linked2)) {\n linked2.forEach(({ dataSource }) => {\n tables.push(getTable(dataSource));\n });\n } else {\n tables.push(getTable(linked2.dataSource));\n }\n\n if (Array.isArray(linked3)) {\n linked3.forEach(({ dataSource }) => {\n tables.push(getTable(dataSource));\n });\n } else if (linked3) {\n tables.push(getTable(linked3.dataSource));\n }\n\n return tables;\n};\n\nexport const useLinkedTableView = ({\n linkedDataSources,\n}: LinkedTableViewHookProps) => {\n const { VuuDataSource, getServerAPI } = useData();\n const [tableConfig, setTableConfig] = useState<\n ResolvedTableConfig | undefined\n >();\n // const { id } = useViewContext();\n const [activeTabs, setActiveTab] = useState<[number, number, number]>([\n 0, 0, 0,\n ]);\n const [collapsed, setCollapsed] = useState<[boolean, boolean]>([\n false,\n false,\n ]);\n const [tabbedView, setTabbedView] = useState<[0 | 1, 0 | 1]>([1, 1]);\n\n useMemo(async () => {\n const tables = getTables(linkedDataSources);\n const serverAPI = await getServerAPI();\n const schemas = await Promise.all(tables.map(serverAPI.getTableSchema));\n\n const isDataSource = (\n ds: DataSourceConstructorProps | DataSource,\n ): ds is DataSource => typeof ds === typeof VuuDataSource;\n\n const getDataSource = (\n ds: DataSourceConstructorProps | DataSource,\n ): DataSource => {\n if (isDataSource(ds)) {\n return ds;\n } else {\n return new VuuDataSource(ds);\n }\n };\n\n const createVisualLink = (\n vuuLink: LinkedTableConfig[\"vuuLink\"],\n parentDs?: DataSource,\n ) => {\n if (parentDs && parentDs.table) {\n const parentVpId = parentDs.viewport;\n const toTable = vuuLink.toTable ?? parentDs.table?.table;\n\n return {\n link: {\n ...vuuLink,\n toTable,\n },\n parentClientVpId: parentVpId,\n parentVpId,\n } as LinkDescriptorWithLabel;\n } else {\n throw Error(\"visual link cannot be created without parent vp id\");\n }\n };\n\n const getLinkedDataSource = (\n ds: DataSourceConstructorProps | DataSource,\n vuuLink: LinkedTableConfig[\"vuuLink\"],\n parentDs?: DataSource,\n ): DataSource => {\n if (isDataSource(ds)) {\n return ds;\n } else {\n return new VuuDataSource({\n ...ds,\n visualLink: createVisualLink(vuuLink, parentDs),\n });\n }\n };\n\n const getTableConfig = (ds: DataSourceConstructorProps | DataSource) => {\n const schema = getSchema(schemas, getTable(ds));\n return {\n columns: schema.columns,\n };\n };\n\n const getRootConfig = ({\n dataSource: ds,\n title,\n }: LinkTableConfig): TableDataSourceConfig => ({\n config: getTableConfig(ds),\n dataSource: getDataSource(ds),\n title,\n });\n\n const getLinkedConfig = (\n { dataSource: ds, vuuLink, title }: LinkedTableConfig,\n parentDataSource?: DataSource,\n ): TableDataSourceConfig => ({\n config: getTableConfig(ds),\n dataSource: getLinkedDataSource(ds, vuuLink, parentDataSource),\n title,\n });\n\n const getLinkedConfigs = (\n linkedTableConfig: LinkedTableConfig | LinkedTableConfig[],\n parentDataSource?: DataSource,\n ): TableDataSourceConfig | TableDataSourceConfig[] => {\n if (Array.isArray(linkedTableConfig)) {\n return linkedTableConfig.map((config) =>\n getLinkedConfig(config, parentDataSource),\n );\n } else {\n return getLinkedConfig(linkedTableConfig, parentDataSource);\n }\n };\n\n const { \"1\": level1, \"2\": level2, \"3\": level3 } = linkedDataSources;\n\n const configLevel1 = getRootConfig(level1);\n const configLevel2 = getLinkedConfigs(level2, configLevel1.dataSource);\n const dsLevel2 = Array.isArray(configLevel2)\n ? undefined\n : configLevel2.dataSource;\n const configLevel3 = level3\n ? getLinkedConfigs(level3, dsLevel2)\n : undefined;\n\n const results: ResolvedTableConfig = {\n \"1\": configLevel1,\n \"2\": configLevel2,\n \"3\": configLevel3,\n };\n setTableConfig(results);\n }, [VuuDataSource, getServerAPI, linkedDataSources]);\n\n const handleTabChangeLevel1 = useCallback((tabIndex: number) => {\n setActiveTab(([, v2, v3]) => [tabIndex, v2, v3]);\n }, []);\n const handleTabChangeLevel2 = useCallback((tabIndex: number) => {\n setActiveTab(([v1, , v3]) => [v1, tabIndex, v3]);\n }, []);\n const handleTabChangeLevel3 = useCallback((tabIndex: number) => {\n setActiveTab(([v1, v2]) => [v1, v2, tabIndex]);\n }, []);\n\n const handleCollapseLevel2 = useCallback(() => {\n setCollapsed(([, val]) => [true, val]);\n }, []);\n const handleExpandLevel2 = useCallback(() => {\n setCollapsed(([, val]) => [false, val]);\n }, []);\n const handleCollapseLevel3 = useCallback(() => {\n setCollapsed(([val]) => [val, true]);\n }, []);\n const handleExpandLevel3 = useCallback(() => {\n setCollapsed(([val]) => [val, false]);\n }, []);\n\n const handleChangeTabbedView2 = useCallback(\n (evt: SyntheticEvent<HTMLElement>) => {\n const target = evt.target as HTMLElement;\n const button = target?.closest(\"button\");\n if (button) {\n const value = parseInt(button.value) as 0 | 1;\n setTabbedView(([, val]) => [value, val]);\n }\n },\n [],\n );\n const handleChangeTabbedView3 = useCallback(\n (evt: SyntheticEvent<HTMLElement>) => {\n const target = evt.target as HTMLElement;\n const button = target?.closest(\"button\");\n if (button) {\n const value = parseInt(button.value) as 0 | 1;\n setTabbedView(([val]) => [val, value]);\n }\n },\n [],\n );\n\n return {\n level1: {\n activeTab: activeTabs[0],\n key: \"level1\",\n onTabChange: handleTabChangeLevel1,\n },\n level2: {\n activeTab: activeTabs[1],\n collapsed: collapsed[0],\n key: \"level2\",\n onChangeTabbedView: handleChangeTabbedView2,\n onCollapse: handleCollapseLevel2,\n onExpand: handleExpandLevel2,\n onTabChange: handleTabChangeLevel2,\n tabbedView: tabbedView[0],\n },\n level3: {\n activeTab: activeTabs[2],\n collapsed: collapsed[1],\n key: \"level3\",\n onChangeTabbedView: handleChangeTabbedView3,\n onCollapse: handleCollapseLevel3,\n onExpand: handleExpandLevel3,\n onTabChange: handleTabChangeLevel3,\n tabbedView: tabbedView[1],\n },\n tableConfig,\n };\n};\n\nexport type LevelsConfig = {\n level1: LevelConfig;\n level2: LevelConfig;\n level3: LevelConfig;\n};\n\nexport type LevelConfig = {\n activeTab: number;\n key: string;\n collapsed?: boolean;\n onChangeTabbedView?: (evt: SyntheticEvent<HTMLElement>) => void;\n onCollapse?: () => void;\n onTabChange?: (tabIndex: number) => void;\n onExpand?: () => void;\n tabbedView?: 0 | 1;\n};\n"],"names":[],"mappings":"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"}
@@ -1,53 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { Table } from '@vuu-ui/vuu-table';
3
- import { TreeDataSource } from '@vuu-ui/vuu-data-local';
4
- import { useRef, useMemo } from 'react';
5
-
6
- const TreeTable = ({
7
- config,
8
- dataSource,
9
- source,
10
- ...tableProps
11
- }) => {
12
- const dataSourceRef = useRef(void 0);
13
- useMemo(() => {
14
- if (dataSource) {
15
- dataSourceRef.current = dataSource;
16
- } else if (source) {
17
- dataSourceRef.current = new TreeDataSource({
18
- data: source
19
- });
20
- } else {
21
- throw Error(`TreeTable either source or dataSource must be provided`);
22
- }
23
- }, [dataSource, source]);
24
- const tableConfig = useMemo(() => {
25
- return {
26
- ...config,
27
- columns: dataSourceRef.current?.columnDescriptors ?? [],
28
- columnSeparators: false,
29
- selectionBookendWidth: 0,
30
- rowSeparators: false
31
- };
32
- }, [config]);
33
- console.log({ tableConfig, dataSource: dataSourceRef.current });
34
- if (dataSourceRef.current === void 0) {
35
- return null;
36
- }
37
- return /* @__PURE__ */ jsx(
38
- Table,
39
- {
40
- ...tableProps,
41
- className: "vuuTreeTable",
42
- config: tableConfig,
43
- dataSource: dataSourceRef.current,
44
- groupToggleTarget: "toggle-icon",
45
- navigationStyle: "tree",
46
- showColumnHeaderMenus: false,
47
- selectionModel: "single"
48
- }
49
- );
50
- };
51
-
52
- export { TreeTable };
53
- //# sourceMappingURL=TreeTable.js.map