flexlayout-react 0.8.5 → 0.8.7
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.txt +10 -0
- package/README.md +78 -2
- package/declarations/Rect.d.ts +2 -0
- package/declarations/Types.d.ts +0 -5
- package/declarations/view/Layout.d.ts +3 -1
- package/dist/flexlayout.js +6 -6
- package/dist/flexlayout_min.js +1 -1
- package/lib/Rect.js +6 -0
- package/lib/Rect.js.map +1 -1
- package/lib/Types.js +0 -5
- package/lib/Types.js.map +1 -1
- package/lib/model/TabSetNode.js +9 -4
- package/lib/model/TabSetNode.js.map +1 -1
- package/lib/view/BorderTabSet.js +1 -2
- package/lib/view/BorderTabSet.js.map +1 -1
- package/lib/view/Layout.js +3 -2
- package/lib/view/Layout.js.map +1 -1
- package/lib/view/TabOverflowHook.js +40 -43
- package/lib/view/TabOverflowHook.js.map +1 -1
- package/package.json +2 -2
- package/src/Rect.ts +8 -0
- package/src/Types.ts +0 -6
- package/src/model/TabSetNode.ts +8 -4
- package/src/view/BorderTabSet.tsx +1 -2
- package/src/view/Layout.tsx +9 -5
- package/src/view/TabOverflowHook.tsx +46 -51
- package/style/_base.scss +564 -614
- package/style/_themes.scss +646 -0
- package/style/combined.css +1053 -0
- package/style/combined.css.map +1 -0
- package/style/combined.scss +46 -0
- package/style/dark.css +41 -63
- package/style/dark.css.map +1 -1
- package/style/dark.scss +5 -185
- package/style/gray.css +54 -56
- package/style/gray.css.map +1 -1
- package/style/gray.scss +5 -184
- package/style/light.css +23 -52
- package/style/light.css.map +1 -1
- package/style/light.scss +5 -167
- package/style/rounded.css +42 -77
- package/style/rounded.css.map +1 -1
- package/style/rounded.scss +5 -215
- package/style/underline.css +45 -65
- package/style/underline.css.map +1 -1
- package/style/underline.scss +5 -190
- package/.editorconfig +0 -8
- package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -104
- package/.github/ISSUE_TEMPLATE/config.yml +0 -5
- package/.prettierrc.json +0 -3
- package/Screenshot_light.png +0 -0
- package/Screenshot_rounded.png +0 -0
- package/dist/bundles/demo.js +0 -232052
- package/dist/bundles/demo.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabOverflowHook.js","sourceRoot":"","sources":["../../src/view/TabOverflowHook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"TabOverflowHook.js","sourceRoot":"","sources":["../../src/view/TabOverflowHook.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flexlayout-react",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.7",
|
|
4
4
|
"description": "A multi-tab docking layout manager",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "./declarations/index.d.ts",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"build:demo": "webpack",
|
|
33
33
|
"lint:eslint": "eslint src/*",
|
|
34
34
|
"doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
|
|
35
|
-
"css": "sass style/rounded.scss style/rounded.css && sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css"
|
|
35
|
+
"css": "sass style/rounded.scss style/rounded.css && sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/light.scss test/style/light.css && sass style/dark.scss style/dark.css && sass style/combined.scss style/combined.css"
|
|
36
36
|
},
|
|
37
37
|
"author": "Caplin Systems Ltd",
|
|
38
38
|
"repository": "https://github.com/caplin/FlexLayout",
|
package/src/Rect.ts
CHANGED
|
@@ -90,6 +90,14 @@ export class Rect {
|
|
|
90
90
|
return this.x + this.width;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
get bottom() {
|
|
94
|
+
return this.y + this.height;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
get right() {
|
|
98
|
+
return this.x + this.width;
|
|
99
|
+
}
|
|
100
|
+
|
|
93
101
|
getCenter() {
|
|
94
102
|
return { x: this.x + this.width / 2, y: this.y + this.height / 2 };
|
|
95
103
|
}
|
package/src/Types.ts
CHANGED
|
@@ -38,7 +38,6 @@ export enum CLASSES {
|
|
|
38
38
|
FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
|
|
39
39
|
|
|
40
40
|
FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
|
|
41
|
-
FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
|
|
42
41
|
|
|
43
42
|
FLEXLAYOUT__LAYOUT = "flexlayout__layout",
|
|
44
43
|
FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
|
|
@@ -69,11 +68,9 @@ export enum CLASSES {
|
|
|
69
68
|
FLEXLAYOUT__TABSET = "flexlayout__tabset",
|
|
70
69
|
FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
|
|
71
70
|
FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
|
|
72
|
-
FLEXLAYOUT__TABSET_HEADER_SIZER = "flexlayout__tabset_header_sizer",
|
|
73
71
|
FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
|
|
74
72
|
FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
|
|
75
73
|
FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
|
|
76
|
-
FLEXLAYOUT__TABSET_SIZER = "flexlayout__tabset_sizer",
|
|
77
74
|
FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
|
|
78
75
|
FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
|
|
79
76
|
FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
|
|
@@ -97,9 +94,6 @@ export enum CLASSES {
|
|
|
97
94
|
FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
|
|
98
95
|
FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
|
|
99
96
|
|
|
100
|
-
FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
|
|
101
|
-
FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",
|
|
102
|
-
|
|
103
97
|
FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
|
|
104
98
|
FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
|
|
105
99
|
FLEXLAYOUT__TAB_TOOLBAR_ICON = "flexlayout__tab_toolbar_icon",
|
package/src/model/TabSetNode.ts
CHANGED
|
@@ -342,16 +342,20 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
|
|
|
342
342
|
p = this.tabStripRect.x;
|
|
343
343
|
}
|
|
344
344
|
childCenter = r.x + r.width / 2;
|
|
345
|
-
if (
|
|
345
|
+
if (p <= x && x < childCenter && r.y < y && y < r.getBottom()) {
|
|
346
346
|
const dockLocation = DockLocation.CENTER;
|
|
347
347
|
const outlineRect = new Rect(r.x - 2, r.y, 3, r.height);
|
|
348
|
-
|
|
349
|
-
|
|
348
|
+
if (this.rect.x < r.x && r.x < this.rect.getRight()) {
|
|
349
|
+
dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
|
|
350
|
+
break;
|
|
351
|
+
} else {
|
|
352
|
+
return undefined;
|
|
353
|
+
}
|
|
350
354
|
}
|
|
351
355
|
p = childCenter;
|
|
352
356
|
}
|
|
353
357
|
}
|
|
354
|
-
if (dropInfo == null) {
|
|
358
|
+
if (dropInfo == null && r.getRight() < this.rect!.getRight()) {
|
|
355
359
|
const dockLocation = DockLocation.CENTER;
|
|
356
360
|
const outlineRect = new Rect(r.getRight() - 2, yy, 3, h);
|
|
357
361
|
dropInfo = new DropInfo(this, outlineRect, dockLocation, this.children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
|
|
@@ -11,7 +11,6 @@ import { useTabOverflow } from "./TabOverflowHook";
|
|
|
11
11
|
import { Orientation } from "../Orientation";
|
|
12
12
|
import { CLASSES } from "../Types";
|
|
13
13
|
import { isAuxMouseEvent } from "./Utils";
|
|
14
|
-
import { Rect } from "../Rect";
|
|
15
14
|
|
|
16
15
|
/** @internal */
|
|
17
16
|
export interface IBorderTabSetProps {
|
|
@@ -33,7 +32,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
|
|
|
33
32
|
const icons = layout.getIcons();
|
|
34
33
|
|
|
35
34
|
React.useLayoutEffect(() => {
|
|
36
|
-
border.setTabHeaderRect(
|
|
35
|
+
border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current!));
|
|
37
36
|
});
|
|
38
37
|
|
|
39
38
|
const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isTabOverflow } =
|
package/src/view/Layout.tsx
CHANGED
|
@@ -35,6 +35,8 @@ export interface ILayoutProps {
|
|
|
35
35
|
model: Model;
|
|
36
36
|
/** factory function for creating the tab components */
|
|
37
37
|
factory: (node: TabNode) => React.ReactNode;
|
|
38
|
+
/** sets a top level class name on popout windows */
|
|
39
|
+
popoutClassName?: string;
|
|
38
40
|
/** object mapping keys among close, maximize, restore, more, popout to React nodes to use in place of the default icons, can alternatively return functions for creating the React nodes */
|
|
39
41
|
icons?: IIcons;
|
|
40
42
|
/** function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning undefined from the function will halt the action, otherwise return the action to continue */
|
|
@@ -388,8 +390,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
|
|
|
388
390
|
{tabStamps}
|
|
389
391
|
{this.state.portal}
|
|
390
392
|
{floatingWindows}
|
|
391
|
-
|
|
392
|
-
|
|
393
|
+
</div>
|
|
394
|
+
);
|
|
393
395
|
}
|
|
394
396
|
|
|
395
397
|
renderBorders(
|
|
@@ -538,7 +540,9 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
|
|
|
538
540
|
onSetWindow={this.onSetWindow}
|
|
539
541
|
onCloseWindow={this.onCloseWindow}
|
|
540
542
|
>
|
|
541
|
-
<
|
|
543
|
+
<div className={this.props.popoutClassName}>
|
|
544
|
+
<LayoutInternal {...this.props} windowId={windowId} mainLayout={this} />
|
|
545
|
+
</div>
|
|
542
546
|
</PopoutWindow>
|
|
543
547
|
);
|
|
544
548
|
i++;
|
|
@@ -1022,7 +1026,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
|
|
|
1022
1026
|
}
|
|
1023
1027
|
if (!rendered) {
|
|
1024
1028
|
if (isSafari()) { // safari doesnt render the offscreen tabstamps
|
|
1025
|
-
this.setDragComponent(event, <TabButtonStamp node={node as TabNode} layout={this}/>, x,y);
|
|
1029
|
+
this.setDragComponent(event, <TabButtonStamp node={node as TabNode} layout={this} />, x, y);
|
|
1026
1030
|
} else {
|
|
1027
1031
|
event.dataTransfer!.setDragImage((node as TabNode).getTabStamp()!, x, y);
|
|
1028
1032
|
}
|
|
@@ -1224,7 +1228,7 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
|
|
|
1224
1228
|
// *************************** End Drag Drop *************************************
|
|
1225
1229
|
}
|
|
1226
1230
|
|
|
1227
|
-
export const FlexLayoutVersion = "0.8.
|
|
1231
|
+
export const FlexLayoutVersion = "0.8.7";
|
|
1228
1232
|
|
|
1229
1233
|
export type DragRectRenderCallback = (
|
|
1230
1234
|
content: React.ReactNode | undefined,
|
|
@@ -5,6 +5,7 @@ import { Orientation } from "../Orientation";
|
|
|
5
5
|
import { LayoutInternal } from "./Layout";
|
|
6
6
|
import { TabNode } from "../model/TabNode";
|
|
7
7
|
import { startDrag } from "./Utils";
|
|
8
|
+
import { Rect } from "../Rect";
|
|
8
9
|
|
|
9
10
|
/** @internal */
|
|
10
11
|
export const useTabOverflow = (
|
|
@@ -23,6 +24,7 @@ export const useTabOverflow = (
|
|
|
23
24
|
const updateHiddenTabsTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
|
|
24
25
|
const hiddenTabsRef = React.useRef<number[]>([]);
|
|
25
26
|
const thumbInternalPos = React.useRef<number>(0);
|
|
27
|
+
const repositioningRef = React.useRef<boolean>(false);
|
|
26
28
|
hiddenTabsRef.current = hiddenTabs;
|
|
27
29
|
|
|
28
30
|
// if node changes (new model) then reset scroll to 0
|
|
@@ -31,7 +33,7 @@ export const useTabOverflow = (
|
|
|
31
33
|
setScrollPosition(0);
|
|
32
34
|
}
|
|
33
35
|
}, [node]);
|
|
34
|
-
|
|
36
|
+
|
|
35
37
|
// if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
|
|
36
38
|
React.useEffect(() => {
|
|
37
39
|
userControlledPositionRef.current = false;
|
|
@@ -40,23 +42,40 @@ export const useTabOverflow = (
|
|
|
40
42
|
React.useEffect(() => {
|
|
41
43
|
checkForOverflow(); // if tabs + sticky buttons length > scroll area => move sticky buttons to right buttons
|
|
42
44
|
|
|
43
|
-
if (
|
|
44
|
-
|
|
45
|
-
if (selectedTab) {
|
|
46
|
-
selectedTab.scrollIntoView();
|
|
47
|
-
}
|
|
45
|
+
if (userControlledPositionRef.current === false) {
|
|
46
|
+
scrollIntoView();
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
updateHiddenTabs();
|
|
51
50
|
updateScrollMetrics();
|
|
52
51
|
});
|
|
53
52
|
|
|
53
|
+
function scrollIntoView() {
|
|
54
|
+
const selectedTabNode = node.getSelectedNode() as TabNode;
|
|
55
|
+
if (selectedTabNode && tabStripRef.current) {
|
|
56
|
+
const stripRect = layout.getBoundingClientRect(tabStripRef.current);
|
|
57
|
+
const selectedRect = selectedTabNode.getTabRect()!;
|
|
58
|
+
|
|
59
|
+
let shift = getNear(stripRect) - getNear(selectedRect);
|
|
60
|
+
if (shift > 2 || getSize(selectedRect) > getSize(stripRect)) { // maybe 2 will prevent jitter?
|
|
61
|
+
setScrollPosition(getScrollPosition(tabStripRef.current) - shift);
|
|
62
|
+
repositioningRef.current = true; // prevent onScroll setting userControlledPosition
|
|
63
|
+
} else {
|
|
64
|
+
shift = getFar(selectedRect) - getFar(stripRect);
|
|
65
|
+
if (shift > 2) {
|
|
66
|
+
setScrollPosition(getScrollPosition(tabStripRef.current) + shift);
|
|
67
|
+
repositioningRef.current = true;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
54
73
|
const updateScrollMetrics = () => {
|
|
55
74
|
if (tabStripRef.current && miniScrollRef.current) {
|
|
56
75
|
const t = tabStripRef.current;
|
|
57
76
|
const s = miniScrollRef.current;
|
|
58
77
|
|
|
59
|
-
const size =
|
|
78
|
+
const size = getElementSize(t);
|
|
60
79
|
const scrollSize = getScrollSize(t);
|
|
61
80
|
const position = getScrollPosition(t);
|
|
62
81
|
|
|
@@ -67,7 +86,7 @@ export const useTabOverflow = (
|
|
|
67
86
|
adjust = 20 - thumbSize;
|
|
68
87
|
thumbSize = 20;
|
|
69
88
|
}
|
|
70
|
-
const thumbPos = position * (size - adjust) / scrollSize;
|
|
89
|
+
const thumbPos = position * (size - adjust) / scrollSize;
|
|
71
90
|
if (orientation === Orientation.HORZ) {
|
|
72
91
|
s.style.width = thumbSize + "px";
|
|
73
92
|
s.style.left = thumbPos + "px";
|
|
@@ -102,25 +121,11 @@ export const useTabOverflow = (
|
|
|
102
121
|
}
|
|
103
122
|
}
|
|
104
123
|
|
|
105
|
-
const updateTabRects = () => {
|
|
106
|
-
if (tabStripRef.current) {
|
|
107
|
-
const tabContainer = tabStripRef.current.firstElementChild!;
|
|
108
|
-
|
|
109
|
-
const nodeChildren = node.getChildren();
|
|
110
|
-
let i = 0;
|
|
111
|
-
Array.from(tabContainer.children).forEach((child) => {
|
|
112
|
-
if (child.classList.contains(tabClassName)) {
|
|
113
|
-
const childNode = nodeChildren[i] as TabNode;
|
|
114
|
-
childNode.setTabRect(layout.getBoundingClientRect(child as HTMLElement));
|
|
115
|
-
i++;
|
|
116
|
-
}
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
124
|
const onScroll = () => {
|
|
122
|
-
|
|
123
|
-
|
|
125
|
+
if (!repositioningRef.current){
|
|
126
|
+
userControlledPositionRef.current=true;
|
|
127
|
+
}
|
|
128
|
+
repositioningRef.current = false;
|
|
124
129
|
updateScrollMetrics()
|
|
125
130
|
updateHiddenTabs();
|
|
126
131
|
};
|
|
@@ -134,7 +139,6 @@ export const useTabOverflow = (
|
|
|
134
139
|
} else {
|
|
135
140
|
thumbInternalPos.current = event.clientY - r.y;
|
|
136
141
|
}
|
|
137
|
-
userControlledPositionRef.current = true;
|
|
138
142
|
startDrag(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);
|
|
139
143
|
}
|
|
140
144
|
|
|
@@ -142,9 +146,9 @@ export const useTabOverflow = (
|
|
|
142
146
|
if (tabStripRef.current && miniScrollRef.current) {
|
|
143
147
|
const t = tabStripRef.current;
|
|
144
148
|
const s = miniScrollRef.current;
|
|
145
|
-
const size =
|
|
149
|
+
const size = getElementSize(t);
|
|
146
150
|
const scrollSize = getScrollSize(t);
|
|
147
|
-
const thumbSize =
|
|
151
|
+
const thumbSize = getElementSize(s);
|
|
148
152
|
|
|
149
153
|
const r = t.getBoundingClientRect()!;
|
|
150
154
|
let thumb = 0;
|
|
@@ -168,27 +172,13 @@ export const useTabOverflow = (
|
|
|
168
172
|
const onDragCancel = () => {
|
|
169
173
|
}
|
|
170
174
|
|
|
171
|
-
const findSelectedTab: () => Element | undefined = () => {
|
|
172
|
-
let found: Element | undefined = undefined;
|
|
173
|
-
if (tabStripRef.current) {
|
|
174
|
-
const tabContainer = tabStripRef.current.firstElementChild!;
|
|
175
|
-
|
|
176
|
-
Array.from(tabContainer.children).forEach((child) => {
|
|
177
|
-
if (child.classList.contains(tabClassName + "--selected")) {
|
|
178
|
-
found = child;
|
|
179
|
-
}
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
return found;
|
|
183
|
-
};
|
|
184
|
-
|
|
185
175
|
const checkForOverflow = () => {
|
|
186
176
|
if (tabStripRef.current) {
|
|
187
177
|
const strip = tabStripRef.current;
|
|
188
178
|
const tabContainer = strip.firstElementChild!;
|
|
189
179
|
|
|
190
180
|
const offset = isTabOverflow ? 10 : 0; // prevents flashing, after sticky buttons docked set, must be 10 pixels smaller before unsetting
|
|
191
|
-
const dock = (
|
|
181
|
+
const dock = (getElementSize(tabContainer) + offset) > getElementSize(tabStripRef.current);
|
|
192
182
|
if (dock !== isTabOverflow) {
|
|
193
183
|
setTabOverflow(dock);
|
|
194
184
|
}
|
|
@@ -233,12 +223,9 @@ export const useTabOverflow = (
|
|
|
233
223
|
delta *= 40;
|
|
234
224
|
}
|
|
235
225
|
const newPos = getScrollPosition(tabStripRef.current) - delta;
|
|
236
|
-
const maxScroll = getScrollSize(tabStripRef.current) -
|
|
226
|
+
const maxScroll = getScrollSize(tabStripRef.current) - getElementSize(tabStripRef.current);
|
|
237
227
|
const p = Math.max(0, Math.min(maxScroll, newPos));
|
|
238
228
|
setScrollPosition(p);
|
|
239
|
-
updateTabRects();
|
|
240
|
-
updateHiddenTabs();
|
|
241
|
-
userControlledPositionRef.current = true;
|
|
242
229
|
event.stopPropagation();
|
|
243
230
|
}
|
|
244
231
|
}
|
|
@@ -246,7 +233,7 @@ export const useTabOverflow = (
|
|
|
246
233
|
|
|
247
234
|
// orientation helpers:
|
|
248
235
|
|
|
249
|
-
const getNear = (rect: DOMRect) => {
|
|
236
|
+
const getNear = (rect: DOMRect | Rect) => {
|
|
250
237
|
if (orientation === Orientation.HORZ) {
|
|
251
238
|
return rect.x;
|
|
252
239
|
} else {
|
|
@@ -254,7 +241,7 @@ export const useTabOverflow = (
|
|
|
254
241
|
}
|
|
255
242
|
};
|
|
256
243
|
|
|
257
|
-
const getFar = (rect: DOMRect) => {
|
|
244
|
+
const getFar = (rect: DOMRect | Rect) => {
|
|
258
245
|
if (orientation === Orientation.HORZ) {
|
|
259
246
|
return rect.right;
|
|
260
247
|
} else {
|
|
@@ -262,7 +249,7 @@ export const useTabOverflow = (
|
|
|
262
249
|
}
|
|
263
250
|
};
|
|
264
251
|
|
|
265
|
-
const
|
|
252
|
+
const getElementSize = (elm: Element) => {
|
|
266
253
|
if (orientation === Orientation.HORZ) {
|
|
267
254
|
return elm.clientWidth;
|
|
268
255
|
} else {
|
|
@@ -270,6 +257,14 @@ export const useTabOverflow = (
|
|
|
270
257
|
}
|
|
271
258
|
}
|
|
272
259
|
|
|
260
|
+
const getSize = (rect: DOMRect | Rect) => {
|
|
261
|
+
if (orientation === Orientation.HORZ) {
|
|
262
|
+
return rect.width;
|
|
263
|
+
} else {
|
|
264
|
+
return rect.height;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
273
268
|
const getScrollSize = (elm: Element) => {
|
|
274
269
|
if (orientation === Orientation.HORZ) {
|
|
275
270
|
return elm.scrollWidth;
|