@j2inn/fin5-ui-utils 1.0.3 → 1.0.5
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/README.md +5 -5
- package/dist/react/components/graphics/GraphicsTabViewer.d.ts +8 -0
- package/dist/react/components/graphics/GraphicsTabViewer.jsx +12 -3
- package/dist/react/components/graphics/GraphicsTabViewer.jsx.map +1 -1
- package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +8 -0
- package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +12 -3
- package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
# What is fin5-ui-utils? #
|
|
2
|
-
A set of useful client-side utilities useful for creating UI applications on top of the FIN 5 framework.
|
|
3
|
-
|
|
4
|
-
### How do I get set up? ###
|
|
5
|
-
To install this package run `npm i @j2inn/fin5-ui-utils`
|
|
1
|
+
# What is fin5-ui-utils? #
|
|
2
|
+
A set of useful client-side utilities useful for creating UI applications on top of the FIN 5 framework.
|
|
3
|
+
|
|
4
|
+
### How do I get set up? ###
|
|
5
|
+
To install this package run `npm i @j2inn/fin5-ui-utils`
|
|
@@ -4,6 +4,14 @@ interface GraphicsTabViewer {
|
|
|
4
4
|
projectName?: string;
|
|
5
5
|
targetRef: HRef;
|
|
6
6
|
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
|
|
9
|
+
* false to just get the graphics on this target.
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
queryRelated?: boolean;
|
|
13
|
+
fallbackClassName?: string;
|
|
14
|
+
fallbackText?: string;
|
|
7
15
|
}
|
|
8
16
|
export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
|
|
9
17
|
export {};
|
|
@@ -51,8 +51,15 @@ const useStyles = (0, react_jss_1.createUseStyles)({
|
|
|
51
51
|
},
|
|
52
52
|
},
|
|
53
53
|
},
|
|
54
|
+
fallback: {
|
|
55
|
+
height: '100%',
|
|
56
|
+
display: 'flex',
|
|
57
|
+
justifyContent: 'center',
|
|
58
|
+
alignItems: 'center',
|
|
59
|
+
fontSize: '1.1em',
|
|
60
|
+
},
|
|
54
61
|
});
|
|
55
|
-
const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName, targetRef, className, }) => {
|
|
62
|
+
const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
|
|
56
63
|
const client = (0, haystack_react_1.useClient)();
|
|
57
64
|
const classes = useStyles();
|
|
58
65
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
@@ -60,7 +67,7 @@ const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectN
|
|
|
60
67
|
(0, react_1.useEffect)(() => {
|
|
61
68
|
if (targetRef) {
|
|
62
69
|
client.ext
|
|
63
|
-
.eval(`readById(${targetRef.toAxon()}).finGraphicOn(
|
|
70
|
+
.eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
|
|
64
71
|
.then((grid) => {
|
|
65
72
|
setGraphicsList(grid.getRows());
|
|
66
73
|
})
|
|
@@ -78,7 +85,9 @@ const GraphicsTabViewer = ({ projectName = fin5Top_1.fin5Top?.finstack?.projectN
|
|
|
78
85
|
};
|
|
79
86
|
});
|
|
80
87
|
}, [graphicsList]);
|
|
81
|
-
return loading ? (<LoadingSpinner_1.LoadingSpinner />) : (<ui_1.Tabs className={(0, classnames_1.default)(classes.tabs, className)} items={tabs}/>)
|
|
88
|
+
return loading ? (<LoadingSpinner_1.LoadingSpinner />) : tabs.length > 0 ? (<ui_1.Tabs className={(0, classnames_1.default)(classes.tabs, className)} items={tabs}/>) : (<div className={(0, classnames_1.default)(classes.fallback, fallbackClassName)}>
|
|
89
|
+
{fallbackText}
|
|
90
|
+
</div>);
|
|
82
91
|
};
|
|
83
92
|
exports.GraphicsTabViewer = GraphicsTabViewer;
|
|
84
93
|
//# sourceMappingURL=GraphicsTabViewer.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,kCAA4C;AAC5C,4DAA2B;AAE3B,mDAA0C;AAC1C,+CAA2D;AAC3D,yCAA2C;AAC3C,sDAAkD;AAClD,sDAAkD;AAClD,mDAA+C;AAE/C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC;IACjC,IAAI,EAAE;QACL,MAAM,EAAE,MAAM;QACd,CAAC,MAAM,eAAU,sBAAsB,CAAC,EAAE;YACzC,MAAM,EAAE,MAAM;YACd,CAAC,MAAM,eAAU,eAAe,CAAC,EAAE;gBAClC,MAAM,EAAE,MAAM;gBACd,CAAC,MAAM,eAAU,eAAe,CAAC,EAAE;oBAClC,MAAM,EAAE,MAAM;iBACd;aACD;SACD;KACD;CACD,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,14 @@ interface GraphicsTabViewer {
|
|
|
4
4
|
projectName?: string;
|
|
5
5
|
targetRef: HRef;
|
|
6
6
|
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
|
|
9
|
+
* false to just get the graphics on this target.
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
queryRelated?: boolean;
|
|
13
|
+
fallbackClassName?: string;
|
|
14
|
+
fallbackText?: string;
|
|
7
15
|
}
|
|
8
16
|
export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
|
|
9
17
|
export {};
|
|
@@ -22,8 +22,15 @@ const useStyles = createUseStyles({
|
|
|
22
22
|
},
|
|
23
23
|
},
|
|
24
24
|
},
|
|
25
|
+
fallback: {
|
|
26
|
+
height: '100%',
|
|
27
|
+
display: 'flex',
|
|
28
|
+
justifyContent: 'center',
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
fontSize: '1.1em',
|
|
31
|
+
},
|
|
25
32
|
});
|
|
26
|
-
export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, }) => {
|
|
33
|
+
export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
|
|
27
34
|
const client = useClient();
|
|
28
35
|
const classes = useStyles();
|
|
29
36
|
const [loading, setLoading] = useState(true);
|
|
@@ -31,7 +38,7 @@ export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName
|
|
|
31
38
|
useEffect(() => {
|
|
32
39
|
if (targetRef) {
|
|
33
40
|
client.ext
|
|
34
|
-
.eval(`readById(${targetRef.toAxon()}).finGraphicOn(
|
|
41
|
+
.eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
|
|
35
42
|
.then((grid) => {
|
|
36
43
|
setGraphicsList(grid.getRows());
|
|
37
44
|
})
|
|
@@ -49,6 +56,8 @@ export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName
|
|
|
49
56
|
};
|
|
50
57
|
});
|
|
51
58
|
}, [graphicsList]);
|
|
52
|
-
return loading ? (<LoadingSpinner />) : (<Tabs className={cn(classes.tabs, className)} items={tabs}/>)
|
|
59
|
+
return loading ? (<LoadingSpinner />) : tabs.length > 0 ? (<Tabs className={cn(classes.tabs, className)} items={tabs}/>) : (<div className={cn(classes.fallback, fallbackClassName)}>
|
|
60
|
+
{fallbackText}
|
|
61
|
+
</div>);
|
|
53
62
|
};
|
|
54
63
|
//# sourceMappingURL=GraphicsTabViewer.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,IAAI,EAAE;QACL,MAAM,EAAE,MAAM;QACd,CAAC,MAAM,UAAU,sBAAsB,CAAC,EAAE;YACzC,MAAM,EAAE,MAAM;YACd,CAAC,MAAM,UAAU,eAAe,CAAC,EAAE;gBAClC,MAAM,EAAE,MAAM;gBACd,CAAC,MAAM,UAAU,eAAe,CAAC,EAAE;oBAClC,MAAM,EAAE,MAAM;iBACd;aACD;SACD;KACD;CACD,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED