@pinnacle0/web-ui 0.7.0-beta.1 → 0.7.0-beta.2
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.
|
@@ -3,42 +3,24 @@ import { classNames } from "../../util/ClassNames";
|
|
|
3
3
|
import { ReactUtil } from "../../util/ReactUtil";
|
|
4
4
|
import { Table } from "../Table";
|
|
5
5
|
import "./index.less";
|
|
6
|
+
import { useResizeObserver } from "../../hooks/useResizeObserver";
|
|
6
7
|
export const VirtualTable = ReactUtil.memo("VirtualTable", function (props) {
|
|
7
8
|
const { dataSource, columns, className, width = "100%", scrollY: propScrollY, emptyPlaceholder, ...restProps } = props;
|
|
8
9
|
const [scrollY, setScrollY] = React.useState(propScrollY ?? 300);
|
|
9
10
|
const [headerHeight, setHeaderHeight] = React.useState(0);
|
|
10
|
-
const containerRef =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const parentHeight = entries[0].contentRect.height;
|
|
17
|
-
let newScrollY = Math.max(0, parentHeight - headerHeight);
|
|
18
|
-
if (propScrollY)
|
|
19
|
-
newScrollY = Math.min(newScrollY, propScrollY);
|
|
20
|
-
setScrollY(newScrollY);
|
|
21
|
-
});
|
|
22
|
-
observer.observe(parent);
|
|
23
|
-
return () => {
|
|
24
|
-
observer.unobserve(parent);
|
|
25
|
-
observer.disconnect();
|
|
26
|
-
};
|
|
27
|
-
}, [propScrollY, headerHeight]);
|
|
11
|
+
const containerRef = useResizeObserver(({ height }) => {
|
|
12
|
+
let newScrollY = Math.max(0, height - headerHeight);
|
|
13
|
+
if (propScrollY)
|
|
14
|
+
newScrollY = Math.min(newScrollY, propScrollY);
|
|
15
|
+
setScrollY(newScrollY);
|
|
16
|
+
});
|
|
28
17
|
// Need to listen to header change onMount so we can calculate the scrollY correctly
|
|
18
|
+
const headerRef = useResizeObserver(({ height }) => {
|
|
19
|
+
setHeaderHeight(height);
|
|
20
|
+
});
|
|
29
21
|
React.useEffect(() => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return;
|
|
33
|
-
const observer = new ResizeObserver(entries => {
|
|
34
|
-
setHeaderHeight(entries[0].contentRect.height);
|
|
35
|
-
});
|
|
36
|
-
observer.observe(header);
|
|
37
|
-
return () => {
|
|
38
|
-
observer.unobserve(header);
|
|
39
|
-
observer.disconnect();
|
|
40
|
-
};
|
|
41
|
-
}, []);
|
|
22
|
+
headerRef.current = containerRef.current?.querySelector(".ant-table-header") ?? null;
|
|
23
|
+
}, [containerRef, headerRef]);
|
|
42
24
|
const containerStyle = React.useMemo(() => {
|
|
43
25
|
return {
|
|
44
26
|
width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AAC/B,OAAO,cAAc,CAAC;AA+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AA+BhE,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,UAAkC,KAAiC;IAC1H,MAAM,EAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAC,GAAG,KAAK,CAAC;IACrH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,IAAI,GAAG,CAAC,CAAC;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;QAChD,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,CAAC;QACpD,IAAI,WAAW;YAAE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;QAChE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,oFAAoF;IACpF,MAAM,SAAS,GAAG,iBAAiB,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;QAC7C,eAAe,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,SAAS,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC;IACzF,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACH,KAAK;YACL,MAAM,EAAE,MAAM;SACjB,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACH,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,cAAc;QAC9F,oBAAC,KAAK;QACF,qEAAqE;;YAArE,qEAAqE;YACrE,OAAO,QACP,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO;YAChB;;eAEG;YACH,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,KACxC,SAAS,GACf,CACA,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pinnacle0/web-ui",
|
|
3
|
-
"version": "0.7.0-beta.
|
|
3
|
+
"version": "0.7.0-beta.2",
|
|
4
4
|
"author": "Pinnacle",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": [
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"react": "19.2.1",
|
|
45
45
|
"react-dom": "19.2.1",
|
|
46
46
|
"react-router-dom": "5.3.0",
|
|
47
|
-
"@pinnacle0/
|
|
48
|
-
"@pinnacle0/
|
|
47
|
+
"@pinnacle0/webpack-util": "0.8.22",
|
|
48
|
+
"@pinnacle0/devtool-util": "1.3.9"
|
|
49
49
|
},
|
|
50
50
|
"exports": {
|
|
51
51
|
"./core/*": {
|
|
@@ -1,45 +1,30 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Orientation detection utility for mobile and desktop devices.
|
|
3
|
-
*
|
|
4
|
-
* For Android,
|
|
5
|
-
* Uses the ScreenOrientation API for checking the orientation of the screen.
|
|
6
|
-
* For Deprecated browsers, it uses the window.orientation API.
|
|
7
|
-
*
|
|
8
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation
|
|
9
|
-
*
|
|
10
|
-
* For iOS 26.0+ PWA, it does not dispatch any event when the orientation changes,
|
|
11
|
-
* For iOS,
|
|
12
|
-
* Only support iOS 14+
|
|
13
|
-
* Use media queries to check the orientation of the screen for iOS.
|
|
14
|
-
*
|
|
15
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
|
|
16
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
|
|
17
|
-
*/
|
|
18
1
|
import { BrowserUtil } from "../BrowserUtil";
|
|
19
|
-
const supportScreenOrientationAPI = typeof window.screen.orientation !== "undefined";
|
|
20
2
|
function subscribe(subscriber) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
lastOrientation
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
3
|
+
try {
|
|
4
|
+
let lastOrientation = current();
|
|
5
|
+
const handler = () => {
|
|
6
|
+
const newOrientation = current();
|
|
7
|
+
if (newOrientation !== lastOrientation) {
|
|
8
|
+
lastOrientation = newOrientation;
|
|
9
|
+
subscriber(newOrientation);
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
if (BrowserUtil.os() === "ios") {
|
|
13
|
+
const mediaQuery = window.matchMedia("(orientation: portrait)");
|
|
32
14
|
mediaQuery.addEventListener("change", handler);
|
|
33
15
|
return () => mediaQuery.removeEventListener("change", handler);
|
|
34
16
|
}
|
|
17
|
+
else if (typeof window.screen.orientation !== "undefined") {
|
|
18
|
+
window.screen.orientation.addEventListener("change", handler);
|
|
19
|
+
return () => window.screen.orientation.removeEventListener("change", handler);
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
window.addEventListener("orientationchange", handler);
|
|
23
|
+
return () => window.removeEventListener("orientationchange", handler, false);
|
|
24
|
+
}
|
|
35
25
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return () => window.screen.orientation.removeEventListener("change", handler);
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
window.addEventListener("orientationchange", handler);
|
|
42
|
-
return () => window.removeEventListener("orientationchange", handler, false);
|
|
26
|
+
catch {
|
|
27
|
+
// do nothing in case of unsupported API
|
|
43
28
|
}
|
|
44
29
|
}
|
|
45
30
|
function current() {
|
|
@@ -47,7 +32,7 @@ function current() {
|
|
|
47
32
|
if (BrowserUtil.os() === "ios") {
|
|
48
33
|
return window.matchMedia("(orientation: portrait)").matches ? "portrait" : "landscape";
|
|
49
34
|
}
|
|
50
|
-
else if (
|
|
35
|
+
else if (typeof window.screen.orientation !== "undefined") {
|
|
51
36
|
return window.screen.orientation.angle === 0 ? "portrait" : "landscape";
|
|
52
37
|
}
|
|
53
38
|
else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/OrientationUtil/index.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/OrientationUtil/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAuB3C,SAAS,SAAS,CAAC,UAAsB;IACrC,IAAI,CAAC;QACD,IAAI,eAAe,GAAG,OAAO,EAAE,CAAC;QAEhC,MAAM,OAAO,GAAG,GAAG,EAAE;YACjB,MAAM,cAAc,GAAG,OAAO,EAAE,CAAC;YACjC,IAAI,cAAc,KAAK,eAAe,EAAE,CAAC;gBACrC,eAAe,GAAG,cAAc,CAAC;gBACjC,UAAU,CAAC,cAAc,CAAC,CAAC;YAC/B,CAAC;QACL,CAAC,CAAC;QAEF,IAAI,WAAW,CAAC,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;YAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;YAChE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC/C,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACnE,CAAC;aAAM,IAAI,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,KAAK,WAAW,EAAE,CAAC;YAC1D,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC9D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClF,CAAC;aAAM,CAAC;YACJ,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;YACtD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;QACjF,CAAC;IACL,CAAC;IAAC,MAAM,CAAC;QACL,wCAAwC;IAC5C,CAAC;AACL,CAAC;AAED,SAAS,OAAO;IACZ,IAAI,CAAC;QACD,IAAI,WAAW,CAAC,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,MAAM,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC3F,CAAC;aAAM,IAAI,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,KAAK,WAAW,EAAE,CAAC;YAC1D,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC5E,CAAC;aAAM,CAAC;YACJ,OAAO,MAAM,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;QAC/D,CAAC;IACL,CAAC;IAAC,MAAM,CAAC;QACL,+GAA+G;QAC/G,OAAO,UAAU,CAAC;IACtB,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IACzC,SAAS;IACT,OAAO;CACV,CAAC,CAAC"}
|