@progress/kendo-react-layout 5.14.0-dev.202305191608 → 5.14.0-dev.202305250741
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/bottomnavigation/BottomNavigationItem.js +1 -1
- package/dist/es/breadcrumb/Breadcrumb.js +1 -1
- package/dist/es/breadcrumb/BreadcrumbDelimiter.d.ts +4 -0
- package/dist/es/breadcrumb/BreadcrumbDelimiter.js +4 -3
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/splitter/Splitter.js +1 -1
- package/dist/es/splitter/SplitterBar.d.ts +1 -0
- package/dist/es/splitter/SplitterBar.js +13 -13
- package/dist/es/tabstrip/TabStripNavigation.js +14 -3
- package/dist/npm/bottomnavigation/BottomNavigationItem.js +1 -1
- package/dist/npm/breadcrumb/Breadcrumb.js +1 -1
- package/dist/npm/breadcrumb/BreadcrumbDelimiter.d.ts +4 -0
- package/dist/npm/breadcrumb/BreadcrumbDelimiter.js +3 -2
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/splitter/Splitter.js +1 -1
- package/dist/npm/splitter/SplitterBar.d.ts +1 -0
- package/dist/npm/splitter/SplitterBar.js +13 -13
- package/dist/npm/tabstrip/TabStripNavigation.js +14 -3
- package/dist/systemjs/kendo-react-layout.js +1 -1
- package/package.json +13 -13
|
@@ -31,7 +31,7 @@ export var BottomNavigationItem = React.forwardRef(function (props, ref) {
|
|
|
31
31
|
var ItemComp = item;
|
|
32
32
|
var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
|
|
33
33
|
(React.createElement(React.Fragment, null,
|
|
34
|
-
(icon || svgIcon) && React.createElement(IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
|
|
34
|
+
(icon || svgIcon) && React.createElement(IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon, size: 'xlarge' }),
|
|
35
35
|
text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
|
|
36
36
|
return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
|
|
37
37
|
});
|
|
@@ -64,7 +64,7 @@ export var Breadcrumb = React.forwardRef(function (props, ref) {
|
|
|
64
64
|
React.createElement(React.Fragment, null, props.data.map(function (item, index, data) {
|
|
65
65
|
var key = item[valueField];
|
|
66
66
|
return (React.createElement(ListItemComponent, { key: key, isFirstItem: index === 0, isLastItem: data.length - 1 === index },
|
|
67
|
-
index !== 0 && React.createElement(DelimiterComponent,
|
|
67
|
+
index !== 0 && React.createElement(DelimiterComponent, { dir: dir }),
|
|
68
68
|
React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, isFirst: index === 0, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
|
|
69
69
|
})))));
|
|
70
70
|
});
|
|
@@ -19,6 +19,10 @@ export interface BreadcrumbDelimiterProps {
|
|
|
19
19
|
* Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
|
|
20
20
|
*/
|
|
21
21
|
tabIndex?: number;
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*/
|
|
25
|
+
dir?: string;
|
|
22
26
|
}
|
|
23
27
|
/**
|
|
24
28
|
* Represents the target (element, props, and focus()) of the BreadcrumbDelimiter.
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import * as PropTypes from 'prop-types';
|
|
3
3
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
4
4
|
import { IconWrap } from '@progress/kendo-react-common';
|
|
5
|
-
import { chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
5
|
+
import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
6
6
|
import { packageMetadata } from '../package-metadata';
|
|
7
7
|
/**
|
|
8
8
|
* Represents the BreadcrumbDelimiter component.
|
|
@@ -19,13 +19,14 @@ export var BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
|
|
|
19
19
|
});
|
|
20
20
|
});
|
|
21
21
|
React.useImperativeHandle(ref, function () { return target.current; });
|
|
22
|
-
return (React.createElement(IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name:
|
|
22
|
+
return (React.createElement(IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: props.dir === 'rtl' ? 'chevron-left' : 'chevron-right', icon: props.dir === 'rtl' ? chevronLeftIcon : chevronRightIcon, className: "k-breadcrumb-delimiter-icon", size: 'xsmall' }));
|
|
23
23
|
});
|
|
24
24
|
var propTypes = {
|
|
25
25
|
id: PropTypes.string,
|
|
26
26
|
className: PropTypes.string,
|
|
27
27
|
style: PropTypes.object,
|
|
28
|
-
tabIndex: PropTypes.number
|
|
28
|
+
tabIndex: PropTypes.number,
|
|
29
|
+
dir: PropTypes.string
|
|
29
30
|
};
|
|
30
31
|
BreadcrumbDelimiter.displayName = 'KendoReactBreadcrumbDelimiter';
|
|
31
32
|
BreadcrumbDelimiter.propTypes = propTypes;
|
|
@@ -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: 1684998399,
|
|
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
|
};
|
|
@@ -121,7 +121,7 @@ var Splitter = /** @class */ (function (_super) {
|
|
|
121
121
|
var barKey = paneKey + 1;
|
|
122
122
|
if (index + 1 < panes.length) {
|
|
123
123
|
var next = panes[index + 1];
|
|
124
|
-
splitterBar = (React.createElement(SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
|
|
124
|
+
splitterBar = (React.createElement(SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize, isRtl: _this.isRtl }));
|
|
125
125
|
}
|
|
126
126
|
var splitterPane = (React.createElement(SplitterPane, __assign({ key: paneKey }, pane), panesContent[index]));
|
|
127
127
|
return [splitterPane, splitterBar];
|
|
@@ -9,6 +9,7 @@ export interface SplitterBarProps {
|
|
|
9
9
|
prev: SplitterPaneExtendedProps;
|
|
10
10
|
next: SplitterPaneExtendedProps;
|
|
11
11
|
ariaLabel?: string;
|
|
12
|
+
isRtl?: boolean;
|
|
12
13
|
onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
|
|
13
14
|
onToggle: (index: number, nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
|
|
14
15
|
onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
@@ -144,39 +144,39 @@ var SplitterBar = /** @class */ (function (_super) {
|
|
|
144
144
|
React.createElement(IconWrap, { name: this.props.prev.collapsible
|
|
145
145
|
? isHorizontal
|
|
146
146
|
? this.props.prev.collapsed
|
|
147
|
-
? 'caret-alt-right'
|
|
148
|
-
: 'caret-alt-left'
|
|
147
|
+
? (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
|
|
148
|
+
: (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
|
|
149
149
|
: this.props.prev.collapsed
|
|
150
150
|
? 'caret-alt-down'
|
|
151
151
|
: 'caret-alt-up'
|
|
152
152
|
: undefined, icon: this.props.prev.collapsible
|
|
153
153
|
? isHorizontal
|
|
154
154
|
? this.props.prev.collapsed
|
|
155
|
-
? caretAltRightIcon
|
|
156
|
-
: caretAltLeftIcon
|
|
155
|
+
? (this.props.isRtl ? caretAltLeftIcon : caretAltRightIcon)
|
|
156
|
+
: (this.props.isRtl ? caretAltRightIcon : caretAltLeftIcon)
|
|
157
157
|
: this.props.prev.collapsed
|
|
158
158
|
? caretAltDownIcon
|
|
159
159
|
: caretAltUpIcon
|
|
160
|
-
: undefined })),
|
|
160
|
+
: undefined, size: 'xsmall' })),
|
|
161
161
|
React.createElement("div", { className: 'k-resize-handle' }),
|
|
162
162
|
this.props.next.collapsible && React.createElement("div", { className: 'k-collapse-next', onClick: this.onNextToggle },
|
|
163
163
|
React.createElement(IconWrap, { name: this.props.next.collapsible
|
|
164
164
|
? isHorizontal
|
|
165
165
|
? this.props.next.collapsed
|
|
166
|
-
? 'caret-alt-left'
|
|
167
|
-
: 'caret-alt-right'
|
|
166
|
+
? (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
|
|
167
|
+
: (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
|
|
168
168
|
: this.props.next.collapsed
|
|
169
169
|
? 'caret-alt-up'
|
|
170
170
|
: 'caret-alt-down'
|
|
171
|
-
: undefined, icon: this.props.
|
|
171
|
+
: undefined, icon: this.props.next.collapsible
|
|
172
172
|
? isHorizontal
|
|
173
|
-
? this.props.
|
|
174
|
-
? caretAltLeftIcon
|
|
175
|
-
: caretAltRightIcon
|
|
176
|
-
: this.props.
|
|
173
|
+
? this.props.next.collapsed
|
|
174
|
+
? (this.props.isRtl ? caretAltRightIcon : caretAltLeftIcon)
|
|
175
|
+
: (this.props.isRtl ? caretAltLeftIcon : caretAltRightIcon)
|
|
176
|
+
: this.props.next.collapsed
|
|
177
177
|
? caretAltUpIcon
|
|
178
178
|
: caretAltDownIcon
|
|
179
|
-
: undefined })))));
|
|
179
|
+
: undefined, size: 'xsmall' })))));
|
|
180
180
|
};
|
|
181
181
|
return SplitterBar;
|
|
182
182
|
}(React.Component));
|
|
@@ -29,6 +29,7 @@ import * as PropTypes from 'prop-types';
|
|
|
29
29
|
import { TabStripNavigationItem } from './TabStripNavigationItem';
|
|
30
30
|
import { classNames } from '@progress/kendo-react-common';
|
|
31
31
|
import { Button } from '@progress/kendo-react-buttons';
|
|
32
|
+
import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
|
|
32
33
|
/**
|
|
33
34
|
* @hidden
|
|
34
35
|
*/
|
|
@@ -118,16 +119,26 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
118
119
|
var directions = {
|
|
119
120
|
prev: {
|
|
120
121
|
arrowTab: 'k-tabstrip-prev',
|
|
121
|
-
|
|
122
|
+
fontIcon: horizontal ?
|
|
123
|
+
_this.isRtl() ? 'caret-alt-right' : 'caret-alt-left'
|
|
124
|
+
: 'caret-alt-up',
|
|
125
|
+
svgIcon: horizontal ?
|
|
126
|
+
_this.isRtl() ? caretAltRightIcon : caretAltLeftIcon
|
|
127
|
+
: caretAltUpIcon
|
|
122
128
|
},
|
|
123
129
|
next: {
|
|
124
130
|
arrowTab: 'k-tabstrip-next',
|
|
125
|
-
|
|
131
|
+
fontIcon: horizontal ?
|
|
132
|
+
_this.isRtl() ? 'caret-alt-left' : 'caret-alt-right'
|
|
133
|
+
: 'caret-alt-down',
|
|
134
|
+
svgIcon: horizontal ?
|
|
135
|
+
_this.isRtl() ? caretAltLeftIcon : caretAltRightIcon
|
|
136
|
+
: caretAltDownIcon
|
|
126
137
|
}
|
|
127
138
|
};
|
|
128
139
|
var ButtonComponent = (type === PREV ? _this.props.prevButton : _this.props.nextButton) || Button;
|
|
129
140
|
var onClick = (type === PREV ? _this.arrowClickPrev : _this.arrowClickNext);
|
|
130
|
-
return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].
|
|
141
|
+
return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].fontIcon, svgIcon: directions[type].svgIcon, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
|
|
131
142
|
};
|
|
132
143
|
_this.state = {
|
|
133
144
|
disabledPrev: _this.props.selected === 0,
|
|
@@ -34,7 +34,7 @@ exports.BottomNavigationItem = React.forwardRef(function (props, ref) {
|
|
|
34
34
|
var ItemComp = item;
|
|
35
35
|
var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
|
|
36
36
|
(React.createElement(React.Fragment, null,
|
|
37
|
-
(icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
|
|
37
|
+
(icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon, size: 'xlarge' }),
|
|
38
38
|
text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
|
|
39
39
|
return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
|
|
40
40
|
});
|
|
@@ -67,7 +67,7 @@ exports.Breadcrumb = React.forwardRef(function (props, ref) {
|
|
|
67
67
|
React.createElement(React.Fragment, null, props.data.map(function (item, index, data) {
|
|
68
68
|
var key = item[valueField];
|
|
69
69
|
return (React.createElement(ListItemComponent, { key: key, isFirstItem: index === 0, isLastItem: data.length - 1 === index },
|
|
70
|
-
index !== 0 && React.createElement(DelimiterComponent,
|
|
70
|
+
index !== 0 && React.createElement(DelimiterComponent, { dir: dir }),
|
|
71
71
|
React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, isFirst: index === 0, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
|
|
72
72
|
})))));
|
|
73
73
|
});
|
|
@@ -19,6 +19,10 @@ export interface BreadcrumbDelimiterProps {
|
|
|
19
19
|
* Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
|
|
20
20
|
*/
|
|
21
21
|
tabIndex?: number;
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*/
|
|
25
|
+
dir?: string;
|
|
22
26
|
}
|
|
23
27
|
/**
|
|
24
28
|
* Represents the target (element, props, and focus()) of the BreadcrumbDelimiter.
|
|
@@ -22,13 +22,14 @@ exports.BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
|
|
|
22
22
|
});
|
|
23
23
|
});
|
|
24
24
|
React.useImperativeHandle(ref, function () { return target.current; });
|
|
25
|
-
return (React.createElement(kendo_react_common_1.IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name:
|
|
25
|
+
return (React.createElement(kendo_react_common_1.IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: props.dir === 'rtl' ? 'chevron-left' : 'chevron-right', icon: props.dir === 'rtl' ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon, className: "k-breadcrumb-delimiter-icon", size: 'xsmall' }));
|
|
26
26
|
});
|
|
27
27
|
var propTypes = {
|
|
28
28
|
id: PropTypes.string,
|
|
29
29
|
className: PropTypes.string,
|
|
30
30
|
style: PropTypes.object,
|
|
31
|
-
tabIndex: PropTypes.number
|
|
31
|
+
tabIndex: PropTypes.number,
|
|
32
|
+
dir: PropTypes.string
|
|
32
33
|
};
|
|
33
34
|
exports.BreadcrumbDelimiter.displayName = 'KendoReactBreadcrumbDelimiter';
|
|
34
35
|
exports.BreadcrumbDelimiter.propTypes = propTypes;
|
|
@@ -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: 1684998399,
|
|
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
|
};
|
|
@@ -124,7 +124,7 @@ var Splitter = /** @class */ (function (_super) {
|
|
|
124
124
|
var barKey = paneKey + 1;
|
|
125
125
|
if (index + 1 < panes.length) {
|
|
126
126
|
var next = panes[index + 1];
|
|
127
|
-
splitterBar = (React.createElement(SplitterBar_1.SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
|
|
127
|
+
splitterBar = (React.createElement(SplitterBar_1.SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize, isRtl: _this.isRtl }));
|
|
128
128
|
}
|
|
129
129
|
var splitterPane = (React.createElement(SplitterPane_1.SplitterPane, __assign({ key: paneKey }, pane), panesContent[index]));
|
|
130
130
|
return [splitterPane, splitterBar];
|
|
@@ -9,6 +9,7 @@ export interface SplitterBarProps {
|
|
|
9
9
|
prev: SplitterPaneExtendedProps;
|
|
10
10
|
next: SplitterPaneExtendedProps;
|
|
11
11
|
ariaLabel?: string;
|
|
12
|
+
isRtl?: boolean;
|
|
12
13
|
onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
|
|
13
14
|
onToggle: (index: number, nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
|
|
14
15
|
onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
@@ -147,39 +147,39 @@ var SplitterBar = /** @class */ (function (_super) {
|
|
|
147
147
|
React.createElement(kendo_react_common_1.IconWrap, { name: this.props.prev.collapsible
|
|
148
148
|
? isHorizontal
|
|
149
149
|
? this.props.prev.collapsed
|
|
150
|
-
? 'caret-alt-right'
|
|
151
|
-
: 'caret-alt-left'
|
|
150
|
+
? (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
|
|
151
|
+
: (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
|
|
152
152
|
: this.props.prev.collapsed
|
|
153
153
|
? 'caret-alt-down'
|
|
154
154
|
: 'caret-alt-up'
|
|
155
155
|
: undefined, icon: this.props.prev.collapsible
|
|
156
156
|
? isHorizontal
|
|
157
157
|
? this.props.prev.collapsed
|
|
158
|
-
? kendo_svg_icons_1.caretAltRightIcon
|
|
159
|
-
: kendo_svg_icons_1.caretAltLeftIcon
|
|
158
|
+
? (this.props.isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon)
|
|
159
|
+
: (this.props.isRtl ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon)
|
|
160
160
|
: this.props.prev.collapsed
|
|
161
161
|
? kendo_svg_icons_1.caretAltDownIcon
|
|
162
162
|
: kendo_svg_icons_1.caretAltUpIcon
|
|
163
|
-
: undefined })),
|
|
163
|
+
: undefined, size: 'xsmall' })),
|
|
164
164
|
React.createElement("div", { className: 'k-resize-handle' }),
|
|
165
165
|
this.props.next.collapsible && React.createElement("div", { className: 'k-collapse-next', onClick: this.onNextToggle },
|
|
166
166
|
React.createElement(kendo_react_common_1.IconWrap, { name: this.props.next.collapsible
|
|
167
167
|
? isHorizontal
|
|
168
168
|
? this.props.next.collapsed
|
|
169
|
-
? 'caret-alt-left'
|
|
170
|
-
: 'caret-alt-right'
|
|
169
|
+
? (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
|
|
170
|
+
: (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
|
|
171
171
|
: this.props.next.collapsed
|
|
172
172
|
? 'caret-alt-up'
|
|
173
173
|
: 'caret-alt-down'
|
|
174
|
-
: undefined, icon: this.props.
|
|
174
|
+
: undefined, icon: this.props.next.collapsible
|
|
175
175
|
? isHorizontal
|
|
176
|
-
? this.props.
|
|
177
|
-
? kendo_svg_icons_1.caretAltLeftIcon
|
|
178
|
-
: kendo_svg_icons_1.caretAltRightIcon
|
|
179
|
-
: this.props.
|
|
176
|
+
? this.props.next.collapsed
|
|
177
|
+
? (this.props.isRtl ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon)
|
|
178
|
+
: (this.props.isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon)
|
|
179
|
+
: this.props.next.collapsed
|
|
180
180
|
? kendo_svg_icons_1.caretAltUpIcon
|
|
181
181
|
: kendo_svg_icons_1.caretAltDownIcon
|
|
182
|
-
: undefined })))));
|
|
182
|
+
: undefined, size: 'xsmall' })))));
|
|
183
183
|
};
|
|
184
184
|
return SplitterBar;
|
|
185
185
|
}(React.Component));
|
|
@@ -32,6 +32,7 @@ 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
34
|
var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
|
|
35
|
+
var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
|
|
35
36
|
/**
|
|
36
37
|
* @hidden
|
|
37
38
|
*/
|
|
@@ -121,16 +122,26 @@ var TabStripNavigation = /** @class */ (function (_super) {
|
|
|
121
122
|
var directions = {
|
|
122
123
|
prev: {
|
|
123
124
|
arrowTab: 'k-tabstrip-prev',
|
|
124
|
-
|
|
125
|
+
fontIcon: horizontal ?
|
|
126
|
+
_this.isRtl() ? 'caret-alt-right' : 'caret-alt-left'
|
|
127
|
+
: 'caret-alt-up',
|
|
128
|
+
svgIcon: horizontal ?
|
|
129
|
+
_this.isRtl() ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon
|
|
130
|
+
: kendo_svg_icons_1.caretAltUpIcon
|
|
125
131
|
},
|
|
126
132
|
next: {
|
|
127
133
|
arrowTab: 'k-tabstrip-next',
|
|
128
|
-
|
|
134
|
+
fontIcon: horizontal ?
|
|
135
|
+
_this.isRtl() ? 'caret-alt-left' : 'caret-alt-right'
|
|
136
|
+
: 'caret-alt-down',
|
|
137
|
+
svgIcon: horizontal ?
|
|
138
|
+
_this.isRtl() ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon
|
|
139
|
+
: kendo_svg_icons_1.caretAltDownIcon
|
|
129
140
|
}
|
|
130
141
|
};
|
|
131
142
|
var ButtonComponent = (type === PREV ? _this.props.prevButton : _this.props.nextButton) || kendo_react_buttons_1.Button;
|
|
132
143
|
var onClick = (type === PREV ? _this.arrowClickPrev : _this.arrowClickNext);
|
|
133
|
-
return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].
|
|
144
|
+
return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].fontIcon, svgIcon: directions[type].svgIcon, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
|
|
134
145
|
};
|
|
135
146
|
_this.state = {
|
|
136
147
|
disabledPrev: _this.props.selected === 0,
|