@megafon/ui-shared 8.8.2 → 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 */
|
|
@@ -19,32 +19,36 @@ var Table = function Table(_ref) {
|
|
|
19
19
|
var className = _ref.className,
|
|
20
20
|
_ref$fixColumn = _ref.fixColumn,
|
|
21
21
|
fixColumn = _ref$fixColumn === void 0 ? true : _ref$fixColumn,
|
|
22
|
+
_ref$boldFontInFirstC = _ref.boldFontInFirstColumn,
|
|
23
|
+
boldFontInFirstColumn = _ref$boldFontInFirstC === void 0 ? false : _ref$boldFontInFirstC,
|
|
22
24
|
_ref$minCellSize = _ref.minCellSize,
|
|
23
25
|
minCellSize = _ref$minCellSize === void 0 ? 'large' : _ref$minCellSize,
|
|
24
26
|
_ref$disableHeightLim = _ref.disableHeightLimit,
|
|
25
27
|
disableHeightLimit = _ref$disableHeightLim === void 0 ? false : _ref$disableHeightLim,
|
|
26
28
|
children = _ref.children;
|
|
27
29
|
var scrollRef = React.useRef(null);
|
|
28
|
-
var _React$useState = React.useState(
|
|
30
|
+
var _React$useState = React.useState({
|
|
31
|
+
top: false,
|
|
32
|
+
left: false
|
|
33
|
+
}),
|
|
29
34
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
var _React$useState3 = React.useState(
|
|
35
|
+
shadow = _React$useState2[0],
|
|
36
|
+
setShadow = _React$useState2[1];
|
|
37
|
+
var _React$useState3 = React.useState({
|
|
38
|
+
right: false,
|
|
39
|
+
bottom: false
|
|
40
|
+
}),
|
|
33
41
|
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
|
|
34
|
-
|
|
35
|
-
|
|
42
|
+
gradient = _React$useState4[0],
|
|
43
|
+
setGradient = _React$useState4[1];
|
|
36
44
|
var _React$useState5 = React.useState(false),
|
|
37
45
|
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
|
|
38
|
-
|
|
39
|
-
|
|
46
|
+
hasHorizontalScroll = _React$useState6[0],
|
|
47
|
+
setHasHorizontalScroll = _React$useState6[1];
|
|
40
48
|
var _React$useState7 = React.useState(false),
|
|
41
49
|
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var _React$useState9 = React.useState(false),
|
|
45
|
-
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
|
|
46
|
-
isTouchDevice = _React$useState10[0],
|
|
47
|
-
setTouchDevice = _React$useState10[1];
|
|
50
|
+
isTouchDevice = _React$useState8[0],
|
|
51
|
+
setTouchDevice = _React$useState8[1];
|
|
48
52
|
var handleTableScroll = React.useCallback(function () {
|
|
49
53
|
var scrollNode = scrollRef.current;
|
|
50
54
|
if (!scrollNode) {
|
|
@@ -58,10 +62,15 @@ var Table = function Table(_ref) {
|
|
|
58
62
|
scrollLeft = scrollNode.scrollLeft;
|
|
59
63
|
var deltaHeight = scrollHeight - clientHeight;
|
|
60
64
|
var deltaWidth = scrollWidth - clientWidth;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
setGradient({
|
|
66
|
+
right: deltaWidth !== Math.floor(scrollLeft),
|
|
67
|
+
bottom: deltaHeight !== Math.floor(scrollTop)
|
|
68
|
+
});
|
|
69
|
+
setShadow({
|
|
70
|
+
top: !!scrollTop,
|
|
71
|
+
left: !!scrollLeft
|
|
72
|
+
});
|
|
73
|
+
setHasHorizontalScroll(!!deltaWidth);
|
|
65
74
|
}, []);
|
|
66
75
|
React.useEffect(function () {
|
|
67
76
|
var handleResize = (0, _lodash["default"])(handleTableScroll, 300);
|
|
@@ -85,6 +94,7 @@ var Table = function Table(_ref) {
|
|
|
85
94
|
key: index,
|
|
86
95
|
className: cn('row', {
|
|
87
96
|
head: head,
|
|
97
|
+
content: !head,
|
|
88
98
|
align: vAlign
|
|
89
99
|
}),
|
|
90
100
|
"data-testid": "Table-row"
|
|
@@ -101,6 +111,8 @@ var Table = function Table(_ref) {
|
|
|
101
111
|
className: cn({
|
|
102
112
|
'fix-column': fixColumn,
|
|
103
113
|
'min-cell-size': minCellSize,
|
|
114
|
+
'bold-font': boldFontInFirstColumn,
|
|
115
|
+
'horizontal-scroll': hasHorizontalScroll,
|
|
104
116
|
touch: isTouchDevice
|
|
105
117
|
}, [className])
|
|
106
118
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -109,15 +121,15 @@ var Table = function Table(_ref) {
|
|
|
109
121
|
}),
|
|
110
122
|
ref: scrollRef,
|
|
111
123
|
onScroll: handleTableScroll
|
|
112
|
-
},
|
|
124
|
+
}, shadow.top && /*#__PURE__*/React.createElement("div", {
|
|
113
125
|
className: cn('top-shadow')
|
|
114
|
-
}),
|
|
126
|
+
}), shadow.left && /*#__PURE__*/React.createElement("div", {
|
|
115
127
|
className: cn('left-shadow')
|
|
116
128
|
}), /*#__PURE__*/React.createElement("table", {
|
|
117
129
|
className: cn('table')
|
|
118
|
-
}, /*#__PURE__*/React.createElement("tbody", null, renderRows())),
|
|
130
|
+
}, /*#__PURE__*/React.createElement("tbody", null, renderRows())), gradient.right && /*#__PURE__*/React.createElement("div", {
|
|
119
131
|
className: cn('right-gradient')
|
|
120
|
-
}),
|
|
132
|
+
}), gradient.bottom && /*#__PURE__*/React.createElement("div", {
|
|
121
133
|
className: cn('bottom-gradient')
|
|
122
134
|
})));
|
|
123
135
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-shared",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.9.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
79
|
"@babel/runtime": "^7.8.4",
|
|
80
|
-
"@megafon/ui-core": "^8.
|
|
80
|
+
"@megafon/ui-core": "^8.11.1",
|
|
81
81
|
"@megafon/ui-helpers": "^4.0.2",
|
|
82
82
|
"@megafon/ui-icons": "^3.12.0",
|
|
83
83
|
"core-js": "^3.6.4",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"lodash.throttle": "^4.1.1",
|
|
86
86
|
"swiper": "^11.1.1"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "c748a0748d78a2872ab16a384d8e81b83fcd60db"
|
|
89
89
|
}
|