@semcore/dropdown-menu 16.2.0 → 16.2.1-prerelease.2
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 +8 -0
- package/lib/cjs/DropdownMenu.js +16 -16
- package/lib/cjs/components/VirtualList.js +30 -23
- package/lib/cjs/components/VirtualList.js.map +1 -1
- package/lib/cjs/translations/de.json +1 -3
- package/lib/cjs/translations/es.json +1 -3
- package/lib/cjs/translations/fr.json +1 -3
- package/lib/cjs/translations/it.json +1 -3
- package/lib/cjs/translations/ja.json +1 -3
- package/lib/cjs/translations/ko.json +1 -3
- package/lib/cjs/translations/nl.json +1 -3
- package/lib/cjs/translations/pl.json +1 -3
- package/lib/cjs/translations/pt.json +1 -3
- package/lib/cjs/translations/sv.json +1 -3
- package/lib/cjs/translations/tr.json +1 -3
- package/lib/cjs/translations/vi.json +1 -3
- package/lib/cjs/translations/zh.json +1 -3
- package/lib/es6/DropdownMenu.js +16 -16
- package/lib/es6/components/VirtualList.js +30 -23
- package/lib/es6/components/VirtualList.js.map +1 -1
- package/lib/es6/translations/de.json +1 -3
- package/lib/es6/translations/es.json +1 -3
- package/lib/es6/translations/fr.json +1 -3
- package/lib/es6/translations/it.json +1 -3
- package/lib/es6/translations/ja.json +1 -3
- package/lib/es6/translations/ko.json +1 -3
- package/lib/es6/translations/nl.json +1 -3
- package/lib/es6/translations/pl.json +1 -3
- package/lib/es6/translations/pt.json +1 -3
- package/lib/es6/translations/sv.json +1 -3
- package/lib/es6/translations/tr.json +1 -3
- package/lib/es6/translations/vi.json +1 -3
- package/lib/es6/translations/zh.json +1 -3
- package/lib/esm/DropdownMenu.mjs +17 -17
- package/lib/esm/components/VirtualList.mjs +27 -24
- package/lib/esm/translations/de.json.mjs +2 -6
- package/lib/esm/translations/es.json.mjs +2 -6
- package/lib/esm/translations/fr.json.mjs +2 -6
- package/lib/esm/translations/it.json.mjs +2 -6
- package/lib/esm/translations/ja.json.mjs +2 -6
- package/lib/esm/translations/ko.json.mjs +2 -6
- package/lib/esm/translations/nl.json.mjs +2 -6
- package/lib/esm/translations/pl.json.mjs +2 -6
- package/lib/esm/translations/pt.json.mjs +2 -6
- package/lib/esm/translations/sv.json.mjs +2 -6
- package/lib/esm/translations/tr.json.mjs +2 -6
- package/lib/esm/translations/vi.json.mjs +2 -6
- package/lib/esm/translations/zh.json.mjs +2 -6
- package/lib/types/components/VirtualList.d.ts +8 -5
- package/lib/types/translations/__intergalactic-dynamic-locales.d.ts +13 -39
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [16.2.1] - 2025-12-17
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Missing translations
|
|
10
|
+
- Virtual scroll issues.
|
|
11
|
+
- Required customData property changed to optional.
|
|
12
|
+
|
|
5
13
|
## [16.2.0] - 2025-12-01
|
|
6
14
|
|
|
7
15
|
### Added
|
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -33,24 +33,24 @@ var _Context = require("./components/Context");
|
|
|
33
33
|
var _VirtualList = require("./components/VirtualList");
|
|
34
34
|
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
35
35
|
/*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
36
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
36
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_10g2z_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_10g2z_gg_ .___SBar_10g2z_gg_{z-index:3}.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:before,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_10g2z_gg_ .___SItemContent_10g2z_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_10g2z_gg_.__nesting-trigger_10g2z_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_10g2z_gg_,.___SItemContentText_10g2z_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_10g2z_gg_:first-child,.___SItemContentText_10g2z_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_10g2z_gg_:last-child,.___SItemContentText_10g2z_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_m_10g2z_gg_{padding:0}.___SDropdownMenuNesting_10g2z_gg_.__highlighted_10g2z_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownNestingItem_10g2z_gg_._size_m_10g2z_gg_{padding-right:0}.___SDropdownNestingItem_10g2z_gg_ .___SDropdownMenuItemContainer_10g2z_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_10g2z_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"10g2z_gg_"),
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
{
|
|
39
|
-
"__SDropdownMenuItemContainer": "
|
|
40
|
-
"_nesting-trigger": "__nesting-
|
|
41
|
-
"__SDropdownMenuNesting": "
|
|
42
|
-
"_size_l": "
|
|
43
|
-
"_size_m": "
|
|
44
|
-
"_highlighted": "
|
|
45
|
-
"__SDropdownNestingItem": "
|
|
46
|
-
"__SItemHint": "
|
|
47
|
-
"__SDropdownMenuList": "
|
|
48
|
-
"__SBar": "
|
|
49
|
-
"__SShadowHorizontal": "
|
|
50
|
-
"__SShadowVertical": "
|
|
51
|
-
"__SItemContent": "
|
|
52
|
-
"__SDropdownMenuItemAddon": "
|
|
53
|
-
"__SItemContentText": "
|
|
39
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_10g2z_gg_",
|
|
40
|
+
"_nesting-trigger": "__nesting-trigger_10g2z_gg_",
|
|
41
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_10g2z_gg_",
|
|
42
|
+
"_size_l": "_size_l_10g2z_gg_",
|
|
43
|
+
"_size_m": "_size_m_10g2z_gg_",
|
|
44
|
+
"_highlighted": "__highlighted_10g2z_gg_",
|
|
45
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_10g2z_gg_",
|
|
46
|
+
"__SItemHint": "___SItemHint_10g2z_gg_",
|
|
47
|
+
"__SDropdownMenuList": "___SDropdownMenuList_10g2z_gg_",
|
|
48
|
+
"__SBar": "___SBar_10g2z_gg_",
|
|
49
|
+
"__SShadowHorizontal": "___SShadowHorizontal_10g2z_gg_",
|
|
50
|
+
"__SShadowVertical": "___SShadowVertical_10g2z_gg_",
|
|
51
|
+
"__SItemContent": "___SItemContent_10g2z_gg_",
|
|
52
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_10g2z_gg_",
|
|
53
|
+
"__SItemContentText": "___SItemContentText_10g2z_gg_"
|
|
54
54
|
});
|
|
55
55
|
var menuItemContext = /*#__PURE__*/_react["default"].createContext({});
|
|
56
56
|
var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
@@ -17,24 +17,24 @@ var _scrollArea = _interopRequireDefault(require("@semcore/scroll-area"));
|
|
|
17
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
18
|
var _Context = require("./Context");
|
|
19
19
|
/*!__reshadow-styles__:"../style/dropdown-menu.shadow.css"*/
|
|
20
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
20
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_10g2z_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_10g2z_gg_ .___SBar_10g2z_gg_{z-index:3}.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:before,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_10g2z_gg_ .___SItemContent_10g2z_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_10g2z_gg_.__nesting-trigger_10g2z_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_10g2z_gg_,.___SItemContentText_10g2z_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_10g2z_gg_:first-child,.___SItemContentText_10g2z_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_10g2z_gg_:last-child,.___SItemContentText_10g2z_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_m_10g2z_gg_{padding:0}.___SDropdownMenuNesting_10g2z_gg_.__highlighted_10g2z_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownNestingItem_10g2z_gg_._size_m_10g2z_gg_{padding-right:0}.___SDropdownNestingItem_10g2z_gg_ .___SDropdownMenuItemContainer_10g2z_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_10g2z_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"10g2z_gg_"),
|
|
21
21
|
/*__reshadow_css_end__*/
|
|
22
22
|
{
|
|
23
|
-
"__SDropdownMenuItemContainer": "
|
|
24
|
-
"_nesting-trigger": "__nesting-
|
|
25
|
-
"__SDropdownMenuNesting": "
|
|
26
|
-
"_size_l": "
|
|
27
|
-
"_size_m": "
|
|
28
|
-
"_highlighted": "
|
|
29
|
-
"__SDropdownNestingItem": "
|
|
30
|
-
"__SItemHint": "
|
|
31
|
-
"__SDropdownMenuList": "
|
|
32
|
-
"__SBar": "
|
|
33
|
-
"__SShadowHorizontal": "
|
|
34
|
-
"__SShadowVertical": "
|
|
35
|
-
"__SItemContent": "
|
|
36
|
-
"__SDropdownMenuItemAddon": "
|
|
37
|
-
"__SItemContentText": "
|
|
23
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_10g2z_gg_",
|
|
24
|
+
"_nesting-trigger": "__nesting-trigger_10g2z_gg_",
|
|
25
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_10g2z_gg_",
|
|
26
|
+
"_size_l": "_size_l_10g2z_gg_",
|
|
27
|
+
"_size_m": "_size_m_10g2z_gg_",
|
|
28
|
+
"_highlighted": "__highlighted_10g2z_gg_",
|
|
29
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_10g2z_gg_",
|
|
30
|
+
"__SItemHint": "___SItemHint_10g2z_gg_",
|
|
31
|
+
"__SDropdownMenuList": "___SDropdownMenuList_10g2z_gg_",
|
|
32
|
+
"__SBar": "___SBar_10g2z_gg_",
|
|
33
|
+
"__SShadowHorizontal": "___SShadowHorizontal_10g2z_gg_",
|
|
34
|
+
"__SShadowVertical": "___SShadowVertical_10g2z_gg_",
|
|
35
|
+
"__SItemContent": "___SItemContent_10g2z_gg_",
|
|
36
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_10g2z_gg_",
|
|
37
|
+
"__SItemContentText": "___SItemContentText_10g2z_gg_"
|
|
38
38
|
});
|
|
39
39
|
var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
40
40
|
function VirtualListRoot() {
|
|
@@ -68,20 +68,26 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
68
68
|
var _this2 = this;
|
|
69
69
|
var _this$asProps = this.asProps,
|
|
70
70
|
index = _this$asProps.index,
|
|
71
|
-
rowHeight = _this$asProps.rowHeight
|
|
71
|
+
rowHeight = _this$asProps.rowHeight,
|
|
72
|
+
rowsBuffer = _this$asProps.rowsBuffer;
|
|
72
73
|
setTimeout(function () {
|
|
73
74
|
var _this2$listRef$curren, _this2$listRef$curren2, _this2$containerRef$c;
|
|
74
75
|
var listHeight = ((_this2$listRef$curren = (_this2$listRef$curren2 = _this2.listRef.current) === null || _this2$listRef$curren2 === void 0 ? void 0 : _this2$listRef$curren2.getBoundingClientRect().height) !== null && _this2$listRef$curren !== void 0 ? _this2$listRef$curren : 0) / 2;
|
|
75
76
|
(_this2$containerRef$c = _this2.containerRef.current) === null || _this2$containerRef$c === void 0 || _this2$containerRef$c.scrollTo({
|
|
76
77
|
top: index * rowHeight - listHeight + rowHeight / 2
|
|
77
78
|
});
|
|
79
|
+
if (index <= rowsBuffer) {
|
|
80
|
+
_this2.forceUpdate(); // we need this for correct render all items with calculated container height
|
|
81
|
+
}
|
|
78
82
|
}, 10); // 10 for correct work in safari
|
|
79
83
|
}
|
|
80
84
|
}, {
|
|
81
85
|
key: "render",
|
|
82
86
|
value: function render() {
|
|
83
87
|
var _ref = this.asProps,
|
|
84
|
-
_ref2
|
|
88
|
+
_ref2,
|
|
89
|
+
_this$listRef$current,
|
|
90
|
+
_this$listRef$current2;
|
|
85
91
|
var SDropdownMenuList = _scrollArea["default"];
|
|
86
92
|
var SBar = _scrollArea["default"].Bar;
|
|
87
93
|
var _this$state = this.state,
|
|
@@ -94,11 +100,11 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
94
100
|
styles = _this$asProps2.styles,
|
|
95
101
|
RenderRow = _this$asProps2.renderRow,
|
|
96
102
|
customData = _this$asProps2.customData;
|
|
97
|
-
var offsetHeight = 0;
|
|
98
|
-
var prevPrepared = scrollDirection === 'up' ? rowsBuffer :
|
|
99
|
-
var nextPrepared = scrollDirection === 'up' ?
|
|
103
|
+
var offsetHeight = (_this$listRef$current = (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.offsetHeight) !== null && _this$listRef$current !== void 0 ? _this$listRef$current : 0;
|
|
104
|
+
var prevPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;
|
|
105
|
+
var nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;
|
|
100
106
|
var startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
|
|
101
|
-
var lastIndex =
|
|
107
|
+
var lastIndex = Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
|
|
102
108
|
var rowsToRender = rows.slice(startIndex, lastIndex);
|
|
103
109
|
var rowMarginTop = rowHeight * startIndex;
|
|
104
110
|
var rowMarginBottom = rowHeight * (rows.length - lastIndex);
|
|
@@ -116,6 +122,7 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
116
122
|
}, /*#__PURE__*/_react["default"].createElement(_baseComponents.Box, _ref2.cn("Box", {
|
|
117
123
|
"h": rowMarginTop
|
|
118
124
|
})), rowsToRender.map(function (item, index) {
|
|
125
|
+
// @ts-ignore
|
|
119
126
|
return /*#__PURE__*/_react["default"].createElement(RenderRow, {
|
|
120
127
|
key: startIndex + index,
|
|
121
128
|
row: item,
|
|
@@ -135,7 +142,7 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
135
142
|
(0, _defineProperty2["default"])(VirtualListRoot, "displayName", 'VirtualList');
|
|
136
143
|
(0, _defineProperty2["default"])(VirtualListRoot, "style", style);
|
|
137
144
|
(0, _defineProperty2["default"])(VirtualListRoot, "defaultProps", {
|
|
138
|
-
rowsBuffer:
|
|
145
|
+
rowsBuffer: 6
|
|
139
146
|
});
|
|
140
147
|
var VirtualList = exports.VirtualList = (0, _core.createComponent)(VirtualListRoot);
|
|
141
148
|
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","names":["_core","require","_baseComponents","_scrollArea","_interopRequireDefault","_react","_Context","style","sstyled","insert","VirtualListRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","React","createRef","scrollTop","scrollDirection","e","target","HTMLElement","state","setState","_inherits2","_createClass2","key","value","componentDidMount","_this2","_this$asProps","asProps","index","rowHeight","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","render","_ref","_ref2","SDropdownMenuList","ScrollAreaComponent","SBar","Bar","_this$state","_this$asProps2","rows","rowsBuffer","styles","RenderRow","renderRow","customData","offsetHeight","prevPrepared","nextPrepared","startIndex","Math","max","floor","lastIndex","min","ceil","rowsToRender","slice","rowMarginTop","rowMarginBottom","createElement","ListBoxContextProvider","cn","_objectSpread2","assignProps","handleScroll","Container","ref","tabIndex","undefined","h","Box","map","item","row","data","Component","VirtualList","exports","createComponent"],"sources":["../../../src/components/VirtualList.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, Component, createComponent, sstyled } from '@semcore/core';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport React from 'react';\n\nimport { ListBoxContextProvider } from './Context';\nimport style from '../style/dropdown-menu.shadow.css';\n\nexport type RenderRowProps<T, D> = {\n index: number;\n row: T;\n data: D;\n};\n\ntype VirtualListProps<T, D extends object> = {\n /** List of all rows in ddMenu */\n rows: T[];\n /** Method for render row, it's better to wrap it via React.memo */\n renderRow: (props: RenderRowProps<T, D>) => React.ReactNode;\n /** The height of row. For now, you should calculate it on your side. */\n rowHeight: number;\n /** The buffer of rows out of visible rows\n * @default 10\n */\n rowsBuffer?: number;\n /** Some custom data for each renderRow function */\n customData: D;\n};\n\ntype State = {\n scrollTop: number;\n scrollDirection: 'up' | 'down';\n};\n\nclass VirtualListRoot<T = string, D extends object = {}> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 10,\n };\n\n containerRef = React.createRef<HTMLDivElement>();\n listRef = React.createRef<HTMLDivElement>();\n\n state: State = {\n scrollTop: 0,\n scrollDirection: 'down',\n };\n\n componentDidMount() {\n const { index, rowHeight } = this.asProps;\n\n setTimeout(() => {\n const listHeight = (this.listRef.current?.getBoundingClientRect().height ?? 0) / 2;\n this.containerRef.current?.scrollTo({ top: index * rowHeight - listHeight + rowHeight / 2 });\n }, 10); // 10 for correct work in safari\n }\n\n handleScroll = (e: React.SyntheticEvent<HTMLDivElement>) => {\n if (e.target instanceof HTMLElement) {\n const scrollDirection = e.target.scrollTop > this.state.scrollTop ? 'down' : 'up';\n\n this.setState({\n scrollDirection,\n scrollTop: e.target.scrollTop,\n });\n }\n };\n\n render() {\n const SDropdownMenuList = Root;\n const SBar = ScrollAreaComponent.Bar;\n\n const { scrollDirection, scrollTop } = this.state;\n const { rows, rowHeight, rowsBuffer, styles, renderRow: RenderRow, customData } = this.asProps;\n\n const offsetHeight = 0;\n const prevPrepared = scrollDirection === 'up' ? rowsBuffer : 6;\n const nextPrepared = scrollDirection === 'up' ? 6 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = scrollDirection === 'up' && scrollTop === 0\n ? rowsBuffer\n : Math.min(\n Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared,\n rows.length,\n );\n\n const rowsToRender = rows.slice(startIndex, lastIndex);\n const rowMarginTop = rowHeight * startIndex;\n const rowMarginBottom = rowHeight * (rows.length - lastIndex);\n\n return sstyled(styles)(\n <ListBoxContextProvider>\n <SDropdownMenuList\n render={ScrollAreaComponent}\n shadow={true}\n shadowSize={16}\n shadowTheme='light'\n onScroll={this.handleScroll}\n data-is-virtual='true'\n ref={this.listRef}\n >\n <ScrollAreaComponent.Container ref={this.containerRef} tabIndex={undefined} h={rows.length * rowHeight}>\n <Box h={rowMarginTop} />\n {rowsToRender.map((item, index) => {\n return <RenderRow key={startIndex + index} row={item} index={startIndex + index} data={customData} />;\n })}\n <Box h={rowMarginBottom} />\n </ScrollAreaComponent.Container>\n <SBar orientation='horizontal' />\n <SBar orientation='vertical' />\n </SDropdownMenuList>\n </ListBoxContextProvider>,\n );\n }\n}\n\nexport type VirtualListComponent = (<\n T = string,\n D extends object = {},\n>(\n props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<typeof Box, 'div', VirtualListProps<T, D>>, 'tag' | 'children'>\n) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<typeof Box, 'div', VirtualListProps<any, any>>;\n\nexport const VirtualList = createComponent(VirtualListRoot) as VirtualListComponent;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"VirtualList.js","names":["_core","require","_baseComponents","_scrollArea","_interopRequireDefault","_react","_Context","style","sstyled","insert","VirtualListRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","React","createRef","scrollTop","scrollDirection","e","target","HTMLElement","state","setState","_inherits2","_createClass2","key","value","componentDidMount","_this2","_this$asProps","asProps","index","rowHeight","rowsBuffer","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","forceUpdate","render","_ref","_ref2","_this$listRef$current","_this$listRef$current2","SDropdownMenuList","ScrollAreaComponent","SBar","Bar","_this$state","_this$asProps2","rows","styles","RenderRow","renderRow","customData","offsetHeight","prevPrepared","nextPrepared","startIndex","Math","max","floor","lastIndex","min","ceil","rowsToRender","slice","rowMarginTop","rowMarginBottom","createElement","ListBoxContextProvider","cn","_objectSpread2","assignProps","handleScroll","Container","ref","tabIndex","undefined","h","Box","map","item","row","data","Component","VirtualList","exports","createComponent"],"sources":["../../../src/components/VirtualList.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, Component, createComponent, sstyled } from '@semcore/core';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport React from 'react';\n\nimport { ListBoxContextProvider } from './Context';\nimport style from '../style/dropdown-menu.shadow.css';\n\nexport type RenderRowProps<T, D = never> = {\n index: number;\n row: T;\n data: [D] extends [never] ? undefined : D;\n};\n\ntype VirtualListProps<T, D extends object = never> = {\n /** List of all rows in ddMenu */\n rows: T[];\n /** Method for render row, it's better to wrap it via React.memo */\n renderRow: (props: RenderRowProps<T, D>) => React.ReactNode;\n /** The height of row. For now, you should calculate it on your side. */\n rowHeight: number;\n /** The buffer of rows out of visible rows\n * @default 10\n */\n rowsBuffer?: number;\n} & ([D] extends [never] ? { customData?: undefined } : {\n /** Some custom data for each renderRow function */\n customData: D;\n});\n\ntype State = {\n scrollTop: number;\n scrollDirection: 'up' | 'down';\n};\n\nclass VirtualListRoot<T = string, D extends object = never> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 6,\n };\n\n containerRef = React.createRef<HTMLDivElement>();\n listRef = React.createRef<HTMLDivElement>();\n\n state: State = {\n scrollTop: 0,\n scrollDirection: 'down',\n };\n\n componentDidMount() {\n const { index, rowHeight, rowsBuffer } = this.asProps;\n\n setTimeout(() => {\n const listHeight = (this.listRef.current?.getBoundingClientRect().height ?? 0) / 2;\n this.containerRef.current?.scrollTo({ top: index * rowHeight - listHeight + rowHeight / 2 });\n\n if (index <= rowsBuffer) {\n this.forceUpdate(); // we need this for correct render all items with calculated container height\n }\n }, 10); // 10 for correct work in safari\n }\n\n handleScroll = (e: React.SyntheticEvent<HTMLDivElement>) => {\n if (e.target instanceof HTMLElement) {\n const scrollDirection = e.target.scrollTop > this.state.scrollTop ? 'down' : 'up';\n\n this.setState({\n scrollDirection,\n scrollTop: e.target.scrollTop,\n });\n }\n };\n\n render() {\n const SDropdownMenuList = Root;\n const SBar = ScrollAreaComponent.Bar;\n\n const { scrollDirection, scrollTop } = this.state;\n const { rows, rowHeight, rowsBuffer, styles, renderRow: RenderRow, customData } = this.asProps;\n\n const offsetHeight = this.listRef.current?.offsetHeight ?? 0;\n const prevPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n const nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = Math.min(\n Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared,\n rows.length,\n );\n\n const rowsToRender = rows.slice(startIndex, lastIndex);\n const rowMarginTop = rowHeight * startIndex;\n const rowMarginBottom = rowHeight * (rows.length - lastIndex);\n\n return sstyled(styles)(\n <ListBoxContextProvider>\n <SDropdownMenuList\n render={ScrollAreaComponent}\n shadow={true}\n shadowSize={16}\n shadowTheme='light'\n onScroll={this.handleScroll}\n data-is-virtual='true'\n ref={this.listRef}\n >\n <ScrollAreaComponent.Container ref={this.containerRef} tabIndex={undefined} h={rows.length * rowHeight}>\n <Box h={rowMarginTop} />\n {rowsToRender.map((item, index) => {\n // @ts-ignore\n return <RenderRow key={startIndex + index} row={item} index={startIndex + index} data={customData} />;\n })}\n <Box h={rowMarginBottom} />\n </ScrollAreaComponent.Container>\n <SBar orientation='horizontal' />\n <SBar orientation='vertical' />\n </SDropdownMenuList>\n </ListBoxContextProvider>,\n );\n }\n}\n\nexport type VirtualListComponent = (<\n T = string,\n D extends object = never,\n>(\n props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<typeof Box, 'div', VirtualListProps<T, D>>, 'tag' | 'children'>\n) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<typeof Box, 'div', VirtualListProps<any, any>>;\n\nexport const VirtualList = createComponent(VirtualListRoot) as VirtualListComponent;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -39,24 +39,24 @@ import React from 'react';
|
|
|
39
39
|
import { ListBoxContextProvider } from './components/Context';
|
|
40
40
|
import { VirtualList } from './components/VirtualList';
|
|
41
41
|
/*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
42
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
42
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_10g2z_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_10g2z_gg_ .___SBar_10g2z_gg_{z-index:3}.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:before,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_10g2z_gg_ .___SItemContent_10g2z_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_10g2z_gg_.__nesting-trigger_10g2z_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_10g2z_gg_,.___SItemContentText_10g2z_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_10g2z_gg_:first-child,.___SItemContentText_10g2z_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_10g2z_gg_:last-child,.___SItemContentText_10g2z_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_m_10g2z_gg_{padding:0}.___SDropdownMenuNesting_10g2z_gg_.__highlighted_10g2z_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownNestingItem_10g2z_gg_._size_m_10g2z_gg_{padding-right:0}.___SDropdownNestingItem_10g2z_gg_ .___SDropdownMenuItemContainer_10g2z_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_10g2z_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"10g2z_gg_"),
|
|
43
43
|
/*__reshadow_css_end__*/
|
|
44
44
|
{
|
|
45
|
-
"__SDropdownMenuItemContainer": "
|
|
46
|
-
"_nesting-trigger": "__nesting-
|
|
47
|
-
"__SDropdownMenuNesting": "
|
|
48
|
-
"_size_l": "
|
|
49
|
-
"_size_m": "
|
|
50
|
-
"_highlighted": "
|
|
51
|
-
"__SDropdownNestingItem": "
|
|
52
|
-
"__SItemHint": "
|
|
53
|
-
"__SDropdownMenuList": "
|
|
54
|
-
"__SBar": "
|
|
55
|
-
"__SShadowHorizontal": "
|
|
56
|
-
"__SShadowVertical": "
|
|
57
|
-
"__SItemContent": "
|
|
58
|
-
"__SDropdownMenuItemAddon": "
|
|
59
|
-
"__SItemContentText": "
|
|
45
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_10g2z_gg_",
|
|
46
|
+
"_nesting-trigger": "__nesting-trigger_10g2z_gg_",
|
|
47
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_10g2z_gg_",
|
|
48
|
+
"_size_l": "_size_l_10g2z_gg_",
|
|
49
|
+
"_size_m": "_size_m_10g2z_gg_",
|
|
50
|
+
"_highlighted": "__highlighted_10g2z_gg_",
|
|
51
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_10g2z_gg_",
|
|
52
|
+
"__SItemHint": "___SItemHint_10g2z_gg_",
|
|
53
|
+
"__SDropdownMenuList": "___SDropdownMenuList_10g2z_gg_",
|
|
54
|
+
"__SBar": "___SBar_10g2z_gg_",
|
|
55
|
+
"__SShadowHorizontal": "___SShadowHorizontal_10g2z_gg_",
|
|
56
|
+
"__SShadowVertical": "___SShadowVertical_10g2z_gg_",
|
|
57
|
+
"__SItemContent": "___SItemContent_10g2z_gg_",
|
|
58
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_10g2z_gg_",
|
|
59
|
+
"__SItemContentText": "___SItemContentText_10g2z_gg_"
|
|
60
60
|
});
|
|
61
61
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
62
62
|
var menuItemContext = /*#__PURE__*/React.createContext({});
|
|
@@ -12,24 +12,24 @@ import ScrollAreaComponent from '@semcore/scroll-area';
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { ListBoxContextProvider } from './Context';
|
|
14
14
|
/*!__reshadow-styles__:"../style/dropdown-menu.shadow.css"*/
|
|
15
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
15
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_10g2z_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_10g2z_gg_ .___SBar_10g2z_gg_{z-index:3}.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:before,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_10g2z_gg_ .___SItemContent_10g2z_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_10g2z_gg_.__nesting-trigger_10g2z_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_10g2z_gg_,.___SItemContentText_10g2z_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_10g2z_gg_:first-child,.___SItemContentText_10g2z_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_10g2z_gg_:last-child,.___SItemContentText_10g2z_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_m_10g2z_gg_{padding:0}.___SDropdownMenuNesting_10g2z_gg_.__highlighted_10g2z_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownNestingItem_10g2z_gg_._size_m_10g2z_gg_{padding-right:0}.___SDropdownNestingItem_10g2z_gg_ .___SDropdownMenuItemContainer_10g2z_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_10g2z_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"10g2z_gg_"),
|
|
16
16
|
/*__reshadow_css_end__*/
|
|
17
17
|
{
|
|
18
|
-
"__SDropdownMenuItemContainer": "
|
|
19
|
-
"_nesting-trigger": "__nesting-
|
|
20
|
-
"__SDropdownMenuNesting": "
|
|
21
|
-
"_size_l": "
|
|
22
|
-
"_size_m": "
|
|
23
|
-
"_highlighted": "
|
|
24
|
-
"__SDropdownNestingItem": "
|
|
25
|
-
"__SItemHint": "
|
|
26
|
-
"__SDropdownMenuList": "
|
|
27
|
-
"__SBar": "
|
|
28
|
-
"__SShadowHorizontal": "
|
|
29
|
-
"__SShadowVertical": "
|
|
30
|
-
"__SItemContent": "
|
|
31
|
-
"__SDropdownMenuItemAddon": "
|
|
32
|
-
"__SItemContentText": "
|
|
18
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_10g2z_gg_",
|
|
19
|
+
"_nesting-trigger": "__nesting-trigger_10g2z_gg_",
|
|
20
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_10g2z_gg_",
|
|
21
|
+
"_size_l": "_size_l_10g2z_gg_",
|
|
22
|
+
"_size_m": "_size_m_10g2z_gg_",
|
|
23
|
+
"_highlighted": "__highlighted_10g2z_gg_",
|
|
24
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_10g2z_gg_",
|
|
25
|
+
"__SItemHint": "___SItemHint_10g2z_gg_",
|
|
26
|
+
"__SDropdownMenuList": "___SDropdownMenuList_10g2z_gg_",
|
|
27
|
+
"__SBar": "___SBar_10g2z_gg_",
|
|
28
|
+
"__SShadowHorizontal": "___SShadowHorizontal_10g2z_gg_",
|
|
29
|
+
"__SShadowVertical": "___SShadowVertical_10g2z_gg_",
|
|
30
|
+
"__SItemContent": "___SItemContent_10g2z_gg_",
|
|
31
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_10g2z_gg_",
|
|
32
|
+
"__SItemContentText": "___SItemContentText_10g2z_gg_"
|
|
33
33
|
});
|
|
34
34
|
var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
35
35
|
function VirtualListRoot() {
|
|
@@ -63,20 +63,26 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
63
63
|
var _this2 = this;
|
|
64
64
|
var _this$asProps = this.asProps,
|
|
65
65
|
index = _this$asProps.index,
|
|
66
|
-
rowHeight = _this$asProps.rowHeight
|
|
66
|
+
rowHeight = _this$asProps.rowHeight,
|
|
67
|
+
rowsBuffer = _this$asProps.rowsBuffer;
|
|
67
68
|
setTimeout(function () {
|
|
68
69
|
var _this2$listRef$curren, _this2$listRef$curren2, _this2$containerRef$c;
|
|
69
70
|
var listHeight = ((_this2$listRef$curren = (_this2$listRef$curren2 = _this2.listRef.current) === null || _this2$listRef$curren2 === void 0 ? void 0 : _this2$listRef$curren2.getBoundingClientRect().height) !== null && _this2$listRef$curren !== void 0 ? _this2$listRef$curren : 0) / 2;
|
|
70
71
|
(_this2$containerRef$c = _this2.containerRef.current) === null || _this2$containerRef$c === void 0 || _this2$containerRef$c.scrollTo({
|
|
71
72
|
top: index * rowHeight - listHeight + rowHeight / 2
|
|
72
73
|
});
|
|
74
|
+
if (index <= rowsBuffer) {
|
|
75
|
+
_this2.forceUpdate(); // we need this for correct render all items with calculated container height
|
|
76
|
+
}
|
|
73
77
|
}, 10); // 10 for correct work in safari
|
|
74
78
|
}
|
|
75
79
|
}, {
|
|
76
80
|
key: "render",
|
|
77
81
|
value: function render() {
|
|
78
82
|
var _ref = this.asProps,
|
|
79
|
-
_ref2
|
|
83
|
+
_ref2,
|
|
84
|
+
_this$listRef$current,
|
|
85
|
+
_this$listRef$current2;
|
|
80
86
|
var SDropdownMenuList = ScrollAreaComponent;
|
|
81
87
|
var SBar = ScrollAreaComponent.Bar;
|
|
82
88
|
var _this$state = this.state,
|
|
@@ -89,11 +95,11 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
89
95
|
styles = _this$asProps2.styles,
|
|
90
96
|
RenderRow = _this$asProps2.renderRow,
|
|
91
97
|
customData = _this$asProps2.customData;
|
|
92
|
-
var offsetHeight = 0;
|
|
93
|
-
var prevPrepared = scrollDirection === 'up' ? rowsBuffer :
|
|
94
|
-
var nextPrepared = scrollDirection === 'up' ?
|
|
98
|
+
var offsetHeight = (_this$listRef$current = (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.offsetHeight) !== null && _this$listRef$current !== void 0 ? _this$listRef$current : 0;
|
|
99
|
+
var prevPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;
|
|
100
|
+
var nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;
|
|
95
101
|
var startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
|
|
96
|
-
var lastIndex =
|
|
102
|
+
var lastIndex = Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
|
|
97
103
|
var rowsToRender = rows.slice(startIndex, lastIndex);
|
|
98
104
|
var rowMarginTop = rowHeight * startIndex;
|
|
99
105
|
var rowMarginBottom = rowHeight * (rows.length - lastIndex);
|
|
@@ -111,6 +117,7 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
111
117
|
}, /*#__PURE__*/React.createElement(Box, _ref2.cn("Box", {
|
|
112
118
|
"h": rowMarginTop
|
|
113
119
|
})), rowsToRender.map(function (item, index) {
|
|
120
|
+
// @ts-ignore
|
|
114
121
|
return /*#__PURE__*/React.createElement(RenderRow, {
|
|
115
122
|
key: startIndex + index,
|
|
116
123
|
row: item,
|
|
@@ -130,7 +137,7 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
130
137
|
_defineProperty(VirtualListRoot, "displayName", 'VirtualList');
|
|
131
138
|
_defineProperty(VirtualListRoot, "style", style);
|
|
132
139
|
_defineProperty(VirtualListRoot, "defaultProps", {
|
|
133
|
-
rowsBuffer:
|
|
140
|
+
rowsBuffer: 6
|
|
134
141
|
});
|
|
135
142
|
export var VirtualList = createComponent(VirtualListRoot);
|
|
136
143
|
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","names":["Box","Root","Component","createComponent","sstyled","ScrollAreaComponent","React","ListBoxContextProvider","style","_sstyled","insert","VirtualListRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","scrollTop","scrollDirection","e","target","HTMLElement","state","setState","_inherits","_createClass","key","value","componentDidMount","_this2","_this$asProps","asProps","index","rowHeight","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","render","_ref","_ref2","SDropdownMenuList","SBar","Bar","_this$state","_this$asProps2","rows","rowsBuffer","styles","RenderRow","renderRow","customData","offsetHeight","prevPrepared","nextPrepared","startIndex","Math","max","floor","lastIndex","min","ceil","rowsToRender","slice","rowMarginTop","rowMarginBottom","createElement","cn","_objectSpread","_assignProps","handleScroll","Container","ref","tabIndex","undefined","h","map","item","row","data","VirtualList"],"sources":["../../../src/components/VirtualList.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, Component, createComponent, sstyled } from '@semcore/core';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport React from 'react';\n\nimport { ListBoxContextProvider } from './Context';\nimport style from '../style/dropdown-menu.shadow.css';\n\nexport type RenderRowProps<T, D> = {\n index: number;\n row: T;\n data: D;\n};\n\ntype VirtualListProps<T, D extends object> = {\n /** List of all rows in ddMenu */\n rows: T[];\n /** Method for render row, it's better to wrap it via React.memo */\n renderRow: (props: RenderRowProps<T, D>) => React.ReactNode;\n /** The height of row. For now, you should calculate it on your side. */\n rowHeight: number;\n /** The buffer of rows out of visible rows\n * @default 10\n */\n rowsBuffer?: number;\n /** Some custom data for each renderRow function */\n customData: D;\n};\n\ntype State = {\n scrollTop: number;\n scrollDirection: 'up' | 'down';\n};\n\nclass VirtualListRoot<T = string, D extends object = {}> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 10,\n };\n\n containerRef = React.createRef<HTMLDivElement>();\n listRef = React.createRef<HTMLDivElement>();\n\n state: State = {\n scrollTop: 0,\n scrollDirection: 'down',\n };\n\n componentDidMount() {\n const { index, rowHeight } = this.asProps;\n\n setTimeout(() => {\n const listHeight = (this.listRef.current?.getBoundingClientRect().height ?? 0) / 2;\n this.containerRef.current?.scrollTo({ top: index * rowHeight - listHeight + rowHeight / 2 });\n }, 10); // 10 for correct work in safari\n }\n\n handleScroll = (e: React.SyntheticEvent<HTMLDivElement>) => {\n if (e.target instanceof HTMLElement) {\n const scrollDirection = e.target.scrollTop > this.state.scrollTop ? 'down' : 'up';\n\n this.setState({\n scrollDirection,\n scrollTop: e.target.scrollTop,\n });\n }\n };\n\n render() {\n const SDropdownMenuList = Root;\n const SBar = ScrollAreaComponent.Bar;\n\n const { scrollDirection, scrollTop } = this.state;\n const { rows, rowHeight, rowsBuffer, styles, renderRow: RenderRow, customData } = this.asProps;\n\n const offsetHeight = 0;\n const prevPrepared = scrollDirection === 'up' ? rowsBuffer : 6;\n const nextPrepared = scrollDirection === 'up' ? 6 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = scrollDirection === 'up' && scrollTop === 0\n ? rowsBuffer\n : Math.min(\n Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared,\n rows.length,\n );\n\n const rowsToRender = rows.slice(startIndex, lastIndex);\n const rowMarginTop = rowHeight * startIndex;\n const rowMarginBottom = rowHeight * (rows.length - lastIndex);\n\n return sstyled(styles)(\n <ListBoxContextProvider>\n <SDropdownMenuList\n render={ScrollAreaComponent}\n shadow={true}\n shadowSize={16}\n shadowTheme='light'\n onScroll={this.handleScroll}\n data-is-virtual='true'\n ref={this.listRef}\n >\n <ScrollAreaComponent.Container ref={this.containerRef} tabIndex={undefined} h={rows.length * rowHeight}>\n <Box h={rowMarginTop} />\n {rowsToRender.map((item, index) => {\n return <RenderRow key={startIndex + index} row={item} index={startIndex + index} data={customData} />;\n })}\n <Box h={rowMarginBottom} />\n </ScrollAreaComponent.Container>\n <SBar orientation='horizontal' />\n <SBar orientation='vertical' />\n </SDropdownMenuList>\n </ListBoxContextProvider>,\n );\n }\n}\n\nexport type VirtualListComponent = (<\n T = string,\n D extends object = {},\n>(\n props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<typeof Box, 'div', VirtualListProps<T, D>>, 'tag' | 'children'>\n) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<typeof Box, 'div', VirtualListProps<any, any>>;\n\nexport const VirtualList = createComponent(VirtualListRoot) as VirtualListComponent;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"VirtualList.js","names":["Box","Root","Component","createComponent","sstyled","ScrollAreaComponent","React","ListBoxContextProvider","style","_sstyled","insert","VirtualListRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","scrollTop","scrollDirection","e","target","HTMLElement","state","setState","_inherits","_createClass","key","value","componentDidMount","_this2","_this$asProps","asProps","index","rowHeight","rowsBuffer","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","forceUpdate","render","_ref","_ref2","_this$listRef$current","_this$listRef$current2","SDropdownMenuList","SBar","Bar","_this$state","_this$asProps2","rows","styles","RenderRow","renderRow","customData","offsetHeight","prevPrepared","nextPrepared","startIndex","Math","max","floor","lastIndex","min","ceil","rowsToRender","slice","rowMarginTop","rowMarginBottom","createElement","cn","_objectSpread","_assignProps","handleScroll","Container","ref","tabIndex","undefined","h","map","item","row","data","VirtualList"],"sources":["../../../src/components/VirtualList.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, Component, createComponent, sstyled } from '@semcore/core';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport React from 'react';\n\nimport { ListBoxContextProvider } from './Context';\nimport style from '../style/dropdown-menu.shadow.css';\n\nexport type RenderRowProps<T, D = never> = {\n index: number;\n row: T;\n data: [D] extends [never] ? undefined : D;\n};\n\ntype VirtualListProps<T, D extends object = never> = {\n /** List of all rows in ddMenu */\n rows: T[];\n /** Method for render row, it's better to wrap it via React.memo */\n renderRow: (props: RenderRowProps<T, D>) => React.ReactNode;\n /** The height of row. For now, you should calculate it on your side. */\n rowHeight: number;\n /** The buffer of rows out of visible rows\n * @default 10\n */\n rowsBuffer?: number;\n} & ([D] extends [never] ? { customData?: undefined } : {\n /** Some custom data for each renderRow function */\n customData: D;\n});\n\ntype State = {\n scrollTop: number;\n scrollDirection: 'up' | 'down';\n};\n\nclass VirtualListRoot<T = string, D extends object = never> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 6,\n };\n\n containerRef = React.createRef<HTMLDivElement>();\n listRef = React.createRef<HTMLDivElement>();\n\n state: State = {\n scrollTop: 0,\n scrollDirection: 'down',\n };\n\n componentDidMount() {\n const { index, rowHeight, rowsBuffer } = this.asProps;\n\n setTimeout(() => {\n const listHeight = (this.listRef.current?.getBoundingClientRect().height ?? 0) / 2;\n this.containerRef.current?.scrollTo({ top: index * rowHeight - listHeight + rowHeight / 2 });\n\n if (index <= rowsBuffer) {\n this.forceUpdate(); // we need this for correct render all items with calculated container height\n }\n }, 10); // 10 for correct work in safari\n }\n\n handleScroll = (e: React.SyntheticEvent<HTMLDivElement>) => {\n if (e.target instanceof HTMLElement) {\n const scrollDirection = e.target.scrollTop > this.state.scrollTop ? 'down' : 'up';\n\n this.setState({\n scrollDirection,\n scrollTop: e.target.scrollTop,\n });\n }\n };\n\n render() {\n const SDropdownMenuList = Root;\n const SBar = ScrollAreaComponent.Bar;\n\n const { scrollDirection, scrollTop } = this.state;\n const { rows, rowHeight, rowsBuffer, styles, renderRow: RenderRow, customData } = this.asProps;\n\n const offsetHeight = this.listRef.current?.offsetHeight ?? 0;\n const prevPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n const nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = Math.min(\n Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared,\n rows.length,\n );\n\n const rowsToRender = rows.slice(startIndex, lastIndex);\n const rowMarginTop = rowHeight * startIndex;\n const rowMarginBottom = rowHeight * (rows.length - lastIndex);\n\n return sstyled(styles)(\n <ListBoxContextProvider>\n <SDropdownMenuList\n render={ScrollAreaComponent}\n shadow={true}\n shadowSize={16}\n shadowTheme='light'\n onScroll={this.handleScroll}\n data-is-virtual='true'\n ref={this.listRef}\n >\n <ScrollAreaComponent.Container ref={this.containerRef} tabIndex={undefined} h={rows.length * rowHeight}>\n <Box h={rowMarginTop} />\n {rowsToRender.map((item, index) => {\n // @ts-ignore\n return <RenderRow key={startIndex + index} row={item} index={startIndex + index} data={customData} />;\n })}\n <Box h={rowMarginBottom} />\n </ScrollAreaComponent.Container>\n <SBar orientation='horizontal' />\n <SBar orientation='vertical' />\n </SDropdownMenuList>\n </ListBoxContextProvider>,\n );\n }\n}\n\nexport type VirtualListComponent = (<\n T = string,\n D extends object = never,\n>(\n props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<typeof Box, 'div', VirtualListProps<T, D>>, 'tag' | 'children'>\n) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<typeof Box, 'div', VirtualListProps<any, any>>;\n\nexport const VirtualList = createComponent(VirtualListRoot) as VirtualListComponent;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/DropdownMenu.mjs
CHANGED
|
@@ -29,26 +29,26 @@ var style = (
|
|
|
29
29
|
/*__reshadow_css_start__*/
|
|
30
30
|
(sstyled.insert(
|
|
31
31
|
/*__inner_css_start__*/
|
|
32
|
-
".
|
|
32
|
+
".___SDropdownMenuList_10g2z_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_10g2z_gg_ .___SBar_10g2z_gg_{z-index:3}.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:before,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_10g2z_gg_ .___SItemContent_10g2z_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_10g2z_gg_.__nesting-trigger_10g2z_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_10g2z_gg_,.___SItemContentText_10g2z_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_10g2z_gg_:first-child,.___SItemContentText_10g2z_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_10g2z_gg_:last-child,.___SItemContentText_10g2z_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_m_10g2z_gg_{padding:0}.___SDropdownMenuNesting_10g2z_gg_.__highlighted_10g2z_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownNestingItem_10g2z_gg_._size_m_10g2z_gg_{padding-right:0}.___SDropdownNestingItem_10g2z_gg_ .___SDropdownMenuItemContainer_10g2z_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_10g2z_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
|
|
33
33
|
/*__inner_css_end__*/
|
|
34
|
-
"
|
|
34
|
+
"10g2z_gg_"
|
|
35
35
|
), /*__reshadow_css_end__*/
|
|
36
36
|
{
|
|
37
|
-
"__SDropdownMenuItemContainer": "
|
|
38
|
-
"_nesting-trigger": "__nesting-
|
|
39
|
-
"__SDropdownMenuNesting": "
|
|
40
|
-
"_size_l": "
|
|
41
|
-
"_size_m": "
|
|
42
|
-
"_highlighted": "
|
|
43
|
-
"__SDropdownNestingItem": "
|
|
44
|
-
"__SItemHint": "
|
|
45
|
-
"__SDropdownMenuList": "
|
|
46
|
-
"__SBar": "
|
|
47
|
-
"__SShadowHorizontal": "
|
|
48
|
-
"__SShadowVertical": "
|
|
49
|
-
"__SItemContent": "
|
|
50
|
-
"__SDropdownMenuItemAddon": "
|
|
51
|
-
"__SItemContentText": "
|
|
37
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_10g2z_gg_",
|
|
38
|
+
"_nesting-trigger": "__nesting-trigger_10g2z_gg_",
|
|
39
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_10g2z_gg_",
|
|
40
|
+
"_size_l": "_size_l_10g2z_gg_",
|
|
41
|
+
"_size_m": "_size_m_10g2z_gg_",
|
|
42
|
+
"_highlighted": "__highlighted_10g2z_gg_",
|
|
43
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_10g2z_gg_",
|
|
44
|
+
"__SItemHint": "___SItemHint_10g2z_gg_",
|
|
45
|
+
"__SDropdownMenuList": "___SDropdownMenuList_10g2z_gg_",
|
|
46
|
+
"__SBar": "___SBar_10g2z_gg_",
|
|
47
|
+
"__SShadowHorizontal": "___SShadowHorizontal_10g2z_gg_",
|
|
48
|
+
"__SShadowVertical": "___SShadowVertical_10g2z_gg_",
|
|
49
|
+
"__SItemContent": "___SItemContent_10g2z_gg_",
|
|
50
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_10g2z_gg_",
|
|
51
|
+
"__SItemContentText": "___SItemContentText_10g2z_gg_"
|
|
52
52
|
})
|
|
53
53
|
);
|
|
54
54
|
var menuItemContext = /* @__PURE__ */ React.createContext({});
|
|
@@ -14,26 +14,26 @@ var style = (
|
|
|
14
14
|
/*__reshadow_css_start__*/
|
|
15
15
|
(sstyled.insert(
|
|
16
16
|
/*__inner_css_start__*/
|
|
17
|
-
".
|
|
17
|
+
".___SDropdownMenuList_10g2z_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_10g2z_gg_ .___SBar_10g2z_gg_{z-index:3}.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowHorizontal_10g2z_gg_:before,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:after,.___SDropdownMenuList_10g2z_gg_ .___SShadowVertical_10g2z_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_10g2z_gg_ .___SItemContent_10g2z_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_10g2z_gg_.__nesting-trigger_10g2z_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_10g2z_gg_,.___SItemContentText_10g2z_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_10g2z_gg_:first-child,.___SItemContentText_10g2z_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_10g2z_gg_:last-child,.___SItemContentText_10g2z_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownMenuNesting_10g2z_gg_._size_m_10g2z_gg_{padding:0}.___SDropdownMenuNesting_10g2z_gg_.__highlighted_10g2z_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_10g2z_gg_._size_l_10g2z_gg_,.___SDropdownNestingItem_10g2z_gg_._size_m_10g2z_gg_{padding-right:0}.___SDropdownNestingItem_10g2z_gg_ .___SDropdownMenuItemContainer_10g2z_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_10g2z_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
|
|
18
18
|
/*__inner_css_end__*/
|
|
19
|
-
"
|
|
19
|
+
"10g2z_gg_"
|
|
20
20
|
), /*__reshadow_css_end__*/
|
|
21
21
|
{
|
|
22
|
-
"__SDropdownMenuItemContainer": "
|
|
23
|
-
"_nesting-trigger": "__nesting-
|
|
24
|
-
"__SDropdownMenuNesting": "
|
|
25
|
-
"_size_l": "
|
|
26
|
-
"_size_m": "
|
|
27
|
-
"_highlighted": "
|
|
28
|
-
"__SDropdownNestingItem": "
|
|
29
|
-
"__SItemHint": "
|
|
30
|
-
"__SDropdownMenuList": "
|
|
31
|
-
"__SBar": "
|
|
32
|
-
"__SShadowHorizontal": "
|
|
33
|
-
"__SShadowVertical": "
|
|
34
|
-
"__SItemContent": "
|
|
35
|
-
"__SDropdownMenuItemAddon": "
|
|
36
|
-
"__SItemContentText": "
|
|
22
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_10g2z_gg_",
|
|
23
|
+
"_nesting-trigger": "__nesting-trigger_10g2z_gg_",
|
|
24
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_10g2z_gg_",
|
|
25
|
+
"_size_l": "_size_l_10g2z_gg_",
|
|
26
|
+
"_size_m": "_size_m_10g2z_gg_",
|
|
27
|
+
"_highlighted": "__highlighted_10g2z_gg_",
|
|
28
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_10g2z_gg_",
|
|
29
|
+
"__SItemHint": "___SItemHint_10g2z_gg_",
|
|
30
|
+
"__SDropdownMenuList": "___SDropdownMenuList_10g2z_gg_",
|
|
31
|
+
"__SBar": "___SBar_10g2z_gg_",
|
|
32
|
+
"__SShadowHorizontal": "___SShadowHorizontal_10g2z_gg_",
|
|
33
|
+
"__SShadowVertical": "___SShadowVertical_10g2z_gg_",
|
|
34
|
+
"__SItemContent": "___SItemContent_10g2z_gg_",
|
|
35
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_10g2z_gg_",
|
|
36
|
+
"__SItemContentText": "___SItemContentText_10g2z_gg_"
|
|
37
37
|
})
|
|
38
38
|
);
|
|
39
39
|
var VirtualListRoot = /* @__PURE__ */ (function(_Component) {
|
|
@@ -66,28 +66,31 @@ var VirtualListRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
66
66
|
key: "componentDidMount",
|
|
67
67
|
value: function componentDidMount() {
|
|
68
68
|
var _this2 = this;
|
|
69
|
-
var _this$asProps = this.asProps, index = _this$asProps.index, rowHeight = _this$asProps.rowHeight;
|
|
69
|
+
var _this$asProps = this.asProps, index = _this$asProps.index, rowHeight = _this$asProps.rowHeight, rowsBuffer = _this$asProps.rowsBuffer;
|
|
70
70
|
setTimeout(function() {
|
|
71
71
|
var _this2$listRef$curren, _this2$listRef$curren2, _this2$containerRef$c;
|
|
72
72
|
var listHeight = ((_this2$listRef$curren = (_this2$listRef$curren2 = _this2.listRef.current) === null || _this2$listRef$curren2 === void 0 ? void 0 : _this2$listRef$curren2.getBoundingClientRect().height) !== null && _this2$listRef$curren !== void 0 ? _this2$listRef$curren : 0) / 2;
|
|
73
73
|
(_this2$containerRef$c = _this2.containerRef.current) === null || _this2$containerRef$c === void 0 || _this2$containerRef$c.scrollTo({
|
|
74
74
|
top: index * rowHeight - listHeight + rowHeight / 2
|
|
75
75
|
});
|
|
76
|
+
if (index <= rowsBuffer) {
|
|
77
|
+
_this2.forceUpdate();
|
|
78
|
+
}
|
|
76
79
|
}, 10);
|
|
77
80
|
}
|
|
78
81
|
}, {
|
|
79
82
|
key: "render",
|
|
80
83
|
value: function render() {
|
|
81
|
-
var _ref = this.asProps, _ref2;
|
|
84
|
+
var _ref = this.asProps, _ref2, _this$listRef$current, _this$listRef$current2;
|
|
82
85
|
var SDropdownMenuList = ScrollAreaComponent;
|
|
83
86
|
var SBar = ScrollAreaComponent.Bar;
|
|
84
87
|
var _this$state = this.state, scrollDirection = _this$state.scrollDirection, scrollTop = _this$state.scrollTop;
|
|
85
88
|
var _this$asProps2 = this.asProps, rows = _this$asProps2.rows, rowHeight = _this$asProps2.rowHeight, rowsBuffer = _this$asProps2.rowsBuffer, styles = _this$asProps2.styles, RenderRow = _this$asProps2.renderRow, customData = _this$asProps2.customData;
|
|
86
|
-
var offsetHeight = 0;
|
|
87
|
-
var prevPrepared = scrollDirection === "up" ? rowsBuffer :
|
|
88
|
-
var nextPrepared = scrollDirection === "up" ?
|
|
89
|
+
var offsetHeight = (_this$listRef$current = (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.offsetHeight) !== null && _this$listRef$current !== void 0 ? _this$listRef$current : 0;
|
|
90
|
+
var prevPrepared = scrollDirection === "up" ? rowsBuffer / 2 : rowsBuffer;
|
|
91
|
+
var nextPrepared = scrollDirection === "up" ? rowsBuffer / 2 : rowsBuffer;
|
|
89
92
|
var startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
|
|
90
|
-
var lastIndex =
|
|
93
|
+
var lastIndex = Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
|
|
91
94
|
var rowsToRender = rows.slice(startIndex, lastIndex);
|
|
92
95
|
var rowMarginTop = rowHeight * startIndex;
|
|
93
96
|
var rowMarginBottom = rowHeight * (rows.length - lastIndex);
|
|
@@ -124,7 +127,7 @@ var VirtualListRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
124
127
|
_defineProperty(VirtualListRoot, "displayName", "VirtualList");
|
|
125
128
|
_defineProperty(VirtualListRoot, "style", style);
|
|
126
129
|
_defineProperty(VirtualListRoot, "defaultProps", {
|
|
127
|
-
rowsBuffer:
|
|
130
|
+
rowsBuffer: 6
|
|
128
131
|
});
|
|
129
132
|
var VirtualList = createComponent(VirtualListRoot);
|
|
130
133
|
export {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { Box } from '@semcore/base-components';
|
|
2
2
|
import type { Intergalactic } from '@semcore/core';
|
|
3
3
|
import React from 'react';
|
|
4
|
-
export type RenderRowProps<T, D> = {
|
|
4
|
+
export type RenderRowProps<T, D = never> = {
|
|
5
5
|
index: number;
|
|
6
6
|
row: T;
|
|
7
|
-
data: D;
|
|
7
|
+
data: [D] extends [never] ? undefined : D;
|
|
8
8
|
};
|
|
9
|
-
type VirtualListProps<T, D extends object> = {
|
|
9
|
+
type VirtualListProps<T, D extends object = never> = {
|
|
10
10
|
/** List of all rows in ddMenu */
|
|
11
11
|
rows: T[];
|
|
12
12
|
/** Method for render row, it's better to wrap it via React.memo */
|
|
@@ -17,9 +17,12 @@ type VirtualListProps<T, D extends object> = {
|
|
|
17
17
|
* @default 10
|
|
18
18
|
*/
|
|
19
19
|
rowsBuffer?: number;
|
|
20
|
+
} & ([D] extends [never] ? {
|
|
21
|
+
customData?: undefined;
|
|
22
|
+
} : {
|
|
20
23
|
/** Some custom data for each renderRow function */
|
|
21
24
|
customData: D;
|
|
22
|
-
};
|
|
23
|
-
export type VirtualListComponent = (<T = string, D extends object =
|
|
25
|
+
});
|
|
26
|
+
export type VirtualListComponent = (<T = string, D extends object = never>(props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<typeof Box, 'div', VirtualListProps<T, D>>, 'tag' | 'children'>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<typeof Box, 'div', VirtualListProps<any, any>>;
|
|
24
27
|
export declare const VirtualList: VirtualListComponent;
|
|
25
28
|
export {};
|
|
@@ -1,42 +1,16 @@
|
|
|
1
1
|
export declare const localizedMessages: {
|
|
2
|
-
de: {
|
|
3
|
-
triggerHint: string;
|
|
4
|
-
};
|
|
2
|
+
de: {};
|
|
5
3
|
en: {};
|
|
6
|
-
es: {
|
|
7
|
-
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
};
|
|
18
|
-
ko: {
|
|
19
|
-
triggerHint: string;
|
|
20
|
-
};
|
|
21
|
-
nl: {
|
|
22
|
-
triggerHint: string;
|
|
23
|
-
};
|
|
24
|
-
pt: {
|
|
25
|
-
triggerHint: string;
|
|
26
|
-
};
|
|
27
|
-
tr: {
|
|
28
|
-
triggerHint: string;
|
|
29
|
-
};
|
|
30
|
-
vi: {
|
|
31
|
-
triggerHint: string;
|
|
32
|
-
};
|
|
33
|
-
zh: {
|
|
34
|
-
triggerHint: string;
|
|
35
|
-
};
|
|
36
|
-
pl: {
|
|
37
|
-
triggerHint: string;
|
|
38
|
-
};
|
|
39
|
-
sv: {
|
|
40
|
-
triggerHint: string;
|
|
41
|
-
};
|
|
4
|
+
es: {};
|
|
5
|
+
fr: {};
|
|
6
|
+
it: {};
|
|
7
|
+
ja: {};
|
|
8
|
+
ko: {};
|
|
9
|
+
nl: {};
|
|
10
|
+
pt: {};
|
|
11
|
+
tr: {};
|
|
12
|
+
vi: {};
|
|
13
|
+
zh: {};
|
|
14
|
+
pl: {};
|
|
15
|
+
sv: {};
|
|
42
16
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/dropdown-menu",
|
|
3
3
|
"description": "Semrush DropdownMenu Component",
|
|
4
|
-
"version": "16.2.
|
|
4
|
+
"version": "16.2.1-prerelease.2",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@semcore/button": "16.0.12",
|
|
18
18
|
"@semcore/dropdown": "16.1.3",
|
|
19
|
-
"@semcore/icon": "16.7.3",
|
|
19
|
+
"@semcore/icon": "16.7.3-prerelease.2",
|
|
20
20
|
"@semcore/typography": "16.3.2",
|
|
21
21
|
"@semcore/popper": "16.0.11",
|
|
22
22
|
"@semcore/flex-box": "16.0.11",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"@types/classnames": "2.2.6",
|
|
36
36
|
"@semcore/core": "16.5.1",
|
|
37
37
|
"@semcore/testing-utils": "1.0.0",
|
|
38
|
-
"@semcore/base-trigger": "16.4.
|
|
38
|
+
"@semcore/base-trigger": "16.4.5-prerelease.2",
|
|
39
39
|
"@semcore/button": "16.0.12",
|
|
40
|
-
"@semcore/icon": "16.7.3"
|
|
40
|
+
"@semcore/icon": "16.7.3-prerelease.2"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|
|
43
43
|
"build": "pnpm semcore-builder --source=js,ts && pnpm vite build"
|