@deviceinsight/ng-ui-components 6.20.0 → 6.21.0
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/lib/cjs/assets/style.css +1 -1
- package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts +2 -2
- package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
- package/lib/cjs/components/reactable/helpers/ReactableTable.js +32 -18
- package/lib/esm/assets/style.css +1 -1
- package/lib/esm/components/reactable/helpers/ReactableTable.d.ts +2 -2
- package/lib/esm/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
- package/lib/esm/components/reactable/helpers/ReactableTable.js +32 -19
- package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts +2 -2
- package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts.map +1 -1
- package/lib/esm/src/components/reactable/helpers/ReactableTable.js +32 -19
- package/package.json +1 -1
package/lib/cjs/assets/style.css
CHANGED
|
@@ -253,4 +253,4 @@
|
|
|
253
253
|
.di.slider .rc-slider-handle:active {box-shadow: 0 0 5px var(--primary-color, #1a8ed3);}
|
|
254
254
|
|
|
255
255
|
.di.modal.scroll-horizontally-advice {padding-top: 40vh}
|
|
256
|
-
.di.modal.scroll-horizontally-advice .modal-content .scroll-horizontally-advice-buttons {text-align: right; margin-top:
|
|
256
|
+
.di.modal.scroll-horizontally-advice .modal-content .scroll-horizontally-advice-buttons {text-align: right; margin-top: 24px;}
|
|
@@ -14,6 +14,6 @@ declare type Props<T, ID extends string | number | undefined | null> = {
|
|
|
14
14
|
messageWhenEmpty?: string;
|
|
15
15
|
'data-testid'?: string;
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
export
|
|
17
|
+
export default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }: Props<T, ID>): React.JSX.Element;
|
|
18
|
+
export {};
|
|
19
19
|
//# sourceMappingURL=ReactableTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBA+Gd"}
|
|
@@ -34,34 +34,48 @@ const ReactableTableRow_1 = __importDefault(require("./ReactableTableRow"));
|
|
|
34
34
|
const ReactableTableHeader_1 = __importDefault(require("./ReactableTableHeader"));
|
|
35
35
|
const ReactableTableFilterRow_1 = __importDefault(require("./ReactableTableFilterRow"));
|
|
36
36
|
const ng_ui_api_client_1 = require("@deviceinsight/ng-ui-api-client");
|
|
37
|
-
|
|
37
|
+
function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) {
|
|
38
38
|
const containerRef = (0, react_1.useRef)(null);
|
|
39
39
|
const tableRef = (0, react_1.useRef)(null);
|
|
40
|
-
const [
|
|
41
|
-
const
|
|
40
|
+
const [showScrollingAdvice, setShowScrollingAdvice] = (0, react_1.useState)(false);
|
|
41
|
+
const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = (0, react_1.useState)(false);
|
|
42
|
+
const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
|
|
43
|
+
const neverShowScrollingAdviceRef = (0, react_1.useRef)(neverShowScrollingAdvice);
|
|
42
44
|
(0, react_1.useEffect)(() => {
|
|
43
|
-
|
|
44
|
-
}, []);
|
|
45
|
+
neverShowScrollingAdviceRef.current = neverShowScrollingAdvice;
|
|
46
|
+
}, [neverShowScrollingAdvice]);
|
|
47
|
+
const updateScrollingAdvice = () => {
|
|
48
|
+
if (containerRef.current && tableRef.current) {
|
|
49
|
+
setShowScrollingAdvice(!neverShowScrollingAdviceRef.current && tableRef.current.scrollWidth > containerRef.current.offsetWidth);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
45
52
|
(0, react_1.useEffect)(() => {
|
|
46
|
-
|
|
53
|
+
(0, ng_ui_api_client_1.readAccountObject)(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
|
|
54
|
+
setNeverShowScrollingAdvice(value === undefined ? false : value);
|
|
47
55
|
if (containerRef.current && tableRef.current) {
|
|
48
|
-
|
|
56
|
+
updateScrollingAdvice();
|
|
49
57
|
}
|
|
50
|
-
};
|
|
58
|
+
});
|
|
59
|
+
}, []);
|
|
60
|
+
(0, react_1.useEffect)(() => {
|
|
61
|
+
updateScrollingAdvice();
|
|
51
62
|
window.addEventListener('resize', updateScrollingAdvice);
|
|
52
63
|
return () => window.removeEventListener('resize', updateScrollingAdvice);
|
|
53
|
-
}, [pageable, columnDefs
|
|
64
|
+
}, [pageable, columnDefs]);
|
|
54
65
|
const showFilterRow = columnDefs.some((col) => col.filterable);
|
|
55
66
|
return (react_1.default.createElement(ng_ui_basic_components_1.SpinnerContainer, { show: isLoading },
|
|
56
67
|
react_1.default.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
|
|
57
|
-
|
|
58
|
-
react_1.default.createElement(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
68
|
+
showScrollingAdvice && !isLoading && (react_1.default.createElement(ng_ui_basic_components_1.Modal, { className: "scroll-horizontally-advice", content: react_1.default.createElement("div", null,
|
|
69
|
+
react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
|
|
70
|
+
react_1.default.createElement("div", { className: "scroll-horizontally-advice-buttons" },
|
|
71
|
+
react_1.default.createElement(ng_ui_basic_components_1.Button, { primary: true, onClick: async () => {
|
|
72
|
+
await (0, ng_ui_api_client_1.writeAccountObject)(HIDE_SCROLLING_ADVICE_PATH, true);
|
|
73
|
+
setNeverShowScrollingAdvice(true);
|
|
74
|
+
setShowScrollingAdvice(false);
|
|
75
|
+
} },
|
|
76
|
+
react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
|
|
77
|
+
react_1.default.createElement(ng_ui_basic_components_1.Button, { onClick: () => setShowScrollingAdvice(false) },
|
|
78
|
+
react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK")))), width: '40%' })),
|
|
65
79
|
react_1.default.createElement("table", { ref: tableRef, className: (0, classnames_1.default)('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
|
|
66
80
|
react_1.default.createElement("thead", null,
|
|
67
81
|
react_1.default.createElement(ReactableTableHeader_1.default, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
|
|
@@ -74,5 +88,5 @@ const ReactableTable = ({ columnDefs, uniqueItemKey, paginationSettings, onSort,
|
|
|
74
88
|
: !isLoading && (react_1.default.createElement("tr", null,
|
|
75
89
|
react_1.default.createElement("td", { colSpan: columnDefs.length },
|
|
76
90
|
react_1.default.createElement(i18n_1.Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
|
|
77
|
-
}
|
|
91
|
+
}
|
|
78
92
|
exports.default = ReactableTable;
|
package/lib/esm/assets/style.css
CHANGED
|
@@ -253,4 +253,4 @@
|
|
|
253
253
|
.di.slider .rc-slider-handle:active {box-shadow: 0 0 5px var(--primary-color, #1a8ed3);}
|
|
254
254
|
|
|
255
255
|
.di.modal.scroll-horizontally-advice {padding-top: 40vh}
|
|
256
|
-
.di.modal.scroll-horizontally-advice .modal-content .scroll-horizontally-advice-buttons {text-align: right; margin-top:
|
|
256
|
+
.di.modal.scroll-horizontally-advice .modal-content .scroll-horizontally-advice-buttons {text-align: right; margin-top: 24px;}
|
|
@@ -14,6 +14,6 @@ declare type Props<T, ID extends string | number | undefined | null> = {
|
|
|
14
14
|
messageWhenEmpty?: string;
|
|
15
15
|
'data-testid'?: string;
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
export
|
|
17
|
+
export default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }: Props<T, ID>): React.JSX.Element;
|
|
18
|
+
export {};
|
|
19
19
|
//# sourceMappingURL=ReactableTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBA+Gd"}
|
|
@@ -6,34 +6,48 @@ import ReactableTableRow from './ReactableTableRow';
|
|
|
6
6
|
import ReactableTableHeader from './ReactableTableHeader';
|
|
7
7
|
import ReactableTableFilterRow from './ReactableTableFilterRow';
|
|
8
8
|
import { readAccountObject, writeAccountObject } from '@deviceinsight/ng-ui-api-client';
|
|
9
|
-
|
|
9
|
+
export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) {
|
|
10
10
|
const containerRef = useRef(null);
|
|
11
11
|
const tableRef = useRef(null);
|
|
12
|
-
const [
|
|
13
|
-
const
|
|
12
|
+
const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
|
|
13
|
+
const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
|
|
14
|
+
const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
|
|
15
|
+
const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
|
|
14
16
|
useEffect(() => {
|
|
15
|
-
|
|
16
|
-
}, []);
|
|
17
|
+
neverShowScrollingAdviceRef.current = neverShowScrollingAdvice;
|
|
18
|
+
}, [neverShowScrollingAdvice]);
|
|
19
|
+
const updateScrollingAdvice = () => {
|
|
20
|
+
if (containerRef.current && tableRef.current) {
|
|
21
|
+
setShowScrollingAdvice(!neverShowScrollingAdviceRef.current && tableRef.current.scrollWidth > containerRef.current.offsetWidth);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
17
24
|
useEffect(() => {
|
|
18
|
-
|
|
25
|
+
readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
|
|
26
|
+
setNeverShowScrollingAdvice(value === undefined ? false : value);
|
|
19
27
|
if (containerRef.current && tableRef.current) {
|
|
20
|
-
|
|
28
|
+
updateScrollingAdvice();
|
|
21
29
|
}
|
|
22
|
-
};
|
|
30
|
+
});
|
|
31
|
+
}, []);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
updateScrollingAdvice();
|
|
23
34
|
window.addEventListener('resize', updateScrollingAdvice);
|
|
24
35
|
return () => window.removeEventListener('resize', updateScrollingAdvice);
|
|
25
|
-
}, [pageable, columnDefs
|
|
36
|
+
}, [pageable, columnDefs]);
|
|
26
37
|
const showFilterRow = columnDefs.some((col) => col.filterable);
|
|
27
38
|
return (React.createElement(SpinnerContainer, { show: isLoading },
|
|
28
39
|
React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
|
|
29
|
-
|
|
30
|
-
React.createElement(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
40
|
+
showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
|
|
41
|
+
React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
|
|
42
|
+
React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
|
|
43
|
+
React.createElement(Button, { primary: true, onClick: async () => {
|
|
44
|
+
await writeAccountObject(HIDE_SCROLLING_ADVICE_PATH, true);
|
|
45
|
+
setNeverShowScrollingAdvice(true);
|
|
46
|
+
setShowScrollingAdvice(false);
|
|
47
|
+
} },
|
|
48
|
+
React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
|
|
49
|
+
React.createElement(Button, { onClick: () => setShowScrollingAdvice(false) },
|
|
50
|
+
React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK")))), width: '40%' })),
|
|
37
51
|
React.createElement("table", { ref: tableRef, className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
|
|
38
52
|
React.createElement("thead", null,
|
|
39
53
|
React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
|
|
@@ -46,5 +60,4 @@ const ReactableTable = ({ columnDefs, uniqueItemKey, paginationSettings, onSort,
|
|
|
46
60
|
: !isLoading && (React.createElement("tr", null,
|
|
47
61
|
React.createElement("td", { colSpan: columnDefs.length },
|
|
48
62
|
React.createElement(Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
|
|
49
|
-
}
|
|
50
|
-
export default ReactableTable;
|
|
63
|
+
}
|
|
@@ -14,6 +14,6 @@ declare type Props<T, ID extends string | number | undefined | null> = {
|
|
|
14
14
|
messageWhenEmpty?: string;
|
|
15
15
|
'data-testid'?: string;
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
export
|
|
17
|
+
export default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }: Props<T, ID>): React.JSX.Element;
|
|
18
|
+
export {};
|
|
19
19
|
//# sourceMappingURL=ReactableTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBA+Gd"}
|
|
@@ -6,34 +6,48 @@ import ReactableTableRow from './ReactableTableRow';
|
|
|
6
6
|
import ReactableTableHeader from './ReactableTableHeader';
|
|
7
7
|
import ReactableTableFilterRow from './ReactableTableFilterRow';
|
|
8
8
|
import { readAccountObject, writeAccountObject } from '@deviceinsight/ng-ui-api-client';
|
|
9
|
-
|
|
9
|
+
export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) {
|
|
10
10
|
const containerRef = useRef(null);
|
|
11
11
|
const tableRef = useRef(null);
|
|
12
|
-
const [
|
|
13
|
-
const
|
|
12
|
+
const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
|
|
13
|
+
const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
|
|
14
|
+
const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
|
|
15
|
+
const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
|
|
14
16
|
useEffect(() => {
|
|
15
|
-
|
|
16
|
-
}, []);
|
|
17
|
+
neverShowScrollingAdviceRef.current = neverShowScrollingAdvice;
|
|
18
|
+
}, [neverShowScrollingAdvice]);
|
|
19
|
+
const updateScrollingAdvice = () => {
|
|
20
|
+
if (containerRef.current && tableRef.current) {
|
|
21
|
+
setShowScrollingAdvice(!neverShowScrollingAdviceRef.current && tableRef.current.scrollWidth > containerRef.current.offsetWidth);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
17
24
|
useEffect(() => {
|
|
18
|
-
|
|
25
|
+
readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
|
|
26
|
+
setNeverShowScrollingAdvice(value === undefined ? false : value);
|
|
19
27
|
if (containerRef.current && tableRef.current) {
|
|
20
|
-
|
|
28
|
+
updateScrollingAdvice();
|
|
21
29
|
}
|
|
22
|
-
};
|
|
30
|
+
});
|
|
31
|
+
}, []);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
updateScrollingAdvice();
|
|
23
34
|
window.addEventListener('resize', updateScrollingAdvice);
|
|
24
35
|
return () => window.removeEventListener('resize', updateScrollingAdvice);
|
|
25
|
-
}, [pageable, columnDefs
|
|
36
|
+
}, [pageable, columnDefs]);
|
|
26
37
|
const showFilterRow = columnDefs.some((col) => col.filterable);
|
|
27
38
|
return (React.createElement(SpinnerContainer, { show: isLoading },
|
|
28
39
|
React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
|
|
29
|
-
|
|
30
|
-
React.createElement(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
40
|
+
showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
|
|
41
|
+
React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
|
|
42
|
+
React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
|
|
43
|
+
React.createElement(Button, { primary: true, onClick: async () => {
|
|
44
|
+
await writeAccountObject(HIDE_SCROLLING_ADVICE_PATH, true);
|
|
45
|
+
setNeverShowScrollingAdvice(true);
|
|
46
|
+
setShowScrollingAdvice(false);
|
|
47
|
+
} },
|
|
48
|
+
React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
|
|
49
|
+
React.createElement(Button, { onClick: () => setShowScrollingAdvice(false) },
|
|
50
|
+
React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK")))), width: '40%' })),
|
|
37
51
|
React.createElement("table", { ref: tableRef, className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
|
|
38
52
|
React.createElement("thead", null,
|
|
39
53
|
React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
|
|
@@ -46,5 +60,4 @@ const ReactableTable = ({ columnDefs, uniqueItemKey, paginationSettings, onSort,
|
|
|
46
60
|
: !isLoading && (React.createElement("tr", null,
|
|
47
61
|
React.createElement("td", { colSpan: columnDefs.length },
|
|
48
62
|
React.createElement(Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
|
|
49
|
-
}
|
|
50
|
-
export default ReactableTable;
|
|
63
|
+
}
|