@hh.ru/magritte-ui-table 4.2.9 → 4.2.11
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/BaseTable.d.ts +1 -1
- package/BaseTable.js +266 -145
- package/BaseTable.js.map +1 -1
- package/FullPageContainer.js +27 -22
- package/FullPageContainer.js.map +1 -1
- package/SimpleTable.d.ts +1 -1
- package/SimpleTable.js +4 -4
- package/SimpleTable.js.map +1 -1
- package/StickyTableHeader.js +43 -37
- package/StickyTableHeader.js.map +1 -1
- package/Table.d.ts +1 -1
- package/Table.js +8 -8
- package/Table.js.map +1 -1
- package/TableBody.js +7 -4
- package/TableBody.js.map +1 -1
- package/TableCell.d.ts +1 -1
- package/TableCell.js +84 -60
- package/TableCell.js.map +1 -1
- package/TableHeader.d.ts +1 -1
- package/TableHeader.js +37 -11
- package/TableHeader.js.map +1 -1
- package/TableRow.d.ts +1 -1
- package/TableRow.js +108 -32
- package/TableRow.js.map +1 -1
- package/VirtualizedList/VirtualizedList.js +43 -32
- package/VirtualizedList/VirtualizedList.js.map +1 -1
- package/VirtualizedList/VirtualizedListWrapper.js +41 -15
- package/VirtualizedList/VirtualizedListWrapper.js.map +1 -1
- package/VirtualizedList/VirtualizedPanel.js +13 -7
- package/VirtualizedList/VirtualizedPanel.js.map +1 -1
- package/VirtualizedList/context.js +1 -1
- package/VirtualizedList/context.js.map +1 -1
- package/VirtualizedList/index.d.ts +3 -3
- package/VirtualizedList/index.js +1 -1
- package/VirtualizedList/useVirtualizedList.js +29 -33
- package/VirtualizedList/useVirtualizedList.js.map +1 -1
- package/cell-7-Eiwyn4.js +5 -0
- package/cell-7-Eiwyn4.js.map +1 -0
- package/context.js +3 -3
- package/context.js.map +1 -1
- package/index.css +1318 -1318
- package/index.d.ts +9 -9
- package/index.js +4 -4
- package/index.mock.d.ts +1 -1
- package/index.mock.js +11 -11
- package/index.mock.js.map +1 -1
- package/package.json +5 -5
- package/table-CQ76yrLp.js +5 -0
- package/table-CQ76yrLp.js.map +1 -0
- package/useTableResize.js +35 -37
- package/useTableResize.js.map +1 -1
- package/virtualized-list-DZqJXIA7.js +5 -0
- package/virtualized-list-DZqJXIA7.js.map +1 -0
- package/cell-DSmMms21.js +0 -5
- package/cell-DSmMms21.js.map +0 -1
- package/table-82HRmqkT.js +0 -5
- package/table-82HRmqkT.js.map +0 -1
- package/virtualized-list-BEEJBwlC.js +0 -5
- package/virtualized-list-BEEJBwlC.js.map +0 -1
package/BaseTable.d.ts
CHANGED
package/BaseTable.js
CHANGED
|
@@ -9,158 +9,279 @@ import { VirtualizedListWrapper } from './VirtualizedList/VirtualizedListWrapper
|
|
|
9
9
|
import { VirtualizedPanel } from './VirtualizedList/VirtualizedPanel.js';
|
|
10
10
|
import { TableContext } from './context.js';
|
|
11
11
|
import { useTableResize } from './useTableResize.js';
|
|
12
|
-
import { c as cellStyles } from './cell-
|
|
13
|
-
import { s as styles } from './table-
|
|
12
|
+
import { c as cellStyles } from './cell-7-Eiwyn4.js';
|
|
13
|
+
import { s as styles } from './table-CQ76yrLp.js';
|
|
14
14
|
import './VirtualizedList/context.js';
|
|
15
|
-
import './virtualized-list-
|
|
15
|
+
import './virtualized-list-DZqJXIA7.js';
|
|
16
16
|
|
|
17
17
|
const measureElement = (element) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
let rowHeight = element?.getBoundingClientRect().height;
|
|
19
|
+
const siblingElement = element.nextElementSibling;
|
|
20
|
+
if (siblingElement && siblingElement.hasAttribute("data-magritte-table-row-panel")) {
|
|
21
|
+
rowHeight += siblingElement.getBoundingClientRect().height;
|
|
22
|
+
}
|
|
23
|
+
return rowHeight;
|
|
24
24
|
};
|
|
25
|
-
const BaseTable = ({
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
25
|
+
const BaseTable = ({
|
|
26
|
+
density = 16,
|
|
27
|
+
topPanel: _topPanel,
|
|
28
|
+
bottomPanel: _bottomPanel,
|
|
29
|
+
fixedSize,
|
|
30
|
+
stickyBottom,
|
|
31
|
+
stickyHeader,
|
|
32
|
+
divider,
|
|
33
|
+
dividerTop,
|
|
34
|
+
dividerBottom,
|
|
35
|
+
tinted,
|
|
36
|
+
style = "primary",
|
|
37
|
+
styleHighlighted,
|
|
38
|
+
tintedStyle = "secondary",
|
|
39
|
+
tintedStyleHighlighted,
|
|
40
|
+
hoverEnabled,
|
|
41
|
+
topStyle,
|
|
42
|
+
bottomStyle,
|
|
43
|
+
padding,
|
|
44
|
+
paddingLeft: _paddingLeft,
|
|
45
|
+
paddingRight: _paddingRight,
|
|
46
|
+
cellsGap,
|
|
47
|
+
onScrollHorizontal,
|
|
48
|
+
virtualized = true,
|
|
49
|
+
stretched,
|
|
50
|
+
"data-qa": dataQa = "table-wrapper",
|
|
51
|
+
children
|
|
52
|
+
}) => {
|
|
53
|
+
const wrapperRef = useRef(null);
|
|
54
|
+
const contentRef = useRef(null);
|
|
55
|
+
const tableRef = useRef(null);
|
|
56
|
+
const headerRef = useRef(null);
|
|
57
|
+
const scrollbarContainerRef = useRef(null);
|
|
58
|
+
const scrollbarRef = useRef(null);
|
|
59
|
+
const [headerNode, setHeaderNode] = useState(null);
|
|
60
|
+
const topWithDivider = dividerTop ?? !!divider;
|
|
61
|
+
const bottomWithDivider = dividerBottom ?? !!divider;
|
|
62
|
+
const paddingLeft = _paddingLeft ?? padding;
|
|
63
|
+
const paddingRight = _paddingRight ?? padding;
|
|
64
|
+
const highlightedColor = styleHighlighted || style;
|
|
65
|
+
const tintedHighlightedColor = tintedStyleHighlighted || tintedStyle;
|
|
66
|
+
const topColor = topStyle || style;
|
|
67
|
+
const bottomColor = bottomStyle || style;
|
|
68
|
+
const [fontLoaded, setFontLoaded] = useState(false);
|
|
69
|
+
useWhenFontLoaded(() => setFontLoaded(true));
|
|
70
|
+
const { subscribeResizeHandler, unsubscribeResizeHandler } = useTableResize({
|
|
71
|
+
tableRef,
|
|
72
|
+
wrapperRef,
|
|
73
|
+
fontLoaded
|
|
74
|
+
});
|
|
75
|
+
const value = useMemo(
|
|
76
|
+
() => ({
|
|
77
|
+
headerNode,
|
|
78
|
+
stickyHeader,
|
|
79
|
+
paddingLeft,
|
|
80
|
+
paddingRight,
|
|
81
|
+
fixedSize,
|
|
82
|
+
fontLoaded,
|
|
83
|
+
virtualized,
|
|
84
|
+
divider: !!divider,
|
|
85
|
+
hoverEnabled,
|
|
86
|
+
subscribeResizeHandler,
|
|
87
|
+
unsubscribeResizeHandler
|
|
88
|
+
}),
|
|
89
|
+
[
|
|
90
|
+
headerNode,
|
|
91
|
+
stickyHeader,
|
|
92
|
+
paddingLeft,
|
|
93
|
+
paddingRight,
|
|
94
|
+
fixedSize,
|
|
95
|
+
fontLoaded,
|
|
96
|
+
divider,
|
|
97
|
+
virtualized,
|
|
98
|
+
hoverEnabled,
|
|
99
|
+
subscribeResizeHandler,
|
|
100
|
+
unsubscribeResizeHandler
|
|
101
|
+
]
|
|
102
|
+
);
|
|
103
|
+
const setScrollStyles = useCallback(() => {
|
|
104
|
+
if (wrapperRef.current && contentRef.current) {
|
|
105
|
+
wrapperRef.current.classList.toggle(cellStyles.hasScrollLeft, contentRef.current.scrollLeft > 0);
|
|
106
|
+
wrapperRef.current.classList.toggle(
|
|
107
|
+
cellStyles.hasScrollRight,
|
|
108
|
+
Math.round(contentRef.current.scrollLeft) + contentRef.current.offsetWidth + (paddingRight ?? 0) < contentRef.current.scrollWidth
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
}, [paddingRight]);
|
|
112
|
+
const setFakeScrollbar = useCallback(() => {
|
|
113
|
+
if (scrollbarRef.current && tableRef.current && contentRef.current && scrollbarContainerRef.current) {
|
|
114
|
+
if (contentRef.current.scrollWidth > contentRef.current.offsetWidth) {
|
|
115
|
+
scrollbarRef.current.style.setProperty("width", `${tableRef.current.getBoundingClientRect().width}px`);
|
|
116
|
+
scrollbarContainerRef.current.style.setProperty("display", "block");
|
|
117
|
+
} else {
|
|
118
|
+
scrollbarRef.current.style.setProperty("width", "auto");
|
|
119
|
+
scrollbarContainerRef.current.style.setProperty("display", "none");
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}, []);
|
|
123
|
+
const calcDividersAndScrollbar = useCallback(() => {
|
|
124
|
+
setScrollStyles();
|
|
125
|
+
setFakeScrollbar();
|
|
126
|
+
}, [setScrollStyles, setFakeScrollbar]);
|
|
127
|
+
const handleScrollContent = useCallback(() => {
|
|
128
|
+
if (headerRef.current) {
|
|
129
|
+
headerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;
|
|
130
|
+
}
|
|
131
|
+
if (scrollbarContainerRef.current) {
|
|
132
|
+
scrollbarContainerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;
|
|
133
|
+
}
|
|
134
|
+
setScrollStyles();
|
|
135
|
+
onScrollHorizontal?.();
|
|
136
|
+
}, [setScrollStyles, onScrollHorizontal]);
|
|
137
|
+
const handleHeaderScroll = useCallback(() => {
|
|
138
|
+
if (contentRef.current) {
|
|
139
|
+
contentRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;
|
|
140
|
+
}
|
|
141
|
+
if (scrollbarContainerRef.current) {
|
|
142
|
+
scrollbarContainerRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;
|
|
143
|
+
}
|
|
144
|
+
}, []);
|
|
145
|
+
const handleScrollContainerScroll = useCallback(() => {
|
|
146
|
+
if (contentRef.current) {
|
|
147
|
+
contentRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;
|
|
148
|
+
}
|
|
149
|
+
if (headerRef.current) {
|
|
150
|
+
headerRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;
|
|
151
|
+
}
|
|
152
|
+
}, []);
|
|
153
|
+
const headerRefCallback = useCallback((node) => {
|
|
154
|
+
if (node) {
|
|
155
|
+
setHeaderNode(node);
|
|
156
|
+
headerRef.current = node;
|
|
157
|
+
} else {
|
|
158
|
+
headerRef.current = null;
|
|
159
|
+
}
|
|
160
|
+
}, []);
|
|
161
|
+
useLayoutEffect(() => {
|
|
162
|
+
calcDividersAndScrollbar();
|
|
163
|
+
subscribeResizeHandler?.(calcDividersAndScrollbar);
|
|
164
|
+
return () => unsubscribeResizeHandler?.(calcDividersAndScrollbar);
|
|
165
|
+
}, [calcDividersAndScrollbar, subscribeResizeHandler, unsubscribeResizeHandler]);
|
|
166
|
+
const { hasHorizontalScroll, horizontalScrollbarProps, ...hScrollbar } = useScrollbar({
|
|
167
|
+
axis: "horizontal",
|
|
168
|
+
offsetRight: fixedSize ? 8 : void 0
|
|
169
|
+
});
|
|
170
|
+
const scrollContainerRefCallback = useMultipleRefs(scrollbarContainerRef, hScrollbar.scrollContainerRef);
|
|
171
|
+
const scrollContentRefCallback = useMultipleRefs(scrollbarRef, hScrollbar.contentWrapperRef);
|
|
172
|
+
const topPanel = _topPanel || stickyHeader ? /* @__PURE__ */ jsxs(VirtualizedPanel, { stickyTop: stickyHeader, style: topColor, children: [
|
|
173
|
+
_topPanel && /* @__PURE__ */ jsx(
|
|
174
|
+
"div",
|
|
175
|
+
{
|
|
176
|
+
className: classnames(styles.topPanel, {
|
|
177
|
+
[styles.withDivider]: topWithDivider
|
|
178
|
+
}),
|
|
179
|
+
"data-qa": "table-top-panel",
|
|
180
|
+
style: { paddingLeft, paddingRight },
|
|
181
|
+
children: _topPanel
|
|
182
|
+
}
|
|
183
|
+
),
|
|
184
|
+
stickyHeader && /* @__PURE__ */ jsx(
|
|
185
|
+
"div",
|
|
186
|
+
{
|
|
187
|
+
ref: headerRefCallback,
|
|
188
|
+
onScroll: handleHeaderScroll,
|
|
189
|
+
"data-qa": "table-sticky-header-root",
|
|
190
|
+
className: classnames(styles.headerContainer)
|
|
191
|
+
}
|
|
192
|
+
)
|
|
193
|
+
] }) : null;
|
|
194
|
+
const bottomPanel = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
195
|
+
(!_bottomPanel || !stickyBottom) && /* @__PURE__ */ jsxs(VirtualizedPanel, { stickyBottom: true, children: [
|
|
196
|
+
/* @__PURE__ */ jsx(
|
|
197
|
+
"div",
|
|
198
|
+
{
|
|
199
|
+
className: styles.scrollContainer,
|
|
200
|
+
onScroll: handleScrollContainerScroll,
|
|
201
|
+
ref: scrollContainerRefCallback,
|
|
202
|
+
children: /* @__PURE__ */ jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback })
|
|
120
203
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
204
|
+
),
|
|
205
|
+
hasHorizontalScroll && /* @__PURE__ */ jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps })
|
|
206
|
+
] }),
|
|
207
|
+
_bottomPanel && /* @__PURE__ */ jsxs(VirtualizedPanel, { stickyBottom, style: bottomColor, children: [
|
|
208
|
+
stickyBottom && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
209
|
+
/* @__PURE__ */ jsx(
|
|
210
|
+
"div",
|
|
211
|
+
{
|
|
212
|
+
className: styles.scrollContainer,
|
|
213
|
+
onScroll: handleScrollContainerScroll,
|
|
214
|
+
ref: scrollContainerRefCallback,
|
|
215
|
+
children: /* @__PURE__ */ jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback })
|
|
216
|
+
}
|
|
217
|
+
),
|
|
218
|
+
hasHorizontalScroll && /* @__PURE__ */ jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps })
|
|
219
|
+
] }),
|
|
220
|
+
/* @__PURE__ */ jsx(
|
|
221
|
+
"div",
|
|
222
|
+
{
|
|
223
|
+
className: classnames(styles.bottomPanel, {
|
|
224
|
+
[styles.withDivider]: bottomWithDivider
|
|
225
|
+
}),
|
|
226
|
+
"data-qa": "table-bottom-panel",
|
|
227
|
+
style: { paddingLeft, paddingRight },
|
|
228
|
+
children: _bottomPanel
|
|
126
229
|
}
|
|
127
|
-
|
|
128
|
-
|
|
230
|
+
)
|
|
231
|
+
] })
|
|
232
|
+
] });
|
|
233
|
+
return /* @__PURE__ */ jsx(
|
|
234
|
+
"div",
|
|
235
|
+
{
|
|
236
|
+
className: classnames(styles.wrapper, {
|
|
237
|
+
[styles.stretched]: stretched,
|
|
238
|
+
[styles[`style-${style}`]]: style,
|
|
239
|
+
[styles[`style-highlighted-${highlightedColor}`]]: highlightedColor,
|
|
240
|
+
[styles[`tinted-style-${tintedStyle}`]]: tinted && tintedStyle,
|
|
241
|
+
[styles[`tinted-style-highlighted-${tintedHighlightedColor}`]]: tinted && tintedHighlightedColor
|
|
242
|
+
}),
|
|
243
|
+
"data-qa": dataQa,
|
|
244
|
+
style: {
|
|
245
|
+
"--magritte-table-padding-left": `${paddingLeft ?? 0}px`,
|
|
246
|
+
"--magritte-table-padding-right": `${paddingRight ?? 0}px`,
|
|
247
|
+
"--magritte-table-row-gap": `${density}px 0`,
|
|
248
|
+
"--magritte-table-row-panel-gap": `0 0 ${density}px`,
|
|
249
|
+
...typeof cellsGap === "number" ? { "--magritte-table-cell-padding": `${cellsGap / 2}px` } : {}
|
|
250
|
+
},
|
|
251
|
+
children: /* @__PURE__ */ jsx(
|
|
252
|
+
VirtualizedListWrapper,
|
|
253
|
+
{
|
|
254
|
+
fixedSize,
|
|
255
|
+
virtualized,
|
|
256
|
+
topPanel,
|
|
257
|
+
bottomPanel,
|
|
258
|
+
ref: wrapperRef,
|
|
259
|
+
measureElement,
|
|
260
|
+
children: /* @__PURE__ */ jsx(TableContext.Provider, { value, children: /* @__PURE__ */ jsx(
|
|
261
|
+
"div",
|
|
262
|
+
{
|
|
263
|
+
ref: contentRef,
|
|
264
|
+
className: classnames(styles.container),
|
|
265
|
+
onScroll: handleScrollContent,
|
|
266
|
+
"data-qa": "table-container",
|
|
267
|
+
children: /* @__PURE__ */ jsx(
|
|
268
|
+
"table",
|
|
269
|
+
{
|
|
270
|
+
className: classnames(styles.table, {
|
|
271
|
+
[styles.stretched]: stretched,
|
|
272
|
+
[styles.divider]: !!divider
|
|
273
|
+
}),
|
|
274
|
+
"data-qa": "table",
|
|
275
|
+
ref: tableRef,
|
|
276
|
+
children
|
|
277
|
+
}
|
|
278
|
+
)
|
|
279
|
+
}
|
|
280
|
+
) })
|
|
129
281
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
subscribeResizeHandler?.(calcDividersAndScrollbar);
|
|
134
|
-
return () => unsubscribeResizeHandler?.(calcDividersAndScrollbar);
|
|
135
|
-
}, [calcDividersAndScrollbar, subscribeResizeHandler, unsubscribeResizeHandler]);
|
|
136
|
-
const { hasHorizontalScroll, horizontalScrollbarProps, ...hScrollbar } = useScrollbar({
|
|
137
|
-
axis: 'horizontal',
|
|
138
|
-
offsetRight: fixedSize ? 8 : undefined,
|
|
139
|
-
});
|
|
140
|
-
const scrollContainerRefCallback = useMultipleRefs(scrollbarContainerRef, hScrollbar.scrollContainerRef);
|
|
141
|
-
const scrollContentRefCallback = useMultipleRefs(scrollbarRef, hScrollbar.contentWrapperRef);
|
|
142
|
-
const topPanel = _topPanel || stickyHeader ? (jsxs(VirtualizedPanel, { stickyTop: stickyHeader, style: topColor, children: [_topPanel && (jsx("div", { className: classnames(styles.topPanel, {
|
|
143
|
-
[styles.withDivider]: topWithDivider,
|
|
144
|
-
}), "data-qa": "table-top-panel", style: { paddingLeft, paddingRight }, children: _topPanel })), stickyHeader && (jsx("div", { ref: headerRefCallback, onScroll: handleHeaderScroll, "data-qa": "table-sticky-header-root", className: classnames(styles.headerContainer) }))] })) : null;
|
|
145
|
-
const bottomPanel = (jsxs(Fragment, { children: [(!_bottomPanel || !stickyBottom) && (jsxs(VirtualizedPanel, { stickyBottom: true, children: [jsx("div", { className: styles.scrollContainer, onScroll: handleScrollContainerScroll, ref: scrollContainerRefCallback, children: jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback }) }), hasHorizontalScroll && (jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps }))] })), _bottomPanel && (jsxs(VirtualizedPanel, { stickyBottom: stickyBottom, style: bottomColor, children: [stickyBottom && (jsxs(Fragment, { children: [jsx("div", { className: styles.scrollContainer, onScroll: handleScrollContainerScroll, ref: scrollContainerRefCallback, children: jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback }) }), hasHorizontalScroll && (jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps }))] })), jsx("div", { className: classnames(styles.bottomPanel, {
|
|
146
|
-
[styles.withDivider]: bottomWithDivider,
|
|
147
|
-
}), "data-qa": "table-bottom-panel", style: { paddingLeft, paddingRight }, children: _bottomPanel })] }))] }));
|
|
148
|
-
return (jsx("div", { className: classnames(styles.wrapper, {
|
|
149
|
-
[styles.stretched]: stretched,
|
|
150
|
-
[styles[`style-${style}`]]: style,
|
|
151
|
-
[styles[`style-highlighted-${highlightedColor}`]]: highlightedColor,
|
|
152
|
-
[styles[`tinted-style-${tintedStyle}`]]: tinted && tintedStyle,
|
|
153
|
-
[styles[`tinted-style-highlighted-${tintedHighlightedColor}`]]: tinted && tintedHighlightedColor,
|
|
154
|
-
}), "data-qa": dataQa, style: {
|
|
155
|
-
'--magritte-table-padding-left': `${paddingLeft ?? 0}px`,
|
|
156
|
-
'--magritte-table-padding-right': `${paddingRight ?? 0}px`,
|
|
157
|
-
'--magritte-table-row-gap': `${density}px 0`,
|
|
158
|
-
'--magritte-table-row-panel-gap': `0 0 ${density}px`,
|
|
159
|
-
...(typeof cellsGap === 'number' ? { '--magritte-table-cell-padding': `${cellsGap / 2}px` } : {}),
|
|
160
|
-
}, children: jsx(VirtualizedListWrapper, { fixedSize: fixedSize, virtualized: virtualized, topPanel: topPanel, bottomPanel: bottomPanel, ref: wrapperRef, measureElement: measureElement, children: jsx(TableContext.Provider, { value: value, children: jsx("div", { ref: contentRef, className: classnames(styles.container), onScroll: handleScrollContent, "data-qa": 'table-container', children: jsx("table", { className: classnames(styles.table, {
|
|
161
|
-
[styles.stretched]: stretched,
|
|
162
|
-
[styles.divider]: !!divider,
|
|
163
|
-
}), "data-qa": "table", ref: tableRef, children: children }) }) }) }) }));
|
|
282
|
+
)
|
|
283
|
+
}
|
|
284
|
+
);
|
|
164
285
|
};
|
|
165
286
|
|
|
166
287
|
export { BaseTable };
|
package/BaseTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTable.js","sources":["src/BaseTable.tsx"],"sourcesContent":["import { FC, RefCallback, useCallback, useLayoutEffect, useMemo, useRef, useState, CSSProperties } from 'react';\nimport classnames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { VirtualizedListWrapper } from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedListWrapper';\nimport { VirtualizedPanel } from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedPanel';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\nimport { TableProps } from '@hh.ru/magritte-ui-table/types';\nimport { useTableResize } from '@hh.ru/magritte-ui-table/useTableResize';\n\nimport cellStyles from './cell.less';\nimport styles from './table.less';\n\nconst measureElement = (element: Element) => {\n let rowHeight = element?.getBoundingClientRect().height;\n const siblingElement = element.nextElementSibling;\n if (siblingElement && siblingElement.hasAttribute('data-magritte-table-row-panel')) {\n rowHeight += siblingElement.getBoundingClientRect().height;\n }\n return rowHeight;\n};\n\nexport const BaseTable: FC<TableProps> = ({\n density = 16,\n topPanel: _topPanel,\n bottomPanel: _bottomPanel,\n fixedSize,\n stickyBottom,\n stickyHeader,\n divider,\n dividerTop,\n dividerBottom,\n tinted,\n style = 'primary',\n styleHighlighted,\n tintedStyle = 'secondary',\n tintedStyleHighlighted,\n hoverEnabled,\n topStyle,\n bottomStyle,\n padding,\n paddingLeft: _paddingLeft,\n paddingRight: _paddingRight,\n cellsGap,\n onScrollHorizontal,\n virtualized = true,\n stretched,\n 'data-qa': dataQa = 'table-wrapper',\n children,\n}) => {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const headerRef = useRef<HTMLDivElement | null>(null);\n const scrollbarContainerRef = useRef<HTMLDivElement | null>(null);\n const scrollbarRef = useRef<HTMLDivElement | null>(null);\n const [headerNode, setHeaderNode] = useState<HTMLDivElement | null>(null);\n const topWithDivider = dividerTop ?? !!divider;\n const bottomWithDivider = dividerBottom ?? !!divider;\n const paddingLeft = _paddingLeft ?? padding;\n const paddingRight = _paddingRight ?? padding;\n const highlightedColor = styleHighlighted || style;\n const tintedHighlightedColor = tintedStyleHighlighted || tintedStyle;\n const topColor = topStyle || style;\n const bottomColor = bottomStyle || style;\n const [fontLoaded, setFontLoaded] = useState(false);\n\n useWhenFontLoaded(() => setFontLoaded(true));\n const { subscribeResizeHandler, unsubscribeResizeHandler } = useTableResize({\n tableRef,\n wrapperRef,\n fontLoaded,\n });\n\n const value = useMemo(\n () => ({\n headerNode,\n stickyHeader,\n paddingLeft,\n paddingRight,\n fixedSize,\n fontLoaded,\n virtualized,\n divider: !!divider,\n hoverEnabled,\n subscribeResizeHandler,\n unsubscribeResizeHandler,\n }),\n [\n headerNode,\n stickyHeader,\n paddingLeft,\n paddingRight,\n fixedSize,\n fontLoaded,\n divider,\n virtualized,\n hoverEnabled,\n subscribeResizeHandler,\n unsubscribeResizeHandler,\n ]\n );\n\n const setScrollStyles = useCallback(() => {\n if (wrapperRef.current && contentRef.current) {\n wrapperRef.current.classList.toggle(cellStyles.hasScrollLeft, contentRef.current.scrollLeft > 0);\n wrapperRef.current.classList.toggle(\n cellStyles.hasScrollRight,\n Math.round(contentRef.current.scrollLeft) + contentRef.current.offsetWidth + (paddingRight ?? 0) <\n contentRef.current.scrollWidth\n );\n }\n }, [paddingRight]);\n\n const setFakeScrollbar = useCallback(() => {\n if (scrollbarRef.current && tableRef.current && contentRef.current && scrollbarContainerRef.current) {\n if (contentRef.current.scrollWidth > contentRef.current.offsetWidth) {\n scrollbarRef.current.style.setProperty('width', `${tableRef.current.getBoundingClientRect().width}px`);\n scrollbarContainerRef.current.style.setProperty('display', 'block');\n } else {\n scrollbarRef.current.style.setProperty('width', 'auto');\n scrollbarContainerRef.current.style.setProperty('display', 'none');\n }\n }\n }, []);\n\n const calcDividersAndScrollbar = useCallback(() => {\n setScrollStyles();\n setFakeScrollbar();\n }, [setScrollStyles, setFakeScrollbar]);\n\n const handleScrollContent = useCallback(() => {\n if (headerRef.current) {\n headerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n }\n if (scrollbarContainerRef.current) {\n scrollbarContainerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n }\n setScrollStyles();\n onScrollHorizontal?.();\n }, [setScrollStyles, onScrollHorizontal]);\n\n const handleHeaderScroll = useCallback(() => {\n if (contentRef.current) {\n contentRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n }\n if (scrollbarContainerRef.current) {\n scrollbarContainerRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n }\n }, []);\n\n const handleScrollContainerScroll = useCallback(() => {\n if (contentRef.current) {\n contentRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n }\n\n if (headerRef.current) {\n headerRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n }\n }, []);\n\n const headerRefCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n if (node) {\n setHeaderNode(node);\n headerRef.current = node;\n } else {\n headerRef.current = null;\n }\n }, []);\n\n useLayoutEffect(() => {\n calcDividersAndScrollbar();\n subscribeResizeHandler?.(calcDividersAndScrollbar);\n\n return () => unsubscribeResizeHandler?.(calcDividersAndScrollbar);\n }, [calcDividersAndScrollbar, subscribeResizeHandler, unsubscribeResizeHandler]);\n\n const { hasHorizontalScroll, horizontalScrollbarProps, ...hScrollbar } = useScrollbar({\n axis: 'horizontal',\n offsetRight: fixedSize ? 8 : undefined,\n });\n const scrollContainerRefCallback = useMultipleRefs(scrollbarContainerRef, hScrollbar.scrollContainerRef);\n const scrollContentRefCallback = useMultipleRefs(scrollbarRef, hScrollbar.contentWrapperRef);\n\n const topPanel =\n _topPanel || stickyHeader ? (\n <VirtualizedPanel stickyTop={stickyHeader} style={topColor}>\n {_topPanel && (\n <div\n className={classnames(styles.topPanel, {\n [styles.withDivider]: topWithDivider,\n })}\n data-qa=\"table-top-panel\"\n style={{ paddingLeft, paddingRight }}\n >\n {_topPanel}\n </div>\n )}\n {stickyHeader && (\n <div\n ref={headerRefCallback}\n onScroll={handleHeaderScroll}\n data-qa=\"table-sticky-header-root\"\n className={classnames(styles.headerContainer)}\n />\n )}\n </VirtualizedPanel>\n ) : null;\n\n const bottomPanel = (\n <>\n {(!_bottomPanel || !stickyBottom) && (\n <VirtualizedPanel stickyBottom>\n <div\n className={styles.scrollContainer}\n onScroll={handleScrollContainerScroll}\n ref={scrollContainerRefCallback}\n >\n <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n </div>\n {hasHorizontalScroll && (\n <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n )}\n </VirtualizedPanel>\n )}\n {_bottomPanel && (\n <VirtualizedPanel stickyBottom={stickyBottom} style={bottomColor}>\n {stickyBottom && (\n <>\n <div\n className={styles.scrollContainer}\n onScroll={handleScrollContainerScroll}\n ref={scrollContainerRefCallback}\n >\n <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n </div>\n {hasHorizontalScroll && (\n <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n )}\n </>\n )}\n <div\n className={classnames(styles.bottomPanel, {\n [styles.withDivider]: bottomWithDivider,\n })}\n data-qa=\"table-bottom-panel\"\n style={{ paddingLeft, paddingRight }}\n >\n {_bottomPanel}\n </div>\n </VirtualizedPanel>\n )}\n </>\n );\n return (\n <div\n className={classnames(styles.wrapper, {\n [styles.stretched]: stretched,\n [styles[`style-${style}`]]: style,\n [styles[`style-highlighted-${highlightedColor}`]]: highlightedColor,\n [styles[`tinted-style-${tintedStyle}`]]: tinted && tintedStyle,\n [styles[`tinted-style-highlighted-${tintedHighlightedColor}`]]: tinted && tintedHighlightedColor,\n })}\n data-qa={dataQa}\n style={\n {\n '--magritte-table-padding-left': `${paddingLeft ?? 0}px`,\n '--magritte-table-padding-right': `${paddingRight ?? 0}px`,\n '--magritte-table-row-gap': `${density}px 0`,\n '--magritte-table-row-panel-gap': `0 0 ${density}px`,\n ...(typeof cellsGap === 'number' ? { '--magritte-table-cell-padding': `${cellsGap / 2}px` } : {}),\n } as CSSProperties\n }\n >\n <VirtualizedListWrapper\n fixedSize={fixedSize}\n virtualized={virtualized}\n topPanel={topPanel}\n bottomPanel={bottomPanel}\n ref={wrapperRef}\n measureElement={measureElement}\n >\n <TableContext.Provider value={value}>\n <div\n ref={contentRef}\n className={classnames(styles.container)}\n onScroll={handleScrollContent}\n data-qa={'table-container'}\n >\n <table\n className={classnames(styles.table, {\n [styles.stretched]: stretched,\n [styles.divider]: !!divider,\n })}\n data-qa=\"table\"\n ref={tableRef}\n >\n {children}\n </table>\n </div>\n </TableContext.Provider>\n </VirtualizedListWrapper>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BaseTable.js","sources":["src/BaseTable.tsx"],"sourcesContent":["import { FC, RefCallback, useCallback, useLayoutEffect, useMemo, useRef, useState, CSSProperties } from 'react';\nimport classnames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { VirtualizedListWrapper } from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedListWrapper';\nimport { VirtualizedPanel } from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedPanel';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\nimport { TableProps } from '@hh.ru/magritte-ui-table/types';\nimport { useTableResize } from '@hh.ru/magritte-ui-table/useTableResize';\n\nimport cellStyles from './cell.less';\nimport styles from './table.less';\n\nconst measureElement = (element: Element) => {\n let rowHeight = element?.getBoundingClientRect().height;\n const siblingElement = element.nextElementSibling;\n if (siblingElement && siblingElement.hasAttribute('data-magritte-table-row-panel')) {\n rowHeight += siblingElement.getBoundingClientRect().height;\n }\n return rowHeight;\n};\n\nexport const BaseTable: FC<TableProps> = ({\n density = 16,\n topPanel: _topPanel,\n bottomPanel: _bottomPanel,\n fixedSize,\n stickyBottom,\n stickyHeader,\n divider,\n dividerTop,\n dividerBottom,\n tinted,\n style = 'primary',\n styleHighlighted,\n tintedStyle = 'secondary',\n tintedStyleHighlighted,\n hoverEnabled,\n topStyle,\n bottomStyle,\n padding,\n paddingLeft: _paddingLeft,\n paddingRight: _paddingRight,\n cellsGap,\n onScrollHorizontal,\n virtualized = true,\n stretched,\n 'data-qa': dataQa = 'table-wrapper',\n children,\n}) => {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const headerRef = useRef<HTMLDivElement | null>(null);\n const scrollbarContainerRef = useRef<HTMLDivElement | null>(null);\n const scrollbarRef = useRef<HTMLDivElement | null>(null);\n const [headerNode, setHeaderNode] = useState<HTMLDivElement | null>(null);\n const topWithDivider = dividerTop ?? !!divider;\n const bottomWithDivider = dividerBottom ?? !!divider;\n const paddingLeft = _paddingLeft ?? padding;\n const paddingRight = _paddingRight ?? padding;\n const highlightedColor = styleHighlighted || style;\n const tintedHighlightedColor = tintedStyleHighlighted || tintedStyle;\n const topColor = topStyle || style;\n const bottomColor = bottomStyle || style;\n const [fontLoaded, setFontLoaded] = useState(false);\n\n useWhenFontLoaded(() => setFontLoaded(true));\n const { subscribeResizeHandler, unsubscribeResizeHandler } = useTableResize({\n tableRef,\n wrapperRef,\n fontLoaded,\n });\n\n const value = useMemo(\n () => ({\n headerNode,\n stickyHeader,\n paddingLeft,\n paddingRight,\n fixedSize,\n fontLoaded,\n virtualized,\n divider: !!divider,\n hoverEnabled,\n subscribeResizeHandler,\n unsubscribeResizeHandler,\n }),\n [\n headerNode,\n stickyHeader,\n paddingLeft,\n paddingRight,\n fixedSize,\n fontLoaded,\n divider,\n virtualized,\n hoverEnabled,\n subscribeResizeHandler,\n unsubscribeResizeHandler,\n ]\n );\n\n const setScrollStyles = useCallback(() => {\n if (wrapperRef.current && contentRef.current) {\n wrapperRef.current.classList.toggle(cellStyles.hasScrollLeft, contentRef.current.scrollLeft > 0);\n wrapperRef.current.classList.toggle(\n cellStyles.hasScrollRight,\n Math.round(contentRef.current.scrollLeft) + contentRef.current.offsetWidth + (paddingRight ?? 0) <\n contentRef.current.scrollWidth\n );\n }\n }, [paddingRight]);\n\n const setFakeScrollbar = useCallback(() => {\n if (scrollbarRef.current && tableRef.current && contentRef.current && scrollbarContainerRef.current) {\n if (contentRef.current.scrollWidth > contentRef.current.offsetWidth) {\n scrollbarRef.current.style.setProperty('width', `${tableRef.current.getBoundingClientRect().width}px`);\n scrollbarContainerRef.current.style.setProperty('display', 'block');\n } else {\n scrollbarRef.current.style.setProperty('width', 'auto');\n scrollbarContainerRef.current.style.setProperty('display', 'none');\n }\n }\n }, []);\n\n const calcDividersAndScrollbar = useCallback(() => {\n setScrollStyles();\n setFakeScrollbar();\n }, [setScrollStyles, setFakeScrollbar]);\n\n const handleScrollContent = useCallback(() => {\n if (headerRef.current) {\n headerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n }\n if (scrollbarContainerRef.current) {\n scrollbarContainerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n }\n setScrollStyles();\n onScrollHorizontal?.();\n }, [setScrollStyles, onScrollHorizontal]);\n\n const handleHeaderScroll = useCallback(() => {\n if (contentRef.current) {\n contentRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n }\n if (scrollbarContainerRef.current) {\n scrollbarContainerRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n }\n }, []);\n\n const handleScrollContainerScroll = useCallback(() => {\n if (contentRef.current) {\n contentRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n }\n\n if (headerRef.current) {\n headerRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n }\n }, []);\n\n const headerRefCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n if (node) {\n setHeaderNode(node);\n headerRef.current = node;\n } else {\n headerRef.current = null;\n }\n }, []);\n\n useLayoutEffect(() => {\n calcDividersAndScrollbar();\n subscribeResizeHandler?.(calcDividersAndScrollbar);\n\n return () => unsubscribeResizeHandler?.(calcDividersAndScrollbar);\n }, [calcDividersAndScrollbar, subscribeResizeHandler, unsubscribeResizeHandler]);\n\n const { hasHorizontalScroll, horizontalScrollbarProps, ...hScrollbar } = useScrollbar({\n axis: 'horizontal',\n offsetRight: fixedSize ? 8 : undefined,\n });\n const scrollContainerRefCallback = useMultipleRefs(scrollbarContainerRef, hScrollbar.scrollContainerRef);\n const scrollContentRefCallback = useMultipleRefs(scrollbarRef, hScrollbar.contentWrapperRef);\n\n const topPanel =\n _topPanel || stickyHeader ? (\n <VirtualizedPanel stickyTop={stickyHeader} style={topColor}>\n {_topPanel && (\n <div\n className={classnames(styles.topPanel, {\n [styles.withDivider]: topWithDivider,\n })}\n data-qa=\"table-top-panel\"\n style={{ paddingLeft, paddingRight }}\n >\n {_topPanel}\n </div>\n )}\n {stickyHeader && (\n <div\n ref={headerRefCallback}\n onScroll={handleHeaderScroll}\n data-qa=\"table-sticky-header-root\"\n className={classnames(styles.headerContainer)}\n />\n )}\n </VirtualizedPanel>\n ) : null;\n\n const bottomPanel = (\n <>\n {(!_bottomPanel || !stickyBottom) && (\n <VirtualizedPanel stickyBottom>\n <div\n className={styles.scrollContainer}\n onScroll={handleScrollContainerScroll}\n ref={scrollContainerRefCallback}\n >\n <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n </div>\n {hasHorizontalScroll && (\n <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n )}\n </VirtualizedPanel>\n )}\n {_bottomPanel && (\n <VirtualizedPanel stickyBottom={stickyBottom} style={bottomColor}>\n {stickyBottom && (\n <>\n <div\n className={styles.scrollContainer}\n onScroll={handleScrollContainerScroll}\n ref={scrollContainerRefCallback}\n >\n <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n </div>\n {hasHorizontalScroll && (\n <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n )}\n </>\n )}\n <div\n className={classnames(styles.bottomPanel, {\n [styles.withDivider]: bottomWithDivider,\n })}\n data-qa=\"table-bottom-panel\"\n style={{ paddingLeft, paddingRight }}\n >\n {_bottomPanel}\n </div>\n </VirtualizedPanel>\n )}\n </>\n );\n return (\n <div\n className={classnames(styles.wrapper, {\n [styles.stretched]: stretched,\n [styles[`style-${style}`]]: style,\n [styles[`style-highlighted-${highlightedColor}`]]: highlightedColor,\n [styles[`tinted-style-${tintedStyle}`]]: tinted && tintedStyle,\n [styles[`tinted-style-highlighted-${tintedHighlightedColor}`]]: tinted && tintedHighlightedColor,\n })}\n data-qa={dataQa}\n style={\n {\n '--magritte-table-padding-left': `${paddingLeft ?? 0}px`,\n '--magritte-table-padding-right': `${paddingRight ?? 0}px`,\n '--magritte-table-row-gap': `${density}px 0`,\n '--magritte-table-row-panel-gap': `0 0 ${density}px`,\n ...(typeof cellsGap === 'number' ? { '--magritte-table-cell-padding': `${cellsGap / 2}px` } : {}),\n } as CSSProperties\n }\n >\n <VirtualizedListWrapper\n fixedSize={fixedSize}\n virtualized={virtualized}\n topPanel={topPanel}\n bottomPanel={bottomPanel}\n ref={wrapperRef}\n measureElement={measureElement}\n >\n <TableContext.Provider value={value}>\n <div\n ref={contentRef}\n className={classnames(styles.container)}\n onScroll={handleScrollContent}\n data-qa={'table-container'}\n >\n <table\n className={classnames(styles.table, {\n [styles.stretched]: stretched,\n [styles.divider]: !!divider,\n })}\n data-qa=\"table\"\n ref={tableRef}\n >\n {children}\n </table>\n </div>\n </TableContext.Provider>\n </VirtualizedListWrapper>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/FullPageContainer.js
CHANGED
|
@@ -4,28 +4,33 @@ import { useRef, useState, useCallback, useLayoutEffect } from 'react';
|
|
|
4
4
|
import { useResize } from '@hh.ru/magritte-common-resize';
|
|
5
5
|
|
|
6
6
|
const FullPageContainer = ({ children }) => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
7
|
+
const ref = useRef(null);
|
|
8
|
+
const [padding, setPadding] = useState(void 0);
|
|
9
|
+
const calcPadding = useCallback(() => {
|
|
10
|
+
if (ref.current) {
|
|
11
|
+
const pageWidth = document.body.clientWidth;
|
|
12
|
+
const parentElement = ref.current.parentElement;
|
|
13
|
+
const contentRect = parentElement.getBoundingClientRect();
|
|
14
|
+
setPadding({ paddingLeft: contentRect.left, paddingRight: pageWidth - contentRect.right });
|
|
15
|
+
}
|
|
16
|
+
}, []);
|
|
17
|
+
useLayoutEffect(() => {
|
|
18
|
+
if (ref.current) {
|
|
19
|
+
const observer = new ResizeObserver(() => calcPadding());
|
|
20
|
+
observer.observe(document.body);
|
|
21
|
+
return () => observer.disconnect();
|
|
22
|
+
}
|
|
23
|
+
return void 0;
|
|
24
|
+
}, [calcPadding]);
|
|
25
|
+
useResize(calcPadding);
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
style: padding ? { marginLeft: `-${padding.paddingLeft}px`, marginRight: `-${padding.paddingRight}px` } : void 0,
|
|
31
|
+
children: padding ? children(padding) : null
|
|
32
|
+
}
|
|
33
|
+
);
|
|
29
34
|
};
|
|
30
35
|
|
|
31
36
|
export { FullPageContainer };
|
package/FullPageContainer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FullPageContainer.js","sources":["src/FullPageContainer.tsx"],"sourcesContent":["import { FC, ReactNode, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useResize } from '@hh.ru/magritte-common-resize';\n\ninterface PaddingState {\n paddingLeft: number;\n paddingRight: number;\n}\n\ninterface FullPageContainer {\n children: (padding: PaddingState) => ReactNode;\n}\n\nexport const FullPageContainer: FC<FullPageContainer> = ({ children }) => {\n const ref = useRef<HTMLDivElement>(null);\n const [padding, setPadding] = useState<PaddingState | undefined>(undefined);\n\n const calcPadding = useCallback(() => {\n if (ref.current) {\n const pageWidth = document.body.clientWidth;\n const parentElement = ref.current.parentElement as HTMLElement;\n const contentRect = parentElement.getBoundingClientRect();\n setPadding({ paddingLeft: contentRect.left, paddingRight: pageWidth - contentRect.right });\n }\n }, []);\n\n useLayoutEffect(() => {\n if (ref.current) {\n const observer = new ResizeObserver(() => calcPadding());\n observer.observe(document.body);\n return () => observer.disconnect();\n }\n return void 0;\n }, [calcPadding]);\n\n useResize(calcPadding);\n\n return (\n <div\n ref={ref}\n style={\n padding\n ? { marginLeft: `-${padding.paddingLeft}px`, marginRight: `-${padding.paddingRight}px` }\n : undefined\n }\n >\n {padding ? children(padding) : null}\n </div>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"FullPageContainer.js","sources":["src/FullPageContainer.tsx"],"sourcesContent":["import { FC, ReactNode, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useResize } from '@hh.ru/magritte-common-resize';\n\ninterface PaddingState {\n paddingLeft: number;\n paddingRight: number;\n}\n\ninterface FullPageContainer {\n children: (padding: PaddingState) => ReactNode;\n}\n\nexport const FullPageContainer: FC<FullPageContainer> = ({ children }) => {\n const ref = useRef<HTMLDivElement>(null);\n const [padding, setPadding] = useState<PaddingState | undefined>(undefined);\n\n const calcPadding = useCallback(() => {\n if (ref.current) {\n const pageWidth = document.body.clientWidth;\n const parentElement = ref.current.parentElement as HTMLElement;\n const contentRect = parentElement.getBoundingClientRect();\n setPadding({ paddingLeft: contentRect.left, paddingRight: pageWidth - contentRect.right });\n }\n }, []);\n\n useLayoutEffect(() => {\n if (ref.current) {\n const observer = new ResizeObserver(() => calcPadding());\n observer.observe(document.body);\n return () => observer.disconnect();\n }\n return void 0;\n }, [calcPadding]);\n\n useResize(calcPadding);\n\n return (\n <div\n ref={ref}\n style={\n padding\n ? { marginLeft: `-${padding.paddingLeft}px`, marginRight: `-${padding.paddingRight}px` }\n : undefined\n }\n >\n {padding ? children(padding) : null}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,iBAA2C,GAAA,CAAC,EAAE,QAAA,EAAe,KAAA;AACtE,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAmC,KAAS,CAAA,CAAA,CAAA;AAE1E,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AAClC,IAAA,IAAI,IAAI,OAAS,EAAA;AACb,MAAM,MAAA,SAAA,GAAY,SAAS,IAAK,CAAA,WAAA,CAAA;AAChC,MAAM,MAAA,aAAA,GAAgB,IAAI,OAAQ,CAAA,aAAA,CAAA;AAClC,MAAM,MAAA,WAAA,GAAc,cAAc,qBAAsB,EAAA,CAAA;AACxD,MAAW,UAAA,CAAA,EAAE,aAAa,WAAY,CAAA,IAAA,EAAM,cAAc,SAAY,GAAA,WAAA,CAAY,OAAO,CAAA,CAAA;AAAA,KAC7F;AAAA,GACJ,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,eAAA,CAAgB,MAAM;AAClB,IAAA,IAAI,IAAI,OAAS,EAAA;AACb,MAAA,MAAM,QAAW,GAAA,IAAI,cAAe,CAAA,MAAM,aAAa,CAAA,CAAA;AACvD,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAC9B,MAAO,OAAA,MAAM,SAAS,UAAW,EAAA,CAAA;AAAA,KACrC;AACA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACX,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,SAAA,CAAU,WAAW,CAAA,CAAA;AAErB,EACI,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,KACI,EAAA,OAAA,GACM,EAAE,UAAA,EAAY,CAAI,CAAA,EAAA,OAAA,CAAQ,WAAW,CAAA,EAAA,CAAA,EAAM,WAAa,EAAA,CAAA,CAAA,EAAI,OAAQ,CAAA,YAAY,MAChF,GAAA,KAAA,CAAA;AAAA,MAGT,QAAA,EAAA,OAAA,GAAU,QAAS,CAAA,OAAO,CAAI,GAAA,IAAA;AAAA,KAAA;AAAA,GACnC,CAAA;AAER;;;;"}
|
package/SimpleTable.d.ts
CHANGED