@progress/kendo-react-layout 5.8.1-dev.202210210913 → 5.9.0-dev.202210250906
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/tabstrip/TabStrip.d.ts +37 -1
- package/dist/es/tabstrip/TabStrip.js +5 -3
- package/dist/es/tabstrip/TabStripNavigation.d.ts +47 -1
- package/dist/es/tabstrip/TabStripNavigation.js +110 -7
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/tabstrip/TabStrip.d.ts +37 -1
- package/dist/npm/tabstrip/TabStrip.js +5 -3
- package/dist/npm/tabstrip/TabStripNavigation.d.ts +47 -1
- package/dist/npm/tabstrip/TabStripNavigation.js +110 -7
- package/dist/systemjs/kendo-react-layout.js +1 -1
- package/package.json +13 -13
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-layout',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1666687829,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -1,6 +1,40 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as PropTypes from 'prop-types';
|
|
3
3
|
import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
|
|
4
|
+
import { ButtonProps } from '@progress/kendo-react-buttons';
|
|
5
|
+
/**
|
|
6
|
+
* @hidden
|
|
7
|
+
*/
|
|
8
|
+
export interface TabStripScrollableProps {
|
|
9
|
+
/**
|
|
10
|
+
* Determines whether the TabStrip will be scrollable.
|
|
11
|
+
*
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
scrollable?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.
|
|
17
|
+
*
|
|
18
|
+
* @default 100
|
|
19
|
+
*/
|
|
20
|
+
buttonScrollSpeed?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Sets the tab list scroll speed in pixels when scrolling via the mouse wheel. You can disable the mouse wheel scrolling by setting this prop to `0`.
|
|
23
|
+
*
|
|
24
|
+
* @default 10
|
|
25
|
+
*/
|
|
26
|
+
mouseScrollSpeed?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Defines the custom component that will be rendered as a previous button.
|
|
29
|
+
* To remove the button, set a function which returns null `() => null`.
|
|
30
|
+
*/
|
|
31
|
+
prevButton?: React.ComponentType<ButtonProps>;
|
|
32
|
+
/**
|
|
33
|
+
* Defines the custom component that will be rendered as a next button.
|
|
34
|
+
* To remove the button, set a function which returns null `() => null`.
|
|
35
|
+
*/
|
|
36
|
+
nextButton?: React.ComponentType<ButtonProps>;
|
|
37
|
+
}
|
|
4
38
|
/**
|
|
5
39
|
* The arguments that are passed to the `onSelect` callback function of the TabStrip.
|
|
6
40
|
*/
|
|
@@ -13,7 +47,7 @@ export interface TabStripSelectEventArguments {
|
|
|
13
47
|
/**
|
|
14
48
|
* Represents the props of the [KendoReact TabStrip component]({% slug overview_tabstrip %}).
|
|
15
49
|
*/
|
|
16
|
-
export interface TabStripProps extends KendoReactComponentBaseProps {
|
|
50
|
+
export interface TabStripProps extends KendoReactComponentBaseProps, TabStripScrollableProps {
|
|
17
51
|
/**
|
|
18
52
|
* Enables the tab animation.
|
|
19
53
|
*/
|
|
@@ -84,6 +118,8 @@ export declare class TabStrip extends React.Component<TabStripProps, {}> {
|
|
|
84
118
|
animation: boolean;
|
|
85
119
|
tabPosition: string;
|
|
86
120
|
keepTabsMounted: boolean;
|
|
121
|
+
buttonScrollSpeed: number;
|
|
122
|
+
mouseScrollSpeed: number;
|
|
87
123
|
};
|
|
88
124
|
private _element;
|
|
89
125
|
private keyBinding;
|
|
@@ -30,7 +30,6 @@ import { TabStripNavigation } from './TabStripNavigation';
|
|
|
30
30
|
import { TabStripContent } from './TabStripContent';
|
|
31
31
|
import { Keys, classNames, validatePackage } from '@progress/kendo-react-common';
|
|
32
32
|
import { packageMetadata } from '../package-metadata';
|
|
33
|
-
// tslint:enable:max-line-length
|
|
34
33
|
var TabStrip = /** @class */ (function (_super) {
|
|
35
34
|
__extends(TabStrip, _super);
|
|
36
35
|
function TabStrip(props) {
|
|
@@ -171,7 +170,8 @@ var TabStrip = /** @class */ (function (_super) {
|
|
|
171
170
|
'k-tabstrip-left': tabPosition === 'left',
|
|
172
171
|
'k-tabstrip-right': tabPosition === 'right',
|
|
173
172
|
'k-tabstrip-bottom': tabPosition === 'bottom',
|
|
174
|
-
'k-tabstrip-top': tabPosition === 'top'
|
|
173
|
+
'k-tabstrip-top': tabPosition === 'top',
|
|
174
|
+
'k-tabstrip-scrollable': this.props.scrollable
|
|
175
175
|
}, this.props.className);
|
|
176
176
|
return (React.createElement("div", { id: this.props.id, ref: function (div) { return _this._element = div; }, dir: this.props.dir, className: componentClasses, style: this.props.style },
|
|
177
177
|
!bottom && React.createElement(TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
|
|
@@ -206,7 +206,9 @@ var TabStrip = /** @class */ (function (_super) {
|
|
|
206
206
|
TabStrip.defaultProps = {
|
|
207
207
|
animation: true,
|
|
208
208
|
tabPosition: 'top',
|
|
209
|
-
keepTabsMounted: false
|
|
209
|
+
keepTabsMounted: false,
|
|
210
|
+
buttonScrollSpeed: 100,
|
|
211
|
+
mouseScrollSpeed: 10
|
|
210
212
|
};
|
|
211
213
|
return TabStrip;
|
|
212
214
|
}(React.Component));
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as PropTypes from 'prop-types';
|
|
3
|
+
import { ButtonProps } from '@progress/kendo-react-buttons';
|
|
4
|
+
/**
|
|
5
|
+
* @hidden
|
|
6
|
+
*/
|
|
7
|
+
export interface TabStripNavigationStateProps {
|
|
8
|
+
disabledPrev: boolean;
|
|
9
|
+
disabledNext: boolean;
|
|
10
|
+
}
|
|
3
11
|
/**
|
|
4
12
|
* The props that are passed to the TabStripNavigation by the TabStrip.
|
|
5
13
|
*/
|
|
@@ -28,8 +36,38 @@ export interface TabStripNavigationProps {
|
|
|
28
36
|
* @hidden
|
|
29
37
|
*/
|
|
30
38
|
onSelect?(idx: number): void;
|
|
39
|
+
/**
|
|
40
|
+
* @hidden
|
|
41
|
+
*/
|
|
42
|
+
scrollable?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @hidden
|
|
45
|
+
*/
|
|
46
|
+
buttonScrollSpeed?: number;
|
|
47
|
+
/**
|
|
48
|
+
* @hidden
|
|
49
|
+
*/
|
|
50
|
+
mouseScrollSpeed?: number;
|
|
51
|
+
/**
|
|
52
|
+
* @hidden
|
|
53
|
+
*/
|
|
54
|
+
prevButton?: React.ComponentType<ButtonProps>;
|
|
55
|
+
/**
|
|
56
|
+
* @hidden
|
|
57
|
+
*/
|
|
58
|
+
nextButton?: React.ComponentType<ButtonProps>;
|
|
31
59
|
}
|
|
32
|
-
export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, {}> {
|
|
60
|
+
export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
|
|
61
|
+
private itemsNavRef;
|
|
62
|
+
constructor(props: TabStripNavigationProps);
|
|
63
|
+
/**
|
|
64
|
+
* @hidden
|
|
65
|
+
*/
|
|
66
|
+
componentDidMount(): void;
|
|
67
|
+
/**
|
|
68
|
+
* @hidden
|
|
69
|
+
*/
|
|
70
|
+
componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
|
|
33
71
|
/**
|
|
34
72
|
* @hidden
|
|
35
73
|
*/
|
|
@@ -44,4 +82,12 @@ export declare class TabStripNavigation extends React.Component<TabStripNavigati
|
|
|
44
82
|
* @hidden
|
|
45
83
|
*/
|
|
46
84
|
render(): JSX.Element;
|
|
85
|
+
private scrollToSelected;
|
|
86
|
+
private horizontalScroll;
|
|
87
|
+
private onWheel;
|
|
88
|
+
private arrowClickPrev;
|
|
89
|
+
private arrowClickNext;
|
|
90
|
+
private handleArrowClick;
|
|
91
|
+
private setNewScrollPosition;
|
|
92
|
+
private renderArrow;
|
|
47
93
|
}
|
|
@@ -28,15 +28,107 @@ import * as React from 'react';
|
|
|
28
28
|
import * as PropTypes from 'prop-types';
|
|
29
29
|
import { TabStripNavigationItem } from './TabStripNavigationItem';
|
|
30
30
|
import { classNames } from '@progress/kendo-react-common';
|
|
31
|
+
import { Button } from '@progress/kendo-react-buttons';
|
|
31
32
|
/**
|
|
32
33
|
* @hidden
|
|
33
34
|
*/
|
|
34
35
|
var times = function (count) { return Array.apply(null, Array(count)); };
|
|
36
|
+
var preventDefault = function (e) { return e.preventDefault(); };
|
|
37
|
+
var PREV = 'prev';
|
|
38
|
+
var NEXT = 'next';
|
|
35
39
|
var TabStripNavigation = /** @class */ (function (_super) {
|
|
36
40
|
__extends(TabStripNavigation, _super);
|
|
37
|
-
function TabStripNavigation() {
|
|
38
|
-
|
|
41
|
+
function TabStripNavigation(props) {
|
|
42
|
+
var _this = _super.call(this, props) || this;
|
|
43
|
+
_this.itemsNavRef = React.createRef();
|
|
44
|
+
_this.onWheel = function (event) {
|
|
45
|
+
event.stopPropagation();
|
|
46
|
+
var direction = event.deltaY < 0 ? PREV : NEXT;
|
|
47
|
+
_this.setNewScrollPosition(direction, event);
|
|
48
|
+
};
|
|
49
|
+
_this.arrowClickPrev = function (e) {
|
|
50
|
+
_this.handleArrowClick(PREV, e);
|
|
51
|
+
};
|
|
52
|
+
_this.arrowClickNext = function (e) {
|
|
53
|
+
_this.handleArrowClick(NEXT, e);
|
|
54
|
+
};
|
|
55
|
+
_this.handleArrowClick = function (direction, e) {
|
|
56
|
+
_this.setNewScrollPosition(direction, e);
|
|
57
|
+
};
|
|
58
|
+
_this.setNewScrollPosition = function (direction, e) {
|
|
59
|
+
var list = _this.itemsNavRef.current;
|
|
60
|
+
if (!list) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
var horizontal = _this.horizontalScroll();
|
|
64
|
+
var scrollEnd = horizontal ? list.scrollWidth - list.offsetWidth : list.scrollHeight - list.offsetHeight;
|
|
65
|
+
var increment = (e.type === 'click' ? _this.props.buttonScrollSpeed : _this.props.mouseScrollSpeed) || 0;
|
|
66
|
+
var prevScrollPosition = horizontal ? list.scrollLeft : list.scrollTop;
|
|
67
|
+
if (direction === PREV && prevScrollPosition > 0) {
|
|
68
|
+
prevScrollPosition -= increment;
|
|
69
|
+
}
|
|
70
|
+
if (direction === NEXT && prevScrollPosition < scrollEnd) {
|
|
71
|
+
prevScrollPosition += increment;
|
|
72
|
+
}
|
|
73
|
+
prevScrollPosition = Math.max(0, Math.min(scrollEnd, prevScrollPosition));
|
|
74
|
+
if (horizontal) {
|
|
75
|
+
list.scrollLeft = prevScrollPosition;
|
|
76
|
+
_this.setState({
|
|
77
|
+
disabledPrev: prevScrollPosition === 0,
|
|
78
|
+
disabledNext: Math.round(list.scrollWidth - list.scrollLeft) === list.clientWidth
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
list.scrollTop = prevScrollPosition;
|
|
83
|
+
_this.setState({
|
|
84
|
+
disabledPrev: prevScrollPosition === 0,
|
|
85
|
+
disabledNext: Math.round(list.scrollHeight - list.scrollTop) === list.clientHeight
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
_this.renderArrow = function (type, disabled) {
|
|
90
|
+
var horizontal = _this.horizontalScroll();
|
|
91
|
+
var directions = {
|
|
92
|
+
prev: {
|
|
93
|
+
arrowTab: 'k-tabstrip-prev',
|
|
94
|
+
arrow: horizontal ? 'caret-alt-left' : 'caret-alt-up'
|
|
95
|
+
},
|
|
96
|
+
next: {
|
|
97
|
+
arrowTab: 'k-tabstrip-next',
|
|
98
|
+
arrow: horizontal ? 'caret-alt-right' : 'caret-alt-down'
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
var ButtonComponent = (type === PREV ? _this.props.prevButton : _this.props.nextButton) || Button;
|
|
102
|
+
var onClick = (type === PREV ? _this.arrowClickPrev : _this.arrowClickNext);
|
|
103
|
+
return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].arrow, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
|
|
104
|
+
};
|
|
105
|
+
_this.state = {
|
|
106
|
+
disabledPrev: _this.props.selected === 0,
|
|
107
|
+
disabledNext: _this.props.selected === React.Children.count(_this.props.children) - 1
|
|
108
|
+
};
|
|
109
|
+
return _this;
|
|
39
110
|
}
|
|
111
|
+
/**
|
|
112
|
+
* @hidden
|
|
113
|
+
*/
|
|
114
|
+
TabStripNavigation.prototype.componentDidMount = function () {
|
|
115
|
+
if (this.props.scrollable) {
|
|
116
|
+
this.scrollToSelected();
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
/**
|
|
120
|
+
* @hidden
|
|
121
|
+
*/
|
|
122
|
+
TabStripNavigation.prototype.componentDidUpdate = function (prevProps) {
|
|
123
|
+
var _a = this.props, scrollable = _a.scrollable, selected = _a.selected;
|
|
124
|
+
if (scrollable && prevProps.selected !== selected) {
|
|
125
|
+
this.scrollToSelected();
|
|
126
|
+
this.setState({
|
|
127
|
+
disabledPrev: selected === 0,
|
|
128
|
+
disabledNext: selected === React.Children.count(this.props.children) - 1
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
};
|
|
40
132
|
/**
|
|
41
133
|
* @hidden
|
|
42
134
|
*/
|
|
@@ -46,8 +138,7 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
46
138
|
var childElements = React.Children.toArray(children);
|
|
47
139
|
var tabs;
|
|
48
140
|
if (children) {
|
|
49
|
-
tabs = times(tabsCount)
|
|
50
|
-
.map(function (_, index, array) {
|
|
141
|
+
tabs = times(tabsCount).map(function (_, index, array) {
|
|
51
142
|
var tabProps = {
|
|
52
143
|
active: selected === index,
|
|
53
144
|
disabled: childElements[index].props.disabled,
|
|
@@ -57,7 +148,7 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
57
148
|
last: index === array.length - 1,
|
|
58
149
|
onSelect: onSelect
|
|
59
150
|
};
|
|
60
|
-
return
|
|
151
|
+
return React.createElement(TabStripNavigationItem, __assign({ key: index }, tabProps));
|
|
61
152
|
});
|
|
62
153
|
}
|
|
63
154
|
var wrapperClasses = classNames('k-tabstrip-items-wrapper', {
|
|
@@ -65,8 +156,20 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
65
156
|
'k-vstack': tabPosition === 'left' || tabPosition === 'right'
|
|
66
157
|
});
|
|
67
158
|
var navClasses = classNames('k-tabstrip-items', 'k-reset');
|
|
68
|
-
return (React.createElement("div", { className: wrapperClasses },
|
|
69
|
-
|
|
159
|
+
return (React.createElement("div", { className: wrapperClasses }, this.props.scrollable ? (React.createElement(React.Fragment, null,
|
|
160
|
+
this.renderArrow(PREV, this.state.disabledPrev),
|
|
161
|
+
React.createElement("ul", { ref: this.itemsNavRef, className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown, onWheel: this.onWheel }, tabs),
|
|
162
|
+
this.renderArrow(NEXT, this.state.disabledNext))) : (React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs))));
|
|
163
|
+
};
|
|
164
|
+
TabStripNavigation.prototype.scrollToSelected = function () {
|
|
165
|
+
var list = this.itemsNavRef.current;
|
|
166
|
+
var tab = list && list.children[this.props.selected || 0];
|
|
167
|
+
if (tab) {
|
|
168
|
+
tab.scrollIntoView({ behavior: 'smooth' });
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
TabStripNavigation.prototype.horizontalScroll = function () {
|
|
172
|
+
return /top|bottom/.test(this.props.tabPosition || 'top');
|
|
70
173
|
};
|
|
71
174
|
/**
|
|
72
175
|
* @hidden
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-react-layout',
|
|
9
9
|
productName: 'KendoReact',
|
|
10
10
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1666687829,
|
|
12
12
|
version: '',
|
|
13
13
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
14
14
|
};
|
|
@@ -1,6 +1,40 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as PropTypes from 'prop-types';
|
|
3
3
|
import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
|
|
4
|
+
import { ButtonProps } from '@progress/kendo-react-buttons';
|
|
5
|
+
/**
|
|
6
|
+
* @hidden
|
|
7
|
+
*/
|
|
8
|
+
export interface TabStripScrollableProps {
|
|
9
|
+
/**
|
|
10
|
+
* Determines whether the TabStrip will be scrollable.
|
|
11
|
+
*
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
scrollable?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.
|
|
17
|
+
*
|
|
18
|
+
* @default 100
|
|
19
|
+
*/
|
|
20
|
+
buttonScrollSpeed?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Sets the tab list scroll speed in pixels when scrolling via the mouse wheel. You can disable the mouse wheel scrolling by setting this prop to `0`.
|
|
23
|
+
*
|
|
24
|
+
* @default 10
|
|
25
|
+
*/
|
|
26
|
+
mouseScrollSpeed?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Defines the custom component that will be rendered as a previous button.
|
|
29
|
+
* To remove the button, set a function which returns null `() => null`.
|
|
30
|
+
*/
|
|
31
|
+
prevButton?: React.ComponentType<ButtonProps>;
|
|
32
|
+
/**
|
|
33
|
+
* Defines the custom component that will be rendered as a next button.
|
|
34
|
+
* To remove the button, set a function which returns null `() => null`.
|
|
35
|
+
*/
|
|
36
|
+
nextButton?: React.ComponentType<ButtonProps>;
|
|
37
|
+
}
|
|
4
38
|
/**
|
|
5
39
|
* The arguments that are passed to the `onSelect` callback function of the TabStrip.
|
|
6
40
|
*/
|
|
@@ -13,7 +47,7 @@ export interface TabStripSelectEventArguments {
|
|
|
13
47
|
/**
|
|
14
48
|
* Represents the props of the [KendoReact TabStrip component]({% slug overview_tabstrip %}).
|
|
15
49
|
*/
|
|
16
|
-
export interface TabStripProps extends KendoReactComponentBaseProps {
|
|
50
|
+
export interface TabStripProps extends KendoReactComponentBaseProps, TabStripScrollableProps {
|
|
17
51
|
/**
|
|
18
52
|
* Enables the tab animation.
|
|
19
53
|
*/
|
|
@@ -84,6 +118,8 @@ export declare class TabStrip extends React.Component<TabStripProps, {}> {
|
|
|
84
118
|
animation: boolean;
|
|
85
119
|
tabPosition: string;
|
|
86
120
|
keepTabsMounted: boolean;
|
|
121
|
+
buttonScrollSpeed: number;
|
|
122
|
+
mouseScrollSpeed: number;
|
|
87
123
|
};
|
|
88
124
|
private _element;
|
|
89
125
|
private keyBinding;
|
|
@@ -33,7 +33,6 @@ var TabStripNavigation_1 = require("./TabStripNavigation");
|
|
|
33
33
|
var TabStripContent_1 = require("./TabStripContent");
|
|
34
34
|
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
35
35
|
var package_metadata_1 = require("../package-metadata");
|
|
36
|
-
// tslint:enable:max-line-length
|
|
37
36
|
var TabStrip = /** @class */ (function (_super) {
|
|
38
37
|
__extends(TabStrip, _super);
|
|
39
38
|
function TabStrip(props) {
|
|
@@ -174,7 +173,8 @@ var TabStrip = /** @class */ (function (_super) {
|
|
|
174
173
|
'k-tabstrip-left': tabPosition === 'left',
|
|
175
174
|
'k-tabstrip-right': tabPosition === 'right',
|
|
176
175
|
'k-tabstrip-bottom': tabPosition === 'bottom',
|
|
177
|
-
'k-tabstrip-top': tabPosition === 'top'
|
|
176
|
+
'k-tabstrip-top': tabPosition === 'top',
|
|
177
|
+
'k-tabstrip-scrollable': this.props.scrollable
|
|
178
178
|
}, this.props.className);
|
|
179
179
|
return (React.createElement("div", { id: this.props.id, ref: function (div) { return _this._element = div; }, dir: this.props.dir, className: componentClasses, style: this.props.style },
|
|
180
180
|
!bottom && React.createElement(TabStripNavigation_1.TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
|
|
@@ -209,7 +209,9 @@ var TabStrip = /** @class */ (function (_super) {
|
|
|
209
209
|
TabStrip.defaultProps = {
|
|
210
210
|
animation: true,
|
|
211
211
|
tabPosition: 'top',
|
|
212
|
-
keepTabsMounted: false
|
|
212
|
+
keepTabsMounted: false,
|
|
213
|
+
buttonScrollSpeed: 100,
|
|
214
|
+
mouseScrollSpeed: 10
|
|
213
215
|
};
|
|
214
216
|
return TabStrip;
|
|
215
217
|
}(React.Component));
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as PropTypes from 'prop-types';
|
|
3
|
+
import { ButtonProps } from '@progress/kendo-react-buttons';
|
|
4
|
+
/**
|
|
5
|
+
* @hidden
|
|
6
|
+
*/
|
|
7
|
+
export interface TabStripNavigationStateProps {
|
|
8
|
+
disabledPrev: boolean;
|
|
9
|
+
disabledNext: boolean;
|
|
10
|
+
}
|
|
3
11
|
/**
|
|
4
12
|
* The props that are passed to the TabStripNavigation by the TabStrip.
|
|
5
13
|
*/
|
|
@@ -28,8 +36,38 @@ export interface TabStripNavigationProps {
|
|
|
28
36
|
* @hidden
|
|
29
37
|
*/
|
|
30
38
|
onSelect?(idx: number): void;
|
|
39
|
+
/**
|
|
40
|
+
* @hidden
|
|
41
|
+
*/
|
|
42
|
+
scrollable?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @hidden
|
|
45
|
+
*/
|
|
46
|
+
buttonScrollSpeed?: number;
|
|
47
|
+
/**
|
|
48
|
+
* @hidden
|
|
49
|
+
*/
|
|
50
|
+
mouseScrollSpeed?: number;
|
|
51
|
+
/**
|
|
52
|
+
* @hidden
|
|
53
|
+
*/
|
|
54
|
+
prevButton?: React.ComponentType<ButtonProps>;
|
|
55
|
+
/**
|
|
56
|
+
* @hidden
|
|
57
|
+
*/
|
|
58
|
+
nextButton?: React.ComponentType<ButtonProps>;
|
|
31
59
|
}
|
|
32
|
-
export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, {}> {
|
|
60
|
+
export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
|
|
61
|
+
private itemsNavRef;
|
|
62
|
+
constructor(props: TabStripNavigationProps);
|
|
63
|
+
/**
|
|
64
|
+
* @hidden
|
|
65
|
+
*/
|
|
66
|
+
componentDidMount(): void;
|
|
67
|
+
/**
|
|
68
|
+
* @hidden
|
|
69
|
+
*/
|
|
70
|
+
componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
|
|
33
71
|
/**
|
|
34
72
|
* @hidden
|
|
35
73
|
*/
|
|
@@ -44,4 +82,12 @@ export declare class TabStripNavigation extends React.Component<TabStripNavigati
|
|
|
44
82
|
* @hidden
|
|
45
83
|
*/
|
|
46
84
|
render(): JSX.Element;
|
|
85
|
+
private scrollToSelected;
|
|
86
|
+
private horizontalScroll;
|
|
87
|
+
private onWheel;
|
|
88
|
+
private arrowClickPrev;
|
|
89
|
+
private arrowClickNext;
|
|
90
|
+
private handleArrowClick;
|
|
91
|
+
private setNewScrollPosition;
|
|
92
|
+
private renderArrow;
|
|
47
93
|
}
|
|
@@ -31,15 +31,107 @@ var React = require("react");
|
|
|
31
31
|
var PropTypes = require("prop-types");
|
|
32
32
|
var TabStripNavigationItem_1 = require("./TabStripNavigationItem");
|
|
33
33
|
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
34
|
+
var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
|
|
34
35
|
/**
|
|
35
36
|
* @hidden
|
|
36
37
|
*/
|
|
37
38
|
var times = function (count) { return Array.apply(null, Array(count)); };
|
|
39
|
+
var preventDefault = function (e) { return e.preventDefault(); };
|
|
40
|
+
var PREV = 'prev';
|
|
41
|
+
var NEXT = 'next';
|
|
38
42
|
var TabStripNavigation = /** @class */ (function (_super) {
|
|
39
43
|
__extends(TabStripNavigation, _super);
|
|
40
|
-
function TabStripNavigation() {
|
|
41
|
-
|
|
44
|
+
function TabStripNavigation(props) {
|
|
45
|
+
var _this = _super.call(this, props) || this;
|
|
46
|
+
_this.itemsNavRef = React.createRef();
|
|
47
|
+
_this.onWheel = function (event) {
|
|
48
|
+
event.stopPropagation();
|
|
49
|
+
var direction = event.deltaY < 0 ? PREV : NEXT;
|
|
50
|
+
_this.setNewScrollPosition(direction, event);
|
|
51
|
+
};
|
|
52
|
+
_this.arrowClickPrev = function (e) {
|
|
53
|
+
_this.handleArrowClick(PREV, e);
|
|
54
|
+
};
|
|
55
|
+
_this.arrowClickNext = function (e) {
|
|
56
|
+
_this.handleArrowClick(NEXT, e);
|
|
57
|
+
};
|
|
58
|
+
_this.handleArrowClick = function (direction, e) {
|
|
59
|
+
_this.setNewScrollPosition(direction, e);
|
|
60
|
+
};
|
|
61
|
+
_this.setNewScrollPosition = function (direction, e) {
|
|
62
|
+
var list = _this.itemsNavRef.current;
|
|
63
|
+
if (!list) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
var horizontal = _this.horizontalScroll();
|
|
67
|
+
var scrollEnd = horizontal ? list.scrollWidth - list.offsetWidth : list.scrollHeight - list.offsetHeight;
|
|
68
|
+
var increment = (e.type === 'click' ? _this.props.buttonScrollSpeed : _this.props.mouseScrollSpeed) || 0;
|
|
69
|
+
var prevScrollPosition = horizontal ? list.scrollLeft : list.scrollTop;
|
|
70
|
+
if (direction === PREV && prevScrollPosition > 0) {
|
|
71
|
+
prevScrollPosition -= increment;
|
|
72
|
+
}
|
|
73
|
+
if (direction === NEXT && prevScrollPosition < scrollEnd) {
|
|
74
|
+
prevScrollPosition += increment;
|
|
75
|
+
}
|
|
76
|
+
prevScrollPosition = Math.max(0, Math.min(scrollEnd, prevScrollPosition));
|
|
77
|
+
if (horizontal) {
|
|
78
|
+
list.scrollLeft = prevScrollPosition;
|
|
79
|
+
_this.setState({
|
|
80
|
+
disabledPrev: prevScrollPosition === 0,
|
|
81
|
+
disabledNext: Math.round(list.scrollWidth - list.scrollLeft) === list.clientWidth
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
list.scrollTop = prevScrollPosition;
|
|
86
|
+
_this.setState({
|
|
87
|
+
disabledPrev: prevScrollPosition === 0,
|
|
88
|
+
disabledNext: Math.round(list.scrollHeight - list.scrollTop) === list.clientHeight
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
_this.renderArrow = function (type, disabled) {
|
|
93
|
+
var horizontal = _this.horizontalScroll();
|
|
94
|
+
var directions = {
|
|
95
|
+
prev: {
|
|
96
|
+
arrowTab: 'k-tabstrip-prev',
|
|
97
|
+
arrow: horizontal ? 'caret-alt-left' : 'caret-alt-up'
|
|
98
|
+
},
|
|
99
|
+
next: {
|
|
100
|
+
arrowTab: 'k-tabstrip-next',
|
|
101
|
+
arrow: horizontal ? 'caret-alt-right' : 'caret-alt-down'
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
var ButtonComponent = (type === PREV ? _this.props.prevButton : _this.props.nextButton) || kendo_react_buttons_1.Button;
|
|
105
|
+
var onClick = (type === PREV ? _this.arrowClickPrev : _this.arrowClickNext);
|
|
106
|
+
return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].arrow, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
|
|
107
|
+
};
|
|
108
|
+
_this.state = {
|
|
109
|
+
disabledPrev: _this.props.selected === 0,
|
|
110
|
+
disabledNext: _this.props.selected === React.Children.count(_this.props.children) - 1
|
|
111
|
+
};
|
|
112
|
+
return _this;
|
|
42
113
|
}
|
|
114
|
+
/**
|
|
115
|
+
* @hidden
|
|
116
|
+
*/
|
|
117
|
+
TabStripNavigation.prototype.componentDidMount = function () {
|
|
118
|
+
if (this.props.scrollable) {
|
|
119
|
+
this.scrollToSelected();
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
/**
|
|
123
|
+
* @hidden
|
|
124
|
+
*/
|
|
125
|
+
TabStripNavigation.prototype.componentDidUpdate = function (prevProps) {
|
|
126
|
+
var _a = this.props, scrollable = _a.scrollable, selected = _a.selected;
|
|
127
|
+
if (scrollable && prevProps.selected !== selected) {
|
|
128
|
+
this.scrollToSelected();
|
|
129
|
+
this.setState({
|
|
130
|
+
disabledPrev: selected === 0,
|
|
131
|
+
disabledNext: selected === React.Children.count(this.props.children) - 1
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
};
|
|
43
135
|
/**
|
|
44
136
|
* @hidden
|
|
45
137
|
*/
|
|
@@ -49,8 +141,7 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
49
141
|
var childElements = React.Children.toArray(children);
|
|
50
142
|
var tabs;
|
|
51
143
|
if (children) {
|
|
52
|
-
tabs = times(tabsCount)
|
|
53
|
-
.map(function (_, index, array) {
|
|
144
|
+
tabs = times(tabsCount).map(function (_, index, array) {
|
|
54
145
|
var tabProps = {
|
|
55
146
|
active: selected === index,
|
|
56
147
|
disabled: childElements[index].props.disabled,
|
|
@@ -60,7 +151,7 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
60
151
|
last: index === array.length - 1,
|
|
61
152
|
onSelect: onSelect
|
|
62
153
|
};
|
|
63
|
-
return
|
|
154
|
+
return React.createElement(TabStripNavigationItem_1.TabStripNavigationItem, __assign({ key: index }, tabProps));
|
|
64
155
|
});
|
|
65
156
|
}
|
|
66
157
|
var wrapperClasses = (0, kendo_react_common_1.classNames)('k-tabstrip-items-wrapper', {
|
|
@@ -68,8 +159,20 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
68
159
|
'k-vstack': tabPosition === 'left' || tabPosition === 'right'
|
|
69
160
|
});
|
|
70
161
|
var navClasses = (0, kendo_react_common_1.classNames)('k-tabstrip-items', 'k-reset');
|
|
71
|
-
return (React.createElement("div", { className: wrapperClasses },
|
|
72
|
-
|
|
162
|
+
return (React.createElement("div", { className: wrapperClasses }, this.props.scrollable ? (React.createElement(React.Fragment, null,
|
|
163
|
+
this.renderArrow(PREV, this.state.disabledPrev),
|
|
164
|
+
React.createElement("ul", { ref: this.itemsNavRef, className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown, onWheel: this.onWheel }, tabs),
|
|
165
|
+
this.renderArrow(NEXT, this.state.disabledNext))) : (React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs))));
|
|
166
|
+
};
|
|
167
|
+
TabStripNavigation.prototype.scrollToSelected = function () {
|
|
168
|
+
var list = this.itemsNavRef.current;
|
|
169
|
+
var tab = list && list.children[this.props.selected || 0];
|
|
170
|
+
if (tab) {
|
|
171
|
+
tab.scrollIntoView({ behavior: 'smooth' });
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
TabStripNavigation.prototype.horizontalScroll = function () {
|
|
175
|
+
return /top|bottom/.test(this.props.tabPosition || 'top');
|
|
73
176
|
};
|
|
74
177
|
/**
|
|
75
178
|
* @hidden
|