@gobolt/genesis 0.4.0 → 0.4.1
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/dist/components/Table/Table.d.ts +4 -4
- package/dist/index.cjs +40 -20
- package/dist/index.js +40 -20
- package/package.json +1 -1
|
@@ -5,7 +5,6 @@ import * as React from "react";
|
|
|
5
5
|
export type Change = (actionEvent: ActionEvent) => void;
|
|
6
6
|
export type SelectionType = "checkbox" | "radio";
|
|
7
7
|
export interface MaterializedViewConfig<T = any> {
|
|
8
|
-
enabled: boolean;
|
|
9
8
|
height?: number | string;
|
|
10
9
|
onLoadMore?: (offset: number, limit: number) => Promise<T[]> | T[];
|
|
11
10
|
loadMoreThreshold?: number;
|
|
@@ -27,7 +26,7 @@ export interface TableProps<T extends Record<string, any>> {
|
|
|
27
26
|
name?: string;
|
|
28
27
|
};
|
|
29
28
|
};
|
|
30
|
-
onChange?: (pagination:
|
|
29
|
+
onChange?: (pagination: TablePaginationConfig, filters: Record<string, any>, sorter: SorterResult<T> | SorterResult<T>[], extra: any) => void;
|
|
31
30
|
loading?: boolean;
|
|
32
31
|
pagination?: (TablePaginationConfig & {
|
|
33
32
|
paginationStyle?: PaginationStyle;
|
|
@@ -42,7 +41,8 @@ export interface TableProps<T extends Record<string, any>> {
|
|
|
42
41
|
};
|
|
43
42
|
[key: string]: any;
|
|
44
43
|
isMainContentCell?: boolean;
|
|
45
|
-
|
|
44
|
+
isMaterializedView?: boolean;
|
|
45
|
+
materializedViewConfig?: MaterializedViewConfig<T>;
|
|
46
46
|
}
|
|
47
47
|
export type TablePaginationType = {
|
|
48
48
|
pageSize?: number;
|
|
@@ -56,5 +56,5 @@ export type SorterResult<T> = {
|
|
|
56
56
|
field?: keyof T | string | React.Key | readonly React.Key[];
|
|
57
57
|
columnKey?: React.Key;
|
|
58
58
|
};
|
|
59
|
-
declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell,
|
|
59
|
+
declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, isMaterializedView, materializedViewConfig, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
60
60
|
export default Table;
|
package/dist/index.cjs
CHANGED
|
@@ -83663,7 +83663,8 @@ function Table({
|
|
|
83663
83663
|
rowSelection,
|
|
83664
83664
|
pagination,
|
|
83665
83665
|
isMainContentCell = false,
|
|
83666
|
-
|
|
83666
|
+
isMaterializedView = false,
|
|
83667
|
+
materializedViewConfig,
|
|
83667
83668
|
...rest
|
|
83668
83669
|
}) {
|
|
83669
83670
|
const [materializedData, setMaterializedData] = React__namespace.useState([]);
|
|
@@ -83671,27 +83672,29 @@ function Table({
|
|
|
83671
83672
|
const [hasMoreData, setHasMoreData] = React__namespace.useState(true);
|
|
83672
83673
|
const tableRef = React__namespace.useRef(null);
|
|
83673
83674
|
React__namespace.useEffect(() => {
|
|
83674
|
-
if (
|
|
83675
|
-
const initialSize =
|
|
83675
|
+
if (isMaterializedView) {
|
|
83676
|
+
const initialSize = materializedViewConfig?.initialLoadSize || 50;
|
|
83676
83677
|
const initialData = dataSource.slice(0, initialSize);
|
|
83677
83678
|
setMaterializedData(initialData);
|
|
83678
83679
|
setHasMoreData(dataSource.length > initialSize);
|
|
83679
83680
|
}
|
|
83680
|
-
}, [dataSource,
|
|
83681
|
+
}, [dataSource, isMaterializedView, materializedViewConfig]);
|
|
83681
83682
|
const handleScroll = React__namespace.useCallback(
|
|
83682
83683
|
debounce((e3) => {
|
|
83683
|
-
if (!
|
|
83684
|
+
if (!isMaterializedView || !materializedViewConfig?.onLoadMore || isLoadingMore || !hasMoreData) {
|
|
83684
83685
|
return;
|
|
83685
83686
|
}
|
|
83686
83687
|
const { target } = e3;
|
|
83687
83688
|
const { scrollTop, scrollHeight, clientHeight } = target;
|
|
83688
|
-
const threshold =
|
|
83689
|
+
const threshold = materializedViewConfig?.loadMoreThreshold || 100;
|
|
83689
83690
|
if (scrollTop + clientHeight >= scrollHeight - threshold) {
|
|
83690
83691
|
setIsLoadingMore(true);
|
|
83691
83692
|
const currentLength = materializedData.length;
|
|
83692
|
-
const loadSize =
|
|
83693
|
-
if (
|
|
83694
|
-
Promise.resolve(
|
|
83693
|
+
const loadSize = materializedViewConfig?.initialLoadSize || 50;
|
|
83694
|
+
if (materializedViewConfig?.onLoadMore) {
|
|
83695
|
+
Promise.resolve(
|
|
83696
|
+
materializedViewConfig.onLoadMore(currentLength, loadSize)
|
|
83697
|
+
).then((newData) => {
|
|
83695
83698
|
setMaterializedData((prev2) => [...prev2, ...newData]);
|
|
83696
83699
|
setHasMoreData(newData.length === loadSize);
|
|
83697
83700
|
}).catch((error2) => {
|
|
@@ -83710,10 +83713,17 @@ function Table({
|
|
|
83710
83713
|
}
|
|
83711
83714
|
}
|
|
83712
83715
|
}, 200),
|
|
83713
|
-
[
|
|
83716
|
+
[
|
|
83717
|
+
isMaterializedView,
|
|
83718
|
+
materializedViewConfig,
|
|
83719
|
+
materializedData,
|
|
83720
|
+
isLoadingMore,
|
|
83721
|
+
hasMoreData,
|
|
83722
|
+
dataSource
|
|
83723
|
+
]
|
|
83714
83724
|
);
|
|
83715
83725
|
const paginationConfig = React__namespace.useMemo(() => {
|
|
83716
|
-
if (
|
|
83726
|
+
if (isMaterializedView) {
|
|
83717
83727
|
return false;
|
|
83718
83728
|
}
|
|
83719
83729
|
return pagination === false ? false : {
|
|
@@ -83728,17 +83738,17 @@ function Table({
|
|
|
83728
83738
|
}
|
|
83729
83739
|
)
|
|
83730
83740
|
};
|
|
83731
|
-
}, [
|
|
83741
|
+
}, [isMaterializedView, pagination]);
|
|
83732
83742
|
const scrollConfig = React__namespace.useMemo(() => {
|
|
83733
|
-
if (
|
|
83743
|
+
if (isMaterializedView) {
|
|
83734
83744
|
return {
|
|
83735
83745
|
...rest.scroll,
|
|
83736
|
-
y:
|
|
83746
|
+
y: materializedViewConfig?.height || 400
|
|
83737
83747
|
};
|
|
83738
83748
|
}
|
|
83739
83749
|
return rest.scroll;
|
|
83740
|
-
}, [
|
|
83741
|
-
const tableDataSource =
|
|
83750
|
+
}, [isMaterializedView, materializedViewConfig, rest.scroll]);
|
|
83751
|
+
const tableDataSource = isMaterializedView ? materializedData : dataSource;
|
|
83742
83752
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
83743
83753
|
Table$1,
|
|
83744
83754
|
{
|
|
@@ -83753,7 +83763,7 @@ function Table({
|
|
|
83753
83763
|
rowSelection,
|
|
83754
83764
|
pagination: paginationConfig,
|
|
83755
83765
|
scroll: scrollConfig,
|
|
83756
|
-
onScroll:
|
|
83766
|
+
onScroll: isMaterializedView ? handleScroll : void 0,
|
|
83757
83767
|
$isMainContentCell: isMainContentCell,
|
|
83758
83768
|
...rest
|
|
83759
83769
|
}
|
|
@@ -84173,7 +84183,15 @@ const TableWithControls = ({
|
|
|
84173
84183
|
onChange
|
|
84174
84184
|
}) => {
|
|
84175
84185
|
const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
|
|
84176
|
-
const {
|
|
84186
|
+
const {
|
|
84187
|
+
dataSource,
|
|
84188
|
+
columns,
|
|
84189
|
+
rowSelection,
|
|
84190
|
+
hasSettings,
|
|
84191
|
+
hasFilter,
|
|
84192
|
+
isMaterializedView,
|
|
84193
|
+
materializedViewConfig
|
|
84194
|
+
} = tableData;
|
|
84177
84195
|
const onTableControlsChange = (event) => {
|
|
84178
84196
|
onChange(event);
|
|
84179
84197
|
};
|
|
@@ -84193,12 +84211,14 @@ const TableWithControls = ({
|
|
|
84193
84211
|
}
|
|
84194
84212
|
),
|
|
84195
84213
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
84196
|
-
|
|
84214
|
+
Table,
|
|
84197
84215
|
{
|
|
84198
84216
|
dataSource,
|
|
84199
84217
|
columns,
|
|
84200
84218
|
rowSelection,
|
|
84201
|
-
onChange: onTableChange
|
|
84219
|
+
onChange: onTableChange,
|
|
84220
|
+
isMaterializedView,
|
|
84221
|
+
materializedViewConfig
|
|
84202
84222
|
}
|
|
84203
84223
|
)
|
|
84204
84224
|
] });
|
package/dist/index.js
CHANGED
|
@@ -83645,7 +83645,8 @@ function Table({
|
|
|
83645
83645
|
rowSelection,
|
|
83646
83646
|
pagination,
|
|
83647
83647
|
isMainContentCell = false,
|
|
83648
|
-
|
|
83648
|
+
isMaterializedView = false,
|
|
83649
|
+
materializedViewConfig,
|
|
83649
83650
|
...rest
|
|
83650
83651
|
}) {
|
|
83651
83652
|
const [materializedData, setMaterializedData] = React.useState([]);
|
|
@@ -83653,27 +83654,29 @@ function Table({
|
|
|
83653
83654
|
const [hasMoreData, setHasMoreData] = React.useState(true);
|
|
83654
83655
|
const tableRef = React.useRef(null);
|
|
83655
83656
|
React.useEffect(() => {
|
|
83656
|
-
if (
|
|
83657
|
-
const initialSize =
|
|
83657
|
+
if (isMaterializedView) {
|
|
83658
|
+
const initialSize = materializedViewConfig?.initialLoadSize || 50;
|
|
83658
83659
|
const initialData = dataSource.slice(0, initialSize);
|
|
83659
83660
|
setMaterializedData(initialData);
|
|
83660
83661
|
setHasMoreData(dataSource.length > initialSize);
|
|
83661
83662
|
}
|
|
83662
|
-
}, [dataSource,
|
|
83663
|
+
}, [dataSource, isMaterializedView, materializedViewConfig]);
|
|
83663
83664
|
const handleScroll = React.useCallback(
|
|
83664
83665
|
debounce((e3) => {
|
|
83665
|
-
if (!
|
|
83666
|
+
if (!isMaterializedView || !materializedViewConfig?.onLoadMore || isLoadingMore || !hasMoreData) {
|
|
83666
83667
|
return;
|
|
83667
83668
|
}
|
|
83668
83669
|
const { target } = e3;
|
|
83669
83670
|
const { scrollTop, scrollHeight, clientHeight } = target;
|
|
83670
|
-
const threshold =
|
|
83671
|
+
const threshold = materializedViewConfig?.loadMoreThreshold || 100;
|
|
83671
83672
|
if (scrollTop + clientHeight >= scrollHeight - threshold) {
|
|
83672
83673
|
setIsLoadingMore(true);
|
|
83673
83674
|
const currentLength = materializedData.length;
|
|
83674
|
-
const loadSize =
|
|
83675
|
-
if (
|
|
83676
|
-
Promise.resolve(
|
|
83675
|
+
const loadSize = materializedViewConfig?.initialLoadSize || 50;
|
|
83676
|
+
if (materializedViewConfig?.onLoadMore) {
|
|
83677
|
+
Promise.resolve(
|
|
83678
|
+
materializedViewConfig.onLoadMore(currentLength, loadSize)
|
|
83679
|
+
).then((newData) => {
|
|
83677
83680
|
setMaterializedData((prev2) => [...prev2, ...newData]);
|
|
83678
83681
|
setHasMoreData(newData.length === loadSize);
|
|
83679
83682
|
}).catch((error2) => {
|
|
@@ -83692,10 +83695,17 @@ function Table({
|
|
|
83692
83695
|
}
|
|
83693
83696
|
}
|
|
83694
83697
|
}, 200),
|
|
83695
|
-
[
|
|
83698
|
+
[
|
|
83699
|
+
isMaterializedView,
|
|
83700
|
+
materializedViewConfig,
|
|
83701
|
+
materializedData,
|
|
83702
|
+
isLoadingMore,
|
|
83703
|
+
hasMoreData,
|
|
83704
|
+
dataSource
|
|
83705
|
+
]
|
|
83696
83706
|
);
|
|
83697
83707
|
const paginationConfig = React.useMemo(() => {
|
|
83698
|
-
if (
|
|
83708
|
+
if (isMaterializedView) {
|
|
83699
83709
|
return false;
|
|
83700
83710
|
}
|
|
83701
83711
|
return pagination === false ? false : {
|
|
@@ -83710,17 +83720,17 @@ function Table({
|
|
|
83710
83720
|
}
|
|
83711
83721
|
)
|
|
83712
83722
|
};
|
|
83713
|
-
}, [
|
|
83723
|
+
}, [isMaterializedView, pagination]);
|
|
83714
83724
|
const scrollConfig = React.useMemo(() => {
|
|
83715
|
-
if (
|
|
83725
|
+
if (isMaterializedView) {
|
|
83716
83726
|
return {
|
|
83717
83727
|
...rest.scroll,
|
|
83718
|
-
y:
|
|
83728
|
+
y: materializedViewConfig?.height || 400
|
|
83719
83729
|
};
|
|
83720
83730
|
}
|
|
83721
83731
|
return rest.scroll;
|
|
83722
|
-
}, [
|
|
83723
|
-
const tableDataSource =
|
|
83732
|
+
}, [isMaterializedView, materializedViewConfig, rest.scroll]);
|
|
83733
|
+
const tableDataSource = isMaterializedView ? materializedData : dataSource;
|
|
83724
83734
|
return /* @__PURE__ */ jsx(
|
|
83725
83735
|
Table$1,
|
|
83726
83736
|
{
|
|
@@ -83735,7 +83745,7 @@ function Table({
|
|
|
83735
83745
|
rowSelection,
|
|
83736
83746
|
pagination: paginationConfig,
|
|
83737
83747
|
scroll: scrollConfig,
|
|
83738
|
-
onScroll:
|
|
83748
|
+
onScroll: isMaterializedView ? handleScroll : void 0,
|
|
83739
83749
|
$isMainContentCell: isMainContentCell,
|
|
83740
83750
|
...rest
|
|
83741
83751
|
}
|
|
@@ -84155,7 +84165,15 @@ const TableWithControls = ({
|
|
|
84155
84165
|
onChange
|
|
84156
84166
|
}) => {
|
|
84157
84167
|
const { primaryTableRowData, secondaryTableRowData } = tableControlsData2;
|
|
84158
|
-
const {
|
|
84168
|
+
const {
|
|
84169
|
+
dataSource,
|
|
84170
|
+
columns,
|
|
84171
|
+
rowSelection,
|
|
84172
|
+
hasSettings,
|
|
84173
|
+
hasFilter,
|
|
84174
|
+
isMaterializedView,
|
|
84175
|
+
materializedViewConfig
|
|
84176
|
+
} = tableData;
|
|
84159
84177
|
const onTableControlsChange = (event) => {
|
|
84160
84178
|
onChange(event);
|
|
84161
84179
|
};
|
|
@@ -84175,12 +84193,14 @@ const TableWithControls = ({
|
|
|
84175
84193
|
}
|
|
84176
84194
|
),
|
|
84177
84195
|
/* @__PURE__ */ jsx(
|
|
84178
|
-
|
|
84196
|
+
Table,
|
|
84179
84197
|
{
|
|
84180
84198
|
dataSource,
|
|
84181
84199
|
columns,
|
|
84182
84200
|
rowSelection,
|
|
84183
|
-
onChange: onTableChange
|
|
84201
|
+
onChange: onTableChange,
|
|
84202
|
+
isMaterializedView,
|
|
84203
|
+
materializedViewConfig
|
|
84184
84204
|
}
|
|
84185
84205
|
)
|
|
84186
84206
|
] });
|