@progress/kendo-react-tooltip 6.1.1 → 7.0.0-develop.10
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/LICENSE.md +1 -1
- package/dist/cdn/js/kendo-react-tooltip.js +5 -1
- package/index.d.ts +23 -0
- package/index.js +5 -0
- package/index.mjs +468 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +28 -44
- package/{dist/es/popover → popover}/Popover.d.ts +4 -0
- package/{dist/es/popover → popover}/PopoverActionsBar.d.ts +4 -0
- package/{dist/npm/popover → popover}/interfaces/Align.d.ts +4 -0
- package/{dist/npm/popover → popover}/interfaces/PopoverActionsBarProps.d.ts +4 -1
- package/popover/interfaces/PopoverAnimation.d.ts +10 -0
- package/popover/interfaces/PopoverCloseEvent.d.ts +14 -0
- package/{dist/npm/popover → popover}/interfaces/PopoverCollision.d.ts +4 -0
- package/{dist/npm/popover → popover}/interfaces/PopoverCollisionType.d.ts +5 -1
- package/{dist/npm/popover → popover}/interfaces/PopoverMargin.d.ts +4 -0
- package/popover/interfaces/PopoverOffset.d.ts +18 -0
- package/popover/interfaces/PopoverOpenEvent.d.ts +14 -0
- package/popover/interfaces/PopoverPosition.d.ts +13 -0
- package/{dist/es/popover → popover}/interfaces/PopoverPositionEvent.d.ts +4 -0
- package/popover/interfaces/PopoverPositionMode.d.ts +9 -0
- package/{dist/es/popover → popover}/interfaces/PopoverProps.d.ts +4 -1
- package/{dist/npm/tooltip → tooltip}/Tooltip.d.ts +5 -1
- package/{dist/npm/tooltip → tooltip}/TooltipProps.d.ts +4 -1
- package/{dist/es/tooltip → tooltip}/events.d.ts +4 -0
- package/{dist/npm/tooltip → tooltip}/utils.d.ts +5 -1
- package/about.md +0 -3
- package/dist/es/main.d.ts +0 -19
- package/dist/es/main.js +0 -4
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/popover/Popover.js +0 -174
- package/dist/es/popover/PopoverActionsBar.js +0 -33
- package/dist/es/popover/interfaces/Align.d.ts +0 -24
- package/dist/es/popover/interfaces/Align.js +0 -1
- package/dist/es/popover/interfaces/PopoverActionsBarProps.d.ts +0 -28
- package/dist/es/popover/interfaces/PopoverActionsBarProps.js +0 -1
- package/dist/es/popover/interfaces/PopoverAnimation.d.ts +0 -6
- package/dist/es/popover/interfaces/PopoverAnimation.js +0 -1
- package/dist/es/popover/interfaces/PopoverCloseEvent.d.ts +0 -10
- package/dist/es/popover/interfaces/PopoverCloseEvent.js +0 -1
- package/dist/es/popover/interfaces/PopoverCollision.d.ts +0 -14
- package/dist/es/popover/interfaces/PopoverCollision.js +0 -1
- package/dist/es/popover/interfaces/PopoverCollisionType.d.ts +0 -10
- package/dist/es/popover/interfaces/PopoverCollisionType.js +0 -1
- package/dist/es/popover/interfaces/PopoverMargin.d.ts +0 -14
- package/dist/es/popover/interfaces/PopoverMargin.js +0 -1
- package/dist/es/popover/interfaces/PopoverOffset.d.ts +0 -14
- package/dist/es/popover/interfaces/PopoverOffset.js +0 -1
- package/dist/es/popover/interfaces/PopoverOpenEvent.d.ts +0 -10
- package/dist/es/popover/interfaces/PopoverOpenEvent.js +0 -1
- package/dist/es/popover/interfaces/PopoverPosition.d.ts +0 -9
- package/dist/es/popover/interfaces/PopoverPosition.js +0 -1
- package/dist/es/popover/interfaces/PopoverPositionEvent.js +0 -1
- package/dist/es/popover/interfaces/PopoverPositionMode.d.ts +0 -5
- package/dist/es/popover/interfaces/PopoverPositionMode.js +0 -1
- package/dist/es/popover/interfaces/PopoverProps.js +0 -1
- package/dist/es/tooltip/Tooltip.d.ts +0 -85
- package/dist/es/tooltip/Tooltip.js +0 -313
- package/dist/es/tooltip/TooltipProps.d.ts +0 -109
- package/dist/es/tooltip/TooltipProps.js +0 -2
- package/dist/es/tooltip/events.js +0 -1
- package/dist/es/tooltip/utils.d.ts +0 -24
- package/dist/es/tooltip/utils.js +0 -106
- package/dist/npm/main.d.ts +0 -19
- package/dist/npm/main.js +0 -9
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/popover/Popover.d.ts +0 -15
- package/dist/npm/popover/Popover.js +0 -177
- package/dist/npm/popover/PopoverActionsBar.d.ts +0 -19
- package/dist/npm/popover/PopoverActionsBar.js +0 -36
- package/dist/npm/popover/interfaces/Align.js +0 -2
- package/dist/npm/popover/interfaces/PopoverActionsBarProps.js +0 -2
- package/dist/npm/popover/interfaces/PopoverAnimation.d.ts +0 -6
- package/dist/npm/popover/interfaces/PopoverAnimation.js +0 -2
- package/dist/npm/popover/interfaces/PopoverCloseEvent.d.ts +0 -10
- package/dist/npm/popover/interfaces/PopoverCloseEvent.js +0 -2
- package/dist/npm/popover/interfaces/PopoverCollision.js +0 -2
- package/dist/npm/popover/interfaces/PopoverCollisionType.js +0 -2
- package/dist/npm/popover/interfaces/PopoverMargin.js +0 -2
- package/dist/npm/popover/interfaces/PopoverOffset.d.ts +0 -14
- package/dist/npm/popover/interfaces/PopoverOffset.js +0 -2
- package/dist/npm/popover/interfaces/PopoverOpenEvent.d.ts +0 -10
- package/dist/npm/popover/interfaces/PopoverOpenEvent.js +0 -2
- package/dist/npm/popover/interfaces/PopoverPosition.d.ts +0 -9
- package/dist/npm/popover/interfaces/PopoverPosition.js +0 -2
- package/dist/npm/popover/interfaces/PopoverPositionEvent.d.ts +0 -18
- package/dist/npm/popover/interfaces/PopoverPositionEvent.js +0 -2
- package/dist/npm/popover/interfaces/PopoverPositionMode.d.ts +0 -5
- package/dist/npm/popover/interfaces/PopoverPositionMode.js +0 -2
- package/dist/npm/popover/interfaces/PopoverProps.d.ts +0 -112
- package/dist/npm/popover/interfaces/PopoverProps.js +0 -2
- package/dist/npm/tooltip/Tooltip.js +0 -316
- package/dist/npm/tooltip/TooltipProps.js +0 -3
- package/dist/npm/tooltip/events.d.ts +0 -31
- package/dist/npm/tooltip/events.js +0 -2
- package/dist/npm/tooltip/utils.js +0 -113
- package/dist/systemjs/kendo-react-tooltip.js +0 -1
- package/e2e-next/popover.basic.tests.ts +0 -25
- package/e2e-next/tooltip.basic.tests.ts +0 -25
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as PropTypes from 'prop-types';
|
|
3
|
-
import { ZIndexContext } from '@progress/kendo-react-common';
|
|
4
|
-
import { TooltipProps } from './TooltipProps';
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
interface TooltipState {
|
|
9
|
-
targetElement: HTMLElement | null;
|
|
10
|
-
open: boolean;
|
|
11
|
-
title: string;
|
|
12
|
-
}
|
|
13
|
-
export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
|
|
14
|
-
/**
|
|
15
|
-
* @hidden
|
|
16
|
-
*/
|
|
17
|
-
static propTypes: {
|
|
18
|
-
anchorElement: PropTypes.Requireable<string>;
|
|
19
|
-
content: PropTypes.Requireable<(...args: any[]) => any>;
|
|
20
|
-
filter: PropTypes.Requireable<(...args: any[]) => any>;
|
|
21
|
-
openDelay: PropTypes.Requireable<number>;
|
|
22
|
-
position: PropTypes.Requireable<string>;
|
|
23
|
-
updateInterval: PropTypes.Requireable<number>;
|
|
24
|
-
};
|
|
25
|
-
static defaultProps: {
|
|
26
|
-
anchorElement: string;
|
|
27
|
-
openDelay: number;
|
|
28
|
-
position: string;
|
|
29
|
-
showCallout: boolean;
|
|
30
|
-
parentTitle: boolean;
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* @hidden
|
|
34
|
-
*/
|
|
35
|
-
static contextType: React.Context<import("@progress/kendo-react-common").ZIndexContextType>;
|
|
36
|
-
/**
|
|
37
|
-
* @hidden
|
|
38
|
-
*/
|
|
39
|
-
context: React.ContextType<typeof ZIndexContext>;
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
readonly state: TooltipState;
|
|
44
|
-
private top;
|
|
45
|
-
private left;
|
|
46
|
-
private openTimeoutId?;
|
|
47
|
-
private updateIntervalId?;
|
|
48
|
-
private willOpen;
|
|
49
|
-
constructor(props: TooltipProps);
|
|
50
|
-
/**
|
|
51
|
-
* @hidden
|
|
52
|
-
*/
|
|
53
|
-
componentDidMount(): void;
|
|
54
|
-
/**
|
|
55
|
-
* @hidden
|
|
56
|
-
*/
|
|
57
|
-
componentWillUnmount(): void;
|
|
58
|
-
/**
|
|
59
|
-
* @hidden
|
|
60
|
-
*/
|
|
61
|
-
componentDidUpdate(): void;
|
|
62
|
-
/**
|
|
63
|
-
* The method is used on the MouseOut event to hide the Tooltip.
|
|
64
|
-
*/
|
|
65
|
-
handleMouseOut: (event: any) => void;
|
|
66
|
-
/**
|
|
67
|
-
* Used on the `MouseOver` event to show the Tooltip.
|
|
68
|
-
*/
|
|
69
|
-
handleMouseOver: (event: any) => void;
|
|
70
|
-
/**
|
|
71
|
-
* @hidden
|
|
72
|
-
*/
|
|
73
|
-
render(): "" | JSX.Element | null;
|
|
74
|
-
private handleBodyMousemove;
|
|
75
|
-
private onClose;
|
|
76
|
-
private showToolTip;
|
|
77
|
-
private setUpdateInterval;
|
|
78
|
-
private onIntervalUpdate;
|
|
79
|
-
private isVisible;
|
|
80
|
-
private position;
|
|
81
|
-
private getTitle;
|
|
82
|
-
private calloutClassName;
|
|
83
|
-
private getCurrentZIndex;
|
|
84
|
-
}
|
|
85
|
-
export {};
|
|
@@ -1,313 +0,0 @@
|
|
|
1
|
-
var __extends = (this && this.__extends) || (function () {
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
if (typeof b !== "function" && b !== null)
|
|
10
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
11
|
-
extendStatics(d, b);
|
|
12
|
-
function __() { this.constructor = d; }
|
|
13
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
14
|
-
};
|
|
15
|
-
})();
|
|
16
|
-
var __assign = (this && this.__assign) || function () {
|
|
17
|
-
__assign = Object.assign || function(t) {
|
|
18
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
19
|
-
s = arguments[i];
|
|
20
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
21
|
-
t[p] = s[p];
|
|
22
|
-
}
|
|
23
|
-
return t;
|
|
24
|
-
};
|
|
25
|
-
return __assign.apply(this, arguments);
|
|
26
|
-
};
|
|
27
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
28
|
-
var t = {};
|
|
29
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
30
|
-
t[p] = s[p];
|
|
31
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
32
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
33
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
34
|
-
t[p[i]] = s[p[i]];
|
|
35
|
-
}
|
|
36
|
-
return t;
|
|
37
|
-
};
|
|
38
|
-
import * as React from 'react';
|
|
39
|
-
import * as ReactDOM from 'react-dom';
|
|
40
|
-
import * as PropTypes from 'prop-types';
|
|
41
|
-
import { dispatchEvent, classNames, ZIndexContext } from '@progress/kendo-react-common';
|
|
42
|
-
import { getLeftPosition, getTopPosition, getDomRect, isTooltipElement } from './utils';
|
|
43
|
-
import { validatePackage } from '@progress/kendo-react-common';
|
|
44
|
-
import { packageMetadata } from './../package-metadata';
|
|
45
|
-
var DEFAULT_TOOLTIP_ZINDEX = 100;
|
|
46
|
-
var Tooltip = /** @class */ (function (_super) {
|
|
47
|
-
__extends(Tooltip, _super);
|
|
48
|
-
function Tooltip(props) {
|
|
49
|
-
var _this = _super.call(this, props) || this;
|
|
50
|
-
/**
|
|
51
|
-
* @hidden
|
|
52
|
-
*/
|
|
53
|
-
_this.context = 0;
|
|
54
|
-
/**
|
|
55
|
-
* @hidden
|
|
56
|
-
*/
|
|
57
|
-
_this.state = {
|
|
58
|
-
targetElement: null,
|
|
59
|
-
open: false,
|
|
60
|
-
title: ''
|
|
61
|
-
};
|
|
62
|
-
_this.top = 0;
|
|
63
|
-
_this.left = 0;
|
|
64
|
-
_this.willOpen = false;
|
|
65
|
-
/**
|
|
66
|
-
* The method is used on the MouseOut event to hide the Tooltip.
|
|
67
|
-
*/
|
|
68
|
-
_this.handleMouseOut = function (event) {
|
|
69
|
-
var targetElement = _this.state.targetElement;
|
|
70
|
-
var currentDocument = targetElement ? targetElement.ownerDocument : document;
|
|
71
|
-
var element = currentDocument && currentDocument.elementFromPoint(event.clientX, event.clientY);
|
|
72
|
-
if (isTooltipElement(element)) {
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
if (_this.props.open) {
|
|
76
|
-
return;
|
|
77
|
-
}
|
|
78
|
-
clearInterval(_this.updateIntervalId);
|
|
79
|
-
_this.willOpen = false;
|
|
80
|
-
_this.onClose(event);
|
|
81
|
-
};
|
|
82
|
-
/**
|
|
83
|
-
* Used on the `MouseOver` event to show the Tooltip.
|
|
84
|
-
*/
|
|
85
|
-
_this.handleMouseOver = function (event) {
|
|
86
|
-
var target = event.target;
|
|
87
|
-
if (!_this.isVisible(target) || isTooltipElement(target) || target === _this.state.targetElement) {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
_this.showToolTip(event);
|
|
91
|
-
};
|
|
92
|
-
_this.handleBodyMousemove = function (event) {
|
|
93
|
-
_this.top = event.clientY;
|
|
94
|
-
_this.left = event.clientX;
|
|
95
|
-
};
|
|
96
|
-
_this.onClose = function (event) {
|
|
97
|
-
dispatchEvent(_this.props.onClose, event, _this, undefined);
|
|
98
|
-
_this.setState({ targetElement: null, open: false, title: '' });
|
|
99
|
-
};
|
|
100
|
-
_this.setUpdateInterval = function () {
|
|
101
|
-
if (_this.props.updateInterval) {
|
|
102
|
-
_this.updateIntervalId = setInterval(_this.onIntervalUpdate, _this.props.updateInterval);
|
|
103
|
-
}
|
|
104
|
-
};
|
|
105
|
-
_this.onIntervalUpdate = function () {
|
|
106
|
-
var target = _this.state.targetElement;
|
|
107
|
-
if (!target) {
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
if (target.parentElement === null) {
|
|
111
|
-
// Getting element from previous target coordinates will cause reflow which is performance hit.
|
|
112
|
-
// Also remount case can be avoided easily
|
|
113
|
-
_this.onClose({ target: target });
|
|
114
|
-
}
|
|
115
|
-
else {
|
|
116
|
-
_this.showToolTip({ target: target });
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
_this.position = function (element) {
|
|
120
|
-
var domRect = getDomRect(_this.state.targetElement);
|
|
121
|
-
var left = getLeftPosition(_this.left, element.offsetWidth, domRect, _this.props.anchorElement, _this.props.position);
|
|
122
|
-
var top = getTopPosition(_this.top, domRect, element.offsetHeight, _this.props.anchorElement, _this.props.position);
|
|
123
|
-
return { left: left, top: top };
|
|
124
|
-
};
|
|
125
|
-
_this.getTitle = function (element) {
|
|
126
|
-
while (element) {
|
|
127
|
-
if (element.getAttribute('title') !== null || element.titleExpando) {
|
|
128
|
-
var title = element.getAttribute('title') || element.titleExpando;
|
|
129
|
-
return { title: title, element: element };
|
|
130
|
-
}
|
|
131
|
-
element = _this.props.parentTitle && element.parentElement || null;
|
|
132
|
-
}
|
|
133
|
-
return { title: '', element: element };
|
|
134
|
-
};
|
|
135
|
-
_this.calloutClassName = function () {
|
|
136
|
-
switch (_this.props.position) {
|
|
137
|
-
case 'bottom':
|
|
138
|
-
return 'k-callout k-callout-n';
|
|
139
|
-
case 'left':
|
|
140
|
-
return 'k-callout k-callout-e';
|
|
141
|
-
case 'right':
|
|
142
|
-
return 'k-callout k-callout-w';
|
|
143
|
-
case 'top':
|
|
144
|
-
return 'k-callout k-callout-s';
|
|
145
|
-
default:
|
|
146
|
-
return _this.top < (window.innerHeight / 2) ? 'k-callout k-callout-n' : 'k-callout k-callout-s';
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
_this.getCurrentZIndex = function () {
|
|
150
|
-
return _this.context ? _this.context : DEFAULT_TOOLTIP_ZINDEX;
|
|
151
|
-
};
|
|
152
|
-
validatePackage(packageMetadata);
|
|
153
|
-
return _this;
|
|
154
|
-
}
|
|
155
|
-
/**
|
|
156
|
-
* @hidden
|
|
157
|
-
*/
|
|
158
|
-
Tooltip.prototype.componentDidMount = function () {
|
|
159
|
-
if (document) {
|
|
160
|
-
document.body.addEventListener('mousemove', this.handleBodyMousemove);
|
|
161
|
-
}
|
|
162
|
-
};
|
|
163
|
-
/**
|
|
164
|
-
* @hidden
|
|
165
|
-
*/
|
|
166
|
-
Tooltip.prototype.componentWillUnmount = function () {
|
|
167
|
-
clearTimeout(this.openTimeoutId);
|
|
168
|
-
clearInterval(this.updateIntervalId);
|
|
169
|
-
if (document) {
|
|
170
|
-
document.body.removeEventListener('mousemove', this.handleBodyMousemove);
|
|
171
|
-
}
|
|
172
|
-
};
|
|
173
|
-
/**
|
|
174
|
-
* @hidden
|
|
175
|
-
*/
|
|
176
|
-
Tooltip.prototype.componentDidUpdate = function () {
|
|
177
|
-
if (this.props.open && this.props.targetElement) {
|
|
178
|
-
this.showToolTip({ target: this.props.targetElement });
|
|
179
|
-
}
|
|
180
|
-
};
|
|
181
|
-
/**
|
|
182
|
-
* @hidden
|
|
183
|
-
*/
|
|
184
|
-
Tooltip.prototype.render = function () {
|
|
185
|
-
var _this = this;
|
|
186
|
-
if (this.props.children) {
|
|
187
|
-
var _a = this.props, children = _a.children, options = __rest(_a, ["children"]);
|
|
188
|
-
var tooltip_1 = null;
|
|
189
|
-
return (React.createElement("div", { onMouseOver: function (event) { if (tooltip_1) {
|
|
190
|
-
tooltip_1.handleMouseOver(event);
|
|
191
|
-
} }, onMouseOut: function (event) { if (tooltip_1) {
|
|
192
|
-
tooltip_1.handleMouseOut(event);
|
|
193
|
-
} } },
|
|
194
|
-
React.createElement(Tooltip, __assign({ ref: function (el) { return tooltip_1 = el; } }, options)),
|
|
195
|
-
children));
|
|
196
|
-
}
|
|
197
|
-
if (this.props.open === false) {
|
|
198
|
-
return null;
|
|
199
|
-
}
|
|
200
|
-
var targetElement = this.state.targetElement;
|
|
201
|
-
var currentZIndex = this.getCurrentZIndex();
|
|
202
|
-
return targetElement &&
|
|
203
|
-
this.state.title &&
|
|
204
|
-
targetElement.ownerDocument &&
|
|
205
|
-
ReactDOM.createPortal((React.createElement("div", { ref: function (el) {
|
|
206
|
-
if (!el) {
|
|
207
|
-
return;
|
|
208
|
-
}
|
|
209
|
-
var position;
|
|
210
|
-
if (_this.props.onPosition) {
|
|
211
|
-
var ev = {
|
|
212
|
-
element: el,
|
|
213
|
-
targetElement: _this.state.targetElement,
|
|
214
|
-
mouseTop: _this.top,
|
|
215
|
-
mouseLeft: _this.left,
|
|
216
|
-
anchorElement: _this.props.anchorElement,
|
|
217
|
-
position: _this.props.position,
|
|
218
|
-
target: _this,
|
|
219
|
-
syntheticEvent: null,
|
|
220
|
-
nativeEvent: null
|
|
221
|
-
};
|
|
222
|
-
position = _this.props.onPosition.call(undefined, ev);
|
|
223
|
-
}
|
|
224
|
-
else {
|
|
225
|
-
position = _this.position(el);
|
|
226
|
-
}
|
|
227
|
-
el.style.left = position.left + 'px';
|
|
228
|
-
el.style.top = position.top + 'px';
|
|
229
|
-
}, className: classNames('k-animation-container', 'k-animation-container-fixed', 'k-animation-container-shown', this.props.className), style: __assign({ zIndex: currentZIndex }, this.props.style), tabIndex: 0 },
|
|
230
|
-
React.createElement("div", { className: 'k-child-animation-container' },
|
|
231
|
-
React.createElement("div", { id: this.props.id, role: 'tooltip', className: classNames('k-tooltip', this.props.tooltipClassName), style: __assign({ position: 'relative' }, this.props.tooltipStyle) },
|
|
232
|
-
React.createElement("div", { className: "k-tooltip-content" }, this.props.content &&
|
|
233
|
-
React.createElement(this.props.content, { title: this.state.title, target: this.state.targetElement })
|
|
234
|
-
|| this.state.title),
|
|
235
|
-
this.props.showCallout && React.createElement("div", { ref: function (el) {
|
|
236
|
-
if (!el) {
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
|
-
el.className = _this.calloutClassName();
|
|
240
|
-
if (_this.props.position === 'auto') {
|
|
241
|
-
_this.left < (window.screen.availWidth / 2)
|
|
242
|
-
? el.style.left = _this.props.setCalloutOnPositionAuto || '25%'
|
|
243
|
-
: el.style.left = _this.props.setCalloutOnPositionAuto || '75%';
|
|
244
|
-
}
|
|
245
|
-
} }))))), this.props.appendTo ? this.props.appendTo : targetElement.ownerDocument.body);
|
|
246
|
-
};
|
|
247
|
-
Tooltip.prototype.showToolTip = function (event) {
|
|
248
|
-
var _this = this;
|
|
249
|
-
clearTimeout(this.openTimeoutId);
|
|
250
|
-
clearInterval(this.updateIntervalId);
|
|
251
|
-
if (event.target.hasChildNodes()) {
|
|
252
|
-
event.target.childNodes.forEach(function (childElement) {
|
|
253
|
-
if (childElement.nodeName === 'title') {
|
|
254
|
-
event.target.titleExpando = childElement.innerHTML;
|
|
255
|
-
childElement.remove();
|
|
256
|
-
}
|
|
257
|
-
});
|
|
258
|
-
}
|
|
259
|
-
var target = this.props.targetElement || event.target;
|
|
260
|
-
var titleResult = this.getTitle(target);
|
|
261
|
-
if (!titleResult.title) {
|
|
262
|
-
if (this.state.open) {
|
|
263
|
-
this.onClose(event);
|
|
264
|
-
}
|
|
265
|
-
return;
|
|
266
|
-
}
|
|
267
|
-
if (titleResult.element) {
|
|
268
|
-
titleResult.element.titleExpando = titleResult.title;
|
|
269
|
-
titleResult.element.title = '';
|
|
270
|
-
}
|
|
271
|
-
this.willOpen = true;
|
|
272
|
-
if (!this.props.openDelay) {
|
|
273
|
-
this.setState({ targetElement: target, open: true, title: titleResult.title }, this.setUpdateInterval);
|
|
274
|
-
}
|
|
275
|
-
else {
|
|
276
|
-
this.openTimeoutId = window.setTimeout(function () {
|
|
277
|
-
if (_this.willOpen) {
|
|
278
|
-
_this.setState({ targetElement: target, open: true, title: titleResult.title }, _this.setUpdateInterval);
|
|
279
|
-
}
|
|
280
|
-
}, this.props.openDelay);
|
|
281
|
-
}
|
|
282
|
-
if (this.state.title !== titleResult.title) {
|
|
283
|
-
dispatchEvent(this.props.onOpen, event, this, undefined);
|
|
284
|
-
}
|
|
285
|
-
};
|
|
286
|
-
Tooltip.prototype.isVisible = function (element) {
|
|
287
|
-
return !this.props.filter || this.props.filter(element);
|
|
288
|
-
};
|
|
289
|
-
/**
|
|
290
|
-
* @hidden
|
|
291
|
-
*/
|
|
292
|
-
Tooltip.propTypes = {
|
|
293
|
-
anchorElement: PropTypes.oneOf(['pointer', 'target']),
|
|
294
|
-
content: PropTypes.func,
|
|
295
|
-
filter: PropTypes.func,
|
|
296
|
-
openDelay: PropTypes.number,
|
|
297
|
-
position: PropTypes.oneOf(['right', 'left', 'top', 'bottom', 'auto']),
|
|
298
|
-
updateInterval: PropTypes.number
|
|
299
|
-
};
|
|
300
|
-
Tooltip.defaultProps = {
|
|
301
|
-
anchorElement: 'pointer',
|
|
302
|
-
openDelay: 400,
|
|
303
|
-
position: 'auto',
|
|
304
|
-
showCallout: true,
|
|
305
|
-
parentTitle: false
|
|
306
|
-
};
|
|
307
|
-
/**
|
|
308
|
-
* @hidden
|
|
309
|
-
*/
|
|
310
|
-
Tooltip.contextType = ZIndexContext;
|
|
311
|
-
return Tooltip;
|
|
312
|
-
}(React.PureComponent));
|
|
313
|
-
export { Tooltip };
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { TooltipEvent, TooltipPositionEvent } from './events';
|
|
3
|
-
import { TooltipPosition } from './utils';
|
|
4
|
-
/**
|
|
5
|
-
* Represents the props of the [KendoReact Tooltip component]({% slug overview_tooltip %}).
|
|
6
|
-
*/
|
|
7
|
-
export interface TooltipProps {
|
|
8
|
-
/**
|
|
9
|
-
* Specifies the `id` of the wrapping element of the Tooltip component.
|
|
10
|
-
*/
|
|
11
|
-
id?: string;
|
|
12
|
-
/**
|
|
13
|
-
* Sets the anchor element of the Tooltip.
|
|
14
|
-
*
|
|
15
|
-
* The available options are:
|
|
16
|
-
* - (Default) `pointer`—Shows a Tooltip where the cursor is located.
|
|
17
|
-
* - `target`—Positions the Tooltip based on the anchor element.
|
|
18
|
-
*/
|
|
19
|
-
anchorElement?: string;
|
|
20
|
-
/**
|
|
21
|
-
* Defines the container to which the Tooltip will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
|
|
22
|
-
*/
|
|
23
|
-
appendTo?: HTMLElement | null;
|
|
24
|
-
/**
|
|
25
|
-
* Sets the position of the Tooltip ([see example]({% slug positioning_tooltip %})).
|
|
26
|
-
*
|
|
27
|
-
* The available options are:
|
|
28
|
-
* - (Default) `auto`—Positions the Tooltip depending on the available space.
|
|
29
|
-
* - `right`—Positions the Tooltip to the right side of the element.
|
|
30
|
-
* - `left`—Positions the Tooltip to the left side of the element.
|
|
31
|
-
* - `bottom`—Positions the Tooltip at the bottom of the element.
|
|
32
|
-
* - `top`—Positions the Tooltip at the top of the element.
|
|
33
|
-
*/
|
|
34
|
-
position?: TooltipPosition;
|
|
35
|
-
/**
|
|
36
|
-
* Sets a class of the Tooltip animation container.
|
|
37
|
-
*/
|
|
38
|
-
className?: string;
|
|
39
|
-
/**
|
|
40
|
-
* Sets the content of the Tooltip ([see example]({% slug templates_tooltip %})).
|
|
41
|
-
*/
|
|
42
|
-
content?: any;
|
|
43
|
-
/**
|
|
44
|
-
* Sets the content of the Tooltip.
|
|
45
|
-
*/
|
|
46
|
-
children?: any;
|
|
47
|
-
/**
|
|
48
|
-
* Specifies if the Tooltip will be open.
|
|
49
|
-
* Sets the Tooltip in its controlled mode ([see example]({% slug controlledmode_tooltip %})).
|
|
50
|
-
* Requires you to set the `targetElement` property.
|
|
51
|
-
*/
|
|
52
|
-
open?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* Sets a delay in milliseconds.
|
|
55
|
-
*/
|
|
56
|
-
openDelay?: number;
|
|
57
|
-
/**
|
|
58
|
-
* If any of the parent elements has a title, displays a Tooltip.
|
|
59
|
-
*/
|
|
60
|
-
parentTitle?: boolean;
|
|
61
|
-
/**
|
|
62
|
-
* Specifies if the Tooltip callout will be displayed.
|
|
63
|
-
*/
|
|
64
|
-
showCallout?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* When the position is set to `auto`, sets the start point of the Tooltip callout (in pixels).
|
|
67
|
-
*/
|
|
68
|
-
setCalloutOnPositionAuto?: any;
|
|
69
|
-
/**
|
|
70
|
-
* Specifies the styles which are set to the Tooltip animation container.
|
|
71
|
-
*/
|
|
72
|
-
style?: React.CSSProperties;
|
|
73
|
-
/**
|
|
74
|
-
* Sets the Tooltip target element. You have to use it with the `open` property.
|
|
75
|
-
*/
|
|
76
|
-
targetElement?: any;
|
|
77
|
-
/**
|
|
78
|
-
* Specifies the CSS class names which are set to the Tooltip DOM element.
|
|
79
|
-
*/
|
|
80
|
-
tooltipClassName?: string;
|
|
81
|
-
/**
|
|
82
|
-
* Specifies the styles which are set to the Tooltip DOM element.
|
|
83
|
-
*/
|
|
84
|
-
tooltipStyle?: React.CSSProperties;
|
|
85
|
-
/**
|
|
86
|
-
* Fires when the Tooltip is shown.
|
|
87
|
-
*/
|
|
88
|
-
onOpen?: (event: TooltipEvent) => void;
|
|
89
|
-
/**
|
|
90
|
-
* Fires when the Tooltip is hidden.
|
|
91
|
-
*/
|
|
92
|
-
onClose?: (event: TooltipEvent) => void;
|
|
93
|
-
/**
|
|
94
|
-
* Callback called when the Tooltip calculates it's position. Useful to modify the default position behavior.
|
|
95
|
-
* Require to return the `top` and `left` position of the Tooltip.
|
|
96
|
-
*/
|
|
97
|
-
onPosition?: (event: TooltipPositionEvent) => {
|
|
98
|
-
top: number;
|
|
99
|
-
left: number;
|
|
100
|
-
};
|
|
101
|
-
/**
|
|
102
|
-
* Represents a callback function which determines if a Tooltip will be displayed ([see example]({% slug filter_elements_tooltip %})).
|
|
103
|
-
*/
|
|
104
|
-
filter?: (target: HTMLElement) => void;
|
|
105
|
-
/**
|
|
106
|
-
* The milliseconds interval on which the Tooltip will check for title change. By default the Tooltip does not track for title updates.
|
|
107
|
-
*/
|
|
108
|
-
updateInterval?: number;
|
|
109
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @hidden
|
|
3
|
-
*/
|
|
4
|
-
export declare type TooltipPosition = 'right' | 'left' | 'bottom' | 'top' | 'auto';
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export declare const getLeftPosition: (left: any, elementWidth: any, targetElement: any, anchorElement: any, position: any) => any;
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export declare const getTopPosition: (top: any, targetElement: any, elementHeight: any, anchorElement: any, position: any) => any;
|
|
13
|
-
/**
|
|
14
|
-
* @hidden
|
|
15
|
-
*/
|
|
16
|
-
export declare const getDomRect: (currentTarget: any) => any;
|
|
17
|
-
/**
|
|
18
|
-
* @hidden
|
|
19
|
-
*/
|
|
20
|
-
export declare const toolTipSelectors: string[];
|
|
21
|
-
/**
|
|
22
|
-
* @hidden
|
|
23
|
-
*/
|
|
24
|
-
export declare const isTooltipElement: (element: any) => boolean;
|
package/dist/es/tooltip/utils.js
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
var arrowWidth = 10;
|
|
2
|
-
var arrowHeight = 10;
|
|
3
|
-
/**
|
|
4
|
-
* @hidden
|
|
5
|
-
*/
|
|
6
|
-
export var getLeftPosition = function (left, elementWidth, targetElement, anchorElement, position) {
|
|
7
|
-
switch (position) {
|
|
8
|
-
case 'bottom':
|
|
9
|
-
return anchorElement === 'pointer'
|
|
10
|
-
? left - (elementWidth / 2)
|
|
11
|
-
: targetElement.left - (elementWidth / 2) + targetElement.width / 2;
|
|
12
|
-
case 'left':
|
|
13
|
-
return anchorElement === 'pointer'
|
|
14
|
-
? left - elementWidth - arrowWidth
|
|
15
|
-
: targetElement.left - elementWidth - arrowWidth;
|
|
16
|
-
case 'right':
|
|
17
|
-
return anchorElement === 'pointer'
|
|
18
|
-
? left + arrowWidth
|
|
19
|
-
: targetElement.right + arrowWidth;
|
|
20
|
-
case 'top':
|
|
21
|
-
return anchorElement === 'pointer'
|
|
22
|
-
? left - (elementWidth / 2)
|
|
23
|
-
: targetElement.left - (elementWidth / 2) + targetElement.width / 2;
|
|
24
|
-
default:
|
|
25
|
-
if (anchorElement === 'pointer') {
|
|
26
|
-
return left < (window.screen.availWidth / 2)
|
|
27
|
-
? left - arrowWidth
|
|
28
|
-
: left - elementWidth + arrowWidth;
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
return left < (window.screen.availWidth / 2)
|
|
32
|
-
? targetElement.left
|
|
33
|
-
: targetElement.right - elementWidth;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
/**
|
|
38
|
-
* @hidden
|
|
39
|
-
*/
|
|
40
|
-
export var getTopPosition = function (top, targetElement, elementHeight, anchorElement, position) {
|
|
41
|
-
switch (position) {
|
|
42
|
-
case 'bottom':
|
|
43
|
-
return anchorElement === 'pointer'
|
|
44
|
-
? top + arrowHeight
|
|
45
|
-
: targetElement.bottom + arrowHeight;
|
|
46
|
-
case 'left':
|
|
47
|
-
return anchorElement === 'pointer'
|
|
48
|
-
? top - (elementHeight / 2)
|
|
49
|
-
: targetElement.top - (elementHeight / 2) + (targetElement.height / 2);
|
|
50
|
-
case 'right':
|
|
51
|
-
return anchorElement === 'pointer'
|
|
52
|
-
? top - (elementHeight / 2)
|
|
53
|
-
: targetElement.top - (elementHeight / 2) + (targetElement.height / 2);
|
|
54
|
-
case 'top':
|
|
55
|
-
return anchorElement === 'pointer'
|
|
56
|
-
? top - elementHeight - arrowHeight
|
|
57
|
-
: targetElement.top - elementHeight - arrowHeight;
|
|
58
|
-
default:
|
|
59
|
-
if (anchorElement === 'pointer') {
|
|
60
|
-
return top < (window.innerHeight / 2)
|
|
61
|
-
? top + arrowWidth
|
|
62
|
-
: top - elementHeight - arrowWidth;
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
return top < (window.innerHeight / 2)
|
|
66
|
-
? targetElement.bottom + arrowHeight
|
|
67
|
-
: targetElement.top - elementHeight - arrowHeight;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
/**
|
|
72
|
-
* @hidden
|
|
73
|
-
*/
|
|
74
|
-
export var getDomRect = function (currentTarget) {
|
|
75
|
-
if (currentTarget !== null) {
|
|
76
|
-
return currentTarget.getBoundingClientRect();
|
|
77
|
-
}
|
|
78
|
-
return document.body.getBoundingClientRect();
|
|
79
|
-
};
|
|
80
|
-
/**
|
|
81
|
-
* @hidden
|
|
82
|
-
*/
|
|
83
|
-
export var toolTipSelectors = [
|
|
84
|
-
'k-tooltip-content',
|
|
85
|
-
'k-animation-container',
|
|
86
|
-
'k-tooltip',
|
|
87
|
-
'k-tooltip-title',
|
|
88
|
-
'k-tooltip k-tooltip-closable',
|
|
89
|
-
'k-icon k-i-close'
|
|
90
|
-
];
|
|
91
|
-
/**
|
|
92
|
-
* @hidden
|
|
93
|
-
*/
|
|
94
|
-
export var isTooltipElement = function (element) {
|
|
95
|
-
if (element === null) {
|
|
96
|
-
return false;
|
|
97
|
-
}
|
|
98
|
-
var node = element;
|
|
99
|
-
while (node) {
|
|
100
|
-
if (node !== null && node.classList && node.classList.contains('k-tooltip')) {
|
|
101
|
-
return true;
|
|
102
|
-
}
|
|
103
|
-
node.parentNode !== null ? node = node.parentNode : node = false;
|
|
104
|
-
}
|
|
105
|
-
return toolTipSelectors.filter(function (t) { return t === element.className; }).length > 0;
|
|
106
|
-
};
|
package/dist/npm/main.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Tooltip } from './tooltip/Tooltip';
|
|
2
|
-
import { TooltipProps } from './tooltip/TooltipProps';
|
|
3
|
-
import { TooltipEvent, TooltipPositionEvent } from './tooltip/events';
|
|
4
|
-
import { TooltipPosition } from './tooltip/utils';
|
|
5
|
-
import { PopoverCollision } from './popover/interfaces/PopoverCollision';
|
|
6
|
-
import { PopoverMargin } from './popover/interfaces/PopoverMargin';
|
|
7
|
-
import { PopoverOffset } from './popover/interfaces/PopoverOffset';
|
|
8
|
-
import { PopoverOpenEvent } from './popover/interfaces/PopoverOpenEvent';
|
|
9
|
-
import { PopoverCloseEvent } from './popover/interfaces/PopoverCloseEvent';
|
|
10
|
-
import { PopoverPositionEvent } from './popover/interfaces/PopoverPositionEvent';
|
|
11
|
-
import { PopoverAnimation } from './popover/interfaces/PopoverAnimation';
|
|
12
|
-
import { PopoverPosition } from './popover/interfaces/PopoverPosition';
|
|
13
|
-
import { PopoverPositionMode } from './popover/interfaces/PopoverPositionMode';
|
|
14
|
-
import { PopoverProps } from './popover/interfaces/PopoverProps';
|
|
15
|
-
import { Popover, PopoverHandle } from './popover/Popover';
|
|
16
|
-
import { PopoverActionsBar, PopoverActionsBarHandle } from './popover/PopoverActionsBar';
|
|
17
|
-
import { PopoverActionsBarProps } from './popover/interfaces/PopoverActionsBarProps';
|
|
18
|
-
import { PopoverCollisionType } from './popover/interfaces/PopoverCollisionType';
|
|
19
|
-
export { Tooltip, TooltipEvent, TooltipPositionEvent, TooltipProps, TooltipPosition, PopoverCollision, PopoverCollisionType, PopoverMargin, PopoverOffset, PopoverPosition, PopoverPositionMode, PopoverAnimation, PopoverOpenEvent, PopoverCloseEvent, PopoverPositionEvent, PopoverProps, PopoverHandle, Popover, PopoverActionsBarProps, PopoverActionsBarHandle, PopoverActionsBar };
|
package/dist/npm/main.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PopoverActionsBar = exports.Popover = exports.Tooltip = void 0;
|
|
4
|
-
var Tooltip_1 = require("./tooltip/Tooltip");
|
|
5
|
-
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
|
|
6
|
-
var Popover_1 = require("./popover/Popover");
|
|
7
|
-
Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
|
|
8
|
-
var PopoverActionsBar_1 = require("./popover/PopoverActionsBar");
|
|
9
|
-
Object.defineProperty(exports, "PopoverActionsBar", { enumerable: true, get: function () { return PopoverActionsBar_1.PopoverActionsBar; } });
|