@progress/kendo-react-tooltip 4.14.0-dev.202201131520 → 4.14.0
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/README.md +5 -3
- package/dist/cdn/js/kendo-react-tooltip.js +1 -1
- package/dist/es/main.d.ts +19 -5
- package/dist/es/main.js +4 -2
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/popover/Popover.d.ts +15 -0
- package/dist/es/popover/Popover.js +169 -0
- package/dist/es/popover/PopoverActionsBar.d.ts +19 -0
- package/dist/es/popover/PopoverActionsBar.js +23 -0
- package/dist/es/popover/interfaces/Align.d.ts +24 -0
- package/dist/es/{events.js → popover/interfaces/Align.js} +0 -0
- package/dist/es/popover/interfaces/PopoverActionsBarProps.d.ts +10 -0
- package/dist/es/popover/interfaces/PopoverActionsBarProps.js +0 -0
- package/dist/es/popover/interfaces/PopoverAnimation.d.ts +6 -0
- package/dist/es/popover/interfaces/PopoverAnimation.js +0 -0
- package/dist/es/popover/interfaces/PopoverCloseEvent.d.ts +10 -0
- package/dist/es/popover/interfaces/PopoverCloseEvent.js +0 -0
- package/dist/es/popover/interfaces/PopoverCollision.d.ts +14 -0
- package/dist/es/popover/interfaces/PopoverCollision.js +0 -0
- package/dist/es/popover/interfaces/PopoverCollisionType.d.ts +10 -0
- package/dist/es/popover/interfaces/PopoverCollisionType.js +0 -0
- package/dist/es/popover/interfaces/PopoverMargin.d.ts +14 -0
- package/dist/es/popover/interfaces/PopoverMargin.js +0 -0
- package/dist/es/popover/interfaces/PopoverOffset.d.ts +14 -0
- package/dist/es/popover/interfaces/PopoverOffset.js +0 -0
- package/dist/es/popover/interfaces/PopoverOpenEvent.d.ts +10 -0
- package/dist/es/popover/interfaces/PopoverOpenEvent.js +0 -0
- package/dist/es/popover/interfaces/PopoverPosition.d.ts +9 -0
- package/dist/es/popover/interfaces/PopoverPosition.js +0 -0
- package/dist/es/popover/interfaces/PopoverPositionEvent.d.ts +18 -0
- package/dist/es/popover/interfaces/PopoverPositionEvent.js +0 -0
- package/dist/es/popover/interfaces/PopoverPositionMode.d.ts +5 -0
- package/dist/es/popover/interfaces/PopoverPositionMode.js +0 -0
- package/dist/es/popover/interfaces/PopoverProps.d.ts +111 -0
- package/dist/es/popover/interfaces/PopoverProps.js +0 -0
- package/dist/es/{Tooltip.d.ts → tooltip/Tooltip.d.ts} +0 -0
- package/dist/es/{Tooltip.js → tooltip/Tooltip.js} +1 -1
- package/dist/es/{TooltipProps.d.ts → tooltip/TooltipProps.d.ts} +0 -0
- package/dist/es/{TooltipProps.js → tooltip/TooltipProps.js} +0 -0
- package/dist/es/{events.d.ts → tooltip/events.d.ts} +0 -0
- package/dist/es/tooltip/events.js +0 -0
- package/dist/es/{utils.d.ts → tooltip/utils.d.ts} +0 -0
- package/dist/es/{utils.js → tooltip/utils.js} +0 -0
- package/dist/npm/main.d.ts +19 -5
- package/dist/npm/main.js +5 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/popover/Popover.d.ts +15 -0
- package/dist/npm/popover/Popover.js +171 -0
- package/dist/npm/popover/PopoverActionsBar.d.ts +19 -0
- package/dist/npm/popover/PopoverActionsBar.js +25 -0
- package/dist/npm/popover/interfaces/Align.d.ts +24 -0
- package/dist/npm/{events.js → popover/interfaces/Align.js} +0 -0
- package/dist/npm/popover/interfaces/PopoverActionsBarProps.d.ts +10 -0
- package/dist/npm/popover/interfaces/PopoverActionsBarProps.js +2 -0
- package/dist/npm/popover/interfaces/PopoverAnimation.d.ts +6 -0
- package/dist/npm/popover/interfaces/PopoverAnimation.js +2 -0
- package/dist/npm/popover/interfaces/PopoverCloseEvent.d.ts +10 -0
- package/dist/npm/popover/interfaces/PopoverCloseEvent.js +2 -0
- package/dist/npm/popover/interfaces/PopoverCollision.d.ts +14 -0
- package/dist/npm/popover/interfaces/PopoverCollision.js +2 -0
- package/dist/npm/popover/interfaces/PopoverCollisionType.d.ts +10 -0
- package/dist/npm/popover/interfaces/PopoverCollisionType.js +2 -0
- package/dist/npm/popover/interfaces/PopoverMargin.d.ts +14 -0
- package/dist/npm/popover/interfaces/PopoverMargin.js +2 -0
- package/dist/npm/popover/interfaces/PopoverOffset.d.ts +14 -0
- package/dist/npm/popover/interfaces/PopoverOffset.js +2 -0
- package/dist/npm/popover/interfaces/PopoverOpenEvent.d.ts +10 -0
- package/dist/npm/popover/interfaces/PopoverOpenEvent.js +2 -0
- package/dist/npm/popover/interfaces/PopoverPosition.d.ts +9 -0
- package/dist/npm/popover/interfaces/PopoverPosition.js +2 -0
- package/dist/npm/popover/interfaces/PopoverPositionEvent.d.ts +18 -0
- package/dist/npm/popover/interfaces/PopoverPositionEvent.js +2 -0
- package/dist/npm/popover/interfaces/PopoverPositionMode.d.ts +5 -0
- package/dist/npm/popover/interfaces/PopoverPositionMode.js +2 -0
- package/dist/npm/popover/interfaces/PopoverProps.d.ts +111 -0
- package/dist/npm/popover/interfaces/PopoverProps.js +2 -0
- package/dist/npm/{Tooltip.d.ts → tooltip/Tooltip.d.ts} +0 -0
- package/dist/npm/{Tooltip.js → tooltip/Tooltip.js} +1 -1
- package/dist/npm/{TooltipProps.d.ts → tooltip/TooltipProps.d.ts} +0 -0
- package/dist/npm/{TooltipProps.js → tooltip/TooltipProps.js} +0 -0
- package/dist/npm/{events.d.ts → tooltip/events.d.ts} +0 -0
- package/dist/npm/tooltip/events.js +2 -0
- package/dist/npm/{utils.d.ts → tooltip/utils.d.ts} +0 -0
- package/dist/npm/{utils.js → tooltip/utils.js} +0 -0
- package/dist/systemjs/kendo-react-tooltip.js +1 -1
- package/package.json +16 -6
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { PopoverCollisionType } from './PopoverCollisionType';
|
|
2
|
+
/**
|
|
3
|
+
* Defines the horizontal and vertical collision behavior of the Popover.
|
|
4
|
+
*/
|
|
5
|
+
export interface PopoverCollision {
|
|
6
|
+
/**
|
|
7
|
+
* Defines the horizontal collision behavior of the Popover.
|
|
8
|
+
*/
|
|
9
|
+
horizontal: PopoverCollisionType;
|
|
10
|
+
/**
|
|
11
|
+
* Defines the vertical collision behavior of the Popover.
|
|
12
|
+
*/
|
|
13
|
+
vertical: PopoverCollisionType;
|
|
14
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CollisionType as CollisionTypeBase } from '@progress/kendo-react-popup';
|
|
2
|
+
/**
|
|
3
|
+
* Defines the possible collision behavior when the Popover is not fully visible.
|
|
4
|
+
*
|
|
5
|
+
* The available options are:
|
|
6
|
+
* - `fit`—Moves the Popover horizontally until it is fully displayed in the viewport.
|
|
7
|
+
* - `flip`—Flips the Popover position based on the origin and the position properties.
|
|
8
|
+
* - `none`—The Popover is rendered at its original position. Usable when the Popover is focused on open and the page is scrolled to it.
|
|
9
|
+
*/
|
|
10
|
+
export declare type PopoverCollisionType = CollisionTypeBase;
|
|
File without changes
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Margin as MarginBase } from '@progress/kendo-react-popup';
|
|
2
|
+
/**
|
|
3
|
+
* Defines the horizontal and the vertical margin offset of the component.
|
|
4
|
+
*/
|
|
5
|
+
export interface PopoverMargin extends MarginBase {
|
|
6
|
+
/**
|
|
7
|
+
* Defines the possible horizontal margin value.
|
|
8
|
+
*/
|
|
9
|
+
horizontal: number;
|
|
10
|
+
/**
|
|
11
|
+
* Defines the possible vertical margin value.
|
|
12
|
+
*/
|
|
13
|
+
vertical: number;
|
|
14
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Offset as OffsetBase } from '@progress/kendo-react-popup';
|
|
2
|
+
/**
|
|
3
|
+
* The offset position of the Popover.
|
|
4
|
+
*/
|
|
5
|
+
export interface PopoverOffset extends OffsetBase {
|
|
6
|
+
/**
|
|
7
|
+
* Defines the top position of the Popover.
|
|
8
|
+
*/
|
|
9
|
+
top: number;
|
|
10
|
+
/**
|
|
11
|
+
* Defines the left position of the Popover.
|
|
12
|
+
*/
|
|
13
|
+
left: number;
|
|
14
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { PopoverHandle } from '../Popover';
|
|
2
|
+
/**
|
|
3
|
+
* Represents the object of the `Position` Popover event.
|
|
4
|
+
*/
|
|
5
|
+
export interface PopoverPositionEvent {
|
|
6
|
+
/**
|
|
7
|
+
* An event target.
|
|
8
|
+
*/
|
|
9
|
+
target: PopoverHandle;
|
|
10
|
+
/**
|
|
11
|
+
* Indicates if the position is fitted.
|
|
12
|
+
*/
|
|
13
|
+
fitted: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Indicates if the position is flipped.
|
|
16
|
+
*/
|
|
17
|
+
flipped: boolean;
|
|
18
|
+
}
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PopoverCollision } from './PopoverCollision';
|
|
3
|
+
import { PopoverMargin } from './PopoverMargin';
|
|
4
|
+
import { PopoverOffset } from './PopoverOffset';
|
|
5
|
+
import { PopoverOpenEvent } from './PopoverOpenEvent';
|
|
6
|
+
import { PopoverCloseEvent } from './PopoverCloseEvent';
|
|
7
|
+
import { PopoverAnimation } from './PopoverAnimation';
|
|
8
|
+
import { PopoverPosition } from './PopoverPosition';
|
|
9
|
+
import { PopoverPositionEvent } from './PopoverPositionEvent';
|
|
10
|
+
import { PopoverPositionMode } from './PopoverPositionMode';
|
|
11
|
+
export interface PopoverProps {
|
|
12
|
+
/**
|
|
13
|
+
* Specifies the title of the Popover component.
|
|
14
|
+
*/
|
|
15
|
+
title?: React.ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Specifies the position of the Popover element relative to the current anchor or offset.
|
|
18
|
+
*/
|
|
19
|
+
position?: PopoverPosition;
|
|
20
|
+
/**
|
|
21
|
+
* Controls the Popover callout element. If set to `false`, the callout element will not be rendered.
|
|
22
|
+
*/
|
|
23
|
+
callout?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Controls the Popover animation. By default, the opening and closing animations are enabled.
|
|
26
|
+
*/
|
|
27
|
+
animate?: boolean | PopoverAnimation;
|
|
28
|
+
/**
|
|
29
|
+
* Specifies the element which will be used as an anchor. The Popover opens next to that element.
|
|
30
|
+
*/
|
|
31
|
+
anchor?: HTMLElement | null;
|
|
32
|
+
/**
|
|
33
|
+
* Defines the container to which the Popover will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
|
|
34
|
+
*/
|
|
35
|
+
appendTo?: HTMLElement | null;
|
|
36
|
+
/**
|
|
37
|
+
* Configures the collision behavior of the Popover. By default, it's set to `none`.
|
|
38
|
+
*/
|
|
39
|
+
collision?: PopoverCollision;
|
|
40
|
+
/**
|
|
41
|
+
* Configures the margin value that will be added to the Popover dimensions
|
|
42
|
+
* in pixels and leaves a blank space between the Popover and the anchor.
|
|
43
|
+
* By default, it's automatically set based on the Popover position prop.
|
|
44
|
+
*
|
|
45
|
+
*/
|
|
46
|
+
margin?: PopoverMargin;
|
|
47
|
+
/**
|
|
48
|
+
* Specifies the position mode of the component. By default, the Popover uses fixed positioning.
|
|
49
|
+
* To make the Popover acquire absolute positioning, set this option to `absolute`.
|
|
50
|
+
*
|
|
51
|
+
* > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popover.
|
|
52
|
+
*/
|
|
53
|
+
positionMode?: PopoverPositionMode;
|
|
54
|
+
/**
|
|
55
|
+
* Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
|
|
56
|
+
*
|
|
57
|
+
* The document or container scale is required to compute the popover position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE.
|
|
58
|
+
*
|
|
59
|
+
* > Using this token is not necessary for user-applied browser zoom.
|
|
60
|
+
*
|
|
61
|
+
*/
|
|
62
|
+
scale?: number;
|
|
63
|
+
/**
|
|
64
|
+
* Specifies the absolute position of the element.
|
|
65
|
+
* The Popover opens next to that point. The pivot point of the Popover is defined by the `position` configuration option.
|
|
66
|
+
* The boundary detection is applied by using the window viewport.
|
|
67
|
+
*/
|
|
68
|
+
offset?: PopoverOffset;
|
|
69
|
+
/**
|
|
70
|
+
* Specifies a list of CSS classes that will be added to the internal animated element.
|
|
71
|
+
*/
|
|
72
|
+
popoverClass?: string | Array<string> | {
|
|
73
|
+
[key: string]: boolean;
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* Specifies a list of CSS classes that will be added to the Popover element.
|
|
77
|
+
*/
|
|
78
|
+
className?: string | Array<string>;
|
|
79
|
+
/**
|
|
80
|
+
* Specifies the id that will be added to the Popover element.
|
|
81
|
+
*/
|
|
82
|
+
id?: string;
|
|
83
|
+
/**
|
|
84
|
+
* Represents the styles that are applied to the Popover.
|
|
85
|
+
*/
|
|
86
|
+
style?: React.CSSProperties;
|
|
87
|
+
/**
|
|
88
|
+
* Represents the styles that are applied to the content element of the Popover.
|
|
89
|
+
*/
|
|
90
|
+
contentStyle?: React.CSSProperties;
|
|
91
|
+
/**
|
|
92
|
+
* Controls the Popover visibility. Defaults to `false`.
|
|
93
|
+
*/
|
|
94
|
+
show?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Fires after the Popover is opened and the opening animation ends.
|
|
97
|
+
*/
|
|
98
|
+
onOpen?: (event: PopoverOpenEvent) => void;
|
|
99
|
+
/**
|
|
100
|
+
* Fires after the Popover is closed.
|
|
101
|
+
*/
|
|
102
|
+
onClose?: (event: PopoverCloseEvent) => void;
|
|
103
|
+
/**
|
|
104
|
+
* Fires after the Popover position is set.
|
|
105
|
+
*/
|
|
106
|
+
onPosition?: (event: PopoverPositionEvent) => void;
|
|
107
|
+
/**
|
|
108
|
+
* @hidden
|
|
109
|
+
*/
|
|
110
|
+
children?: React.ReactNode;
|
|
111
|
+
}
|
|
File without changes
|
|
File without changes
|
|
@@ -37,7 +37,7 @@ import * as PropTypes from 'prop-types';
|
|
|
37
37
|
import { dispatchEvent, classNames, ZIndexContext } from '@progress/kendo-react-common';
|
|
38
38
|
import { getLeftPosition, getTopPosition, getDomRect, isTooltipElement } from './utils';
|
|
39
39
|
import { validatePackage } from '@progress/kendo-react-common';
|
|
40
|
-
import { packageMetadata } from '
|
|
40
|
+
import { packageMetadata } from './../package-metadata';
|
|
41
41
|
var DEFAULT_TOOLTIP_ZINDEX = 100;
|
|
42
42
|
var Tooltip = /** @class */ (function (_super) {
|
|
43
43
|
__extends(Tooltip, _super);
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/dist/npm/main.d.ts
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
import { Tooltip } from './Tooltip';
|
|
2
|
-
import { TooltipProps } from './TooltipProps';
|
|
3
|
-
import { TooltipEvent, TooltipPositionEvent } from './events';
|
|
4
|
-
import { TooltipPosition } from './utils';
|
|
5
|
-
|
|
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
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
var Tooltip_1 = require("./Tooltip");
|
|
3
|
+
var Tooltip_1 = require("./tooltip/Tooltip");
|
|
4
4
|
exports.Tooltip = Tooltip_1.Tooltip;
|
|
5
|
+
var Popover_1 = require("./popover/Popover");
|
|
6
|
+
exports.Popover = Popover_1.Popover;
|
|
7
|
+
var PopoverActionsBar_1 = require("./popover/PopoverActionsBar");
|
|
8
|
+
exports.PopoverActionsBar = PopoverActionsBar_1.PopoverActionsBar;
|
|
@@ -7,7 +7,7 @@ exports.packageMetadata = {
|
|
|
7
7
|
name: '@progress/kendo-react-tooltip',
|
|
8
8
|
productName: 'KendoReact',
|
|
9
9
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
10
|
-
publishDate:
|
|
10
|
+
publishDate: 1642422768,
|
|
11
11
|
version: '',
|
|
12
12
|
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'
|
|
13
13
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PopoverProps } from './interfaces/PopoverProps';
|
|
3
|
+
/**
|
|
4
|
+
* Represents the Object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the Popover component.
|
|
5
|
+
*/
|
|
6
|
+
export interface PopoverHandle {
|
|
7
|
+
/**
|
|
8
|
+
* The props of the Popover.
|
|
9
|
+
*/
|
|
10
|
+
props: PopoverProps;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Represents the Popover component.
|
|
14
|
+
*/
|
|
15
|
+
export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var React = require("react");
|
|
4
|
+
var PropTypes = require("prop-types");
|
|
5
|
+
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
6
|
+
var kendo_react_common_2 = require("@progress/kendo-react-common");
|
|
7
|
+
var package_metadata_1 = require("./../package-metadata");
|
|
8
|
+
var kendo_react_popup_1 = require("@progress/kendo-react-popup");
|
|
9
|
+
var PopoverActionsBar_1 = require("./PopoverActionsBar");
|
|
10
|
+
var DEFAULT_POPOVER_ZINDEX = 12000;
|
|
11
|
+
var ZINDEX_POPOVER_STEP = 2000;
|
|
12
|
+
var CALLOUT_SIZE = 15;
|
|
13
|
+
var calloutPositions = {
|
|
14
|
+
top: 'k-callout-s',
|
|
15
|
+
left: 'k-callout-e',
|
|
16
|
+
bottom: 'k-callout-n',
|
|
17
|
+
right: 'k-callout-w'
|
|
18
|
+
};
|
|
19
|
+
var calloutFlippedPositions = {
|
|
20
|
+
top: 'k-callout-n',
|
|
21
|
+
left: 'k-callout-w',
|
|
22
|
+
bottom: 'k-callout-s',
|
|
23
|
+
right: 'k-callout-e'
|
|
24
|
+
};
|
|
25
|
+
var popupAlignByPosition = {
|
|
26
|
+
top: { vertical: 'bottom', horizontal: 'center' },
|
|
27
|
+
left: { vertical: 'center', horizontal: 'right' },
|
|
28
|
+
bottom: { vertical: 'top', horizontal: 'center' },
|
|
29
|
+
right: { vertical: 'center', horizontal: 'left' }
|
|
30
|
+
};
|
|
31
|
+
var anchorAlignByPosition = {
|
|
32
|
+
top: { vertical: 'top', horizontal: 'center' },
|
|
33
|
+
left: { vertical: 'center', horizontal: 'left' },
|
|
34
|
+
bottom: { vertical: 'bottom', horizontal: 'center' },
|
|
35
|
+
right: { vertical: 'center', horizontal: 'right' }
|
|
36
|
+
};
|
|
37
|
+
var getActionBar = function (children) {
|
|
38
|
+
return React.Children.toArray(children).filter(function (child) { return child && child.type === PopoverActionsBar_1.PopoverActionsBar; });
|
|
39
|
+
};
|
|
40
|
+
var getContent = function (children) {
|
|
41
|
+
return React.Children.toArray(children).filter(function (child) {
|
|
42
|
+
return child && child.type !== PopoverActionsBar_1.PopoverActionsBar;
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Represents the Popover component.
|
|
47
|
+
*/
|
|
48
|
+
exports.Popover = React.forwardRef(function (props, ref) {
|
|
49
|
+
kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
|
|
50
|
+
var callout = props.callout, position = props.position, title = props.title, children = props.children, show = props.show, anchor = props.anchor, appendTo = props.appendTo, offset = props.offset, animate = props.animate, positionMode = props.positionMode, scale = props.scale, popoverClass = props.popoverClass, className = props.className, id = props.id, style = props.style, collision = props.collision, contentStyle = props.contentStyle, onPosition = props.onPosition, onClose = props.onClose, onOpen = props.onOpen;
|
|
51
|
+
var _a = React.useState(false), flipped = _a[0], setFlipped = _a[1];
|
|
52
|
+
var isVertical = position === 'top' || position === 'bottom';
|
|
53
|
+
var margin = props.margin || {
|
|
54
|
+
vertical: callout && isVertical ? CALLOUT_SIZE : 0,
|
|
55
|
+
horizontal: callout && !isVertical ? CALLOUT_SIZE : 0
|
|
56
|
+
};
|
|
57
|
+
var popupAlign = popupAlignByPosition[position];
|
|
58
|
+
var anchorAlign = anchorAlignByPosition[position];
|
|
59
|
+
var zindexContext = React.useContext(kendo_react_common_1.ZIndexContext);
|
|
60
|
+
var currentZindex = zindexContext ? zindexContext + ZINDEX_POPOVER_STEP : DEFAULT_POPOVER_ZINDEX;
|
|
61
|
+
var popoverRef = React.useRef(null);
|
|
62
|
+
React.useImperativeHandle(popoverRef, function () {
|
|
63
|
+
return { props: props };
|
|
64
|
+
});
|
|
65
|
+
React.useImperativeHandle(ref, function () { return popoverRef.current; });
|
|
66
|
+
var handlePosition = React.useCallback(function (e) {
|
|
67
|
+
setTimeout(function () { return setFlipped(e.flipped); });
|
|
68
|
+
if (onPosition) {
|
|
69
|
+
var event_1 = { target: popoverRef.current, flipped: e.flipped, fitted: e.fitted };
|
|
70
|
+
onPosition.call(undefined, event_1);
|
|
71
|
+
}
|
|
72
|
+
}, [onPosition, setFlipped]);
|
|
73
|
+
var handleOpen = React.useCallback(function () {
|
|
74
|
+
if (onOpen) {
|
|
75
|
+
var event_2 = { target: popoverRef.current };
|
|
76
|
+
onOpen.call(undefined, event_2);
|
|
77
|
+
}
|
|
78
|
+
}, [onOpen]);
|
|
79
|
+
var handleClose = React.useCallback(function () {
|
|
80
|
+
if (onClose) {
|
|
81
|
+
var event_3 = { target: popoverRef.current };
|
|
82
|
+
onClose.call(undefined, event_3);
|
|
83
|
+
}
|
|
84
|
+
}, [onClose]);
|
|
85
|
+
var basePopupClass = { 'k-popover': true, 'k-popup': false };
|
|
86
|
+
if (Array.isArray(popoverClass)) {
|
|
87
|
+
popoverClass.forEach(function (currentClass) { return basePopupClass[currentClass] = true; });
|
|
88
|
+
}
|
|
89
|
+
else if (typeof popoverClass === 'object') {
|
|
90
|
+
Object.keys(popoverClass)
|
|
91
|
+
.forEach(function (key) {
|
|
92
|
+
basePopupClass[key] = popoverClass[key];
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
else if (popoverClass) {
|
|
96
|
+
basePopupClass[popoverClass] = true;
|
|
97
|
+
}
|
|
98
|
+
var calloutClass = flipped ? calloutFlippedPositions[position] : calloutPositions[position];
|
|
99
|
+
return (React.createElement(kendo_react_common_1.ZIndexContext.Provider, { value: currentZindex },
|
|
100
|
+
React.createElement(kendo_react_popup_1.Popup, { id: id, animate: animate, collision: collision, anchor: anchor, offset: offset, margin: margin, popupAlign: popupAlign, anchorAlign: anchorAlign, appendTo: appendTo, show: show, scale: scale, positionMode: positionMode, style: style, className: className, popupClass: basePopupClass, onOpen: handleOpen, onClose: handleClose, onPosition: handlePosition },
|
|
101
|
+
callout && position &&
|
|
102
|
+
(React.createElement("div", { className: kendo_react_common_1.classNames('k-popover-callout', calloutClass) })),
|
|
103
|
+
title && (React.createElement("div", { className: 'k-popover-header' }, title)),
|
|
104
|
+
React.createElement("div", { className: "k-popover-body", style: contentStyle }, getContent(children)),
|
|
105
|
+
getActionBar(children))));
|
|
106
|
+
});
|
|
107
|
+
var defaultProps = {
|
|
108
|
+
callout: true,
|
|
109
|
+
position: 'top',
|
|
110
|
+
collision: {
|
|
111
|
+
horizontal: 'none',
|
|
112
|
+
vertical: 'none'
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
exports.Popover.propTypes = {
|
|
116
|
+
callout: PropTypes.bool,
|
|
117
|
+
title: PropTypes.string,
|
|
118
|
+
position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
|
|
119
|
+
show: PropTypes.bool,
|
|
120
|
+
animate: PropTypes.oneOfType([
|
|
121
|
+
PropTypes.bool,
|
|
122
|
+
PropTypes.shape({
|
|
123
|
+
openDuration: PropTypes.number,
|
|
124
|
+
closeDuration: PropTypes.number
|
|
125
|
+
})
|
|
126
|
+
]),
|
|
127
|
+
anchor: function (props) {
|
|
128
|
+
var anchor = props.anchor;
|
|
129
|
+
if (anchor && typeof anchor.nodeType !== 'number') {
|
|
130
|
+
return new Error('Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed.');
|
|
131
|
+
}
|
|
132
|
+
return null;
|
|
133
|
+
},
|
|
134
|
+
appendTo: function (props) {
|
|
135
|
+
var element = props.appendTo;
|
|
136
|
+
if (element && typeof element.nodeType !== 'number') {
|
|
137
|
+
return new Error('Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed.');
|
|
138
|
+
}
|
|
139
|
+
return null;
|
|
140
|
+
},
|
|
141
|
+
positionMode: PropTypes.oneOf([
|
|
142
|
+
'fixed',
|
|
143
|
+
'absolute'
|
|
144
|
+
]),
|
|
145
|
+
scale: PropTypes.number,
|
|
146
|
+
offset: PropTypes.shape({
|
|
147
|
+
left: PropTypes.number,
|
|
148
|
+
top: PropTypes.number
|
|
149
|
+
}),
|
|
150
|
+
children: PropTypes.oneOfType([
|
|
151
|
+
PropTypes.element,
|
|
152
|
+
PropTypes.node
|
|
153
|
+
]),
|
|
154
|
+
className: PropTypes.oneOfType([
|
|
155
|
+
PropTypes.string,
|
|
156
|
+
PropTypes.arrayOf(PropTypes.string),
|
|
157
|
+
PropTypes.object
|
|
158
|
+
]),
|
|
159
|
+
id: PropTypes.string,
|
|
160
|
+
popoverClass: PropTypes.oneOfType([
|
|
161
|
+
PropTypes.string,
|
|
162
|
+
PropTypes.arrayOf(PropTypes.string),
|
|
163
|
+
PropTypes.object
|
|
164
|
+
]),
|
|
165
|
+
style: PropTypes.object,
|
|
166
|
+
onClose: PropTypes.func,
|
|
167
|
+
onPosition: PropTypes.func,
|
|
168
|
+
onOpen: PropTypes.func
|
|
169
|
+
};
|
|
170
|
+
exports.Popover.defaultProps = defaultProps;
|
|
171
|
+
exports.Popover.displayName = 'KendoReactPopover';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { PopoverActionsBarProps } from './interfaces/PopoverActionsBarProps';
|
|
3
|
+
/**
|
|
4
|
+
* Represents the Object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the PopoverActionBar component.
|
|
5
|
+
*/
|
|
6
|
+
export interface PopoverActionsBarHandle {
|
|
7
|
+
/**
|
|
8
|
+
* The props of the PopoverActionsBar.
|
|
9
|
+
*/
|
|
10
|
+
props: PopoverActionsBarProps;
|
|
11
|
+
/**
|
|
12
|
+
* The current element or `null` if there is none.
|
|
13
|
+
*/
|
|
14
|
+
element: HTMLDivElement | null;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Represents the PopoverActionsBar component.
|
|
18
|
+
*/
|
|
19
|
+
export declare const PopoverActionsBar: React.ForwardRefExoticComponent<PopoverActionsBarProps & React.RefAttributes<PopoverActionsBarHandle>>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var React = require("react");
|
|
4
|
+
var PropTypes = require("prop-types");
|
|
5
|
+
/**
|
|
6
|
+
* Represents the PopoverActionsBar component.
|
|
7
|
+
*/
|
|
8
|
+
exports.PopoverActionsBar = React.forwardRef(function (props, ref) {
|
|
9
|
+
var elementRef = React.useRef(null);
|
|
10
|
+
var popoverRef = React.useRef(null);
|
|
11
|
+
React.useImperativeHandle(popoverRef, function () {
|
|
12
|
+
return { props: props, element: elementRef.current };
|
|
13
|
+
});
|
|
14
|
+
React.useImperativeHandle(ref, function () { return popoverRef.current; });
|
|
15
|
+
return (React.createElement("div", { ref: elementRef, className: "k-popover-actions k-actions k-actions-stretched", style: { position: 'relative' } }, props.children));
|
|
16
|
+
});
|
|
17
|
+
var defaultProps = {};
|
|
18
|
+
exports.PopoverActionsBar.propTypes = {
|
|
19
|
+
children: PropTypes.oneOfType([
|
|
20
|
+
PropTypes.element,
|
|
21
|
+
PropTypes.node
|
|
22
|
+
])
|
|
23
|
+
};
|
|
24
|
+
exports.PopoverActionsBar.defaultProps = defaultProps;
|
|
25
|
+
exports.PopoverActionsBar.displayName = 'KendoReactPopoverActionsBar';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Align as AlignBase } from '@progress/kendo-react-popup';
|
|
2
|
+
/**
|
|
3
|
+
* Defines the horizontal and vertical aligning point of the Popup.
|
|
4
|
+
*/
|
|
5
|
+
export interface Align extends AlignBase {
|
|
6
|
+
/**
|
|
7
|
+
* Defines the possible horizontal point values that are relative to the anchor or the Popup.
|
|
8
|
+
*
|
|
9
|
+
* The available options are:
|
|
10
|
+
* - `left`—Uses the leftmost point of the anchor element.
|
|
11
|
+
* - `center`—Uses the center point of the anchor element.
|
|
12
|
+
* - `right`—Uses the rightmost point of the anchor element.
|
|
13
|
+
*/
|
|
14
|
+
horizontal: 'left' | 'center' | 'right';
|
|
15
|
+
/**
|
|
16
|
+
* Defines the possible vertical point values that are relative to the anchor or the Popup.
|
|
17
|
+
*
|
|
18
|
+
* The available options are:
|
|
19
|
+
* - `top`—Uses the top point of the anchor element.
|
|
20
|
+
* - `center`—Uses the center point of the anchor element.
|
|
21
|
+
* - `bottom`—Uses the bottom point of the anchor element.
|
|
22
|
+
*/
|
|
23
|
+
vertical: 'top' | 'center' | 'bottom';
|
|
24
|
+
}
|
|
File without changes
|