@megafon/ui-shared 8.8.3 → 8.9.0
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/es/components/Container/Container.css +1 -1
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +1 -1
- package/dist/es/components/Table/Table.css +1 -1
- package/dist/es/components/Table/Table.d.ts +2 -0
- package/dist/es/components/Table/Table.js +34 -22
- package/dist/lib/components/Container/Container.css +1 -1
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +1 -1
- package/dist/lib/components/Table/Table.css +1 -1
- package/dist/lib/components/Table/Table.d.ts +2 -0
- package/dist/lib/components/Table/Table.js +34 -22
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-table{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;line-height:24px}.mfui-
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-table{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;line-height:24px}@supports (-moz-appearance:none){.mfui-table__scroll{scrollbar-color:var(--spbSky2) var(--spbSky1);scrollbar-width:auto}}.mfui-table:not(.mfui-table_touch) .mfui-table__scroll::-webkit-scrollbar{background-color:var(--spbSky1);border-radius:100px;height:8px;width:8px}.mfui-table:not(.mfui-table_touch) .mfui-table__scroll::-webkit-scrollbar-track{background-color:var(--spbSky0);border-radius:100px}.mfui-table:not(.mfui-table_touch) .mfui-table__scroll::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:100px}.mfui-table:not(.mfui-table_touch) .mfui-table__scroll::-webkit-scrollbar-corner{background:transparent}.mfui-table__scroll{display:grid;grid-template-columns:auto auto auto;max-width:100%;overflow:auto;position:relative}@media screen and (min-width:1024px){.mfui-table__scroll_limit{max-height:500px}}.mfui-table__top-shadow{background:-webkit-gradient(linear,left top,left bottom,color-stop(.01%,rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),color-stop(99.98%,hsla(0,0%,100%,0)));background:linear-gradient(180deg,rgba(0,0,0,.04) .01%,rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0) 99.98%);display:block;grid-column-end:4;grid-column-start:1;height:18px;margin-bottom:-18px;position:sticky;top:0;width:100%;z-index:2}.mfui-table__left-shadow{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.04)),color-stop(49.5%,rgba(0,0,0,.01)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.01) 49.5%,hsla(0,0%,100%,0));bottom:0;left:0;margin-right:-18px;position:sticky;top:0;width:18px;z-index:2}.mfui-table__bottom-gradient{background:-webkit-gradient(linear,left bottom,left top,color-stop(25%,var(--base)),to(hsla(0,0%,100%,0)));background:linear-gradient(to top,var(--base) 25%,hsla(0,0%,100%,0));bottom:0;display:block;grid-column-end:4;grid-column-start:1;height:48px;margin-top:-48px;position:sticky;width:100%;z-index:1}.mfui-table__right-gradient{background:-webkit-gradient(linear,right top,left top,color-stop(25%,var(--base)),to(hsla(0,0%,100%,0)));background:linear-gradient(to left,var(--base) 25%,hsla(0,0%,100%,0));display:block;height:100%;margin-left:-48px;position:sticky;right:0;width:48px;z-index:1}.mfui-table__table{background-color:var(--base);border-collapse:separate;border-spacing:0;border-width:0}.mfui-table__cell{background-color:var(--base);-webkit-box-sizing:border-box;box-sizing:border-box;padding:24px}@media screen and (max-width:767px){.mfui-table__cell{padding-left:16px;padding-right:16px}}.mfui-table__cell:first-child{left:0;min-width:144px;position:relative;width:144px}.mfui-table__cell:not(:first-child){max-width:288px}.mfui-table__row_head .mfui-table__cell{background-color:var(--spbSky0);color:var(--spbSky3);font-size:12px;height:72px;line-height:18px;padding-bottom:12px;vertical-align:bottom}.mfui-table__row_head .mfui-table__cell:first-child{border-bottom-left-radius:16px;border-top-left-radius:16px}.mfui-table__row_head .mfui-table__cell:last-child{border-bottom-right-radius:16px;border-top-right-radius:16px}.mfui-table__row_content:last-child .mfui-table__cell{border-bottom:1px solid var(--spbSky1)}.mfui-table__row_content .mfui-table__cell{border-top:1px solid var(--spbSky1)}.mfui-table__row_head+.mfui-table__row_content .mfui-table__cell{border-top:none}.mfui-table__row_align_bottom .mfui-table__cell{vertical-align:bottom}.mfui-table__row_align_top .mfui-table__cell{vertical-align:top}.mfui-table__row_align_top.mfui-table__row_head .mfui-table__cell{padding-top:12px}.mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child){min-width:72px}.mfui-table_min-cell-size_large .mfui-table__cell:not(:first-child){min-width:144px}.mfui-table_fix-column .mfui-table__cell:first-child{position:sticky}.mfui-table_fix-column .mfui-table__left-shadow{left:144px}.mfui-table_fix-column .mfui-table__bottom-gradient{z-index:3}.mfui-table_bold-font .mfui-table__cell:first-child{font-weight:500}.mfui-table_horizontal-scroll .mfui-table__row:last-child .mfui-table__cell{border-bottom:none}
|
|
@@ -6,6 +6,8 @@ export interface ITable {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
/** Фиксация первой колонки */
|
|
8
8
|
fixColumn?: boolean;
|
|
9
|
+
/** Жирный текст в первой колонке */
|
|
10
|
+
boldFontInFirstColumn?: boolean;
|
|
9
11
|
/** Минимальный размер ячеек */
|
|
10
12
|
minCellSize?: 'small' | 'large';
|
|
11
13
|
/** Отключить ограничение по высоте при разрешении больше 1024px */
|
|
@@ -10,32 +10,36 @@ var Table = function Table(_ref) {
|
|
|
10
10
|
var className = _ref.className,
|
|
11
11
|
_ref$fixColumn = _ref.fixColumn,
|
|
12
12
|
fixColumn = _ref$fixColumn === void 0 ? true : _ref$fixColumn,
|
|
13
|
+
_ref$boldFontInFirstC = _ref.boldFontInFirstColumn,
|
|
14
|
+
boldFontInFirstColumn = _ref$boldFontInFirstC === void 0 ? false : _ref$boldFontInFirstC,
|
|
13
15
|
_ref$minCellSize = _ref.minCellSize,
|
|
14
16
|
minCellSize = _ref$minCellSize === void 0 ? 'large' : _ref$minCellSize,
|
|
15
17
|
_ref$disableHeightLim = _ref.disableHeightLimit,
|
|
16
18
|
disableHeightLimit = _ref$disableHeightLim === void 0 ? false : _ref$disableHeightLim,
|
|
17
19
|
children = _ref.children;
|
|
18
20
|
var scrollRef = React.useRef(null);
|
|
19
|
-
var _React$useState = React.useState(
|
|
21
|
+
var _React$useState = React.useState({
|
|
22
|
+
top: false,
|
|
23
|
+
left: false
|
|
24
|
+
}),
|
|
20
25
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var _React$useState3 = React.useState(
|
|
26
|
+
shadow = _React$useState2[0],
|
|
27
|
+
setShadow = _React$useState2[1];
|
|
28
|
+
var _React$useState3 = React.useState({
|
|
29
|
+
right: false,
|
|
30
|
+
bottom: false
|
|
31
|
+
}),
|
|
24
32
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
25
|
-
|
|
26
|
-
|
|
33
|
+
gradient = _React$useState4[0],
|
|
34
|
+
setGradient = _React$useState4[1];
|
|
27
35
|
var _React$useState5 = React.useState(false),
|
|
28
36
|
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
29
|
-
|
|
30
|
-
|
|
37
|
+
hasHorizontalScroll = _React$useState6[0],
|
|
38
|
+
setHasHorizontalScroll = _React$useState6[1];
|
|
31
39
|
var _React$useState7 = React.useState(false),
|
|
32
40
|
_React$useState8 = _slicedToArray(_React$useState7, 2),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var _React$useState9 = React.useState(false),
|
|
36
|
-
_React$useState10 = _slicedToArray(_React$useState9, 2),
|
|
37
|
-
isTouchDevice = _React$useState10[0],
|
|
38
|
-
setTouchDevice = _React$useState10[1];
|
|
41
|
+
isTouchDevice = _React$useState8[0],
|
|
42
|
+
setTouchDevice = _React$useState8[1];
|
|
39
43
|
var handleTableScroll = React.useCallback(function () {
|
|
40
44
|
var scrollNode = scrollRef.current;
|
|
41
45
|
if (!scrollNode) {
|
|
@@ -49,10 +53,15 @@ var Table = function Table(_ref) {
|
|
|
49
53
|
scrollLeft = scrollNode.scrollLeft;
|
|
50
54
|
var deltaHeight = scrollHeight - clientHeight;
|
|
51
55
|
var deltaWidth = scrollWidth - clientWidth;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
setGradient({
|
|
57
|
+
right: deltaWidth !== Math.floor(scrollLeft),
|
|
58
|
+
bottom: deltaHeight !== Math.floor(scrollTop)
|
|
59
|
+
});
|
|
60
|
+
setShadow({
|
|
61
|
+
top: !!scrollTop,
|
|
62
|
+
left: !!scrollLeft
|
|
63
|
+
});
|
|
64
|
+
setHasHorizontalScroll(!!deltaWidth);
|
|
56
65
|
}, []);
|
|
57
66
|
React.useEffect(function () {
|
|
58
67
|
var handleResize = throttle(handleTableScroll, 300);
|
|
@@ -76,6 +85,7 @@ var Table = function Table(_ref) {
|
|
|
76
85
|
key: index,
|
|
77
86
|
className: cn('row', {
|
|
78
87
|
head: head,
|
|
88
|
+
content: !head,
|
|
79
89
|
align: vAlign
|
|
80
90
|
}),
|
|
81
91
|
"data-testid": "Table-row"
|
|
@@ -92,6 +102,8 @@ var Table = function Table(_ref) {
|
|
|
92
102
|
className: cn({
|
|
93
103
|
'fix-column': fixColumn,
|
|
94
104
|
'min-cell-size': minCellSize,
|
|
105
|
+
'bold-font': boldFontInFirstColumn,
|
|
106
|
+
'horizontal-scroll': hasHorizontalScroll,
|
|
95
107
|
touch: isTouchDevice
|
|
96
108
|
}, [className])
|
|
97
109
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -100,15 +112,15 @@ var Table = function Table(_ref) {
|
|
|
100
112
|
}),
|
|
101
113
|
ref: scrollRef,
|
|
102
114
|
onScroll: handleTableScroll
|
|
103
|
-
},
|
|
115
|
+
}, shadow.top && /*#__PURE__*/React.createElement("div", {
|
|
104
116
|
className: cn('top-shadow')
|
|
105
|
-
}),
|
|
117
|
+
}), shadow.left && /*#__PURE__*/React.createElement("div", {
|
|
106
118
|
className: cn('left-shadow')
|
|
107
119
|
}), /*#__PURE__*/React.createElement("table", {
|
|
108
120
|
className: cn('table')
|
|
109
|
-
}, /*#__PURE__*/React.createElement("tbody", null, renderRows())),
|
|
121
|
+
}, /*#__PURE__*/React.createElement("tbody", null, renderRows())), gradient.right && /*#__PURE__*/React.createElement("div", {
|
|
110
122
|
className: cn('right-gradient')
|
|
111
|
-
}),
|
|
123
|
+
}), gradient.bottom && /*#__PURE__*/React.createElement("div", {
|
|
112
124
|
className: cn('bottom-gradient')
|
|
113
125
|
})));
|
|
114
126
|
};
|