@pagopa/io-app-design-system 3.0.0 → 3.1.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/lib/commonjs/components/codeInput/CodeInput.js +41 -21
- package/lib/commonjs/components/codeInput/CodeInput.js.map +1 -1
- package/lib/commonjs/components/index.js +11 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/components/layout/HeaderSecondLevel.js +2 -2
- package/lib/commonjs/components/layout/HeaderSecondLevel.js.map +1 -1
- package/lib/commonjs/components/tooltip/Arrows.js +49 -0
- package/lib/commonjs/components/tooltip/Arrows.js.map +1 -0
- package/lib/commonjs/components/tooltip/Tooltip.js +174 -0
- package/lib/commonjs/components/tooltip/Tooltip.js.map +1 -0
- package/lib/commonjs/components/tooltip/index.js +17 -0
- package/lib/commonjs/components/tooltip/index.js.map +1 -0
- package/lib/commonjs/components/tooltip/styles.js +50 -0
- package/lib/commonjs/components/tooltip/styles.js.map +1 -0
- package/lib/commonjs/components/tooltip/utils/index.js +180 -0
- package/lib/commonjs/components/tooltip/utils/index.js.map +1 -0
- package/lib/commonjs/components/tooltip/utils/types.js +2 -0
- package/lib/commonjs/components/tooltip/utils/types.js.map +1 -0
- package/lib/module/components/codeInput/CodeInput.js +43 -23
- package/lib/module/components/codeInput/CodeInput.js.map +1 -1
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/components/layout/HeaderSecondLevel.js +2 -2
- package/lib/module/components/layout/HeaderSecondLevel.js.map +1 -1
- package/lib/module/components/tooltip/Arrows.js +36 -0
- package/lib/module/components/tooltip/Arrows.js.map +1 -0
- package/lib/module/components/tooltip/Tooltip.js +165 -0
- package/lib/module/components/tooltip/Tooltip.js.map +1 -0
- package/lib/module/components/tooltip/index.js +2 -0
- package/lib/module/components/tooltip/index.js.map +1 -0
- package/lib/module/components/tooltip/styles.js +43 -0
- package/lib/module/components/tooltip/styles.js.map +1 -0
- package/lib/module/components/tooltip/utils/index.js +163 -0
- package/lib/module/components/tooltip/utils/index.js.map +1 -0
- package/lib/module/components/tooltip/utils/types.js +2 -0
- package/lib/module/components/tooltip/utils/types.js.map +1 -0
- package/lib/typescript/components/codeInput/CodeInput.d.ts.map +1 -1
- package/lib/typescript/components/index.d.ts +1 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/components/layout/HeaderSecondLevel.d.ts.map +1 -1
- package/lib/typescript/components/tooltip/Arrows.d.ts +14 -0
- package/lib/typescript/components/tooltip/Arrows.d.ts.map +1 -0
- package/lib/typescript/components/tooltip/Tooltip.d.ts +64 -0
- package/lib/typescript/components/tooltip/Tooltip.d.ts.map +1 -0
- package/lib/typescript/components/tooltip/index.d.ts +2 -0
- package/lib/typescript/components/tooltip/index.d.ts.map +1 -0
- package/lib/typescript/components/tooltip/styles.d.ts +41 -0
- package/lib/typescript/components/tooltip/styles.d.ts.map +1 -0
- package/lib/typescript/components/tooltip/utils/index.d.ts +89 -0
- package/lib/typescript/components/tooltip/utils/index.d.ts.map +1 -0
- package/lib/typescript/components/tooltip/utils/types.d.ts +10 -0
- package/lib/typescript/components/tooltip/utils/types.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/codeInput/CodeInput.tsx +53 -30
- package/src/components/index.tsx +1 -0
- package/src/components/layout/HeaderSecondLevel.tsx +6 -9
- package/src/components/tooltip/Arrows.tsx +36 -0
- package/src/components/tooltip/Tooltip.tsx +313 -0
- package/src/components/tooltip/index.ts +1 -0
- package/src/components/tooltip/styles.ts +44 -0
- package/src/components/tooltip/utils/index.ts +179 -0
- package/src/components/tooltip/utils/types.ts +9 -0
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isNotZero = exports.isDefined = exports.getTooltipVerticalAlignment = exports.getTooltipCoords = exports.getDisplayInsets = exports.getArrowVerticalAlignment = exports.getArrowCoords = exports.getArrowBoxByPlacement = exports.EMPTY_SPACE = exports.ARROW_WIDTH = exports.ARROW_HEIGHT = void 0;
|
|
7
|
+
var _core = require("../../../core");
|
|
8
|
+
const ARROW_WIDTH = 24;
|
|
9
|
+
exports.ARROW_WIDTH = ARROW_WIDTH;
|
|
10
|
+
const ARROW_HEIGHT = 14;
|
|
11
|
+
exports.ARROW_HEIGHT = ARROW_HEIGHT;
|
|
12
|
+
const EMPTY_SPACE = 8;
|
|
13
|
+
exports.EMPTY_SPACE = EMPTY_SPACE;
|
|
14
|
+
const DEFAULT_INSETS = {
|
|
15
|
+
top: 0,
|
|
16
|
+
bottom: 0,
|
|
17
|
+
left: _core.IOVisualCostants.appMarginDefault,
|
|
18
|
+
right: _core.IOVisualCostants.appMarginDefault
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* @param displayInsets custom display insets
|
|
23
|
+
* @returns An `object` based on `DEFAULT_INSETS` and `displayInsets`
|
|
24
|
+
*/
|
|
25
|
+
const getDisplayInsets = displayInsets => ({
|
|
26
|
+
...DEFAULT_INSETS,
|
|
27
|
+
...displayInsets
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
*
|
|
32
|
+
* @param placement The `Tooltip` placement
|
|
33
|
+
* @returns The `Arrow` box `width` and `height` based on `placement` value
|
|
34
|
+
*/
|
|
35
|
+
exports.getDisplayInsets = getDisplayInsets;
|
|
36
|
+
const getArrowBoxByPlacement = placement => {
|
|
37
|
+
switch (placement) {
|
|
38
|
+
case 'left':
|
|
39
|
+
case 'right':
|
|
40
|
+
return {
|
|
41
|
+
width: ARROW_HEIGHT,
|
|
42
|
+
height: ARROW_WIDTH
|
|
43
|
+
};
|
|
44
|
+
default:
|
|
45
|
+
return {
|
|
46
|
+
height: ARROW_HEIGHT,
|
|
47
|
+
width: ARROW_WIDTH
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* A utility function to calculate the `Tooltip` coordinates and dimensions
|
|
54
|
+
* @param placement The `Tooltip` placement in relation of its children
|
|
55
|
+
* @param childrenCoords The measures in screen of the `Tooltip` children
|
|
56
|
+
* @param displayInsets The active display insets
|
|
57
|
+
* @param screenDimensions The dimensions of the device screen
|
|
58
|
+
* @returns The `Tooltip` coordinates
|
|
59
|
+
*/
|
|
60
|
+
exports.getArrowBoxByPlacement = getArrowBoxByPlacement;
|
|
61
|
+
const getTooltipCoords = (placement, childrenCoords, displayInsets, screenDimensions) => {
|
|
62
|
+
const {
|
|
63
|
+
width: screenWidth,
|
|
64
|
+
height: screenHeight
|
|
65
|
+
} = screenDimensions;
|
|
66
|
+
switch (placement) {
|
|
67
|
+
case "top":
|
|
68
|
+
return {
|
|
69
|
+
bottom: screenHeight - childrenCoords.y + ARROW_HEIGHT + EMPTY_SPACE,
|
|
70
|
+
left: displayInsets.left,
|
|
71
|
+
width: screenWidth - displayInsets.left - displayInsets.right
|
|
72
|
+
};
|
|
73
|
+
case "bottom":
|
|
74
|
+
return {
|
|
75
|
+
top: childrenCoords.y + childrenCoords.height + ARROW_HEIGHT + EMPTY_SPACE,
|
|
76
|
+
left: displayInsets.left,
|
|
77
|
+
width: screenWidth - displayInsets.left - displayInsets.right
|
|
78
|
+
};
|
|
79
|
+
case "left":
|
|
80
|
+
return {
|
|
81
|
+
top: childrenCoords.y,
|
|
82
|
+
left: displayInsets.left,
|
|
83
|
+
width: screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - displayInsets.left - EMPTY_SPACE
|
|
84
|
+
};
|
|
85
|
+
case "right":
|
|
86
|
+
const elementSize = childrenCoords.width + childrenCoords.x + ARROW_HEIGHT + EMPTY_SPACE;
|
|
87
|
+
return {
|
|
88
|
+
top: childrenCoords.y,
|
|
89
|
+
left: elementSize,
|
|
90
|
+
width: screenWidth - (elementSize + displayInsets.right)
|
|
91
|
+
};
|
|
92
|
+
// TODO: provide a default center position in case of Tooltip without children
|
|
93
|
+
default:
|
|
94
|
+
return {};
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* A utility function to calculate the `Tooltip`'s `Arrow` coordinates
|
|
100
|
+
* @param placement The `Arrow` placement in relation of the `Tooltip` children
|
|
101
|
+
* @param childrenCoords The measures in screen of the `Tooltip` children
|
|
102
|
+
* @param screenDimensions The active display insets
|
|
103
|
+
* @returns The `Tooltip`'s Arrow coordinates
|
|
104
|
+
*/
|
|
105
|
+
exports.getTooltipCoords = getTooltipCoords;
|
|
106
|
+
const getArrowCoords = (placement, childrenCoords, screenDimensions) => {
|
|
107
|
+
const {
|
|
108
|
+
width: screenWidth,
|
|
109
|
+
height: screenHeight
|
|
110
|
+
} = screenDimensions;
|
|
111
|
+
switch (placement) {
|
|
112
|
+
case "top":
|
|
113
|
+
return {
|
|
114
|
+
bottom: screenHeight - childrenCoords.y + EMPTY_SPACE,
|
|
115
|
+
left: childrenCoords.x + childrenCoords.width / 2 - ARROW_WIDTH / 2
|
|
116
|
+
};
|
|
117
|
+
case "bottom":
|
|
118
|
+
return {
|
|
119
|
+
top: childrenCoords.y + childrenCoords.height + EMPTY_SPACE,
|
|
120
|
+
left: childrenCoords.x + childrenCoords.width / 2 - ARROW_WIDTH / 2
|
|
121
|
+
};
|
|
122
|
+
case "left":
|
|
123
|
+
return {
|
|
124
|
+
top: childrenCoords.y,
|
|
125
|
+
left: screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - EMPTY_SPACE - 1 // FIXME -> This `-1` is necessary because of the Svg size doesn't match the box size
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
case "right":
|
|
129
|
+
return {
|
|
130
|
+
top: childrenCoords.y,
|
|
131
|
+
left: childrenCoords.width + childrenCoords.x + EMPTY_SPACE
|
|
132
|
+
};
|
|
133
|
+
default:
|
|
134
|
+
// TODO: provide a default center position in case of Tooltip without children
|
|
135
|
+
return {};
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* A utility function to calculate the `Tooltip` vertical alignment
|
|
141
|
+
* @param placement The `Tooltip` placement in relation of its children
|
|
142
|
+
* @param childrenHeight The `Tooltip`'s children height
|
|
143
|
+
* @param tooltipHeight The `Tooltip`'s height
|
|
144
|
+
* @returns If placement is `left` or `right` it returns the vertical tranlsation to align the `Tooltip` center with its `children` center,
|
|
145
|
+
* otherwise `null` is returned
|
|
146
|
+
*/
|
|
147
|
+
exports.getArrowCoords = getArrowCoords;
|
|
148
|
+
const getTooltipVerticalAlignment = (placement, childrenHeight, tooltipHeight) => {
|
|
149
|
+
if ((placement === "left" || placement === "right") && tooltipHeight) {
|
|
150
|
+
return {
|
|
151
|
+
transform: [{
|
|
152
|
+
translateY: -tooltipHeight / 2 + childrenHeight / 2
|
|
153
|
+
}]
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
return null;
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* A utility function to calculate the `Arrow` vertical alignment
|
|
161
|
+
* @param placement The `Tooltip` placement in relation of its children
|
|
162
|
+
* @param childrenHeight The `Tooltip`'s children height
|
|
163
|
+
*/
|
|
164
|
+
exports.getTooltipVerticalAlignment = getTooltipVerticalAlignment;
|
|
165
|
+
const getArrowVerticalAlignment = (placement, childrenHeight) => {
|
|
166
|
+
if (placement === "left" || placement === "right") {
|
|
167
|
+
return {
|
|
168
|
+
transform: [{
|
|
169
|
+
translateY: -ARROW_WIDTH / 2 + childrenHeight / 2
|
|
170
|
+
}]
|
|
171
|
+
};
|
|
172
|
+
}
|
|
173
|
+
return null;
|
|
174
|
+
};
|
|
175
|
+
exports.getArrowVerticalAlignment = getArrowVerticalAlignment;
|
|
176
|
+
const isDefined = v => v !== undefined;
|
|
177
|
+
exports.isDefined = isDefined;
|
|
178
|
+
const isNotZero = v => v !== 0;
|
|
179
|
+
exports.isNotZero = isNotZero;
|
|
180
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_core","require","ARROW_WIDTH","exports","ARROW_HEIGHT","EMPTY_SPACE","DEFAULT_INSETS","top","bottom","left","IOVisualCostants","appMarginDefault","right","getDisplayInsets","displayInsets","getArrowBoxByPlacement","placement","width","height","getTooltipCoords","childrenCoords","screenDimensions","screenWidth","screenHeight","y","x","elementSize","getArrowCoords","getTooltipVerticalAlignment","childrenHeight","tooltipHeight","transform","translateY","getArrowVerticalAlignment","isDefined","v","undefined","isNotZero"],"sourceRoot":"../../../../../src","sources":["components/tooltip/utils/index.ts"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/tooltip/utils/types.ts"],"mappings":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { useEffect,
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { StyleSheet, View } from "react-native";
|
|
3
3
|
import Animated from "react-native-reanimated";
|
|
4
|
-
import { IOColors,
|
|
4
|
+
import { hexToRgba, IOColors, useIOThemeContext } from "../../core";
|
|
5
5
|
import { triggerHaptic } from "../../functions";
|
|
6
6
|
import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
|
|
7
7
|
import { HStack } from "../stack";
|
|
@@ -10,25 +10,24 @@ const styles = StyleSheet.create({
|
|
|
10
10
|
dotShape: {
|
|
11
11
|
width: DOT_SIZE,
|
|
12
12
|
height: DOT_SIZE,
|
|
13
|
-
borderRadius:
|
|
13
|
+
borderRadius: DOT_SIZE / 2,
|
|
14
14
|
borderWidth: 2
|
|
15
|
-
},
|
|
16
|
-
dotEmpty: {
|
|
17
|
-
borderColor: IOColors["grey-650"]
|
|
18
|
-
},
|
|
19
|
-
wrapper: {
|
|
20
|
-
justifyContent: "center"
|
|
21
15
|
}
|
|
22
16
|
});
|
|
23
|
-
const EmptyDot = (
|
|
24
|
-
|
|
17
|
+
const EmptyDot = ({
|
|
18
|
+
color: borderColor
|
|
19
|
+
}) => /*#__PURE__*/React.createElement(View, {
|
|
20
|
+
style: [styles.dotShape, {
|
|
21
|
+
borderColor,
|
|
22
|
+
backgroundColor: hexToRgba(borderColor, 0)
|
|
23
|
+
}]
|
|
25
24
|
});
|
|
26
|
-
const
|
|
27
|
-
color
|
|
25
|
+
const FilledDot = ({
|
|
26
|
+
color: backgroundColor
|
|
28
27
|
}) => /*#__PURE__*/React.createElement(View, {
|
|
29
28
|
style: [styles.dotShape, {
|
|
30
|
-
backgroundColor
|
|
31
|
-
borderColor:
|
|
29
|
+
backgroundColor,
|
|
30
|
+
borderColor: backgroundColor
|
|
32
31
|
}]
|
|
33
32
|
});
|
|
34
33
|
export const CodeInput = ({
|
|
@@ -38,13 +37,29 @@ export const CodeInput = ({
|
|
|
38
37
|
variant = "light",
|
|
39
38
|
onValidate
|
|
40
39
|
}) => {
|
|
41
|
-
const [status, setStatus] =
|
|
40
|
+
const [status, setStatus] = useState("default");
|
|
41
|
+
const {
|
|
42
|
+
themeType
|
|
43
|
+
} = useIOThemeContext();
|
|
42
44
|
const {
|
|
43
45
|
translate,
|
|
44
46
|
animatedStyle,
|
|
45
47
|
shakeAnimation
|
|
46
48
|
} = useErrorShakeAnimation();
|
|
47
|
-
|
|
49
|
+
|
|
50
|
+
/* Empty Dot
|
|
51
|
+
- Right color depending on both theme and variant */
|
|
52
|
+
const emptyDotColorLightBg = IOColors["grey-650"];
|
|
53
|
+
const emptyDotColorDarkBg = hexToRgba(IOColors.white, 0.75);
|
|
54
|
+
const emptyDotColorThemeBased = themeType === "light" ? emptyDotColorLightBg : emptyDotColorDarkBg;
|
|
55
|
+
const emptyDotColor = variant === "light" ? emptyDotColorDarkBg : emptyDotColorThemeBased;
|
|
56
|
+
|
|
57
|
+
/* Filled Dot
|
|
58
|
+
- Right color depending on theme, variant and status */
|
|
59
|
+
const filledDotColorLightBg = IOColors.black;
|
|
60
|
+
const filledDotColorDarkBg = IOColors.white;
|
|
61
|
+
const filledDotColorThemeBased = themeType === "light" ? filledDotColorLightBg : filledDotColorDarkBg;
|
|
62
|
+
const filledDotColor = status === "error" ? IOColors["error-600"] : variant === "light" ? filledDotColorDarkBg : filledDotColorThemeBased;
|
|
48
63
|
useEffect(() => {
|
|
49
64
|
if (onValidate && value.length === length) {
|
|
50
65
|
const isValid = onValidate(value);
|
|
@@ -64,13 +79,18 @@ export const CodeInput = ({
|
|
|
64
79
|
return;
|
|
65
80
|
}, [value, onValidate, length, onValueChange, translate, shakeAnimation]);
|
|
66
81
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
67
|
-
style: [
|
|
82
|
+
style: [{
|
|
83
|
+
flexDirection: "row",
|
|
84
|
+
justifyContent: "center"
|
|
85
|
+
}, animatedStyle]
|
|
68
86
|
}, /*#__PURE__*/React.createElement(HStack, {
|
|
69
87
|
space: DOT_SIZE
|
|
70
|
-
}, [...Array(length)].map((_, i) => /*#__PURE__*/React.createElement(
|
|
71
|
-
key: i
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
88
|
+
}, [...Array(length)].map((_, i) => value[i] ? /*#__PURE__*/React.createElement(FilledDot, {
|
|
89
|
+
key: i,
|
|
90
|
+
color: filledDotColor
|
|
91
|
+
}) : /*#__PURE__*/React.createElement(EmptyDot, {
|
|
92
|
+
key: i,
|
|
93
|
+
color: emptyDotColor
|
|
94
|
+
}))));
|
|
75
95
|
};
|
|
76
96
|
//# sourceMappingURL=CodeInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","StyleSheet","View","Animated","hexToRgba","IOColors","useIOThemeContext","triggerHaptic","useErrorShakeAnimation","HStack","DOT_SIZE","styles","create","dotShape","width","height","borderRadius","borderWidth","EmptyDot","color","borderColor","createElement","style","backgroundColor","FilledDot","CodeInput","length","value","onValueChange","variant","onValidate","status","setStatus","themeType","translate","animatedStyle","shakeAnimation","emptyDotColorLightBg","emptyDotColorDarkBg","white","emptyDotColorThemeBased","emptyDotColor","filledDotColorLightBg","black","filledDotColorDarkBg","filledDotColorThemeBased","filledDotColor","isValid","timer","setTimeout","clearTimeout","flexDirection","justifyContent","space","Array","map","_","i","key"],"sourceRoot":"../../../../src","sources":["components/codeInput/CodeInput.tsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.tsx"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,OAAO;AACrB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,cAAc"}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.tsx"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,OAAO;AACrB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,cAAc"}
|
|
@@ -67,11 +67,11 @@ export const HeaderSecondLevel = ({
|
|
|
67
67
|
|
|
68
68
|
/* Visual attributes when there are transitions between states */
|
|
69
69
|
const HEADER_DEFAULT_BG_COLOR = theme["appBackground-primary"];
|
|
70
|
-
const headerBgColorTransparentState = backgroundColor ? hexToRgba(backgroundColor, 0) : transparent ? hexToRgba(IOColors[HEADER_DEFAULT_BG_COLOR], 0) : IOColors[HEADER_DEFAULT_BG_COLOR];
|
|
71
70
|
const headerBgColorSolidState = backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
|
|
71
|
+
const headerBgColorTransparentState = transparent ? hexToRgba(headerBgColorSolidState, 0) : headerBgColorSolidState;
|
|
72
72
|
const borderColorDefault = IOColors[theme["divider-default"]];
|
|
73
|
-
const borderColorTransparentState = backgroundColor ? hexToRgba(backgroundColor, 0) : hexToRgba(borderColorDefault, 0);
|
|
74
73
|
const borderColorSolidState = backgroundColor ?? borderColorDefault;
|
|
74
|
+
const borderColorTransparentState = hexToRgba(borderColorSolidState, 0);
|
|
75
75
|
useLayoutEffect(() => {
|
|
76
76
|
if (isTitleAccessible) {
|
|
77
77
|
const reactNode = findNodeHandle(titleRef.current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useLayoutEffect","AccessibilityInfo","Platform","StyleSheet","View","findNodeHandle","Animated","interpolate","interpolateColor","useAnimatedStyle","useDerivedValue","useScrollViewOffset","useSharedValue","withSpring","withTiming","useSafeAreaInsets","IOColors","IOSpringValues","IOStyles","IOVisualCostants","alertEdgeToEdgeInsetTransitionConfig","hexToRgba","iconBtnSizeSmall","useIOExperimentalDesign","useIOTheme","useIOThemeContext","IconButton","HSpacer","IOText","titleHorizontalMargin","styles","create","headerInner","paddingHorizontal","appMarginDefault","height","headerHeight","flexGrow","flexDirection","alignItems","justifyContent","titleContainer","flexShrink","marginHorizontal","HeaderSecondLevel","scrollValues","undefined","goBack","backAccessibilityLabel","backTestID","title","type","variant","backgroundColor","transparent","ignoreSafeAreaMargin","enableDiscreteTransition","animatedRef","testID","firstAction","secondAction","thirdAction","scrollOffset","titleRef","createRef","isExperimental","theme","themeType","insets","isTitleAccessible","useMemo","trim","paddingTop","top","AnimatedIOText","createAnimatedComponent","iconButtonColorDefault","iconButtonColor","titleColor","white","HEADER_DEFAULT_BG_COLOR","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useLayoutEffect","AccessibilityInfo","Platform","StyleSheet","View","findNodeHandle","Animated","interpolate","interpolateColor","useAnimatedStyle","useDerivedValue","useScrollViewOffset","useSharedValue","withSpring","withTiming","useSafeAreaInsets","IOColors","IOSpringValues","IOStyles","IOVisualCostants","alertEdgeToEdgeInsetTransitionConfig","hexToRgba","iconBtnSizeSmall","useIOExperimentalDesign","useIOTheme","useIOThemeContext","IconButton","HSpacer","IOText","titleHorizontalMargin","styles","create","headerInner","paddingHorizontal","appMarginDefault","height","headerHeight","flexGrow","flexDirection","alignItems","justifyContent","titleContainer","flexShrink","marginHorizontal","HeaderSecondLevel","scrollValues","undefined","goBack","backAccessibilityLabel","backTestID","title","type","variant","backgroundColor","transparent","ignoreSafeAreaMargin","enableDiscreteTransition","animatedRef","testID","firstAction","secondAction","thirdAction","scrollOffset","titleRef","createRef","isExperimental","theme","themeType","insets","isTitleAccessible","useMemo","trim","paddingTop","top","AnimatedIOText","createAnimatedComponent","iconButtonColorDefault","iconButtonColor","titleColor","white","HEADER_DEFAULT_BG_COLOR","headerBgColorSolidState","headerBgColorTransparentState","borderColorDefault","borderColorSolidState","borderColorTransparentState","reactNode","current","setAccessibilityFocus","bgColorDiscreteTransition","value","header","animatedPaddingStyle","marginTop","headerWrapperAnimatedStyle","contentOffsetY","triggerOffset","borderColor","titleAnimatedStyle","opacity","createElement","accessibilityRole","style","borderBottomWidth","icon","select","android","default","color","onPress","accessibilityLabel","size","ref","accessibilityElementsHidden","importantForAccessibility","accessible","numberOfLines","font","weight","textAlign","row","Fragment","_extends"],"sourceRoot":"../../../../src","sources":["components/layout/HeaderSecondLevel.tsx"],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import Svg, { Path } from 'react-native-svg';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { IOColors } from '../../core';
|
|
4
|
+
export const LeftArrow = ({
|
|
5
|
+
color = IOColors.white
|
|
6
|
+
}) => /*#__PURE__*/React.createElement(Svg, {
|
|
7
|
+
fill: "none"
|
|
8
|
+
}, /*#__PURE__*/React.createElement(Path, {
|
|
9
|
+
d: "M12.6955 15.2C14.8289 13.6 14.8289 10.4 12.6955 8.8L0.962204 0V24L12.6955 15.2Z",
|
|
10
|
+
fill: color
|
|
11
|
+
}));
|
|
12
|
+
export const RightArrow = ({
|
|
13
|
+
color = IOColors.white
|
|
14
|
+
}) => /*#__PURE__*/React.createElement(Svg, {
|
|
15
|
+
fill: color
|
|
16
|
+
}, /*#__PURE__*/React.createElement(Path, {
|
|
17
|
+
d: "M2.30448 15.2031C0.171145 13.6031 0.171145 10.4031 2.30448 8.80314L14.0378 0.00314331V24.0031L2.30448 15.2031Z",
|
|
18
|
+
fill: color
|
|
19
|
+
}));
|
|
20
|
+
export const BottomArrow = ({
|
|
21
|
+
color = IOColors.white
|
|
22
|
+
}) => /*#__PURE__*/React.createElement(Svg, {
|
|
23
|
+
fill: color
|
|
24
|
+
}, /*#__PURE__*/React.createElement(Path, {
|
|
25
|
+
d: "M15.2 2.26667C13.6 0.133334 10.4 0.133333 8.8 2.26667L0 14L24 14L15.2 2.26667Z",
|
|
26
|
+
fill: color
|
|
27
|
+
}));
|
|
28
|
+
export const TopArrow = ({
|
|
29
|
+
color = IOColors.white
|
|
30
|
+
}) => /*#__PURE__*/React.createElement(Svg, {
|
|
31
|
+
fill: color
|
|
32
|
+
}, /*#__PURE__*/React.createElement(Path, {
|
|
33
|
+
d: "M15.2 11.7333C13.6 13.8667 10.4 13.8667 8.8 11.7333L0 0L24 0L15.2 11.7333Z",
|
|
34
|
+
fill: color
|
|
35
|
+
}));
|
|
36
|
+
//# sourceMappingURL=Arrows.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Svg","Path","React","IOColors","LeftArrow","color","white","createElement","fill","d","RightArrow","BottomArrow","TopArrow"],"sourceRoot":"../../../../src","sources":["components/tooltip/Arrows.tsx"],"mappings":"AAAA,OAAOA,GAAG,IAAIC,IAAI,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,YAAY;AAErC,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,KAAK,GAAGF,QAAQ,CAACG;AAA0B,CAAC,kBACtEJ,KAAA,CAAAK,aAAA,CAACP,GAAG;EAACQ,IAAI,EAAC;AAAM,gBACdN,KAAA,CAAAK,aAAA,CAACN,IAAI;EACHQ,CAAC,EAAC,iFAAiF;EACnFD,IAAI,EAAEH;AAAM,CACb,CACE,CACN;AACD,OAAO,MAAMK,UAAU,GAAGA,CAAC;EAAEL,KAAK,GAAGF,QAAQ,CAACG;AAA0B,CAAC,kBACvEJ,KAAA,CAAAK,aAAA,CAACP,GAAG;EAACQ,IAAI,EAAEH;AAAM,gBACfH,KAAA,CAAAK,aAAA,CAACN,IAAI;EACHQ,CAAC,EAAC,gHAAgH;EAClHD,IAAI,EAAEH;AAAM,CACb,CACE,CACN;AACD,OAAO,MAAMM,WAAW,GAAGA,CAAC;EAAEN,KAAK,GAAGF,QAAQ,CAACG;AAA0B,CAAC,kBACxEJ,KAAA,CAAAK,aAAA,CAACP,GAAG;EAACQ,IAAI,EAAEH;AAAM,gBACfH,KAAA,CAAAK,aAAA,CAACN,IAAI;EACHQ,CAAC,EAAC,gFAAgF;EAClFD,IAAI,EAAEH;AAAM,CACb,CACE,CACN;AACD,OAAO,MAAMO,QAAQ,GAAGA,CAAC;EAAEP,KAAK,GAAGF,QAAQ,CAACG;AAA0B,CAAC,kBACrEJ,KAAA,CAAAK,aAAA,CAACP,GAAG;EAACQ,IAAI,EAAEH;AAAM,gBACfH,KAAA,CAAAK,aAAA,CAACN,IAAI;EACHQ,CAAC,EAAC,4EAA4E;EAC9ED,IAAI,EAAEH;AAAM,CACb,CACE,CACN"}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
|
2
|
+
import { View, Modal, Dimensions, TouchableWithoutFeedback } from "react-native";
|
|
3
|
+
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
4
|
+
import { every, some } from "lodash";
|
|
5
|
+
import { IOColors } from "../../core";
|
|
6
|
+
import { Body, H6 } from "../typography";
|
|
7
|
+
import { IconButton } from "../buttons";
|
|
8
|
+
import { BottomArrow, LeftArrow, RightArrow, TopArrow } from "./Arrows";
|
|
9
|
+
import { ARROW_HEIGHT, EMPTY_SPACE, getArrowBoxByPlacement, getArrowCoords, getArrowVerticalAlignment, getDisplayInsets, getTooltipCoords, getTooltipVerticalAlignment, isDefined, isNotZero } from "./utils";
|
|
10
|
+
import { getChildrenPosition, tooltipStyles } from "./styles";
|
|
11
|
+
const screenDimensions = Dimensions.get("window");
|
|
12
|
+
const INITIAL_COORDS = {
|
|
13
|
+
x: 0,
|
|
14
|
+
y: 0,
|
|
15
|
+
width: 0,
|
|
16
|
+
height: 0
|
|
17
|
+
};
|
|
18
|
+
const ARROWS_BY_PLACEMENT = {
|
|
19
|
+
top: TopArrow,
|
|
20
|
+
bottom: BottomArrow,
|
|
21
|
+
left: LeftArrow,
|
|
22
|
+
right: RightArrow
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Tooltip component that displays a contextual tooltip around its children.
|
|
26
|
+
* The tooltip position is controlled by the `placement` prop and can adjust
|
|
27
|
+
* dynamically if there is insufficient space.
|
|
28
|
+
* @param {Props} props - The component props
|
|
29
|
+
*
|
|
30
|
+
* @returns {ReactElement} A tooltip component rendered around the specified children.
|
|
31
|
+
*/
|
|
32
|
+
export const Tooltip = ({
|
|
33
|
+
children,
|
|
34
|
+
title,
|
|
35
|
+
content,
|
|
36
|
+
placement: initialPlacement = "top",
|
|
37
|
+
closeIconAccessibilityLabel,
|
|
38
|
+
isVisible,
|
|
39
|
+
displayInsets = {},
|
|
40
|
+
allowCloseOnBackgroundTap,
|
|
41
|
+
childrenInteractionsEnabled = false,
|
|
42
|
+
onClose
|
|
43
|
+
}) => {
|
|
44
|
+
const insets = useSafeAreaInsets();
|
|
45
|
+
const [currentPlacement, setCurrentPlacement] = useState(initialPlacement);
|
|
46
|
+
const [childrenCoords, setChildrenCoords] = useState(INITIAL_COORDS);
|
|
47
|
+
const [tooltipLayout, setTooltipLayout] = useState();
|
|
48
|
+
const childRef = useRef(null);
|
|
49
|
+
const titleRef = useRef(null);
|
|
50
|
+
const timeoutRef = useRef();
|
|
51
|
+
const Arrow = useMemo(() => ARROWS_BY_PLACEMENT[currentPlacement], [currentPlacement]);
|
|
52
|
+
const isChildrenMeasurementFinished = every(childrenCoords, isDefined) && some(childrenCoords, isNotZero);
|
|
53
|
+
const isTooltipMeasurementCompleted = isDefined(tooltipLayout);
|
|
54
|
+
const tooltipVisibility = {
|
|
55
|
+
opacity: isTooltipMeasurementCompleted ? 1 : 0
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* This function sets the `Tooltip` children coordinates
|
|
60
|
+
*/
|
|
61
|
+
const measureChildrenCoords = useCallback(() => {
|
|
62
|
+
if (childRef.current && typeof childRef.current.measure === "function") {
|
|
63
|
+
childRef.current.measure((_, __, width, height, px, py) => {
|
|
64
|
+
const coords = {
|
|
65
|
+
x: px,
|
|
66
|
+
y: py,
|
|
67
|
+
width,
|
|
68
|
+
height
|
|
69
|
+
};
|
|
70
|
+
if (every(coords, isDefined)) {
|
|
71
|
+
setChildrenCoords(coords);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}, []);
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
if (isVisible) {
|
|
78
|
+
// A new measure is executed every time the `Tooltip` is visible
|
|
79
|
+
// This is required for use within ScrollView components.
|
|
80
|
+
// eslint-disable-next-line functional/immutable-data
|
|
81
|
+
timeoutRef.current = setTimeout(measureChildrenCoords, 100);
|
|
82
|
+
} else {
|
|
83
|
+
setChildrenCoords(INITIAL_COORDS);
|
|
84
|
+
setCurrentPlacement(initialPlacement);
|
|
85
|
+
}
|
|
86
|
+
return () => {
|
|
87
|
+
if (isVisible) {
|
|
88
|
+
clearTimeout(timeoutRef.current);
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
}, [isVisible, initialPlacement, measureChildrenCoords]);
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* This function works with `top` and `bottom` placement and sets the current placement to their opposite value
|
|
95
|
+
* if in the selected one there is no space to prompt the tooltip
|
|
96
|
+
*/
|
|
97
|
+
const invertPlacementIfNeeded = useCallback(nativeEvent => {
|
|
98
|
+
if (initialPlacement === "top") {
|
|
99
|
+
const hasSpace = nativeEvent.layout.y >= insets.top;
|
|
100
|
+
if (!hasSpace) {
|
|
101
|
+
setCurrentPlacement("bottom");
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
if (initialPlacement === "bottom") {
|
|
105
|
+
const remainingSpace = screenDimensions.height - nativeEvent.layout.y - insets.bottom;
|
|
106
|
+
const tooltipMinHeight = nativeEvent.layout.height + ARROW_HEIGHT + EMPTY_SPACE;
|
|
107
|
+
const hasSpace = remainingSpace >= tooltipMinHeight;
|
|
108
|
+
if (!hasSpace) {
|
|
109
|
+
setCurrentPlacement("top");
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}, [insets.bottom, insets.top, initialPlacement]);
|
|
113
|
+
const handleTooltipOnLayout = useCallback(({
|
|
114
|
+
nativeEvent
|
|
115
|
+
}) => {
|
|
116
|
+
invertPlacementIfNeeded(nativeEvent);
|
|
117
|
+
setTooltipLayout(nativeEvent.layout);
|
|
118
|
+
}, [invertPlacementIfNeeded]);
|
|
119
|
+
const handleTapOnBackground = useCallback(() => {
|
|
120
|
+
if (allowCloseOnBackgroundTap) {
|
|
121
|
+
onClose();
|
|
122
|
+
}
|
|
123
|
+
}, [allowCloseOnBackgroundTap, onClose]);
|
|
124
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View
|
|
125
|
+
// This prop is necessary for .measure to work correctly, as explained here: https://github.com/facebook/react-native/issues/29712
|
|
126
|
+
, {
|
|
127
|
+
collapsable: false,
|
|
128
|
+
ref: childRef
|
|
129
|
+
}, children), /*#__PURE__*/React.createElement(Modal, {
|
|
130
|
+
transparent: true,
|
|
131
|
+
visible: isVisible && isChildrenMeasurementFinished
|
|
132
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
133
|
+
accessibilityElementsHidden: !childrenInteractionsEnabled,
|
|
134
|
+
importantForAccessibility: childrenInteractionsEnabled ? 'auto' : 'no-hide-descendants',
|
|
135
|
+
pointerEvents: childrenInteractionsEnabled ? "auto" : "box-only",
|
|
136
|
+
style: [tooltipStyles.childrenContainer, getChildrenPosition(childrenCoords)]
|
|
137
|
+
}, children), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
|
138
|
+
accessible: allowCloseOnBackgroundTap,
|
|
139
|
+
accessibilityRole: allowCloseOnBackgroundTap ? "button" : "none",
|
|
140
|
+
importantForAccessibility: allowCloseOnBackgroundTap ? 'yes' : 'no',
|
|
141
|
+
accessibilityElementsHidden: !allowCloseOnBackgroundTap,
|
|
142
|
+
onPress: handleTapOnBackground
|
|
143
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
144
|
+
style: [tooltipStyles.overlay, {
|
|
145
|
+
height: screenDimensions.height
|
|
146
|
+
}]
|
|
147
|
+
})), /*#__PURE__*/React.createElement(View, {
|
|
148
|
+
onLayout: handleTooltipOnLayout,
|
|
149
|
+
style: [tooltipStyles.tooltipContainer, getTooltipCoords(currentPlacement, childrenCoords, getDisplayInsets(displayInsets), screenDimensions), getTooltipVerticalAlignment(currentPlacement, childrenCoords.height, tooltipLayout === null || tooltipLayout === void 0 ? void 0 : tooltipLayout.height), tooltipVisibility]
|
|
150
|
+
}, /*#__PURE__*/React.createElement(H6, {
|
|
151
|
+
ref: titleRef
|
|
152
|
+
}, title), /*#__PURE__*/React.createElement(View, {
|
|
153
|
+
style: tooltipStyles.closeIcon
|
|
154
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
155
|
+
color: "neutral",
|
|
156
|
+
icon: "closeSmall",
|
|
157
|
+
accessibilityLabel: closeIconAccessibilityLabel,
|
|
158
|
+
onPress: onClose
|
|
159
|
+
})), /*#__PURE__*/React.createElement(Body, null, content)), /*#__PURE__*/React.createElement(View, {
|
|
160
|
+
style: [tooltipStyles.arrowContainer, getArrowBoxByPlacement(currentPlacement), getArrowCoords(currentPlacement, childrenCoords, screenDimensions), getArrowVerticalAlignment(currentPlacement, childrenCoords.height), tooltipVisibility]
|
|
161
|
+
}, /*#__PURE__*/React.createElement(Arrow, {
|
|
162
|
+
color: IOColors.white
|
|
163
|
+
}))));
|
|
164
|
+
};
|
|
165
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","useRef","useEffect","useCallback","useMemo","View","Modal","Dimensions","TouchableWithoutFeedback","useSafeAreaInsets","every","some","IOColors","Body","H6","IconButton","BottomArrow","LeftArrow","RightArrow","TopArrow","ARROW_HEIGHT","EMPTY_SPACE","getArrowBoxByPlacement","getArrowCoords","getArrowVerticalAlignment","getDisplayInsets","getTooltipCoords","getTooltipVerticalAlignment","isDefined","isNotZero","getChildrenPosition","tooltipStyles","screenDimensions","get","INITIAL_COORDS","x","y","width","height","ARROWS_BY_PLACEMENT","top","bottom","left","right","Tooltip","children","title","content","placement","initialPlacement","closeIconAccessibilityLabel","isVisible","displayInsets","allowCloseOnBackgroundTap","childrenInteractionsEnabled","onClose","insets","currentPlacement","setCurrentPlacement","childrenCoords","setChildrenCoords","tooltipLayout","setTooltipLayout","childRef","titleRef","timeoutRef","Arrow","isChildrenMeasurementFinished","isTooltipMeasurementCompleted","tooltipVisibility","opacity","measureChildrenCoords","current","measure","_","__","px","py","coords","setTimeout","clearTimeout","invertPlacementIfNeeded","nativeEvent","hasSpace","layout","remainingSpace","tooltipMinHeight","handleTooltipOnLayout","handleTapOnBackground","createElement","Fragment","collapsable","ref","transparent","visible","accessibilityElementsHidden","importantForAccessibility","pointerEvents","style","childrenContainer","accessible","accessibilityRole","onPress","overlay","onLayout","tooltipContainer","closeIcon","color","icon","accessibilityLabel","arrowContainer","white"],"sourceRoot":"../../../../src","sources":["components/tooltip/Tooltip.tsx"],"mappings":"AAAA,OAAOA,KAAK,IACVC,QAAQ,EACRC,MAAM,EAENC,SAAS,EACTC,WAAW,EAEXC,OAAO,QAEF,OAAO;AACd,SACEC,IAAI,EACJC,KAAK,EACLC,UAAU,EAEVC,wBAAwB,QACnB,cAAc;AACrB,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,KAAK,EAAEC,IAAI,QAAQ,QAAQ;AACpC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,IAAI,EAAEC,EAAE,QAAQ,eAAe;AACxC,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,WAAW,EAAEC,SAAS,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,UAAU;AACvE,SACEC,YAAY,EACZC,WAAW,EACXC,sBAAsB,EACtBC,cAAc,EACdC,yBAAyB,EACzBC,gBAAgB,EAChBC,gBAAgB,EAChBC,2BAA2B,EAC3BC,SAAS,EACTC,SAAS,QACJ,SAAS;AAChB,SAASC,mBAAmB,EAAEC,aAAa,QAAQ,UAAU;AAQ7D,MAAMC,gBAAgB,GAAGzB,UAAU,CAAC0B,GAAG,CAAC,QAAQ,CAAC;AACjD,MAAMC,cAA8B,GAAG;EACrCC,CAAC,EAAE,CAAC;EACJC,CAAC,EAAE,CAAC;EACJC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACV,CAAC;AACD,MAAMC,mBAGL,GAAG;EACFC,GAAG,EAAErB,QAAQ;EACbsB,MAAM,EAAEzB,WAAW;EACnB0B,IAAI,EAAEzB,SAAS;EACf0B,KAAK,EAAEzB;AACT,CAAC;AAsDD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM0B,OAAO,GAAGA,CAAC;EACtBC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,SAAS,EAAEC,gBAAgB,GAAG,KAAK;EACnCC,2BAA2B;EAC3BC,SAAS;EACTC,aAAa,GAAG,CAAC,CAAC;EAClBC,yBAAyB;EACzBC,2BAA2B,GAAG,KAAK;EACnCC;AACwB,CAAC,KAAmB;EAC5C,MAAMC,MAAM,GAAG/C,iBAAiB,CAAC,CAAC;EAClC,MAAM,CAACgD,gBAAgB,EAAEC,mBAAmB,CAAC,GAC3C1D,QAAQ,CAAYiD,gBAAgB,CAAC;EACvC,MAAM,CAACU,cAAc,EAAEC,iBAAiB,CAAC,GAAG5D,QAAQ,CAAiBkC,cAAc,CAAC;EACpF,MAAM,CAAC2B,aAAa,EAAEC,gBAAgB,CAAC,GAAG9D,QAAQ,CAAgB,CAAC;EACnE,MAAM+D,QAAQ,GAAG9D,MAAM,CAAO,IAAI,CAAC;EACnC,MAAM+D,QAAQ,GAAG/D,MAAM,CAAO,IAAI,CAAC;EACnC,MAAMgE,UAAU,GAAGhE,MAAM,CAAgC,CAAC;EAE1D,MAAMiE,KAAK,GAAG9D,OAAO,CACnB,MAAMmC,mBAAmB,CAACkB,gBAAgB,CAAC,EAC3C,CAACA,gBAAgB,CACnB,CAAC;EACD,MAAMU,6BAA6B,GACjCzD,KAAK,CAACiD,cAAc,EAAE/B,SAAS,CAAC,IAC7BjB,IAAI,CAACgD,cAAc,EAAE9B,SAAS,CAAC;EACpC,MAAMuC,6BAA6B,GAAGxC,SAAS,CAACiC,aAAa,CAAC;EAC9D,MAAMQ,iBAAiB,GAAG;IAAEC,OAAO,EAAEF,6BAA6B,GAAG,CAAC,GAAG;EAAE,CAAC;;EAE5E;AACF;AACA;EACE,MAAMG,qBAAqB,GAAGpE,WAAW,CAAC,MAAM;IAC9C,IAAI4D,QAAQ,CAACS,OAAO,IAAI,OAAOT,QAAQ,CAACS,OAAO,CAACC,OAAO,KAAK,UAAU,EAAE;MACtEV,QAAQ,CAACS,OAAO,CAACC,OAAO,CAAC,CAACC,CAAC,EAAEC,EAAE,EAAEtC,KAAK,EAAEC,MAAM,EAAEsC,EAAE,EAAEC,EAAE,KAAK;QACzD,MAAMC,MAAM,GAAG;UACb3C,CAAC,EAAEyC,EAAE;UACLxC,CAAC,EAAEyC,EAAE;UACLxC,KAAK;UACLC;QACF,CAAC;QACD,IAAI5B,KAAK,CAACoE,MAAM,EAAElD,SAAS,CAAC,EAAE;UAC5BgC,iBAAiB,CAACkB,MAAM,CAAC;QAC3B;MACF,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN5E,SAAS,CAAC,MAAM;IACd,IAAIiD,SAAS,EAAE;MACb;MACA;MACA;MACAc,UAAU,CAACO,OAAO,GAAGO,UAAU,CAACR,qBAAqB,EAAE,GAAG,CAAC;IAC7D,CAAC,MAAM;MACLX,iBAAiB,CAAC1B,cAAc,CAAC;MACjCwB,mBAAmB,CAACT,gBAAgB,CAAC;IACvC;IAEA,OAAO,MAAM;MACX,IAAIE,SAAS,EAAE;QACb6B,YAAY,CAACf,UAAU,CAACO,OAAO,CAAC;MAClC;IACF,CAAC;EACH,CAAC,EAAE,CAACrB,SAAS,EAAEF,gBAAgB,EAAEsB,qBAAqB,CAAC,CAAC;;EAExD;AACF;AACA;AACA;EACE,MAAMU,uBAAuB,GAAG9E,WAAW,CACxC+E,WAA6C,IAAK;IACjD,IAAIjC,gBAAgB,KAAK,KAAK,EAAE;MAC9B,MAAMkC,QAAQ,GAAGD,WAAW,CAACE,MAAM,CAAChD,CAAC,IAAIoB,MAAM,CAAChB,GAAG;MAEnD,IAAI,CAAC2C,QAAQ,EAAE;QACbzB,mBAAmB,CAAC,QAAQ,CAAC;MAC/B;IACF;IACA,IAAIT,gBAAgB,KAAK,QAAQ,EAAE;MACjC,MAAMoC,cAAc,GAClBrD,gBAAgB,CAACM,MAAM,GAAG4C,WAAW,CAACE,MAAM,CAAChD,CAAC,GAAGoB,MAAM,CAACf,MAAM;MAChE,MAAM6C,gBAAgB,GACpBJ,WAAW,CAACE,MAAM,CAAC9C,MAAM,GAAGlB,YAAY,GAAGC,WAAW;MACxD,MAAM8D,QAAQ,GAAGE,cAAc,IAAIC,gBAAgB;MAEnD,IAAI,CAACH,QAAQ,EAAE;QACbzB,mBAAmB,CAAC,KAAK,CAAC;MAC5B;IACF;EACF,CAAC,EACD,CAACF,MAAM,CAACf,MAAM,EAAEe,MAAM,CAAChB,GAAG,EAAES,gBAAgB,CAC9C,CAAC;EAED,MAAMsC,qBAAqB,GAAGpF,WAAW,CACvC,CAAC;IAAE+E;EAA+B,CAAC,KAAK;IACtCD,uBAAuB,CAACC,WAAW,CAAC;IACpCpB,gBAAgB,CAACoB,WAAW,CAACE,MAAM,CAAC;EACtC,CAAC,EACD,CAACH,uBAAuB,CAC1B,CAAC;EAED,MAAMO,qBAAqB,GAAGrF,WAAW,CAAC,MAAM;IAC9C,IAAIkD,yBAAyB,EAAE;MAC7BE,OAAO,CAAC,CAAC;IACX;EACF,CAAC,EAAE,CAACF,yBAAyB,EAAEE,OAAO,CAAC,CAAC;EAExC,oBACExD,KAAA,CAAA0F,aAAA,CAAA1F,KAAA,CAAA2F,QAAA,qBACE3F,KAAA,CAAA0F,aAAA,CAACpF;EACC;EAAA;IACAsF,WAAW,EAAE,KAAM;IACnBC,GAAG,EAAE7B;EAAS,GAEblB,QACG,CAAC,eACP9C,KAAA,CAAA0F,aAAA,CAACnF,KAAK;IAACuF,WAAW;IAACC,OAAO,EAAE3C,SAAS,IAAIgB;EAA8B,gBACrEpE,KAAA,CAAA0F,aAAA,CAACpF,IAAI;IACH0F,2BAA2B,EAAE,CAACzC,2BAA4B;IAC1D0C,yBAAyB,EAAE1C,2BAA2B,GAAG,MAAM,GAAG,qBAAsB;IACxF2C,aAAa,EAAE3C,2BAA2B,GAAG,MAAM,GAAG,UAAW;IACjE4C,KAAK,EAAE,CACLnE,aAAa,CAACoE,iBAAiB,EAC/BrE,mBAAmB,CAAC6B,cAAc,CAAC;EACnC,GAEDd,QACG,CAAC,eACP9C,KAAA,CAAA0F,aAAA,CAACjF,wBAAwB;IACvB4F,UAAU,EAAE/C,yBAA0B;IACtCgD,iBAAiB,EAAEhD,yBAAyB,GAAG,QAAQ,GAAG,MAAO;IACjE2C,yBAAyB,EAAE3C,yBAAyB,GAAG,KAAK,GAAG,IAAK;IACpE0C,2BAA2B,EAAE,CAAC1C,yBAA0B;IACxDiD,OAAO,EAAEd;EAAsB,gBAE/BzF,KAAA,CAAA0F,aAAA,CAACpF,IAAI;IACH6F,KAAK,EAAE,CACLnE,aAAa,CAACwE,OAAO,EACrB;MAAEjE,MAAM,EAAEN,gBAAgB,CAACM;IAAO,CAAC;EACnC,CACH,CACuB,CAAC,eAC3BvC,KAAA,CAAA0F,aAAA,CAACpF,IAAI;IACHmG,QAAQ,EAAEjB,qBAAsB;IAChCW,KAAK,EAAE,CACLnE,aAAa,CAAC0E,gBAAgB,EAC9B/E,gBAAgB,CACd+B,gBAAgB,EAChBE,cAAc,EACdlC,gBAAgB,CAAC2B,aAAa,CAAC,EAC/BpB,gBACF,CAAC,EACDL,2BAA2B,CACzB8B,gBAAgB,EAChBE,cAAc,CAACrB,MAAM,EACrBuB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEvB,MACjB,CAAC,EACD+B,iBAAiB;EACjB,gBAEFtE,KAAA,CAAA0F,aAAA,CAAC3E,EAAE;IAAC8E,GAAG,EAAE5B;EAAS,GAAElB,KAAU,CAAC,eAC/B/C,KAAA,CAAA0F,aAAA,CAACpF,IAAI;IAAC6F,KAAK,EAAEnE,aAAa,CAAC2E;EAAU,gBACnC3G,KAAA,CAAA0F,aAAA,CAAC1E,UAAU;IACT4F,KAAK,EAAC,SAAS;IACfC,IAAI,EAAC,YAAY;IACjBC,kBAAkB,EAAE3D,2BAA4B;IAChDoD,OAAO,EAAE/C;EAAQ,CAClB,CACG,CAAC,eACPxD,KAAA,CAAA0F,aAAA,CAAC5E,IAAI,QAAEkC,OAAc,CACjB,CAAC,eACPhD,KAAA,CAAA0F,aAAA,CAACpF,IAAI;IACH6F,KAAK,EAAE,CACLnE,aAAa,CAAC+E,cAAc,EAC5BxF,sBAAsB,CAACmC,gBAAgB,CAAC,EACxClC,cAAc,CACZkC,gBAAgB,EAChBE,cAAc,EACd3B,gBACF,CAAC,EACDR,yBAAyB,CAACiC,gBAAgB,EAAEE,cAAc,CAACrB,MAAM,CAAC,EAClE+B,iBAAiB;EACjB,gBAEFtE,KAAA,CAAA0F,aAAA,CAACvB,KAAK;IAACyC,KAAK,EAAE/F,QAAQ,CAACmG;EAAM,CAAE,CAC3B,CACD,CACP,CAAC;AAEP,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/tooltip/index.ts"],"mappings":"AAAA,cAAc,WAAW"}
|