@oliasoft-open-source/react-ui-library 2.4.4 → 2.4.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/package.json
CHANGED
|
@@ -23,20 +23,21 @@ export const TableScrollWrapper = ({ table, children }) => {
|
|
|
23
23
|
|
|
24
24
|
return (
|
|
25
25
|
<div
|
|
26
|
+
id="scrollWrapper"
|
|
26
27
|
className={cx(
|
|
27
28
|
styles.scrollWrapper,
|
|
28
29
|
bordered ? styles.bordered : '',
|
|
29
30
|
maxHeight ? styles.maxHeight : '',
|
|
30
31
|
)}
|
|
31
|
-
style={{ maxHeight
|
|
32
|
+
style={{ maxHeight }}
|
|
32
33
|
>
|
|
33
34
|
{infiniteScroll ? (
|
|
34
35
|
<InfiniteScroll
|
|
35
36
|
dataLength={Math.min(rows.length, visibleRows + pageSize)} // Doesn't work with rows.length for some reason
|
|
36
37
|
next={loadMoreItems}
|
|
37
38
|
hasMore={hasMore}
|
|
38
|
-
|
|
39
|
-
style={{
|
|
39
|
+
scrollableTarget="scrollWrapper"
|
|
40
|
+
style={{ overflow: 'initial' }}
|
|
40
41
|
>
|
|
41
42
|
{children({ visibleRows })}
|
|
42
43
|
</InfiniteScroll>
|
|
@@ -170,6 +170,23 @@ export const tableInfiniteScroll = {
|
|
|
170
170
|
},
|
|
171
171
|
};
|
|
172
172
|
|
|
173
|
+
export const tableInfiniteScrollFullHeight = {
|
|
174
|
+
...tableInfiniteScroll,
|
|
175
|
+
maxHeight: '100%',
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
export const tableInfiniteScrollShort = {
|
|
179
|
+
...tableInfiniteScroll,
|
|
180
|
+
rows: Array.from({ length: 1 }, (_, index) => ({
|
|
181
|
+
cells: [
|
|
182
|
+
{ type: 'Input', value: `Strawberry Letter ${index + 1}` },
|
|
183
|
+
{ type: 'Input', value: 100 },
|
|
184
|
+
{ type: 'Input', value: 361 },
|
|
185
|
+
{ type: 'Input', value: 'Vietnam' },
|
|
186
|
+
],
|
|
187
|
+
})),
|
|
188
|
+
};
|
|
189
|
+
|
|
173
190
|
export const tableInfiniteScrollDnD = {
|
|
174
191
|
...tableInfiniteScroll,
|
|
175
192
|
draggable: true,
|
|
@@ -454,7 +471,6 @@ export const tableStickyHeaders = {
|
|
|
454
471
|
};
|
|
455
472
|
|
|
456
473
|
export const tableSort = {
|
|
457
|
-
fixedWidth: '100%',
|
|
458
474
|
headers: [
|
|
459
475
|
{
|
|
460
476
|
cells: [
|
|
@@ -78,11 +78,36 @@ StickyHeaders.args = {
|
|
|
78
78
|
table: storyData.tableStickyHeaders,
|
|
79
79
|
};
|
|
80
80
|
|
|
81
|
-
export const
|
|
82
|
-
|
|
81
|
+
export const InfiniteScrollFixedHeight = Template.bind({});
|
|
82
|
+
InfiniteScrollFixedHeight.args = {
|
|
83
83
|
table: storyData.tableInfiniteScroll,
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
+
export const InfiniteScrollFullHeight = Template.bind({});
|
|
87
|
+
InfiniteScrollFullHeight.args = {
|
|
88
|
+
table: storyData.tableInfiniteScrollFullHeight,
|
|
89
|
+
};
|
|
90
|
+
InfiniteScrollFullHeight.decorators = [
|
|
91
|
+
(Story) => (
|
|
92
|
+
<div style={{ height: 800 }}>
|
|
93
|
+
<Story />
|
|
94
|
+
</div>
|
|
95
|
+
),
|
|
96
|
+
];
|
|
97
|
+
|
|
98
|
+
export const InfiniteScrollShort = Template.bind({});
|
|
99
|
+
InfiniteScrollShort.args = {
|
|
100
|
+
table: storyData.tableInfiniteScrollShort,
|
|
101
|
+
};
|
|
102
|
+
InfiniteScrollShort.parameters = {
|
|
103
|
+
docs: {
|
|
104
|
+
description: {
|
|
105
|
+
story:
|
|
106
|
+
'If a `maxHeight` is set, the table should only fill that height if it needs to.',
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
|
|
86
111
|
export const InfiniteScrollWithDragAndDrop = Template.bind({});
|
|
87
112
|
InfiniteScrollWithDragAndDrop.args = {
|
|
88
113
|
table: storyData.tableInfiniteScrollDnD,
|