flexlayout-react 0.5.19 → 0.5.20
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 +4 -0
- package/README.md +54 -44
- package/dist/flexlayout.js +9 -9
- package/dist/flexlayout_min.js +1 -1
- package/lib/PopupMenu.js +2 -2
- package/lib/PopupMenu.js.map +1 -1
- package/lib/view/BorderButton.js +4 -4
- package/lib/view/BorderButton.js.map +1 -1
- package/lib/view/BorderTabSet.js +3 -3
- package/lib/view/BorderTabSet.js.map +1 -1
- package/lib/view/Layout.js +26 -12
- package/lib/view/Layout.js.map +1 -1
- package/lib/view/Splitter.js +3 -3
- package/lib/view/Splitter.js.map +1 -1
- package/lib/view/Tab.js +2 -2
- package/lib/view/Tab.js.map +1 -1
- package/lib/view/TabButton.js +5 -5
- package/lib/view/TabButton.js.map +1 -1
- package/lib/view/TabFloating.js +2 -2
- package/lib/view/TabFloating.js.map +1 -1
- package/lib/view/TabSet.js +9 -9
- package/lib/view/TabSet.js.map +1 -1
- package/package.json +11 -6
- package/src/PopupMenu.tsx +5 -2
- package/src/view/BorderButton.tsx +12 -3
- package/src/view/BorderTabSet.tsx +4 -1
- package/src/view/Layout.tsx +39 -14
- package/src/view/Splitter.tsx +4 -1
- package/src/view/Tab.tsx +8 -2
- package/src/view/TabButton.tsx +15 -6
- package/src/view/TabFloating.tsx +7 -2
- package/src/view/TabSet.tsx +16 -3
- package/style/_base.scss +7 -7
- package/style/dark.css +7 -7
- package/style/gray.css +7 -7
- package/style/light.css +7 -7
package/src/view/TabSet.tsx
CHANGED
|
@@ -18,11 +18,12 @@ export interface ITabSetProps {
|
|
|
18
18
|
titleFactory?: (node: TabNode) => React.ReactNode | undefined;
|
|
19
19
|
icons?: IIcons;
|
|
20
20
|
editingTab?: TabNode;
|
|
21
|
+
path?: string;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
/** @hidden @internal */
|
|
24
25
|
export const TabSet = (props: ITabSetProps) => {
|
|
25
|
-
const { node, layout, iconFactory, titleFactory, icons } = props;
|
|
26
|
+
const { node, layout, iconFactory, titleFactory, icons, path } = props;
|
|
26
27
|
|
|
27
28
|
const toolbarRef = React.useRef<HTMLDivElement | null>(null);
|
|
28
29
|
const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null);
|
|
@@ -43,7 +44,6 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
43
44
|
};
|
|
44
45
|
|
|
45
46
|
const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
|
|
46
|
-
|
|
47
47
|
if (!isAuxMouseEvent(event)) {
|
|
48
48
|
let name = node.getName();
|
|
49
49
|
if (name === undefined) {
|
|
@@ -122,6 +122,7 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
122
122
|
<TabButton
|
|
123
123
|
layout={layout}
|
|
124
124
|
node={child}
|
|
125
|
+
path={path + "/tb" + i}
|
|
125
126
|
key={child.getId()}
|
|
126
127
|
selected={isSelected}
|
|
127
128
|
show={true}
|
|
@@ -170,6 +171,8 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
170
171
|
buttons.push(
|
|
171
172
|
<button
|
|
172
173
|
key="overflowbutton"
|
|
174
|
+
data-layout-path={path + "/button/overflow"}
|
|
175
|
+
|
|
173
176
|
ref={overflowbuttonRef}
|
|
174
177
|
className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW)}
|
|
175
178
|
title={overflowTitle}
|
|
@@ -188,6 +191,7 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
188
191
|
buttons.push(
|
|
189
192
|
<button
|
|
190
193
|
key="float"
|
|
194
|
+
data-layout-path={path + "/button/float"}
|
|
191
195
|
title={floatTitle}
|
|
192
196
|
className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT)}
|
|
193
197
|
onClick={onFloatTab}
|
|
@@ -205,6 +209,7 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
205
209
|
btns.push(
|
|
206
210
|
<button
|
|
207
211
|
key="max"
|
|
212
|
+
data-layout-path={path + "/button/max"}
|
|
208
213
|
title={node.isMaximized() ? minTitle : maxTitle}
|
|
209
214
|
className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? "max" : "min"))}
|
|
210
215
|
onClick={onMaximizeToggle}
|
|
@@ -222,6 +227,7 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
222
227
|
btns.push(
|
|
223
228
|
<button
|
|
224
229
|
key="close"
|
|
230
|
+
data-layout-path={path + "/button/close"}
|
|
225
231
|
title={title}
|
|
226
232
|
className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE)}
|
|
227
233
|
onClick={onClose}
|
|
@@ -287,6 +293,7 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
287
293
|
|
|
288
294
|
header = (
|
|
289
295
|
<div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }}
|
|
296
|
+
data-layout-path={path + "/header"}
|
|
290
297
|
onMouseDown={onMouseDown}
|
|
291
298
|
onContextMenu={onContextMenu}
|
|
292
299
|
onClick={onAuxMouseClick}
|
|
@@ -307,6 +314,7 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
307
314
|
}
|
|
308
315
|
tabStrip = (
|
|
309
316
|
<div className={tabStripClasses} style={tabStripStyle}
|
|
317
|
+
data-layout-path={path + "/tabstrip"}
|
|
310
318
|
onMouseDown={onMouseDown}
|
|
311
319
|
onContextMenu={onContextMenu}
|
|
312
320
|
onClick={onAuxMouseClick}
|
|
@@ -327,7 +335,12 @@ export const TabSet = (props: ITabSetProps) => {
|
|
|
327
335
|
style = layout.styleFont(style);
|
|
328
336
|
|
|
329
337
|
return (
|
|
330
|
-
<div ref={selfRef}
|
|
338
|
+
<div ref={selfRef}
|
|
339
|
+
dir="ltr"
|
|
340
|
+
data-layout-path={path}
|
|
341
|
+
style={style}
|
|
342
|
+
className={cm(CLASSES.FLEXLAYOUT__TABSET)}
|
|
343
|
+
onWheel={onMouseWheel}>
|
|
331
344
|
{header}
|
|
332
345
|
{tabStrip}
|
|
333
346
|
</div>
|
package/style/_base.scss
CHANGED
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
background-color: var(--color-background);
|
|
191
191
|
|
|
192
192
|
&_button {
|
|
193
|
-
display:
|
|
193
|
+
display: flex;
|
|
194
194
|
align-items: center;
|
|
195
195
|
box-sizing: border-box;
|
|
196
196
|
padding: 3px 8px; // if you change top or bottom update the tabset_sizer above
|
|
@@ -220,11 +220,11 @@
|
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
&_leading {
|
|
223
|
-
display:
|
|
223
|
+
display: flex;
|
|
224
224
|
}
|
|
225
225
|
|
|
226
226
|
&_content {
|
|
227
|
-
display:
|
|
227
|
+
display: flex;
|
|
228
228
|
}
|
|
229
229
|
|
|
230
230
|
&_textbox {
|
|
@@ -242,7 +242,7 @@
|
|
|
242
242
|
}
|
|
243
243
|
|
|
244
244
|
&_trailing {
|
|
245
|
-
display:
|
|
245
|
+
display: flex;
|
|
246
246
|
margin-left: 8px;
|
|
247
247
|
min-width: 8px;
|
|
248
248
|
min-height: 8px;
|
|
@@ -417,15 +417,15 @@
|
|
|
417
417
|
}
|
|
418
418
|
|
|
419
419
|
&_leading {
|
|
420
|
-
display:
|
|
420
|
+
display: flex;
|
|
421
421
|
}
|
|
422
422
|
|
|
423
423
|
&_content {
|
|
424
|
-
display:
|
|
424
|
+
display: flex;
|
|
425
425
|
}
|
|
426
426
|
|
|
427
427
|
&_trailing {
|
|
428
|
-
display:
|
|
428
|
+
display: flex;
|
|
429
429
|
margin-left: 8px;
|
|
430
430
|
min-width: 8px;
|
|
431
431
|
min-height: 8px;
|
package/style/dark.css
CHANGED
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
background-color: var(--color-background);
|
|
161
161
|
}
|
|
162
162
|
.flexlayout__tab_button {
|
|
163
|
-
display:
|
|
163
|
+
display: flex;
|
|
164
164
|
align-items: center;
|
|
165
165
|
box-sizing: border-box;
|
|
166
166
|
padding: 3px 8px;
|
|
@@ -191,10 +191,10 @@
|
|
|
191
191
|
border-bottom-right-radius: 3px;
|
|
192
192
|
}
|
|
193
193
|
.flexlayout__tab_button_leading {
|
|
194
|
-
display:
|
|
194
|
+
display: flex;
|
|
195
195
|
}
|
|
196
196
|
.flexlayout__tab_button_content {
|
|
197
|
-
display:
|
|
197
|
+
display: flex;
|
|
198
198
|
}
|
|
199
199
|
.flexlayout__tab_button_textbox {
|
|
200
200
|
border: none;
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
outline: none;
|
|
210
210
|
}
|
|
211
211
|
.flexlayout__tab_button_trailing {
|
|
212
|
-
display:
|
|
212
|
+
display: flex;
|
|
213
213
|
margin-left: 8px;
|
|
214
214
|
min-width: 8px;
|
|
215
215
|
min-height: 8px;
|
|
@@ -363,13 +363,13 @@
|
|
|
363
363
|
color: gray;
|
|
364
364
|
}
|
|
365
365
|
.flexlayout__border_button_leading {
|
|
366
|
-
display:
|
|
366
|
+
display: flex;
|
|
367
367
|
}
|
|
368
368
|
.flexlayout__border_button_content {
|
|
369
|
-
display:
|
|
369
|
+
display: flex;
|
|
370
370
|
}
|
|
371
371
|
.flexlayout__border_button_trailing {
|
|
372
|
-
display:
|
|
372
|
+
display: flex;
|
|
373
373
|
margin-left: 8px;
|
|
374
374
|
min-width: 8px;
|
|
375
375
|
min-height: 8px;
|
package/style/gray.css
CHANGED
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
background-color: var(--color-background);
|
|
161
161
|
}
|
|
162
162
|
.flexlayout__tab_button {
|
|
163
|
-
display:
|
|
163
|
+
display: flex;
|
|
164
164
|
align-items: center;
|
|
165
165
|
box-sizing: border-box;
|
|
166
166
|
padding: 3px 8px;
|
|
@@ -191,10 +191,10 @@
|
|
|
191
191
|
border-bottom-right-radius: 3px;
|
|
192
192
|
}
|
|
193
193
|
.flexlayout__tab_button_leading {
|
|
194
|
-
display:
|
|
194
|
+
display: flex;
|
|
195
195
|
}
|
|
196
196
|
.flexlayout__tab_button_content {
|
|
197
|
-
display:
|
|
197
|
+
display: flex;
|
|
198
198
|
}
|
|
199
199
|
.flexlayout__tab_button_textbox {
|
|
200
200
|
border: none;
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
outline: none;
|
|
210
210
|
}
|
|
211
211
|
.flexlayout__tab_button_trailing {
|
|
212
|
-
display:
|
|
212
|
+
display: flex;
|
|
213
213
|
margin-left: 8px;
|
|
214
214
|
min-width: 8px;
|
|
215
215
|
min-height: 8px;
|
|
@@ -363,13 +363,13 @@
|
|
|
363
363
|
color: gray;
|
|
364
364
|
}
|
|
365
365
|
.flexlayout__border_button_leading {
|
|
366
|
-
display:
|
|
366
|
+
display: flex;
|
|
367
367
|
}
|
|
368
368
|
.flexlayout__border_button_content {
|
|
369
|
-
display:
|
|
369
|
+
display: flex;
|
|
370
370
|
}
|
|
371
371
|
.flexlayout__border_button_trailing {
|
|
372
|
-
display:
|
|
372
|
+
display: flex;
|
|
373
373
|
margin-left: 8px;
|
|
374
374
|
min-width: 8px;
|
|
375
375
|
min-height: 8px;
|
package/style/light.css
CHANGED
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
background-color: var(--color-background);
|
|
159
159
|
}
|
|
160
160
|
.flexlayout__tab_button {
|
|
161
|
-
display:
|
|
161
|
+
display: flex;
|
|
162
162
|
align-items: center;
|
|
163
163
|
box-sizing: border-box;
|
|
164
164
|
padding: 3px 8px;
|
|
@@ -179,10 +179,10 @@
|
|
|
179
179
|
color: gray;
|
|
180
180
|
}
|
|
181
181
|
.flexlayout__tab_button_leading {
|
|
182
|
-
display:
|
|
182
|
+
display: flex;
|
|
183
183
|
}
|
|
184
184
|
.flexlayout__tab_button_content {
|
|
185
|
-
display:
|
|
185
|
+
display: flex;
|
|
186
186
|
}
|
|
187
187
|
.flexlayout__tab_button_textbox {
|
|
188
188
|
border: none;
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
outline: none;
|
|
198
198
|
}
|
|
199
199
|
.flexlayout__tab_button_trailing {
|
|
200
|
-
display:
|
|
200
|
+
display: flex;
|
|
201
201
|
margin-left: 8px;
|
|
202
202
|
min-width: 8px;
|
|
203
203
|
min-height: 8px;
|
|
@@ -349,13 +349,13 @@
|
|
|
349
349
|
color: gray;
|
|
350
350
|
}
|
|
351
351
|
.flexlayout__border_button_leading {
|
|
352
|
-
display:
|
|
352
|
+
display: flex;
|
|
353
353
|
}
|
|
354
354
|
.flexlayout__border_button_content {
|
|
355
|
-
display:
|
|
355
|
+
display: flex;
|
|
356
356
|
}
|
|
357
357
|
.flexlayout__border_button_trailing {
|
|
358
|
-
display:
|
|
358
|
+
display: flex;
|
|
359
359
|
margin-left: 8px;
|
|
360
360
|
min-width: 8px;
|
|
361
361
|
min-height: 8px;
|