gd-bs 6.6.15 → 6.6.16
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/build/components/tooltip/index.js +39 -16
- package/dist/gd-bs-icons.js +1 -1
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.d.ts +6 -1
- package/dist/gd-bs.js +1 -1
- package/dist/gd-bs.min.js +1 -1
- package/package.json +1 -1
- package/src/components/tooltip/index.ts +41 -19
- package/src/components/tooltip/types.d.ts +6 -1
package/package.json
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import tippy, { animateFill, followCursor, inlinePositioning, sticky } from "tippy.js";
|
|
2
2
|
import { ITippyProps } from "../types";
|
|
3
3
|
import { ITooltip, ITooltipProps } from "./types";
|
|
4
|
-
import { IButton } from "../button/types";
|
|
5
4
|
import { Base } from "../base";
|
|
5
|
+
import { IButton } from "../button/types";
|
|
6
6
|
import { Button, ButtonTypes } from "../button";
|
|
7
|
+
import { IDropdown } from "../dropdown/types";
|
|
8
|
+
import { Dropdown, DropdownTypes } from "../dropdown";
|
|
7
9
|
import { appendContent } from "../common";
|
|
8
10
|
|
|
9
11
|
/**
|
|
@@ -49,6 +51,7 @@ export enum TooltipPlacements {
|
|
|
49
51
|
*/
|
|
50
52
|
class _Tooltip extends Base<ITooltipProps> {
|
|
51
53
|
private _btn: IButton = null;
|
|
54
|
+
private _ddl: IDropdown = null;
|
|
52
55
|
private _elContent: HTMLElement = null;
|
|
53
56
|
private _tippy = null;
|
|
54
57
|
|
|
@@ -67,21 +70,34 @@ class _Tooltip extends Base<ITooltipProps> {
|
|
|
67
70
|
private configure() {
|
|
68
71
|
// See if the target element was not defined
|
|
69
72
|
if (this.props.target == null) {
|
|
70
|
-
//
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
//
|
|
77
|
-
|
|
78
|
-
|
|
73
|
+
// See if the dropdown property exists
|
|
74
|
+
if (this.props.ddlProps) {
|
|
75
|
+
// Set the default properties
|
|
76
|
+
let ddlProps = this.props.ddlProps;
|
|
77
|
+
ddlProps.type = ddlProps.type || DropdownTypes.OutlinePrimary;
|
|
78
|
+
|
|
79
|
+
// Create the dropdown
|
|
80
|
+
this._ddl = Dropdown(ddlProps);
|
|
81
|
+
|
|
82
|
+
// Update the element
|
|
83
|
+
this.el = this._ddl.el;
|
|
84
|
+
} else {
|
|
85
|
+
// Default the toggle property for the button
|
|
86
|
+
let btnProps = this.props.btnProps || {};
|
|
87
|
+
btnProps.type = btnProps.type || ButtonTypes.OutlineSecondary
|
|
88
|
+
|
|
89
|
+
// See if the content is text
|
|
90
|
+
if (typeof (this.props.content) === "string") {
|
|
91
|
+
// Set the label
|
|
92
|
+
btnProps.description = this.props.content;
|
|
93
|
+
}
|
|
79
94
|
|
|
80
|
-
|
|
81
|
-
|
|
95
|
+
// Create the button
|
|
96
|
+
this._btn = Button(btnProps);
|
|
82
97
|
|
|
83
|
-
|
|
84
|
-
|
|
98
|
+
// Update the element
|
|
99
|
+
this.el = this._btn.el;
|
|
100
|
+
}
|
|
85
101
|
}
|
|
86
102
|
|
|
87
103
|
// Configure the options
|
|
@@ -310,16 +326,21 @@ class _Tooltip extends Base<ITooltipProps> {
|
|
|
310
326
|
// Reference to the button
|
|
311
327
|
get button(): IButton { return this._btn; }
|
|
312
328
|
|
|
329
|
+
// Reference to the dropdown
|
|
330
|
+
get ddl(): IDropdown { return this._ddl; }
|
|
331
|
+
|
|
313
332
|
// Disbles the tooltip
|
|
314
333
|
disable() {
|
|
315
|
-
// Disable the button
|
|
334
|
+
// Disable the button or dropdown
|
|
316
335
|
this._btn ? this._btn.disable() : null;
|
|
336
|
+
this._ddl ? this._ddl.disable() : null;
|
|
317
337
|
}
|
|
318
338
|
|
|
319
339
|
// Enables the tooltip
|
|
320
340
|
enable() {
|
|
321
|
-
// Enable the button
|
|
341
|
+
// Enable the button or dropdown
|
|
322
342
|
this._btn ? this._btn.enable() : null;
|
|
343
|
+
this._ddl ? this._ddl.enable() : null;
|
|
323
344
|
}
|
|
324
345
|
|
|
325
346
|
// Hides the tooltip
|
|
@@ -339,10 +360,11 @@ class _Tooltip extends Base<ITooltipProps> {
|
|
|
339
360
|
// Set the tippy content
|
|
340
361
|
this.tippy.setContent(content);
|
|
341
362
|
|
|
342
|
-
// See if the
|
|
343
|
-
if (
|
|
363
|
+
// See if the content is a string
|
|
364
|
+
if (typeof (content) === "string") {
|
|
344
365
|
// Update the content
|
|
345
|
-
this._btn.el.setAttribute("aria-description", content);
|
|
366
|
+
this._btn ? this._btn.el.setAttribute("aria-description", content) : null;
|
|
367
|
+
this._ddl ? this._ddl.el.setAttribute("aria-description", content) : null;
|
|
346
368
|
}
|
|
347
369
|
}
|
|
348
370
|
|
|
@@ -53,13 +53,14 @@ export const TooltipTypes: ITooltipTypes;
|
|
|
53
53
|
|
|
54
54
|
import { IBaseProps, ITippyProps } from "../types";
|
|
55
55
|
import { IButtonProps, IButton } from "../button/types";
|
|
56
|
+
import { IDropdownProps, IDropdown } from "../dropdown/types";
|
|
56
57
|
|
|
57
58
|
/**
|
|
58
59
|
* Tooltip
|
|
59
60
|
*/
|
|
60
61
|
export interface ITooltip {
|
|
61
62
|
/** Reference to the button. */
|
|
62
|
-
button
|
|
63
|
+
button?: IButton;
|
|
63
64
|
|
|
64
65
|
/** The element. */
|
|
65
66
|
el: HTMLButtonElement;
|
|
@@ -70,6 +71,9 @@ export interface ITooltip {
|
|
|
70
71
|
/** Hides an element’s tooltip. */
|
|
71
72
|
hide: () => void;
|
|
72
73
|
|
|
74
|
+
/** Reference to the dropdown. */
|
|
75
|
+
ddl?: IDropdown;
|
|
76
|
+
|
|
73
77
|
/** The tippy instance. */
|
|
74
78
|
tippy: any;
|
|
75
79
|
|
|
@@ -88,6 +92,7 @@ export interface ITooltip {
|
|
|
88
92
|
*/
|
|
89
93
|
export interface ITooltipProps extends IBaseProps<ITooltip> {
|
|
90
94
|
btnProps?: IButtonProps;
|
|
95
|
+
ddlProps?: IDropdownProps;
|
|
91
96
|
content?: string | Element;
|
|
92
97
|
options?: ITippyProps;
|
|
93
98
|
placement?: number;
|