@agilant/toga-blox 1.0.97 → 1.0.99
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.
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CellProps } from "react-table";
|
|
3
|
+
/** The shape your library expects for each column's config */
|
|
4
|
+
export interface SharedColumnConfig {
|
|
5
|
+
key: string;
|
|
6
|
+
type?: string;
|
|
7
|
+
linkClasses?: string;
|
|
8
|
+
leftIcon?: string;
|
|
9
|
+
rightIcon?: string;
|
|
10
|
+
leftImage?: string;
|
|
11
|
+
rightImage?: string;
|
|
12
|
+
transform?: (value: any) => any;
|
|
13
|
+
}
|
|
14
|
+
/** The shape of the columns you return to React Table */
|
|
15
|
+
export interface TableColumn {
|
|
16
|
+
Header: string | (() => JSX.Element);
|
|
17
|
+
accessor: string;
|
|
18
|
+
Cell: (props: CellProps<{
|
|
19
|
+
[key: string]: string | React.ReactElement;
|
|
20
|
+
}, string | React.ReactElement>) => JSX.Element;
|
|
21
|
+
sticky?: "left" | "right";
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* The "renderers" your app provides for icons, images, statuses, currencies, etc.
|
|
25
|
+
*/
|
|
26
|
+
export interface Renderers {
|
|
27
|
+
renderIcon?: (iconName: string, style?: "solid" | "regular") => JSX.Element;
|
|
28
|
+
renderImage?: (props: {
|
|
29
|
+
imageUrl: string;
|
|
30
|
+
altText: string;
|
|
31
|
+
className?: string;
|
|
32
|
+
width?: number;
|
|
33
|
+
height?: number;
|
|
34
|
+
}) => JSX.Element;
|
|
35
|
+
renderStatus?: (value: string, extra?: any) => JSX.Element;
|
|
36
|
+
renderCurrency?: (value: string) => string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* The main function that shapes columns for React Table.
|
|
40
|
+
* - `columnTitles`: array of column headers
|
|
41
|
+
* - `accessors`: array of "col1", "col2", ...
|
|
42
|
+
* - `columnConfigs`: array of raw backend configs (with booleans)
|
|
43
|
+
* - `renderers`: your app's icon/image/status/currency callbacks
|
|
44
|
+
*/
|
|
45
|
+
declare function formatTableData(columnTitles: string[], accessors: string[], columnConfigs: any[], renderers?: Renderers): TableColumn[];
|
|
46
|
+
/**
|
|
47
|
+
* Helper to generate "col1", "col2", "col3", etc.
|
|
48
|
+
*/
|
|
49
|
+
declare function generateAccessors(columnTitles: string[]): string[];
|
|
50
|
+
export { formatTableData, generateAccessors };
|
|
51
|
+
declare const _default: {
|
|
52
|
+
formatTableData: typeof formatTableData;
|
|
53
|
+
generateAccessors: typeof generateAccessors;
|
|
54
|
+
};
|
|
55
|
+
export default _default;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Convert your backend booleans (e.g. `hasStatus`, `hasCurrency`)
|
|
4
|
+
* into the library's expected fields (`type: "STATUS"`, `type: "CURRENCY"`, etc.).
|
|
5
|
+
*/
|
|
6
|
+
function transformBackendConfig(backendConfig) {
|
|
7
|
+
const finalConfig = {
|
|
8
|
+
key: backendConfig.key,
|
|
9
|
+
type: backendConfig.type ?? "DEFAULT",
|
|
10
|
+
linkClasses: backendConfig.linkClasses ?? "",
|
|
11
|
+
transform: backendConfig.transform,
|
|
12
|
+
};
|
|
13
|
+
if (backendConfig.hasStatus) {
|
|
14
|
+
finalConfig.type = "STATUS";
|
|
15
|
+
}
|
|
16
|
+
if (backendConfig.hasCurrency) {
|
|
17
|
+
finalConfig.type = "CURRENCY";
|
|
18
|
+
}
|
|
19
|
+
if (backendConfig.hasLeftIcon) {
|
|
20
|
+
finalConfig.leftIcon = "check"; // Or any icon name
|
|
21
|
+
}
|
|
22
|
+
if (backendConfig.hasRightIcon) {
|
|
23
|
+
finalConfig.rightIcon = "arrowRight"; // Or any icon name
|
|
24
|
+
}
|
|
25
|
+
if (backendConfig.hasLeftImage) {
|
|
26
|
+
finalConfig.leftImage = "https://example.com/placeholder.png";
|
|
27
|
+
}
|
|
28
|
+
if (backendConfig.hasRightImage) {
|
|
29
|
+
finalConfig.rightImage = "https://example.com/placeholder.png";
|
|
30
|
+
}
|
|
31
|
+
return finalConfig;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* The main function that shapes columns for React Table.
|
|
35
|
+
* - `columnTitles`: array of column headers
|
|
36
|
+
* - `accessors`: array of "col1", "col2", ...
|
|
37
|
+
* - `columnConfigs`: array of raw backend configs (with booleans)
|
|
38
|
+
* - `renderers`: your app's icon/image/status/currency callbacks
|
|
39
|
+
*/
|
|
40
|
+
function formatTableData(columnTitles, accessors, columnConfigs, renderers = {}) {
|
|
41
|
+
/**
|
|
42
|
+
* Creates the "Cell" renderer for each column,
|
|
43
|
+
* checking icons/images or type fields,
|
|
44
|
+
* then calling the relevant `renderers` method.
|
|
45
|
+
*/
|
|
46
|
+
function renderCellContent(config) {
|
|
47
|
+
return ({ value }) => {
|
|
48
|
+
// 1. Check icons/images
|
|
49
|
+
if (config.leftIcon && renderers.renderIcon) {
|
|
50
|
+
const icon = (_jsx("div", { className: "pr-2", children: renderers.renderIcon(config.leftIcon, "solid") }));
|
|
51
|
+
return renderContent(config, value, icon, "left");
|
|
52
|
+
}
|
|
53
|
+
if (config.rightIcon && renderers.renderIcon) {
|
|
54
|
+
const icon = (_jsx("div", { className: "pl-2", children: renderers.renderIcon(config.rightIcon, "solid") }));
|
|
55
|
+
return renderContent(config, value, icon, "right");
|
|
56
|
+
}
|
|
57
|
+
if (config.leftImage && renderers.renderImage) {
|
|
58
|
+
const image = (_jsx("div", { className: "pr-2", children: renderers.renderImage({
|
|
59
|
+
imageUrl: config.leftImage,
|
|
60
|
+
altText: "Image",
|
|
61
|
+
width: 30,
|
|
62
|
+
height: 30,
|
|
63
|
+
}) }));
|
|
64
|
+
return renderContent(config, value, image, "left");
|
|
65
|
+
}
|
|
66
|
+
if (config.rightImage && renderers.renderImage) {
|
|
67
|
+
const image = (_jsx("div", { className: "pl-2", children: renderers.renderImage({
|
|
68
|
+
imageUrl: config.rightImage,
|
|
69
|
+
altText: "Image",
|
|
70
|
+
width: 30,
|
|
71
|
+
height: 30,
|
|
72
|
+
}) }));
|
|
73
|
+
return renderContent(config, value, image, "right");
|
|
74
|
+
}
|
|
75
|
+
// 2. Check type
|
|
76
|
+
switch (config.type) {
|
|
77
|
+
case "STATUS":
|
|
78
|
+
if (renderers.renderStatus && typeof value === "string") {
|
|
79
|
+
return renderContent(config, value, renderers.renderStatus(value));
|
|
80
|
+
}
|
|
81
|
+
break;
|
|
82
|
+
case "CURRENCY":
|
|
83
|
+
if (renderers.renderCurrency && typeof value === "string") {
|
|
84
|
+
const formatted = renderers.renderCurrency(value);
|
|
85
|
+
return renderContent(config, formatted);
|
|
86
|
+
}
|
|
87
|
+
break;
|
|
88
|
+
// Add other types if needed
|
|
89
|
+
}
|
|
90
|
+
// 3. Otherwise, raw text
|
|
91
|
+
return (_jsx("div", { style: { display: "flex", alignItems: "center" }, children: typeof value === "string" ? _jsx("p", { children: value }) : value }));
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Helper that wraps the cell in <div> or <a>,
|
|
96
|
+
* optionally placing icons left/right.
|
|
97
|
+
*/
|
|
98
|
+
function renderContent(config, value, content, position) {
|
|
99
|
+
return (_jsx("div", { style: { display: "flex", alignItems: "center" }, className: "flex w-full", children: config.linkClasses ? (_jsxs("a", { href: "#", className: `flex ${config.linkClasses}`, onClick: (e) => e.stopPropagation(), children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) : (_jsxs(_Fragment, { children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) }));
|
|
100
|
+
}
|
|
101
|
+
// Build columns, mapping each "raw config" through `transformBackendConfig`
|
|
102
|
+
const columns = columnTitles.map((title, i) => {
|
|
103
|
+
const accessor = accessors[i];
|
|
104
|
+
const key = `col${i + 1}`;
|
|
105
|
+
// 1) Find the raw config from your backend array
|
|
106
|
+
const rawBackendConfig = columnConfigs.find((c) => c.key === key) || {
|
|
107
|
+
key,
|
|
108
|
+
type: "DEFAULT",
|
|
109
|
+
};
|
|
110
|
+
// 2) Convert booleans => library fields
|
|
111
|
+
const config = transformBackendConfig(rawBackendConfig);
|
|
112
|
+
return {
|
|
113
|
+
Header: title,
|
|
114
|
+
accessor,
|
|
115
|
+
Cell: ({ value }) => renderCellContent(config)({ value }),
|
|
116
|
+
};
|
|
117
|
+
});
|
|
118
|
+
return columns;
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Helper to generate "col1", "col2", "col3", etc.
|
|
122
|
+
*/
|
|
123
|
+
function generateAccessors(columnTitles) {
|
|
124
|
+
return columnTitles.map((_, index) => `col${index + 1}`);
|
|
125
|
+
}
|
|
126
|
+
// Named exports
|
|
127
|
+
export { formatTableData, generateAccessors };
|
|
128
|
+
// Default export object (so you can import the entire thing as default if you want)
|
|
129
|
+
export default {
|
|
130
|
+
formatTableData,
|
|
131
|
+
generateAccessors,
|
|
132
|
+
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CellProps } from "react-table";
|
|
3
|
-
/** Config each column might have */
|
|
4
3
|
export interface SharedColumnConfig {
|
|
5
4
|
key: string;
|
|
6
5
|
type?: string;
|
|
@@ -11,7 +10,6 @@ export interface SharedColumnConfig {
|
|
|
11
10
|
rightImage?: string;
|
|
12
11
|
transform?: (value: any) => any;
|
|
13
12
|
}
|
|
14
|
-
/** Minimally typed shape for returned React Table columns */
|
|
15
13
|
export interface TableColumn {
|
|
16
14
|
Header: string | (() => JSX.Element);
|
|
17
15
|
accessor: string;
|
|
@@ -20,10 +18,6 @@ export interface TableColumn {
|
|
|
20
18
|
}, string | React.ReactElement>) => JSX.Element;
|
|
21
19
|
sticky?: "left" | "right";
|
|
22
20
|
}
|
|
23
|
-
/**
|
|
24
|
-
* Callbacks for each app to provide their own "implementation details":
|
|
25
|
-
* - e.g. how to render icons, how to handle images, etc.
|
|
26
|
-
*/
|
|
27
21
|
export interface Renderers {
|
|
28
22
|
renderIcon?: (iconName: string, style?: "solid" | "regular") => JSX.Element;
|
|
29
23
|
renderImage?: (props: {
|
|
@@ -37,11 +31,12 @@ export interface Renderers {
|
|
|
37
31
|
renderCurrency?: (value: string) => string;
|
|
38
32
|
}
|
|
39
33
|
/**
|
|
40
|
-
*
|
|
41
|
-
|
|
34
|
+
* The main library function that shapes columns
|
|
35
|
+
*/
|
|
36
|
+
declare function formatTableData(columnTitles: string[], accessors: string[], columnConfigs: any[], renderers?: Renderers): TableColumn[];
|
|
37
|
+
/**
|
|
38
|
+
* Generate "col1", "col2", etc.
|
|
42
39
|
*/
|
|
43
|
-
declare function formatTableData(columnTitles: string[], accessors: string[], columnConfigs: SharedColumnConfig[], renderers?: Renderers): TableColumn[];
|
|
44
|
-
/** Simple helper to generate the default "col1", "col2", ... accessors */
|
|
45
40
|
declare function generateAccessors(columnTitles: string[]): string[];
|
|
46
41
|
export { formatTableData, generateAccessors };
|
|
47
42
|
declare const _default: {
|
|
@@ -1,7 +1,33 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
function transformBackendConfig(backendConfig) {
|
|
3
|
+
const finalConfig = {
|
|
4
|
+
key: backendConfig.key,
|
|
5
|
+
type: backendConfig.type ?? "DEFAULT",
|
|
6
|
+
linkClasses: backendConfig.linkClasses ?? "",
|
|
7
|
+
transform: backendConfig.transform,
|
|
8
|
+
};
|
|
9
|
+
if (backendConfig.hasStatus) {
|
|
10
|
+
finalConfig.type = "STATUS";
|
|
11
|
+
}
|
|
12
|
+
if (backendConfig.hasCurrency) {
|
|
13
|
+
finalConfig.type = "CURRENCY";
|
|
14
|
+
}
|
|
15
|
+
if (backendConfig.hasLeftIcon) {
|
|
16
|
+
finalConfig.leftIcon = "check";
|
|
17
|
+
}
|
|
18
|
+
if (backendConfig.hasRightIcon) {
|
|
19
|
+
finalConfig.rightIcon = "arrowRight";
|
|
20
|
+
}
|
|
21
|
+
if (backendConfig.hasLeftImage) {
|
|
22
|
+
finalConfig.leftImage = "https://example.com/placeholder.png";
|
|
23
|
+
}
|
|
24
|
+
if (backendConfig.hasRightImage) {
|
|
25
|
+
finalConfig.rightImage = "https://example.com/placeholder.png";
|
|
26
|
+
}
|
|
27
|
+
return finalConfig;
|
|
28
|
+
}
|
|
2
29
|
/**
|
|
3
|
-
*
|
|
4
|
-
* This version delegates certain rendering details to the `renderers`.
|
|
30
|
+
* The main library function that shapes columns
|
|
5
31
|
*/
|
|
6
32
|
function formatTableData(columnTitles, accessors, columnConfigs, renderers = {}) {
|
|
7
33
|
function renderCellContent(config) {
|
|
@@ -33,7 +59,6 @@ function formatTableData(columnTitles, accessors, columnConfigs, renderers = {})
|
|
|
33
59
|
}) }));
|
|
34
60
|
return renderContent(config, value, image, "right");
|
|
35
61
|
}
|
|
36
|
-
// 2. Check type (CURRENCY, STATUS, etc.)
|
|
37
62
|
switch (config.type) {
|
|
38
63
|
case "STATUS":
|
|
39
64
|
if (renderers.renderStatus && typeof value === "string") {
|
|
@@ -46,35 +71,32 @@ function formatTableData(columnTitles, accessors, columnConfigs, renderers = {})
|
|
|
46
71
|
return renderContent(config, formatted);
|
|
47
72
|
}
|
|
48
73
|
break;
|
|
49
|
-
// Add other type cases (BOOLEAN, NUMBER, DATE, etc.) as you see fit
|
|
50
74
|
}
|
|
51
|
-
// 3. If we get here, just render raw text
|
|
52
75
|
return (_jsx("div", { style: { display: "flex", alignItems: "center" }, children: typeof value === "string" ? _jsx("p", { children: value }) : value }));
|
|
53
76
|
};
|
|
54
77
|
}
|
|
55
78
|
function renderContent(config, value, content, position) {
|
|
56
79
|
return (_jsx("div", { style: { display: "flex", alignItems: "center" }, className: "flex w-full", children: config.linkClasses ? (_jsxs("a", { href: "#", className: `flex ${config.linkClasses}`, onClick: (e) => e.stopPropagation(), children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) : (_jsxs(_Fragment, { children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) }));
|
|
57
80
|
}
|
|
58
|
-
// Map each title to a column definition
|
|
59
81
|
const columns = columnTitles.map((title, i) => {
|
|
60
82
|
const accessor = accessors[i];
|
|
61
83
|
const key = `col${i + 1}`;
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
84
|
+
const rawBackendConfig = columnConfigs.find((c) => c.key === key) || {
|
|
85
|
+
key,
|
|
86
|
+
type: "DEFAULT",
|
|
87
|
+
};
|
|
88
|
+
const config = transformBackendConfig(rawBackendConfig);
|
|
67
89
|
return {
|
|
68
90
|
Header: title,
|
|
69
91
|
accessor,
|
|
70
92
|
Cell: ({ value }) => renderCellContent(config)({ value }),
|
|
71
93
|
};
|
|
72
94
|
});
|
|
73
|
-
// Return the final array of columns.
|
|
74
|
-
// (Apps can push a custom "sticky" col onto this if they want.)
|
|
75
95
|
return columns;
|
|
76
96
|
}
|
|
77
|
-
/**
|
|
97
|
+
/**
|
|
98
|
+
* Generate "col1", "col2", etc.
|
|
99
|
+
*/
|
|
78
100
|
function generateAccessors(columnTitles) {
|
|
79
101
|
return columnTitles.map((_, index) => `col${index + 1}`);
|
|
80
102
|
}
|