@semcore/data-table 3.1.0 → 3.1.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/CHANGELOG.md +6 -0
- package/lib/cjs/Body.js +5 -5
- package/lib/cjs/DataTable.js +37 -37
- package/lib/cjs/Head.js +5 -5
- package/lib/es6/Body.js +5 -5
- package/lib/es6/DataTable.js +37 -37
- package/lib/es6/Head.js +5 -5
- package/package.json +1 -1
- package/src/Body.tsx +0 -264
- package/src/DataTable.tsx +0 -444
- package/src/Head.tsx +0 -142
- package/src/index.ts +0 -2
- package/src/style/data-table.shadow.css +0 -295
- package/src/style/scroll-area.shadow.css +0 -6
- package/src/types.ts +0 -53
- package/src/utils.ts +0 -55
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.1.1] - 2022-07-21
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
|
|
10
|
+
|
|
5
11
|
## [3.1.0] - 2022-07-18
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/lib/cjs/Body.js
CHANGED
|
@@ -71,14 +71,14 @@ var scrollStyles = (
|
|
|
71
71
|
/*__reshadow_css_start__*/
|
|
72
72
|
_core.sstyled.insert(
|
|
73
73
|
/*__inner_css_start__*/
|
|
74
|
-
".
|
|
74
|
+
".___SShadowHorizontal_1l6cn_gg_:before{left:var(--left_1l6cn)!important}.___SShadowHorizontal_1l6cn_gg_:after{right:var(--right_1l6cn)!important}"
|
|
75
75
|
/*__inner_css_end__*/
|
|
76
|
-
, "
|
|
76
|
+
, "1l6cn_gg_")
|
|
77
77
|
/*__reshadow_css_end__*/
|
|
78
78
|
, {
|
|
79
|
-
"__SShadowHorizontal": "
|
|
80
|
-
"--left": "--
|
|
81
|
-
"--right": "--
|
|
79
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1l6cn_gg_",
|
|
80
|
+
"--left": "--left_1l6cn",
|
|
81
|
+
"--right": "--right_1l6cn"
|
|
82
82
|
});
|
|
83
83
|
var testEnv = process.env.NODE_ENV === 'test';
|
|
84
84
|
|
package/lib/cjs/DataTable.js
CHANGED
|
@@ -69,46 +69,46 @@ var style = (
|
|
|
69
69
|
/*__reshadow_css_start__*/
|
|
70
70
|
_core.sstyled.insert(
|
|
71
71
|
/*__inner_css_start__*/
|
|
72
|
-
".
|
|
72
|
+
".___SDataTable_1gvf4_gg_{position:relative}.___SHeadWrapper_1gvf4_gg_{position:relative}.___SHeadWrapper_1gvf4_gg_.__sticky_1gvf4_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1gvf4_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1gvf4_gg_{display:flex;align-items:center;flex-grow:1;font-size:12px;color:#191b23;box-sizing:border-box;position:relative}.___SColumn_1gvf4_gg_:focus{outline:none;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SColumn_1gvf4_gg_.__hidden_1gvf4_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1gvf4_gg_._use_primary_1gvf4_gg_{padding:12px;border-right:1px solid #e0e1e9;border-bottom:1px solid #e0e1e9;background-color:#f4f5f9}.___SColumn_1gvf4_gg_._use_secondary_1gvf4_gg_{padding:8px;border-bottom:1px solid #a9abb6;background-color:#ffffff}.___SColumn_1gvf4_gg_.__use_1gvf4_gg_:last-child{border-right:none}.___SColumn_1gvf4_gg_.__group_1gvf4_gg_.__use_1gvf4_gg_{display:flex;flex-wrap:wrap;flex-direction:column;align-items:normal;border-bottom:none;padding:0}.___SColumn_1gvf4_gg_.__groupHead_1gvf4_gg_.__use_1gvf4_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1gvf4_gg_.__groupHead_1gvf4_gg_._use_primary_1gvf4_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1gvf4_gg_.__groupHead_1gvf4_gg_._use_secondary_1gvf4_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1gvf4_gg_.__sortable_1gvf4_gg_{cursor:pointer}.___SColumn_1gvf4_gg_.__sortable_1gvf4_gg_._use_primary_1gvf4_gg_:hover{background-color:#e0e1e9}.___SColumn_1gvf4_gg_.__active_1gvf4_gg_._use_primary_1gvf4_gg_{background-color:#e0e1e9}.___SColumn_1gvf4_gg_.__resizable_1gvf4_gg_:hover:after{background:#e0e1e9}.___SColumn_1gvf4_gg_.__resizable_1gvf4_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1gvf4_gg_.__fixed_1gvf4_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1gvf4_gg_{fill:#a9abb6;margin-left:6px}.___SSortIcon_1gvf4_gg_.__active_1gvf4_gg_{fill:#8a8e9b}.___SBodyWrapper_1gvf4_gg_{position:relative}.___SBody_1gvf4_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_1gvf4_gg_{display:flex;flex-direction:row;position:relative}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#f0f0f4}.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#f2f3f4}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_muted_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#f6f7f7}.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#e9f7ff}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_info_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#c4e5fe}.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#dbfee8}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_success_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#9ef2c9}.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#fff3d9}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_warning_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#ffdca2}.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#fff0f7}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_danger_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#ffd7df}.___SRow_1gvf4_gg_.__positioned_1gvf4_gg_{position:absolute}.___SCell_1gvf4_gg_{display:flex;flex:1;flex-basis:auto;font-size:14px;line-height:1.42;color:#191b23;box-sizing:border-box;border-bottom:1px solid #e0e1e9;overflow:hidden;white-space:nowrap}.___SCell_1gvf4_gg_._use_primary_1gvf4_gg_{padding:12px;min-height:45px;background-color:#ffffff}.___SCell_1gvf4_gg_._use_secondary_1gvf4_gg_{padding:8px;min-height:37px;background-color:#ffffff}.___SCell_1gvf4_gg_.__fixed_1gvf4_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1gvf4_gg_._theme_muted_1gvf4_gg_{background-color:#f2f3f4}.___SCell_1gvf4_gg_._theme_info_1gvf4_gg_{background-color:#e9f7ff}.___SCell_1gvf4_gg_._theme_success_1gvf4_gg_{background-color:#dbfee8}.___SCell_1gvf4_gg_._theme_warning_1gvf4_gg_{background-color:#fff3d9}.___SCell_1gvf4_gg_._theme_danger_1gvf4_gg_{background-color:#fff0f7}.___SScrollAreaBar_1gvf4_gg_._orientation_horizontal_1gvf4_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1gvf4_gg_._orientation_vertical_1gvf4_gg_{width:12px}.___SScrollAreaBar_1gvf4_gg_._orientation_horizontal_1gvf4_gg_{margin-left:calc(var(--left_1gvf4) + 4px);margin-right:calc(var(--right_1gvf4) + 4px);width:calc(100% - var(--offsetSum_1gvf4) - 8px)}.___SHeightHold_1gvf4_gg_{position:absolute;top:0;width:100%;pointer-events:none;z-index:-1}"
|
|
73
73
|
/*__inner_css_end__*/
|
|
74
|
-
, "
|
|
74
|
+
, "1gvf4_gg_")
|
|
75
75
|
/*__reshadow_css_end__*/
|
|
76
76
|
, {
|
|
77
|
-
"__SDataTable": "
|
|
78
|
-
"__SHeadWrapper": "
|
|
79
|
-
"_sticky": "
|
|
80
|
-
"__SHead": "
|
|
81
|
-
"__SColumn": "
|
|
82
|
-
"_hidden": "
|
|
83
|
-
"_use_primary": "
|
|
84
|
-
"_use_secondary": "
|
|
85
|
-
"_use": "
|
|
86
|
-
"_group": "
|
|
87
|
-
"_groupHead": "
|
|
88
|
-
"_sortable": "
|
|
89
|
-
"_active": "
|
|
90
|
-
"_resizable": "
|
|
91
|
-
"_fixed": "
|
|
92
|
-
"__SSortIcon": "
|
|
93
|
-
"__SBodyWrapper": "
|
|
94
|
-
"__SBody": "
|
|
95
|
-
"__SRow": "
|
|
96
|
-
"__SCell": "
|
|
97
|
-
"_theme": "
|
|
98
|
-
"__SGroupCell": "
|
|
99
|
-
"_theme_muted": "
|
|
100
|
-
"_theme_info": "
|
|
101
|
-
"_theme_success": "
|
|
102
|
-
"_theme_warning": "
|
|
103
|
-
"_theme_danger": "
|
|
104
|
-
"_positioned": "
|
|
105
|
-
"__SScrollAreaBar": "
|
|
106
|
-
"_orientation_horizontal": "
|
|
107
|
-
"_orientation_vertical": "
|
|
108
|
-
"--left": "--
|
|
109
|
-
"--right": "--
|
|
110
|
-
"--offsetSum": "--
|
|
111
|
-
"__SHeightHold": "
|
|
77
|
+
"__SDataTable": "___SDataTable_1gvf4_gg_",
|
|
78
|
+
"__SHeadWrapper": "___SHeadWrapper_1gvf4_gg_",
|
|
79
|
+
"_sticky": "__sticky_1gvf4_gg_",
|
|
80
|
+
"__SHead": "___SHead_1gvf4_gg_",
|
|
81
|
+
"__SColumn": "___SColumn_1gvf4_gg_",
|
|
82
|
+
"_hidden": "__hidden_1gvf4_gg_",
|
|
83
|
+
"_use_primary": "_use_primary_1gvf4_gg_",
|
|
84
|
+
"_use_secondary": "_use_secondary_1gvf4_gg_",
|
|
85
|
+
"_use": "__use_1gvf4_gg_",
|
|
86
|
+
"_group": "__group_1gvf4_gg_",
|
|
87
|
+
"_groupHead": "__groupHead_1gvf4_gg_",
|
|
88
|
+
"_sortable": "__sortable_1gvf4_gg_",
|
|
89
|
+
"_active": "__active_1gvf4_gg_",
|
|
90
|
+
"_resizable": "__resizable_1gvf4_gg_",
|
|
91
|
+
"_fixed": "__fixed_1gvf4_gg_",
|
|
92
|
+
"__SSortIcon": "___SSortIcon_1gvf4_gg_",
|
|
93
|
+
"__SBodyWrapper": "___SBodyWrapper_1gvf4_gg_",
|
|
94
|
+
"__SBody": "___SBody_1gvf4_gg_",
|
|
95
|
+
"__SRow": "___SRow_1gvf4_gg_",
|
|
96
|
+
"__SCell": "___SCell_1gvf4_gg_",
|
|
97
|
+
"_theme": "__theme_1gvf4_gg_",
|
|
98
|
+
"__SGroupCell": "___SGroupCell_1gvf4_gg_",
|
|
99
|
+
"_theme_muted": "_theme_muted_1gvf4_gg_",
|
|
100
|
+
"_theme_info": "_theme_info_1gvf4_gg_",
|
|
101
|
+
"_theme_success": "_theme_success_1gvf4_gg_",
|
|
102
|
+
"_theme_warning": "_theme_warning_1gvf4_gg_",
|
|
103
|
+
"_theme_danger": "_theme_danger_1gvf4_gg_",
|
|
104
|
+
"_positioned": "__positioned_1gvf4_gg_",
|
|
105
|
+
"__SScrollAreaBar": "___SScrollAreaBar_1gvf4_gg_",
|
|
106
|
+
"_orientation_horizontal": "_orientation_horizontal_1gvf4_gg_",
|
|
107
|
+
"_orientation_vertical": "_orientation_vertical_1gvf4_gg_",
|
|
108
|
+
"--left": "--left_1gvf4",
|
|
109
|
+
"--right": "--right_1gvf4",
|
|
110
|
+
"--offsetSum": "--offsetSum_1gvf4",
|
|
111
|
+
"__SHeightHold": "___SHeightHold_1gvf4_gg_"
|
|
112
112
|
});
|
|
113
113
|
var REVERSED_SORT_DIRECTION = {
|
|
114
114
|
desc: 'asc',
|
package/lib/cjs/Head.js
CHANGED
|
@@ -56,14 +56,14 @@ var scrollStyles = (
|
|
|
56
56
|
/*__reshadow_css_start__*/
|
|
57
57
|
_core.sstyled.insert(
|
|
58
58
|
/*__inner_css_start__*/
|
|
59
|
-
".
|
|
59
|
+
".___SShadowHorizontal_1l6cn_gg_:before{left:var(--left_1l6cn)!important}.___SShadowHorizontal_1l6cn_gg_:after{right:var(--right_1l6cn)!important}"
|
|
60
60
|
/*__inner_css_end__*/
|
|
61
|
-
, "
|
|
61
|
+
, "1l6cn_gg_")
|
|
62
62
|
/*__reshadow_css_end__*/
|
|
63
63
|
, {
|
|
64
|
-
"__SShadowHorizontal": "
|
|
65
|
-
"--left": "--
|
|
66
|
-
"--right": "--
|
|
64
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1l6cn_gg_",
|
|
65
|
+
"--left": "--left_1l6cn",
|
|
66
|
+
"--right": "--right_1l6cn"
|
|
67
67
|
});
|
|
68
68
|
var SORTING_ICON = {
|
|
69
69
|
desc: _m["default"],
|
package/lib/es6/Body.js
CHANGED
|
@@ -40,14 +40,14 @@ var scrollStyles = (
|
|
|
40
40
|
/*__reshadow_css_start__*/
|
|
41
41
|
_sstyled.insert(
|
|
42
42
|
/*__inner_css_start__*/
|
|
43
|
-
".
|
|
43
|
+
".___SShadowHorizontal_1l6cn_gg_:before{left:var(--left_1l6cn)!important}.___SShadowHorizontal_1l6cn_gg_:after{right:var(--right_1l6cn)!important}"
|
|
44
44
|
/*__inner_css_end__*/
|
|
45
|
-
, "
|
|
45
|
+
, "1l6cn_gg_")
|
|
46
46
|
/*__reshadow_css_end__*/
|
|
47
47
|
, {
|
|
48
|
-
"__SShadowHorizontal": "
|
|
49
|
-
"--left": "--
|
|
50
|
-
"--right": "--
|
|
48
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1l6cn_gg_",
|
|
49
|
+
"--left": "--left_1l6cn",
|
|
50
|
+
"--right": "--right_1l6cn"
|
|
51
51
|
});
|
|
52
52
|
import trottle from '@semcore/utils/lib/rafTrottle';
|
|
53
53
|
var testEnv = process.env.NODE_ENV === 'test';
|
package/lib/es6/DataTable.js
CHANGED
|
@@ -40,46 +40,46 @@ var style = (
|
|
|
40
40
|
/*__reshadow_css_start__*/
|
|
41
41
|
_sstyled.insert(
|
|
42
42
|
/*__inner_css_start__*/
|
|
43
|
-
".
|
|
43
|
+
".___SDataTable_1gvf4_gg_{position:relative}.___SHeadWrapper_1gvf4_gg_{position:relative}.___SHeadWrapper_1gvf4_gg_.__sticky_1gvf4_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1gvf4_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1gvf4_gg_{display:flex;align-items:center;flex-grow:1;font-size:12px;color:#191b23;box-sizing:border-box;position:relative}.___SColumn_1gvf4_gg_:focus{outline:none;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SColumn_1gvf4_gg_.__hidden_1gvf4_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1gvf4_gg_._use_primary_1gvf4_gg_{padding:12px;border-right:1px solid #e0e1e9;border-bottom:1px solid #e0e1e9;background-color:#f4f5f9}.___SColumn_1gvf4_gg_._use_secondary_1gvf4_gg_{padding:8px;border-bottom:1px solid #a9abb6;background-color:#ffffff}.___SColumn_1gvf4_gg_.__use_1gvf4_gg_:last-child{border-right:none}.___SColumn_1gvf4_gg_.__group_1gvf4_gg_.__use_1gvf4_gg_{display:flex;flex-wrap:wrap;flex-direction:column;align-items:normal;border-bottom:none;padding:0}.___SColumn_1gvf4_gg_.__groupHead_1gvf4_gg_.__use_1gvf4_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1gvf4_gg_.__groupHead_1gvf4_gg_._use_primary_1gvf4_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1gvf4_gg_.__groupHead_1gvf4_gg_._use_secondary_1gvf4_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1gvf4_gg_.__sortable_1gvf4_gg_{cursor:pointer}.___SColumn_1gvf4_gg_.__sortable_1gvf4_gg_._use_primary_1gvf4_gg_:hover{background-color:#e0e1e9}.___SColumn_1gvf4_gg_.__active_1gvf4_gg_._use_primary_1gvf4_gg_{background-color:#e0e1e9}.___SColumn_1gvf4_gg_.__resizable_1gvf4_gg_:hover:after{background:#e0e1e9}.___SColumn_1gvf4_gg_.__resizable_1gvf4_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1gvf4_gg_.__fixed_1gvf4_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1gvf4_gg_{fill:#a9abb6;margin-left:6px}.___SSortIcon_1gvf4_gg_.__active_1gvf4_gg_{fill:#8a8e9b}.___SBodyWrapper_1gvf4_gg_{position:relative}.___SBody_1gvf4_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_1gvf4_gg_{display:flex;flex-direction:row;position:relative}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#f0f0f4}.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#f2f3f4}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_muted_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_muted_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#f6f7f7}.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#e9f7ff}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_info_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_info_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#c4e5fe}.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#dbfee8}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_success_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_success_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#9ef2c9}.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#fff3d9}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_warning_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_warning_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#ffdca2}.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#fff0f7}.___SRow_1gvf4_gg_:hover>.___SCell_1gvf4_gg_._theme_danger_1gvf4_gg_,.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_:hover>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_.__active_1gvf4_gg_>.___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_),.___SRow_1gvf4_gg_._theme_danger_1gvf4_gg_ .___SCell_1gvf4_gg_:hover+.___SGroupCell_1gvf4_gg_ .___SCell_1gvf4_gg_:not(.__theme_1gvf4_gg_){background-color:#ffd7df}.___SRow_1gvf4_gg_.__positioned_1gvf4_gg_{position:absolute}.___SCell_1gvf4_gg_{display:flex;flex:1;flex-basis:auto;font-size:14px;line-height:1.42;color:#191b23;box-sizing:border-box;border-bottom:1px solid #e0e1e9;overflow:hidden;white-space:nowrap}.___SCell_1gvf4_gg_._use_primary_1gvf4_gg_{padding:12px;min-height:45px;background-color:#ffffff}.___SCell_1gvf4_gg_._use_secondary_1gvf4_gg_{padding:8px;min-height:37px;background-color:#ffffff}.___SCell_1gvf4_gg_.__fixed_1gvf4_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1gvf4_gg_._theme_muted_1gvf4_gg_{background-color:#f2f3f4}.___SCell_1gvf4_gg_._theme_info_1gvf4_gg_{background-color:#e9f7ff}.___SCell_1gvf4_gg_._theme_success_1gvf4_gg_{background-color:#dbfee8}.___SCell_1gvf4_gg_._theme_warning_1gvf4_gg_{background-color:#fff3d9}.___SCell_1gvf4_gg_._theme_danger_1gvf4_gg_{background-color:#fff0f7}.___SScrollAreaBar_1gvf4_gg_._orientation_horizontal_1gvf4_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1gvf4_gg_._orientation_vertical_1gvf4_gg_{width:12px}.___SScrollAreaBar_1gvf4_gg_._orientation_horizontal_1gvf4_gg_{margin-left:calc(var(--left_1gvf4) + 4px);margin-right:calc(var(--right_1gvf4) + 4px);width:calc(100% - var(--offsetSum_1gvf4) - 8px)}.___SHeightHold_1gvf4_gg_{position:absolute;top:0;width:100%;pointer-events:none;z-index:-1}"
|
|
44
44
|
/*__inner_css_end__*/
|
|
45
|
-
, "
|
|
45
|
+
, "1gvf4_gg_")
|
|
46
46
|
/*__reshadow_css_end__*/
|
|
47
47
|
, {
|
|
48
|
-
"__SDataTable": "
|
|
49
|
-
"__SHeadWrapper": "
|
|
50
|
-
"_sticky": "
|
|
51
|
-
"__SHead": "
|
|
52
|
-
"__SColumn": "
|
|
53
|
-
"_hidden": "
|
|
54
|
-
"_use_primary": "
|
|
55
|
-
"_use_secondary": "
|
|
56
|
-
"_use": "
|
|
57
|
-
"_group": "
|
|
58
|
-
"_groupHead": "
|
|
59
|
-
"_sortable": "
|
|
60
|
-
"_active": "
|
|
61
|
-
"_resizable": "
|
|
62
|
-
"_fixed": "
|
|
63
|
-
"__SSortIcon": "
|
|
64
|
-
"__SBodyWrapper": "
|
|
65
|
-
"__SBody": "
|
|
66
|
-
"__SRow": "
|
|
67
|
-
"__SCell": "
|
|
68
|
-
"_theme": "
|
|
69
|
-
"__SGroupCell": "
|
|
70
|
-
"_theme_muted": "
|
|
71
|
-
"_theme_info": "
|
|
72
|
-
"_theme_success": "
|
|
73
|
-
"_theme_warning": "
|
|
74
|
-
"_theme_danger": "
|
|
75
|
-
"_positioned": "
|
|
76
|
-
"__SScrollAreaBar": "
|
|
77
|
-
"_orientation_horizontal": "
|
|
78
|
-
"_orientation_vertical": "
|
|
79
|
-
"--left": "--
|
|
80
|
-
"--right": "--
|
|
81
|
-
"--offsetSum": "--
|
|
82
|
-
"__SHeightHold": "
|
|
48
|
+
"__SDataTable": "___SDataTable_1gvf4_gg_",
|
|
49
|
+
"__SHeadWrapper": "___SHeadWrapper_1gvf4_gg_",
|
|
50
|
+
"_sticky": "__sticky_1gvf4_gg_",
|
|
51
|
+
"__SHead": "___SHead_1gvf4_gg_",
|
|
52
|
+
"__SColumn": "___SColumn_1gvf4_gg_",
|
|
53
|
+
"_hidden": "__hidden_1gvf4_gg_",
|
|
54
|
+
"_use_primary": "_use_primary_1gvf4_gg_",
|
|
55
|
+
"_use_secondary": "_use_secondary_1gvf4_gg_",
|
|
56
|
+
"_use": "__use_1gvf4_gg_",
|
|
57
|
+
"_group": "__group_1gvf4_gg_",
|
|
58
|
+
"_groupHead": "__groupHead_1gvf4_gg_",
|
|
59
|
+
"_sortable": "__sortable_1gvf4_gg_",
|
|
60
|
+
"_active": "__active_1gvf4_gg_",
|
|
61
|
+
"_resizable": "__resizable_1gvf4_gg_",
|
|
62
|
+
"_fixed": "__fixed_1gvf4_gg_",
|
|
63
|
+
"__SSortIcon": "___SSortIcon_1gvf4_gg_",
|
|
64
|
+
"__SBodyWrapper": "___SBodyWrapper_1gvf4_gg_",
|
|
65
|
+
"__SBody": "___SBody_1gvf4_gg_",
|
|
66
|
+
"__SRow": "___SRow_1gvf4_gg_",
|
|
67
|
+
"__SCell": "___SCell_1gvf4_gg_",
|
|
68
|
+
"_theme": "__theme_1gvf4_gg_",
|
|
69
|
+
"__SGroupCell": "___SGroupCell_1gvf4_gg_",
|
|
70
|
+
"_theme_muted": "_theme_muted_1gvf4_gg_",
|
|
71
|
+
"_theme_info": "_theme_info_1gvf4_gg_",
|
|
72
|
+
"_theme_success": "_theme_success_1gvf4_gg_",
|
|
73
|
+
"_theme_warning": "_theme_warning_1gvf4_gg_",
|
|
74
|
+
"_theme_danger": "_theme_danger_1gvf4_gg_",
|
|
75
|
+
"_positioned": "__positioned_1gvf4_gg_",
|
|
76
|
+
"__SScrollAreaBar": "___SScrollAreaBar_1gvf4_gg_",
|
|
77
|
+
"_orientation_horizontal": "_orientation_horizontal_1gvf4_gg_",
|
|
78
|
+
"_orientation_vertical": "_orientation_vertical_1gvf4_gg_",
|
|
79
|
+
"--left": "--left_1gvf4",
|
|
80
|
+
"--right": "--right_1gvf4",
|
|
81
|
+
"--offsetSum": "--offsetSum_1gvf4",
|
|
82
|
+
"__SHeightHold": "___SHeightHold_1gvf4_gg_"
|
|
83
83
|
});
|
|
84
84
|
var REVERSED_SORT_DIRECTION = {
|
|
85
85
|
desc: 'asc',
|
package/lib/es6/Head.js
CHANGED
|
@@ -33,14 +33,14 @@ var scrollStyles = (
|
|
|
33
33
|
/*__reshadow_css_start__*/
|
|
34
34
|
_sstyled.insert(
|
|
35
35
|
/*__inner_css_start__*/
|
|
36
|
-
".
|
|
36
|
+
".___SShadowHorizontal_1l6cn_gg_:before{left:var(--left_1l6cn)!important}.___SShadowHorizontal_1l6cn_gg_:after{right:var(--right_1l6cn)!important}"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "1l6cn_gg_")
|
|
39
39
|
/*__reshadow_css_end__*/
|
|
40
40
|
, {
|
|
41
|
-
"__SShadowHorizontal": "
|
|
42
|
-
"--left": "--
|
|
43
|
-
"--right": "--
|
|
41
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1l6cn_gg_",
|
|
42
|
+
"--left": "--left_1l6cn",
|
|
43
|
+
"--right": "--right_1l6cn"
|
|
44
44
|
});
|
|
45
45
|
var SORTING_ICON = {
|
|
46
46
|
desc: SortDesc,
|
package/package.json
CHANGED
package/src/Body.tsx
DELETED
|
@@ -1,264 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box, Flex, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import ScrollArea from '@semcore/scroll-area';
|
|
5
|
-
import { getFixedStyle, getScrollOffsetValue } from './utils';
|
|
6
|
-
import { RowData, Column, NestedCells, PropsLayer, Cell } from './types';
|
|
7
|
-
import assignProps, { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
8
|
-
import ResizeObserver from 'resize-observer-polyfill';
|
|
9
|
-
import scrollStyles from './style/scroll-area.shadow.css';
|
|
10
|
-
import syncScroll from '@semcore/utils/lib/syncScroll';
|
|
11
|
-
import trottle from '@semcore/utils/lib/rafTrottle';
|
|
12
|
-
|
|
13
|
-
const testEnv = process.env.NODE_ENV === 'test';
|
|
14
|
-
|
|
15
|
-
const getCellsByColumn = (cells: NestedCells): RowData => {
|
|
16
|
-
const flattenCells = cells.flat(20) as Cell[];
|
|
17
|
-
return Object.fromEntries(flattenCells.map((cell) => [cell.name, cell.data]));
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
type AsProps = {
|
|
21
|
-
rows: NestedCells[];
|
|
22
|
-
columns: Column[];
|
|
23
|
-
$scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
|
|
24
|
-
onResize: ResizeObserverCallback;
|
|
25
|
-
onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
|
|
26
|
-
rowPropsLayers: PropsLayer[];
|
|
27
|
-
use: 'primary' | 'secondary';
|
|
28
|
-
uniqueKey: string;
|
|
29
|
-
virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
type State = {
|
|
33
|
-
rowHeight: number | undefined;
|
|
34
|
-
scrollAreaHeight: undefined | number;
|
|
35
|
-
scrollOffset: number;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
class Body extends Component<AsProps, State> {
|
|
39
|
-
state: State = {
|
|
40
|
-
rowHeight: undefined,
|
|
41
|
-
scrollAreaHeight: undefined,
|
|
42
|
-
scrollOffset: 0,
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
firstRowRef = React.createRef<HTMLElement>();
|
|
46
|
-
firstRowResizeObserver: ResizeObserver | null = null;
|
|
47
|
-
|
|
48
|
-
getRowHeight = () => {
|
|
49
|
-
const { virtualScroll } = this.asProps;
|
|
50
|
-
const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
|
|
51
|
-
return rowHeightFromProps || this.state.rowHeight;
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
renderCells(cells: NestedCells, rowData: RowData, index: number) {
|
|
55
|
-
const SCell = Flex;
|
|
56
|
-
const { styles, columns, use } = this.asProps;
|
|
57
|
-
return cells.map((cell) => {
|
|
58
|
-
if (Array.isArray(cell)) {
|
|
59
|
-
const SGroupCell = 'div';
|
|
60
|
-
return sstyled(styles)(
|
|
61
|
-
<SGroupCell data-ui-name="group-cell">
|
|
62
|
-
{this.renderRows(cell as NestedCells[])}
|
|
63
|
-
</SGroupCell>,
|
|
64
|
-
);
|
|
65
|
-
} else {
|
|
66
|
-
const column = columns.find((c) => c.name === cell.name);
|
|
67
|
-
const [name, value] = getFixedStyle(cell, columns);
|
|
68
|
-
const vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(
|
|
69
|
-
(name) => `var(${name})`,
|
|
70
|
-
);
|
|
71
|
-
type CellProps = IBoxProps & {
|
|
72
|
-
name: string;
|
|
73
|
-
children: React.ReactNode;
|
|
74
|
-
style: React.CSSProperties;
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
let props: CellProps = {
|
|
78
|
-
name: cell.name,
|
|
79
|
-
children: <>{cell.data}</>,
|
|
80
|
-
justifyContent: column?.props?.justifyContent,
|
|
81
|
-
style: {
|
|
82
|
-
width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,
|
|
83
|
-
},
|
|
84
|
-
};
|
|
85
|
-
if (name !== undefined && value !== undefined) {
|
|
86
|
-
props.style[name] = value;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
for (const cellPropLayer of cell.cellPropsLayers || []) {
|
|
90
|
-
const { childrenPropsGetter = (p) => p, ...other } = cellPropLayer;
|
|
91
|
-
const propsCell = assignProps(other, props);
|
|
92
|
-
props = assignProps(childrenPropsGetter(propsCell, rowData, index), propsCell);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
return sstyled(styles)(
|
|
96
|
-
<SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,
|
|
97
|
-
) as React.ReactElement;
|
|
98
|
-
}
|
|
99
|
-
}, [] as React.ReactElement[]);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
renderRow(
|
|
103
|
-
cells: NestedCells,
|
|
104
|
-
{ dataIndex, topOffset, nested }: { dataIndex: number; topOffset?: number; nested: boolean },
|
|
105
|
-
) {
|
|
106
|
-
const SRow = Box;
|
|
107
|
-
const { styles, rowPropsLayers, uniqueKey, virtualScroll } = this.asProps;
|
|
108
|
-
const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
|
|
109
|
-
|
|
110
|
-
const rowData = cells.flatRowData || getCellsByColumn(cells);
|
|
111
|
-
const key = rowData[uniqueKey] ? String(rowData[uniqueKey]) : `row_${dataIndex}`;
|
|
112
|
-
const needToMeasureHeight = dataIndex === 0 && !nested && !rowHeightFromProps;
|
|
113
|
-
|
|
114
|
-
let props = {
|
|
115
|
-
children: this.renderCells(cells, rowData, dataIndex),
|
|
116
|
-
theme: undefined,
|
|
117
|
-
active: undefined,
|
|
118
|
-
positioned: topOffset !== undefined,
|
|
119
|
-
top: topOffset,
|
|
120
|
-
ref: needToMeasureHeight ? this.firstRowRef : undefined,
|
|
121
|
-
key,
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
for (const rowPropsLayer of rowPropsLayers) {
|
|
125
|
-
const { childrenPropsGetter = (p) => p, ...other } = rowPropsLayer;
|
|
126
|
-
const propsRow = assignProps(other, props);
|
|
127
|
-
props = assignProps(childrenPropsGetter(propsRow, rowData, dataIndex), propsRow);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
return sstyled(styles)(<SRow {...props} />);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
renderRows(rows: NestedCells[]) {
|
|
134
|
-
return rows.map((cells, dataIndex) => this.renderRow(cells, { dataIndex, nested: false }));
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
renderVirtualizedRows(rows: NestedCells[]) {
|
|
138
|
-
if (rows.length === 0) return [];
|
|
139
|
-
|
|
140
|
-
const { virtualScroll } = this.asProps;
|
|
141
|
-
const { scrollOffset, scrollAreaHeight } = this.state;
|
|
142
|
-
const rowHeight = this.getRowHeight();
|
|
143
|
-
|
|
144
|
-
const tollerance = (typeof virtualScroll === 'object' ? virtualScroll?.tollerance : 2) ?? 2;
|
|
145
|
-
const startIndex = Math.max(Math.floor(scrollOffset / rowHeight!) - tollerance, 0);
|
|
146
|
-
const lastIndex = Math.min(
|
|
147
|
-
Math.ceil((scrollOffset + scrollAreaHeight!) / rowHeight!) + tollerance,
|
|
148
|
-
rows.length,
|
|
149
|
-
);
|
|
150
|
-
|
|
151
|
-
const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
|
|
152
|
-
const needToMeasureFirstRowHeight = !rowHeightFromProps;
|
|
153
|
-
|
|
154
|
-
const firstRow = { cells: rows[0], dataIndex: 0, topOffset: 0 };
|
|
155
|
-
const visibleRows = rowHeight !== undefined ? rows.slice(startIndex, lastIndex) : [];
|
|
156
|
-
const processedVisibleRows = visibleRows.map((cells, index) => ({
|
|
157
|
-
cells,
|
|
158
|
-
dataIndex: startIndex + index,
|
|
159
|
-
topOffset: rowHeight! * (startIndex + index),
|
|
160
|
-
}));
|
|
161
|
-
if (needToMeasureFirstRowHeight && startIndex !== 0) {
|
|
162
|
-
processedVisibleRows.unshift(firstRow);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
return processedVisibleRows.map(({ cells, dataIndex, topOffset }) =>
|
|
166
|
-
this.renderRow(cells, { dataIndex, topOffset, nested: false }),
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
handleFirstRowResize = trottle((entries: ResizeObserverEntry[]) => {
|
|
171
|
-
const { contentRect } = entries[0];
|
|
172
|
-
const { height } = contentRect;
|
|
173
|
-
this.setState((oldState: State) => {
|
|
174
|
-
if (oldState.rowHeight === height) return oldState;
|
|
175
|
-
return { rowHeight: height };
|
|
176
|
-
});
|
|
177
|
-
});
|
|
178
|
-
|
|
179
|
-
handleScrollAreaResize = trottle((entries: ResizeObserverEntry[]) => {
|
|
180
|
-
const { virtualScroll } = this.asProps;
|
|
181
|
-
if (!virtualScroll) return;
|
|
182
|
-
const { contentRect } = entries[0];
|
|
183
|
-
const { height } = contentRect;
|
|
184
|
-
this.setState((oldState: State) => {
|
|
185
|
-
if (oldState.scrollAreaHeight === height) return oldState;
|
|
186
|
-
return { scrollAreaHeight: height };
|
|
187
|
-
});
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
handleScrollAreaScroll = (event: React.SyntheticEvent<HTMLElement>) => {
|
|
191
|
-
const { scrollTop } = event.target as HTMLElement;
|
|
192
|
-
const { virtualScroll } = this.asProps;
|
|
193
|
-
if (virtualScroll) {
|
|
194
|
-
this.setState((oldState: State) => {
|
|
195
|
-
if (oldState.scrollOffset === scrollTop) return oldState;
|
|
196
|
-
return { scrollOffset: scrollTop };
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
setupRowSizeObserver = () => {
|
|
202
|
-
if (!this.firstRowRef.current) return;
|
|
203
|
-
if (!this.asProps.virtualScroll) return;
|
|
204
|
-
this.firstRowResizeObserver = new ResizeObserver(this.handleFirstRowResize);
|
|
205
|
-
this.firstRowResizeObserver.observe(this.firstRowRef.current);
|
|
206
|
-
};
|
|
207
|
-
|
|
208
|
-
componentWillUnmount() {
|
|
209
|
-
this.firstRowResizeObserver?.disconnect();
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
render() {
|
|
213
|
-
const SBody = Root;
|
|
214
|
-
const SBodyWrapper = Box;
|
|
215
|
-
const SScrollAreaBar = ScrollArea.Bar;
|
|
216
|
-
const SHeightHold = Box;
|
|
217
|
-
const { Children, styles, rows, columns, $scrollRef, virtualScroll, onResize, onScroll } =
|
|
218
|
-
this.asProps;
|
|
219
|
-
|
|
220
|
-
const columnsInitialized = columns.reduce((sum, { width }) => sum + width, 0) > 0 || testEnv;
|
|
221
|
-
|
|
222
|
-
const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);
|
|
223
|
-
const offsetSum = offsetLeftSum + offsetRightSum;
|
|
224
|
-
|
|
225
|
-
const rowHeight = this.getRowHeight();
|
|
226
|
-
const holdHeight =
|
|
227
|
-
rowHeight !== undefined && virtualScroll ? rowHeight * rows.length : undefined;
|
|
228
|
-
|
|
229
|
-
if (virtualScroll && columnsInitialized && !rowHeight) {
|
|
230
|
-
new Promise(() => this.setupRowSizeObserver());
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
return sstyled(styles)(
|
|
234
|
-
<SBodyWrapper>
|
|
235
|
-
<ScrollArea
|
|
236
|
-
shadow
|
|
237
|
-
styles={scrollStyles}
|
|
238
|
-
use:left={`${offsetLeftSum}px`}
|
|
239
|
-
use:right={`${offsetRightSum}px`}
|
|
240
|
-
onResize={callAllEventHandlers(onResize, this.handleScrollAreaResize)}
|
|
241
|
-
onScroll={callAllEventHandlers(onScroll, this.handleScrollAreaScroll)}
|
|
242
|
-
>
|
|
243
|
-
<ScrollArea.Container ref={$scrollRef}>
|
|
244
|
-
<SBody render={Box}>
|
|
245
|
-
{holdHeight && <SHeightHold hMin={holdHeight} aria-hidden={true} />}
|
|
246
|
-
{columnsInitialized && !virtualScroll ? this.renderRows(rows) : null}
|
|
247
|
-
{columnsInitialized && virtualScroll ? this.renderVirtualizedRows(rows) : null}
|
|
248
|
-
</SBody>
|
|
249
|
-
</ScrollArea.Container>
|
|
250
|
-
<SScrollAreaBar
|
|
251
|
-
orientation="horizontal"
|
|
252
|
-
left={`${offsetLeftSum}px`}
|
|
253
|
-
right={`${offsetRightSum}px`}
|
|
254
|
-
offsetSum={`${offsetSum}px`}
|
|
255
|
-
/>
|
|
256
|
-
<SScrollAreaBar orientation="vertical" />
|
|
257
|
-
</ScrollArea>
|
|
258
|
-
{Children.origin}
|
|
259
|
-
</SBodyWrapper>,
|
|
260
|
-
);
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
export default Body;
|