@pinnacle0/web-ui 0.5.21 → 0.5.23
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/core/Carousel3D/index.less +3 -1
- package/core/FlatList/FloatingLoader/index.less +3 -1
- package/core/Input.d.ts +1 -0
- package/core/Input.js.map +1 -1
- package/core/Markdown/index.d.ts +2 -2
- package/core/Slider/index.less +3 -1
- package/core/VirtualTable/TableHeader.d.ts +1 -1
- package/core/VirtualTable/TableRow.js +1 -26
- package/core/VirtualTable/TableRow.js.map +1 -1
- package/core/VirtualTable/hooks/useColumnWidths.d.ts +18 -0
- package/core/VirtualTable/hooks/useColumnWidths.js +63 -0
- package/core/VirtualTable/hooks/useColumnWidths.js.map +1 -0
- package/core/VirtualTable/hooks/useColumnsStickyPosition.d.ts +2 -0
- package/core/VirtualTable/hooks/useColumnsStickyPosition.js +22 -0
- package/core/VirtualTable/hooks/useColumnsStickyPosition.js.map +1 -0
- package/core/VirtualTable/hooks/useScroll.d.ts +7 -13
- package/core/VirtualTable/hooks/useScroll.js +13 -27
- package/core/VirtualTable/hooks/useScroll.js.map +1 -1
- package/core/VirtualTable/hooks/useScrollBarSize.d.ts +1 -0
- package/core/VirtualTable/hooks/useScrollBarSize.js +38 -0
- package/core/VirtualTable/hooks/useScrollBarSize.js.map +1 -0
- package/core/VirtualTable/index.d.ts +1 -3
- package/core/VirtualTable/index.js +26 -16
- package/core/VirtualTable/index.js.map +1 -1
- package/core/VirtualTable/index.less +0 -1
- package/core/WithExplanation/index.d.ts +1 -1
- package/package.json +1 -1
- package/core/VirtualTable/hooks/useColumns.d.ts +0 -35
- package/core/VirtualTable/hooks/useColumns.js +0 -100
- package/core/VirtualTable/hooks/useColumns.js.map +0 -1
|
@@ -5,7 +5,9 @@
|
|
|
5
5
|
|
|
6
6
|
&.has-transition {
|
|
7
7
|
.child-slide {
|
|
8
|
-
transition:
|
|
8
|
+
transition:
|
|
9
|
+
opacity 0.5s cubic-bezier(0.17, 0.67, 0.55, 1.43),
|
|
10
|
+
transform 0.5s cubic-bezier(0.17, 0.67, 0.55, 1.43);
|
|
9
11
|
}
|
|
10
12
|
}
|
|
11
13
|
|
package/core/Input.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export interface InputTextAreaProps extends Omit<TextAreaProps, ExcludedAntInput
|
|
|
13
13
|
export interface InputPasswordProps extends Omit<PasswordProps, ExcludedAntInputKeys>, ControlledFormValue<string> {
|
|
14
14
|
}
|
|
15
15
|
export interface InputNullableProps extends Omit<InputProps, ExcludedAntInputKeys>, ControlledFormValue<string | null> {
|
|
16
|
+
autoTrim?: boolean;
|
|
16
17
|
}
|
|
17
18
|
export interface InputNullableTextAreaProps extends Omit<TextAreaProps, ExcludedAntInputKeys>, ControlledFormValue<string | null> {
|
|
18
19
|
}
|
package/core/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/core/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/core/Input.tsx"],"names":[],"mappings":"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"}
|
package/core/Markdown/index.d.ts
CHANGED
|
@@ -16,8 +16,8 @@ export interface Props {
|
|
|
16
16
|
}
|
|
17
17
|
export declare class Markdown extends React.PureComponent<Props> {
|
|
18
18
|
static displayName: string;
|
|
19
|
-
renderBold: (splitContents: string[], symbols: MarkdownSymbol[]) => (string | number | boolean | React.
|
|
20
|
-
renderEmphasis: (splitContents: string[], symbols: MarkdownSymbol[]) => (string | number | boolean | React.
|
|
19
|
+
renderBold: (splitContents: string[], symbols: MarkdownSymbol[]) => (string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined)[];
|
|
20
|
+
renderEmphasis: (splitContents: string[], symbols: MarkdownSymbol[]) => (string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined)[];
|
|
21
21
|
processLine: (content: string, _: number, symbols: MarkdownSymbol[]) => React.ReactNode;
|
|
22
22
|
render(): React.JSX.Element;
|
|
23
23
|
}
|
package/core/Slider/index.less
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { VirtualTableColumn, ColumnsStickyPosition } from "./type";
|
|
3
3
|
interface Props<RowType extends object> {
|
|
4
|
-
headerRef: React.
|
|
4
|
+
headerRef: React.RefObject<HTMLDivElement> | ((node: HTMLDivElement | null) => void);
|
|
5
5
|
headerHeight: number;
|
|
6
6
|
columns: VirtualTableColumn<RowType>[];
|
|
7
7
|
columnsStickyPosition: ColumnsStickyPosition;
|
|
@@ -1,35 +1,10 @@
|
|
|
1
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
-
if (!m) return o;
|
|
4
|
-
var i = m.call(o), r, ar = [], e;
|
|
5
|
-
try {
|
|
6
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
-
}
|
|
8
|
-
catch (error) { e = { error: error }; }
|
|
9
|
-
finally {
|
|
10
|
-
try {
|
|
11
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
-
}
|
|
13
|
-
finally { if (e) throw e.error; }
|
|
14
|
-
}
|
|
15
|
-
return ar;
|
|
16
|
-
};
|
|
17
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
18
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
19
|
-
if (ar || !(i in from)) {
|
|
20
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
21
|
-
ar[i] = from[i];
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
25
|
-
};
|
|
26
1
|
import React from "react";
|
|
27
2
|
import { ReactUtil } from "../../util/ReactUtil";
|
|
28
3
|
import { classNames } from "../../util/ClassNames";
|
|
29
4
|
export var TableRow = ReactUtil.memo("TableRow", function (_a) {
|
|
30
5
|
var virtualItem = _a.virtualItem, data = _a.data, columns = _a.columns, columnWidths = _a.columnWidths, rowHeight = _a.rowHeight, scrollBarSize = _a.scrollBarSize, columnsStickyPosition = _a.columnsStickyPosition, rowClassName = _a.rowClassName, onRowClick = _a.onRowClick;
|
|
31
6
|
var rowIndex = virtualItem.index;
|
|
32
|
-
var lastShownColumnIndex = React.useMemo(function () { return columns.
|
|
7
|
+
var lastShownColumnIndex = React.useMemo(function () { return columns.findLastIndex(function (_) { return _.display !== "hidden"; }); }, [columns]);
|
|
33
8
|
return (React.createElement("div", { key: rowIndex, className: classNames("table-row", rowClassName, rowIndex % 2 ? "odd" : "even"), style: { transform: "translateY(".concat(virtualItem.start, "px)") }, onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, rowIndex); } }, columns.map(function (column, columnIndex) {
|
|
34
9
|
var colSpan = column.colSpan ? column.colSpan(data, rowIndex, columnIndex) : 1;
|
|
35
10
|
// handle colspan > 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableRow.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAgBjD,MAAM,CAAC,IAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,UAEjD,EAAqI;QAApI,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,YAAY,kBAAA,EAAE,SAAS,eAAA,EAAE,aAAa,mBAAA,EAAE,qBAAqB,2BAAA,EAAE,YAAY,kBAAA,EAAE,UAAU,gBAAA;IAClH,IAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC;IACnC,IAAM,oBAAoB,GAAW,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,OAAO,CAAC,aAAa,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,KAAK,QAAQ,EAAtB,CAAsB,CAAC,EAAlD,CAAkD,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAExH,OAAO,CACH,6BACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,YAAY,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,EAC/E,KAAK,EAAE,EAAC,SAAS,EAAE,qBAAc,WAAW,CAAC,KAAK,QAAK,EAAC,EACxD,OAAO,EAAE,cAAM,OAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,IAAI,EAAE,QAAQ,CAAC,EAA5B,CAA4B,IAE1C,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,WAAW;QAC7B,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjF,qBAAqB;QACrB,IAAM,SAAS,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI,IAAK,OAAA,GAAG,GAAG,IAAI,EAAV,CAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC;QACxK,IAAM,UAAU,GAAG,MAAM,CAAC,OAAO,KAAK,QAAQ,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACpF,gIAAgI;QAChI,IAAM,iBAAiB,GAAG,oBAAoB,KAAK,WAAW,CAAC;QAC/D,IAAM,cAAc,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;QAE1D,OAAO,CACH,UAAU,IAAI,CACV,6BACI,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,KAAK,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAC,CAAC,EACxJ,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;gBACH,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,SAAS,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1D,cAAc,EAAE,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;gBAC3G,SAAS,EAAE,MAAM,CAAC,KAAK;gBACvB,IAAI,EAAE,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAC,CAAC,CAAC,SAAS;gBACjE,KAAK,EAAE,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,IAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;aAChH,IAEA,UAAU,CACT,CACT,CACJ,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* VirtualTable is not crated by <table>, the header cell width cannot auto align the body cell width which has large content.
|
|
4
|
+
* So VirtualTable get the columns widths by following steps:
|
|
5
|
+
* 1. Only render the headers with flex style
|
|
6
|
+
* 2. Get the widths of the table headers in ref
|
|
7
|
+
* 3. Calculate the sticky position of the fixed column/header if exists
|
|
8
|
+
* 4. Render the table body columns with the headers widths gotten in step 2
|
|
9
|
+
*
|
|
10
|
+
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
11
|
+
* the colWidths may be calculated during the transition and get the wrong width
|
|
12
|
+
* wrap the getColumnWidths function by useDebounce to get the final correct column widths
|
|
13
|
+
*/
|
|
14
|
+
export declare const useColumnWidths: () => {
|
|
15
|
+
headerRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
16
|
+
getHeaderRef: (node: HTMLDivElement | null) => void;
|
|
17
|
+
columnWidths: number[];
|
|
18
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useForceUpdate } from "../../../hooks/useForceUpdate";
|
|
3
|
+
import { useDebounce } from "../../../hooks/useDebounce";
|
|
4
|
+
/**
|
|
5
|
+
* VirtualTable is not crated by <table>, the header cell width cannot auto align the body cell width which has large content.
|
|
6
|
+
* So VirtualTable get the columns widths by following steps:
|
|
7
|
+
* 1. Only render the headers with flex style
|
|
8
|
+
* 2. Get the widths of the table headers in ref
|
|
9
|
+
* 3. Calculate the sticky position of the fixed column/header if exists
|
|
10
|
+
* 4. Render the table body columns with the headers widths gotten in step 2
|
|
11
|
+
*
|
|
12
|
+
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
13
|
+
* the colWidths may be calculated during the transition and get the wrong width
|
|
14
|
+
* wrap the getColumnWidths function by useDebounce to get the final correct column widths
|
|
15
|
+
*/
|
|
16
|
+
export var useColumnWidths = function () {
|
|
17
|
+
var headerRef = React.useRef(null);
|
|
18
|
+
var columnWidths = React.useRef([]);
|
|
19
|
+
var forceUpdate = useForceUpdate();
|
|
20
|
+
var getColumnWidths = useDebounce(React.useCallback(function () {
|
|
21
|
+
if (headerRef.current) {
|
|
22
|
+
var headers = headerRef.current.querySelectorAll(".table-header");
|
|
23
|
+
var widths_1 = [];
|
|
24
|
+
var columnWidthsUpdate_1 = false;
|
|
25
|
+
headers.forEach(function (header, index) {
|
|
26
|
+
var width = header.getBoundingClientRect().width;
|
|
27
|
+
if (width > 0 && widths_1[index] !== width) {
|
|
28
|
+
widths_1[index] = width;
|
|
29
|
+
columnWidthsUpdate_1 = true;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
if (columnWidthsUpdate_1) {
|
|
33
|
+
columnWidths.current = widths_1;
|
|
34
|
+
forceUpdate();
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}, [forceUpdate]), 300);
|
|
38
|
+
var getHeaderRef = React.useCallback(function (node) {
|
|
39
|
+
if (node) {
|
|
40
|
+
headerRef.current = node;
|
|
41
|
+
getColumnWidths();
|
|
42
|
+
}
|
|
43
|
+
}, [getColumnWidths]);
|
|
44
|
+
var handler = React.useCallback(function (event) {
|
|
45
|
+
if (event.target && "querySelector" in event.target && headerRef.current) {
|
|
46
|
+
var element = event.target;
|
|
47
|
+
var result = element.querySelector(".g-virtual-table");
|
|
48
|
+
result && getColumnWidths();
|
|
49
|
+
}
|
|
50
|
+
}, [getColumnWidths]);
|
|
51
|
+
React.useEffect(function () {
|
|
52
|
+
document.body.addEventListener("resize", handler);
|
|
53
|
+
document.body.addEventListener("transitionend", handler);
|
|
54
|
+
document.body.addEventListener("animationend", handler);
|
|
55
|
+
return function () {
|
|
56
|
+
document.body.removeEventListener("resize", handler);
|
|
57
|
+
document.body.removeEventListener("transitionend", handler);
|
|
58
|
+
document.body.removeEventListener("animationend", handler);
|
|
59
|
+
};
|
|
60
|
+
}, [handler]);
|
|
61
|
+
return { headerRef: headerRef, getHeaderRef: getHeaderRef, columnWidths: columnWidths.current };
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=useColumnWidths.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useColumnWidths.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useColumnWidths.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAEvD;;;;;;;;;;;GAWG;AAEH,MAAM,CAAC,IAAM,eAAe,GAAG;IAC3B,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC5D,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAW,EAAE,CAAC,CAAC;IAChD,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,eAAe,GAAG,WAAW,CAC/B,KAAK,CAAC,WAAW,CAAC;QACd,IAAI,SAAS,CAAC,OAAO,EAAE;YACnB,IAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;YACpE,IAAM,QAAM,GAAa,EAAE,CAAC;YAC5B,IAAI,oBAAkB,GAAG,KAAK,CAAC;YAC/B,OAAO,CAAC,OAAO,CAAC,UAAC,MAAM,EAAE,KAAK;gBAC1B,IAAM,KAAK,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;gBACnD,IAAI,KAAK,GAAG,CAAC,IAAI,QAAM,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE;oBACtC,QAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;oBACtB,oBAAkB,GAAG,IAAI,CAAC;iBAC7B;YACL,CAAC,CAAC,CAAC;YACH,IAAI,oBAAkB,EAAE;gBACpB,YAAY,CAAC,OAAO,GAAG,QAAM,CAAC;gBAC9B,WAAW,EAAE,CAAC;aACjB;SACJ;IACL,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,EACjB,GAAG,CACN,CAAC;IAEF,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,UAAC,IAA2B;QACxB,IAAI,IAAI,EAAE;YACN,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YACzB,eAAe,EAAE,CAAC;SACrB;IACL,CAAC,EACD,CAAC,eAAe,CAAC,CACpB,CAAC;IAEF,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC7B,UAAC,KAAiD;QAC9C,IAAI,KAAK,CAAC,MAAM,IAAI,eAAe,IAAI,KAAK,CAAC,MAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YACtE,IAAM,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC5C,IAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YACzD,MAAM,IAAI,eAAe,EAAE,CAAC;SAC/B;IACL,CAAC,EACD,CAAC,eAAe,CAAC,CACpB,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC;QACZ,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClD,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QACxD,OAAO;YACH,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YACrD,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC5D,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAC/D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,EAAC,SAAS,WAAA,EAAE,YAAY,cAAA,EAAE,YAAY,EAAE,YAAY,CAAC,OAAO,EAAC,CAAC;AACzE,CAAC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ArrayUtil } from "../../../internal/ArrayUtil";
|
|
3
|
+
export var useColumnsStickyPosition = function (columns, columnWidths) {
|
|
4
|
+
return React.useMemo(function () {
|
|
5
|
+
var columnsStickyPosition = {};
|
|
6
|
+
var leftColumnsStackPositionValue = 0;
|
|
7
|
+
var rightColumnsStackPositionValue = 0;
|
|
8
|
+
var leftFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "left" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); });
|
|
9
|
+
// the right sticky value stack in reverse direction
|
|
10
|
+
var rightFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); }).reverse();
|
|
11
|
+
leftFixedCols.forEach(function (column, idx) {
|
|
12
|
+
columnsStickyPosition[column.columnIndex] = { value: leftColumnsStackPositionValue, isLast: idx === leftFixedCols.length - 1 };
|
|
13
|
+
leftColumnsStackPositionValue += column.width;
|
|
14
|
+
});
|
|
15
|
+
rightFixedCols.forEach(function (column, idx) {
|
|
16
|
+
columnsStickyPosition[column.columnIndex] = { value: rightColumnsStackPositionValue, isLast: idx === rightFixedCols.length - 1 };
|
|
17
|
+
rightColumnsStackPositionValue += column.width;
|
|
18
|
+
});
|
|
19
|
+
return columnsStickyPosition;
|
|
20
|
+
}, [columnWidths, columns]);
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=useColumnsStickyPosition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useColumnsStickyPosition.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useColumnsStickyPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,6BAA6B,CAAC;AAGtD,MAAM,CAAC,IAAM,wBAAwB,GAAG,UAAyB,OAAsC,EAAE,YAAsB;IAC3H,OAAO,KAAK,CAAC,OAAO,CAAC;QACjB,IAAM,qBAAqB,GAA0B,EAAE,CAAC;QACxD,IAAI,6BAA6B,GAAG,CAAC,CAAC;QACtC,IAAI,8BAA8B,GAAG,CAAC,CAAC;QAEvC,IAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,UAAC,CAAC,EAAE,WAAW,IAAK,OAAA,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAC,WAAW,aAAA,EAAE,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAlF,CAAkF,CAAC,CAAC;QAC5J,oDAAoD;QACpD,IAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,UAAC,CAAC,EAAE,WAAW,IAAK,OAAA,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,EAAC,WAAW,aAAA,EAAE,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAnF,CAAmF,CAAC,CAAC,OAAO,EAAE,CAAC;QAExK,aAAa,CAAC,OAAO,CAAC,UAAC,MAAM,EAAE,GAAG;YAC9B,qBAAqB,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAC,KAAK,EAAE,6BAA6B,EAAE,MAAM,EAAE,GAAG,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,EAAC,CAAC;YAC7H,6BAA6B,IAAI,MAAM,CAAC,KAAK,CAAC;QAClD,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,UAAC,MAAM,EAAE,GAAG;YAC/B,qBAAqB,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAC,KAAK,EAAE,8BAA8B,EAAE,MAAM,EAAE,GAAG,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,EAAC,CAAC;YAC/H,8BAA8B,IAAI,MAAM,CAAC,KAAK,CAAC;QACnD,CAAC,CAAC,CAAC;QAEH,OAAO,qBAAqB,CAAC;IACjC,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;AAChC,CAAC,CAAC"}
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
onScroll: () => void;
|
|
9
|
-
tableBodyRef: (node: HTMLDivElement) => void;
|
|
10
|
-
scrollBarSize: number;
|
|
2
|
+
export declare const useScrollable: (scrollContentRef: React.RefObject<HTMLDivElement>) => {
|
|
3
|
+
scrollable: {
|
|
4
|
+
horizontal: boolean;
|
|
5
|
+
vertical: boolean;
|
|
6
|
+
};
|
|
7
|
+
checkScrollable: () => void;
|
|
11
8
|
};
|
|
9
|
+
export declare const useSyncScroll: (scrollContentRef: React.RefObject<HTMLDivElement>, headerRef: React.RefObject<HTMLDivElement>) => () => void;
|
|
12
10
|
export declare const useScrollToEdge: (scrollContentRef: React.RefObject<HTMLDivElement>) => () => void;
|
|
13
|
-
export declare const useScrollBarSize: (scrollContentRef: React.RefObject<HTMLDivElement>, totalSize: number) => {
|
|
14
|
-
scrollBarSize: number;
|
|
15
|
-
};
|
|
16
|
-
export {};
|
|
@@ -15,24 +15,25 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
15
15
|
return ar;
|
|
16
16
|
};
|
|
17
17
|
import React from "react";
|
|
18
|
-
export var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
|
|
18
|
+
export var useScrollable = function (scrollContentRef) {
|
|
19
|
+
var _a = __read(React.useState({ horizontal: false, vertical: false }), 2), scrollable = _a[0], setScrollable = _a[1];
|
|
20
|
+
var checkScrollable = React.useCallback(function () {
|
|
21
|
+
if (scrollContentRef.current) {
|
|
22
|
+
var _a = scrollContentRef.current, offsetWidth = _a.offsetWidth, clientWidth = _a.clientWidth, offsetHeight = _a.offsetHeight, clientHeight = _a.clientHeight;
|
|
23
|
+
setScrollable({ vertical: offsetWidth !== clientWidth, horizontal: offsetHeight !== clientHeight });
|
|
24
|
+
}
|
|
25
|
+
}, [scrollContentRef]);
|
|
26
|
+
return { scrollable: scrollable, checkScrollable: checkScrollable };
|
|
27
|
+
};
|
|
28
|
+
export var useSyncScroll = function (scrollContentRef, headerRef) {
|
|
22
29
|
var onScroll = React.useCallback(function () {
|
|
23
30
|
requestAnimationFrame(function () {
|
|
24
31
|
if (scrollContentRef.current && headerRef.current && scrollContentRef.current.scrollLeft !== headerRef.current.scrollLeft) {
|
|
25
32
|
headerRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
|
|
26
|
-
checkIsScrollToEdge();
|
|
27
33
|
}
|
|
28
34
|
});
|
|
29
|
-
}, [scrollContentRef, headerRef
|
|
30
|
-
|
|
31
|
-
return {
|
|
32
|
-
onScroll: onScroll,
|
|
33
|
-
tableBodyRef: tableBodyRef,
|
|
34
|
-
scrollBarSize: scrollBarSize,
|
|
35
|
-
};
|
|
35
|
+
}, [scrollContentRef, headerRef]);
|
|
36
|
+
return onScroll;
|
|
36
37
|
};
|
|
37
38
|
// for the box shadow transition of the fixed columns
|
|
38
39
|
export var useScrollToEdge = function (scrollContentRef) {
|
|
@@ -47,19 +48,4 @@ export var useScrollToEdge = function (scrollContentRef) {
|
|
|
47
48
|
}, [scrollContentRef]);
|
|
48
49
|
return checkIsScrollToEdge;
|
|
49
50
|
};
|
|
50
|
-
export var useScrollBarSize = function (scrollContentRef, totalSize) {
|
|
51
|
-
var _a = __read(React.useState(0), 2), scrollBarSize = _a[0], setScrollBarSize = _a[1];
|
|
52
|
-
var calculateScrollBarSize = React.useCallback(function () {
|
|
53
|
-
if (scrollContentRef.current) {
|
|
54
|
-
var _a = scrollContentRef.current, clientWidth = _a.clientWidth, offsetWidth = _a.offsetWidth;
|
|
55
|
-
setScrollBarSize(offsetWidth - clientWidth);
|
|
56
|
-
}
|
|
57
|
-
}, [scrollContentRef, setScrollBarSize]);
|
|
58
|
-
React.useEffect(function () {
|
|
59
|
-
calculateScrollBarSize();
|
|
60
|
-
}, [calculateScrollBarSize, totalSize]);
|
|
61
|
-
return {
|
|
62
|
-
scrollBarSize: scrollBarSize,
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
51
|
//# sourceMappingURL=useScroll.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScroll.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useScroll.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useScroll.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useScroll.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,gBAAiD;IACrE,IAAA,KAAA,OAA8B,KAAK,CAAC,QAAQ,CAAC,EAAC,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAC,CAAC,IAAA,EAAjF,UAAU,QAAA,EAAE,aAAa,QAAwD,CAAC;IAEzF,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC;QACtC,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACpB,IAAA,KAAyD,gBAAgB,CAAC,OAAO,EAAhF,WAAW,iBAAA,EAAE,WAAW,iBAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAA4B,CAAC;YACxF,aAAa,CAAC,EAAC,QAAQ,EAAE,WAAW,KAAK,WAAW,EAAE,UAAU,EAAE,YAAY,KAAK,YAAY,EAAC,CAAC,CAAC;SACrG;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,EAAC,UAAU,YAAA,EAAE,eAAe,iBAAA,EAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,gBAAiD,EAAE,SAA0C;IACvH,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,qBAAqB,CAAC;YAClB,IAAI,gBAAgB,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE;gBACvH,SAAS,CAAC,OAAO,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;aACtE;QACL,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,CAAC;IAElC,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,qDAAqD;AACrD,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,gBAAiD;IAC7E,IAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC;QAC1C,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACpB,IAAA,KAAyC,gBAAgB,CAAC,OAAO,EAAhE,UAAU,gBAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAA4B,CAAC;YACxE,IAAM,cAAc,GAAG,UAAU,IAAI,CAAC,CAAC;YACvC,IAAM,eAAe,GAAG,UAAU,IAAI,WAAW,GAAG,WAAW,CAAC;YAChE,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;YAC5E,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC;SACjF;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,mBAAmB,CAAC;AAC/B,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useScrollBarSize: () => number;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
+
if (!m) return o;
|
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
|
5
|
+
try {
|
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
+
}
|
|
8
|
+
catch (error) { e = { error: error }; }
|
|
9
|
+
finally {
|
|
10
|
+
try {
|
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
+
}
|
|
13
|
+
finally { if (e) throw e.error; }
|
|
14
|
+
}
|
|
15
|
+
return ar;
|
|
16
|
+
};
|
|
17
|
+
import React from "react";
|
|
18
|
+
import { useDidMountEffect } from "../../../hooks/useDidMountEffect";
|
|
19
|
+
export var useScrollBarSize = function () {
|
|
20
|
+
var _a = __read(React.useState(0), 2), scrollbarSize = _a[0], setScrollBarSize = _a[1];
|
|
21
|
+
useDidMountEffect(function () {
|
|
22
|
+
// Creating invisible container
|
|
23
|
+
var element = document.createElement("div");
|
|
24
|
+
element.style.visibility = "hidden";
|
|
25
|
+
element.style.position = "absolute";
|
|
26
|
+
element.style.top = "-9999px";
|
|
27
|
+
element.style.width = "99px";
|
|
28
|
+
element.style.height = "99px";
|
|
29
|
+
element.style.overflow = "scroll"; // forcing scrollbar to appear
|
|
30
|
+
document.body.appendChild(element);
|
|
31
|
+
var offsetWidth = element.offsetWidth, clientWidth = element.clientWidth;
|
|
32
|
+
var scrollbarWidth = offsetWidth - clientWidth;
|
|
33
|
+
setScrollBarSize(scrollbarWidth);
|
|
34
|
+
document.body.removeChild(element);
|
|
35
|
+
});
|
|
36
|
+
return scrollbarSize;
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=useScrollBarSize.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollBarSize.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useScrollBarSize.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAEnE,MAAM,CAAC,IAAM,gBAAgB,GAAG;IACtB,IAAA,KAAA,OAAoC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAA,EAApD,aAAa,QAAA,EAAE,gBAAgB,QAAqB,CAAC;IAE5D,iBAAiB,CAAC;QACd,+BAA+B;QAC/B,IAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QACpC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACpC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC;QAC9B,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC7B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,8BAA8B;QACjE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAA,WAAW,GAAiB,OAAO,YAAxB,EAAE,WAAW,GAAI,OAAO,YAAX,CAAY;QAC3C,IAAM,cAAc,GAAG,WAAW,GAAG,WAAW,CAAC;QACjD,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC"}
|
|
@@ -25,6 +25,4 @@ export interface VirtualTableProps<RowType extends object> {
|
|
|
25
25
|
headerHeight?: number;
|
|
26
26
|
rowSelection?: VirtualTableRowSelection<RowType>;
|
|
27
27
|
}
|
|
28
|
-
export declare const VirtualTable:
|
|
29
|
-
displayName: string;
|
|
30
|
-
};
|
|
28
|
+
export declare const VirtualTable: <RowType extends object>({ columns, rowHeight, dataSource, className, rowClassName, loading, emptyPlaceholder, onRowClick, scrollY, scrollX, overscan, rowSelection, headerHeight, rowKey }: VirtualTableProps<RowType>) => React.JSX.Element;
|
|
@@ -6,17 +6,17 @@ import { Spin } from "../Spin";
|
|
|
6
6
|
import { TableRow } from "./TableRow";
|
|
7
7
|
import { TableHeader } from "./TableHeader";
|
|
8
8
|
import { useRowSelection } from "./hooks/useRowSelection";
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
9
|
+
import { useColumnWidths } from "./hooks/useColumnWidths";
|
|
10
|
+
import { useScrollBarSize } from "./hooks/useScrollBarSize";
|
|
11
|
+
import { useScrollToEdge, useSyncScroll, useScrollable } from "./hooks/useScroll";
|
|
12
|
+
import { useColumnsStickyPosition } from "./hooks/useColumnsStickyPosition";
|
|
13
|
+
import { ReactUtil } from "../../util/ReactUtil";
|
|
11
14
|
import "./index.less";
|
|
12
|
-
var
|
|
13
|
-
export var VirtualTable = Object.assign(function (_a) {
|
|
15
|
+
export var VirtualTable = ReactUtil.memo("VirtualTable", function (_a) {
|
|
14
16
|
var columns = _a.columns, rowHeight = _a.rowHeight, dataSource = _a.dataSource, className = _a.className, rowClassName = _a.rowClassName, loading = _a.loading, emptyPlaceholder = _a.emptyPlaceholder, onRowClick = _a.onRowClick, scrollY = _a.scrollY, scrollX = _a.scrollX, overscan = _a.overscan, rowSelection = _a.rowSelection, _b = _a.headerHeight, headerHeight = _b === void 0 ? 50 : _b, _c = _a.rowKey, rowKey = _c === void 0 ? "index" : _c;
|
|
15
17
|
var count = dataSource.length;
|
|
16
18
|
var scrollContentRef = React.useRef(null);
|
|
17
19
|
var totalSize = count * rowHeight;
|
|
18
|
-
var isHorizontalScrollable = scrollContentRef.current ? scrollContentRef.current.scrollWidth > scrollContentRef.current.offsetWidth : false;
|
|
19
|
-
var containerHeight = scrollY ? scrollY + headerHeight + (isHorizontalScrollable ? HORIZONTAL_SCROLL_BAR_HEIGHT : 0) : "100%";
|
|
20
20
|
var emptyElement = emptyPlaceholder || "暂无数据";
|
|
21
21
|
var transformedColumns = useRowSelection({ columns: columns, dataSource: dataSource, rowKey: rowKey, rowSelection: rowSelection });
|
|
22
22
|
var rowVirtualizer = useVirtualizer({
|
|
@@ -25,26 +25,36 @@ export var VirtualTable = Object.assign(function (_a) {
|
|
|
25
25
|
estimateSize: function () { return rowHeight; },
|
|
26
26
|
observeElementRect: function (instance, cb) {
|
|
27
27
|
observeElementRect(instance, cb);
|
|
28
|
-
getColumnWidths();
|
|
29
28
|
},
|
|
30
29
|
overscan: overscan,
|
|
31
30
|
});
|
|
32
|
-
var _d =
|
|
33
|
-
var
|
|
31
|
+
var _d = useColumnWidths(), headerRef = _d.headerRef, getHeaderRef = _d.getHeaderRef, columnWidths = _d.columnWidths;
|
|
32
|
+
var scrollBarSize = useScrollBarSize();
|
|
33
|
+
var syncScroll = useSyncScroll(scrollContentRef, headerRef);
|
|
34
|
+
var checkIsScrollToEdge = useScrollToEdge(scrollContentRef);
|
|
35
|
+
var _e = useScrollable(scrollContentRef), scrollable = _e.scrollable, checkScrollable = _e.checkScrollable;
|
|
36
|
+
var columnsStickyPosition = useColumnsStickyPosition(transformedColumns, columnWidths);
|
|
37
|
+
var onScroll = React.useCallback(function () {
|
|
38
|
+
syncScroll();
|
|
39
|
+
checkIsScrollToEdge();
|
|
40
|
+
}, [syncScroll, checkIsScrollToEdge]);
|
|
34
41
|
React.useEffect(function () {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
42
|
+
checkIsScrollToEdge();
|
|
43
|
+
}, [columnWidths, checkIsScrollToEdge]);
|
|
44
|
+
React.useEffect(function () {
|
|
45
|
+
checkScrollable();
|
|
46
|
+
}, [totalSize, columnWidths, checkScrollable]);
|
|
47
|
+
var containerHeight = scrollY ? scrollY + headerHeight + (scrollable.horizontal ? scrollBarSize : 0) : "100%";
|
|
38
48
|
return (React.createElement("div", { className: classNames("g-virtual-table", className), style: { width: scrollX || "100%", height: containerHeight } },
|
|
39
49
|
loading && (React.createElement("div", { className: "mask" },
|
|
40
50
|
React.createElement(Spin, { spinning: loading }))),
|
|
41
51
|
React.createElement("div", { className: "scroll-content", ref: scrollContentRef, style: { height: "calc(100% - ".concat(headerHeight, "px)"), top: headerHeight }, onScroll: onScroll },
|
|
42
52
|
React.createElement("div", { className: "table", style: { height: totalSize } },
|
|
43
|
-
React.createElement(TableHeader, { headerRef:
|
|
44
|
-
columnWidths.length > 0 && (React.createElement("div", { className: "table-body"
|
|
53
|
+
React.createElement(TableHeader, { headerRef: getHeaderRef, headerHeight: headerHeight, columns: transformedColumns, columnsStickyPosition: columnsStickyPosition }),
|
|
54
|
+
columnWidths.length > 0 && (React.createElement("div", { className: "table-body" }, dataSource.length === 0
|
|
45
55
|
? emptyElement
|
|
46
56
|
: rowVirtualizer
|
|
47
57
|
.getVirtualItems()
|
|
48
|
-
.map(function (virtualItem) { return (React.createElement(TableRow, { key: virtualItem.key, rowHeight: rowHeight, onRowClick: onRowClick, virtualItem: virtualItem, data: dataSource[virtualItem.index], columns: transformedColumns, columnWidths: columnWidths, scrollBarSize: scrollBarSize, columnsStickyPosition: columnsStickyPosition, rowClassName: rowClassName })); })))))));
|
|
49
|
-
}
|
|
58
|
+
.map(function (virtualItem) { return (React.createElement(TableRow, { key: virtualItem.key, rowHeight: rowHeight, onRowClick: onRowClick, virtualItem: virtualItem, data: dataSource[virtualItem.index], columns: transformedColumns, columnWidths: columnWidths, scrollBarSize: scrollable.vertical ? scrollBarSize : 0, columnsStickyPosition: columnsStickyPosition, rowClassName: rowClassName })); })))))));
|
|
59
|
+
});
|
|
50
60
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,cAAc,EAAE,kBAAkB,EAAC,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,5 +17,5 @@ export interface Props {
|
|
|
17
17
|
export declare class WithExplanation extends React.PureComponent<Props> {
|
|
18
18
|
static displayName: string;
|
|
19
19
|
static defaultProps: PickOptional<Props>;
|
|
20
|
-
render(): string | number | true | React.
|
|
20
|
+
render(): string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
|
|
21
21
|
}
|
package/package.json
CHANGED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { VirtualTableColumn, ColumnsStickyPosition } from "../type";
|
|
3
|
-
interface Props<RowType extends object> {
|
|
4
|
-
columns: VirtualTableColumn<RowType>[];
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
*
|
|
8
|
-
* VirtualTable is not crated by <table>, the header cell width cannot auto align the body cell width which has large content.
|
|
9
|
-
* So VirtualTable get the columns widths by following steps:
|
|
10
|
-
* 1. Only render the headers with flex style
|
|
11
|
-
* 2. Get the widths of the table headers in ref
|
|
12
|
-
* 3. Calculate the sticky position of the fixed column/header if exists
|
|
13
|
-
* 4. Render the table body columns with the headers widths gotten in step 2
|
|
14
|
-
*
|
|
15
|
-
*/
|
|
16
|
-
export declare function useColumns<RowType extends object>({ columns }: Props<RowType>): {
|
|
17
|
-
columnWidths: number[];
|
|
18
|
-
getColumnWidths: () => void;
|
|
19
|
-
columnsStickyPosition: ColumnsStickyPosition;
|
|
20
|
-
headerRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
*
|
|
24
|
-
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
25
|
-
* the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
|
|
26
|
-
* useLayoutEffect will be trigged in the transition process and get the final correct column widths
|
|
27
|
-
*
|
|
28
|
-
*/
|
|
29
|
-
export declare const useColumnWidths: () => {
|
|
30
|
-
columnWidths: number[];
|
|
31
|
-
getColumnWidths: () => void;
|
|
32
|
-
headerRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
33
|
-
};
|
|
34
|
-
export declare const useColumnsStickyPosition: <RowType extends object>(columns: VirtualTableColumn<RowType>[], columnWidths: number[]) => ColumnsStickyPosition;
|
|
35
|
-
export {};
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
-
if (!m) return o;
|
|
4
|
-
var i = m.call(o), r, ar = [], e;
|
|
5
|
-
try {
|
|
6
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
-
}
|
|
8
|
-
catch (error) { e = { error: error }; }
|
|
9
|
-
finally {
|
|
10
|
-
try {
|
|
11
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
-
}
|
|
13
|
-
finally { if (e) throw e.error; }
|
|
14
|
-
}
|
|
15
|
-
return ar;
|
|
16
|
-
};
|
|
17
|
-
import React from "react";
|
|
18
|
-
import { useDebounce } from "../../../hooks/useDebounce";
|
|
19
|
-
import { ArrayUtil } from "../../../internal/ArrayUtil";
|
|
20
|
-
/**
|
|
21
|
-
*
|
|
22
|
-
* VirtualTable is not crated by <table>, the header cell width cannot auto align the body cell width which has large content.
|
|
23
|
-
* So VirtualTable get the columns widths by following steps:
|
|
24
|
-
* 1. Only render the headers with flex style
|
|
25
|
-
* 2. Get the widths of the table headers in ref
|
|
26
|
-
* 3. Calculate the sticky position of the fixed column/header if exists
|
|
27
|
-
* 4. Render the table body columns with the headers widths gotten in step 2
|
|
28
|
-
*
|
|
29
|
-
*/
|
|
30
|
-
export function useColumns(_a) {
|
|
31
|
-
var columns = _a.columns;
|
|
32
|
-
var _b = useColumnWidths(), columnWidths = _b.columnWidths, headerRef = _b.headerRef, getColumnWidths = _b.getColumnWidths;
|
|
33
|
-
var columnsStickyPosition = useColumnsStickyPosition(columns, columnWidths);
|
|
34
|
-
var debouncedGetColumnWidths = useDebounce(getColumnWidths, 100);
|
|
35
|
-
var handler = React.useCallback(function (event) {
|
|
36
|
-
if (event.currentTarget && "querySelector" in event.currentTarget && headerRef.current) {
|
|
37
|
-
var element = event.currentTarget;
|
|
38
|
-
var result = element.querySelector(".g-virtual-table");
|
|
39
|
-
if (result) {
|
|
40
|
-
debouncedGetColumnWidths();
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}, [headerRef, debouncedGetColumnWidths]);
|
|
44
|
-
React.useEffect(function () {
|
|
45
|
-
document.body.addEventListener("transitionend", handler);
|
|
46
|
-
document.body.addEventListener("animationend", handler);
|
|
47
|
-
return function () {
|
|
48
|
-
document.body.removeEventListener("transitionend", handler);
|
|
49
|
-
document.body.removeEventListener("animationend", handler);
|
|
50
|
-
};
|
|
51
|
-
}, [handler]);
|
|
52
|
-
return {
|
|
53
|
-
columnWidths: columnWidths,
|
|
54
|
-
getColumnWidths: getColumnWidths,
|
|
55
|
-
columnsStickyPosition: columnsStickyPosition,
|
|
56
|
-
headerRef: headerRef,
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
*
|
|
61
|
-
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
62
|
-
* the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
|
|
63
|
-
* useLayoutEffect will be trigged in the transition process and get the final correct column widths
|
|
64
|
-
*
|
|
65
|
-
*/
|
|
66
|
-
export var useColumnWidths = function () {
|
|
67
|
-
var headerRef = React.useRef(null);
|
|
68
|
-
var _a = __read(React.useState([]), 2), columnWidths = _a[0], setColumnWidths = _a[1];
|
|
69
|
-
var getColumnWidths = React.useCallback(function () {
|
|
70
|
-
if (!headerRef.current)
|
|
71
|
-
return;
|
|
72
|
-
var headers = headerRef.current.querySelectorAll(".table-header");
|
|
73
|
-
var widths = Array.prototype.slice.call(headers).map(function (header) {
|
|
74
|
-
var width = header.getBoundingClientRect().width;
|
|
75
|
-
return width;
|
|
76
|
-
});
|
|
77
|
-
setColumnWidths(widths);
|
|
78
|
-
}, [headerRef]);
|
|
79
|
-
return { columnWidths: columnWidths, getColumnWidths: getColumnWidths, headerRef: headerRef };
|
|
80
|
-
};
|
|
81
|
-
export var useColumnsStickyPosition = function (columns, columnWidths) {
|
|
82
|
-
return React.useMemo(function () {
|
|
83
|
-
var columnsStickyPosition = {};
|
|
84
|
-
var leftColumnsStackPositionValue = 0;
|
|
85
|
-
var rightColumnsStackPositionValue = 0;
|
|
86
|
-
var leftFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "left" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); });
|
|
87
|
-
// the right sticky value stack in reverse direction
|
|
88
|
-
var rightFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] || 0 } : null); }).reverse();
|
|
89
|
-
leftFixedCols.forEach(function (column, idx) {
|
|
90
|
-
columnsStickyPosition[column.columnIndex] = { value: leftColumnsStackPositionValue, isLast: idx === leftFixedCols.length - 1 };
|
|
91
|
-
leftColumnsStackPositionValue += column.width;
|
|
92
|
-
});
|
|
93
|
-
rightFixedCols.forEach(function (column, idx) {
|
|
94
|
-
columnsStickyPosition[column.columnIndex] = { value: rightColumnsStackPositionValue, isLast: idx === rightFixedCols.length - 1 };
|
|
95
|
-
rightColumnsStackPositionValue += column.width;
|
|
96
|
-
});
|
|
97
|
-
return columnsStickyPosition;
|
|
98
|
-
}, [columnWidths, columns]);
|
|
99
|
-
};
|
|
100
|
-
//# sourceMappingURL=useColumns.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useColumns.js","sourceRoot":"","sources":["../../../../src/core/VirtualTable/hooks/useColumns.ts"],"names":[],"mappings":"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"}
|