ferns-ui 0.22.5 → 0.23.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/dist/Button.d.ts +2 -1
- package/dist/Button.js +2 -2
- package/dist/Button.js.map +1 -1
- package/dist/Common.d.ts +1 -14
- package/dist/Common.js.map +1 -1
- package/dist/FernsProvider.d.ts +4 -0
- package/dist/FernsProvider.js +7 -0
- package/dist/FernsProvider.js.map +1 -0
- package/dist/IconButton.d.ts +21 -3
- package/dist/IconButton.js +44 -31
- package/dist/IconButton.js.map +1 -1
- package/dist/InfoTooltipButton.d.ts +8 -0
- package/dist/InfoTooltipButton.js +6 -0
- package/dist/InfoTooltipButton.js.map +1 -0
- package/dist/SelectList.js +26 -4
- package/dist/SelectList.js.map +1 -1
- package/dist/TapToEdit.js +17 -0
- package/dist/TapToEdit.js.map +1 -1
- package/dist/Toast.d.ts +10 -0
- package/dist/Toast.js +40 -0
- package/dist/Toast.js.map +1 -0
- package/dist/Tooltip.d.ts +9 -0
- package/dist/Tooltip.js +170 -0
- package/dist/Tooltip.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
- package/src/Button.tsx +3 -1
- package/src/Common.ts +2 -15
- package/src/FernsProvider.tsx +20 -0
- package/src/IconButton.tsx +131 -79
- package/src/InfoTooltipButton.tsx +23 -0
- package/src/SelectList.tsx +25 -3
- package/src/TapToEdit.tsx +21 -0
- package/src/Toast.tsx +87 -0
- package/src/Tooltip.tsx +259 -0
- package/src/index.tsx +4 -0
- package/README.md +0 -22
package/dist/Button.d.ts
CHANGED
|
@@ -16,5 +16,6 @@ export interface ButtonProps {
|
|
|
16
16
|
withConfirmation?: boolean;
|
|
17
17
|
confirmationText?: string;
|
|
18
18
|
confirmationHeading?: string;
|
|
19
|
+
shape?: "rounded" | "pill";
|
|
19
20
|
}
|
|
20
|
-
export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, }: ButtonProps): JSX.Element;
|
|
21
|
+
export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, shape, }: ButtonProps): JSX.Element;
|
package/dist/Button.js
CHANGED
|
@@ -25,7 +25,7 @@ const HEIGHTS = {
|
|
|
25
25
|
md: 40,
|
|
26
26
|
lg: 48,
|
|
27
27
|
};
|
|
28
|
-
export function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color = "lightGray", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", }) {
|
|
28
|
+
export function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color = "lightGray", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", shape = "rounded", }) {
|
|
29
29
|
const [loading, setLoading] = useState(propsLoading);
|
|
30
30
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
31
31
|
const getBackgroundColor = (backgroundColor) => {
|
|
@@ -77,7 +77,7 @@ export function Button({ disabled, type, loading: propsLoading, children, text,
|
|
|
77
77
|
// flexGrow: inline ? 0 : 1,
|
|
78
78
|
alignItems: "center",
|
|
79
79
|
justifyContent: "center",
|
|
80
|
-
borderRadius: 5,
|
|
80
|
+
borderRadius: shape === "pill" ? 999 : 5,
|
|
81
81
|
borderColor: getBorderColor(color),
|
|
82
82
|
borderWidth: type === "outline" ? 2 : 0,
|
|
83
83
|
opacity: disabled ? 0.4 : 1,
|
package/dist/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Common.d.ts
CHANGED
|
@@ -322,23 +322,10 @@ export interface IconProps {
|
|
|
322
322
|
iconStyle?: any;
|
|
323
323
|
containerStyle?: any;
|
|
324
324
|
}
|
|
325
|
-
export interface IconButtonProps {
|
|
326
|
-
prefix?: IconPrefix;
|
|
327
|
-
icon: IconName;
|
|
328
|
-
accessibilityLabel: string;
|
|
329
|
-
iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
|
|
330
|
-
onClick: () => void;
|
|
331
|
-
size?: IconSize;
|
|
332
|
-
bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white";
|
|
333
|
-
disabled?: boolean;
|
|
334
|
-
selected?: boolean;
|
|
335
|
-
withConfirmation?: boolean;
|
|
336
|
-
confirmationText?: string;
|
|
337
|
-
confirmationHeading?: string;
|
|
338
|
-
}
|
|
339
325
|
export interface NavigatorProps {
|
|
340
326
|
config?: any;
|
|
341
327
|
}
|
|
328
|
+
export declare type TooltipDirection = "top" | "bottom" | "left" | "right";
|
|
342
329
|
export interface PillProps {
|
|
343
330
|
text: string;
|
|
344
331
|
color: AllColors;
|
package/dist/Common.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAorDA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAmBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;
|
|
1
|
+
{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAorDA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAmBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;AA24BD,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ToastProvider } from "react-native-toast-notifications";
|
|
3
|
+
import { Toast } from "./Toast";
|
|
4
|
+
export function FernsProvider({ children }) {
|
|
5
|
+
return (React.createElement(ToastProvider, { animationDuration: 250, animationType: "slide-in", duration: 50000, offset: 50, placement: "bottom", renderToast: (toastOptions) => React.createElement(Toast, Object.assign({}, toastOptions)), swipeEnabled: true }, children));
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=FernsProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FernsProvider.js","sourceRoot":"","sources":["../src/FernsProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,MAAM,UAAU,aAAa,CAAC,EAAC,QAAQ,EAA8B;IACnE,OAAO,CACL,oBAAC,aAAa,IACZ,iBAAiB,EAAE,GAAG,EACtB,aAAa,EAAC,UAAU,EACxB,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,EAAE,EACV,SAAS,EAAC,QAAQ,EAClB,WAAW,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,oBAAC,KAAK,oBAAM,YAAoB,EAAI,EACnE,YAAY,UAEX,QAAQ,CACK,CACjB,CAAC;AACJ,CAAC"}
|
package/dist/IconButton.d.ts
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ButtonColor, Color, IconName, IconPrefix, IconSize, ThemeColor, TooltipDirection } from "./Common";
|
|
3
|
+
export interface IconButtonProps {
|
|
4
|
+
prefix?: IconPrefix;
|
|
5
|
+
icon: IconName;
|
|
6
|
+
accessibilityLabel: string;
|
|
7
|
+
iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
|
|
8
|
+
onClick: () => void;
|
|
9
|
+
size?: IconSize;
|
|
10
|
+
bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white";
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
selected?: boolean;
|
|
13
|
+
withConfirmation?: boolean;
|
|
14
|
+
confirmationText?: string;
|
|
15
|
+
confirmationHeading?: string;
|
|
16
|
+
tooltip?: {
|
|
17
|
+
text: string;
|
|
18
|
+
idealDirection?: TooltipDirection;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
|
package/dist/IconButton.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { TouchableOpacity } from "react-native";
|
|
3
|
-
import { iconSizeToNumber } from "./Common";
|
|
1
|
+
import React, { forwardRef, useState } from "react";
|
|
2
|
+
import { Platform, TouchableOpacity, View } from "react-native";
|
|
3
|
+
import { iconSizeToNumber, } from "./Common";
|
|
4
4
|
import { Icon } from "./Icon";
|
|
5
5
|
import { Modal } from "./Modal";
|
|
6
6
|
import { Text } from "./Text";
|
|
7
|
+
import { Tooltip } from "./Tooltip";
|
|
7
8
|
import { Unifier } from "./Unifier";
|
|
8
|
-
|
|
9
|
+
// eslint-disable-next-line react/display-name
|
|
10
|
+
export const IconButton = forwardRef(({ prefix, icon, iconColor, onClick, size, bgColor = "transparent", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", tooltip, }, ref) => {
|
|
9
11
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
10
12
|
let opacity = 1;
|
|
11
13
|
let color;
|
|
@@ -14,7 +16,7 @@ export function IconButton({ prefix, icon, iconColor, onClick, size, bgColor = "
|
|
|
14
16
|
color = Unifier.theme.darkGray;
|
|
15
17
|
}
|
|
16
18
|
else if (bgColor === "transparent" || !bgColor) {
|
|
17
|
-
opacity =
|
|
19
|
+
opacity = 1.0;
|
|
18
20
|
color = Unifier.theme.white;
|
|
19
21
|
}
|
|
20
22
|
else {
|
|
@@ -29,30 +31,41 @@ export function IconButton({ prefix, icon, iconColor, onClick, size, bgColor = "
|
|
|
29
31
|
} },
|
|
30
32
|
React.createElement(Text, null, confirmationText)));
|
|
31
33
|
};
|
|
32
|
-
|
|
33
|
-
React.createElement(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
onClick
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
34
|
+
function renderIconButton() {
|
|
35
|
+
return (React.createElement(View, null,
|
|
36
|
+
React.createElement(TouchableOpacity, { ref: ref, hitSlop: { top: 10, left: 10, bottom: 10, right: 10 }, style: {
|
|
37
|
+
opacity,
|
|
38
|
+
backgroundColor: color,
|
|
39
|
+
borderRadius: 100,
|
|
40
|
+
// paddingBottom: iconSizeToNumber(size) / 4,
|
|
41
|
+
// paddingTop: iconSizeToNumber(size) / 4,
|
|
42
|
+
// paddingLeft: iconSizeToNumber(size) / 2,
|
|
43
|
+
// paddingRight: iconSizeToNumber(size) / 2,
|
|
44
|
+
width: iconSizeToNumber(size) * 2.5,
|
|
45
|
+
height: iconSizeToNumber(size) * 2.5,
|
|
46
|
+
display: "flex",
|
|
47
|
+
justifyContent: "center",
|
|
48
|
+
alignItems: "center",
|
|
49
|
+
}, onPress: () => {
|
|
50
|
+
Unifier.utils.haptic();
|
|
51
|
+
if (withConfirmation && !showConfirmation) {
|
|
52
|
+
setShowConfirmation(true);
|
|
53
|
+
}
|
|
54
|
+
else if (onClick) {
|
|
55
|
+
onClick();
|
|
56
|
+
}
|
|
57
|
+
} },
|
|
58
|
+
React.createElement(Icon, { color: iconColor, name: icon, prefix: prefix || "fas", size: size })),
|
|
59
|
+
Boolean(withConfirmation) && renderConfirmation()));
|
|
60
|
+
}
|
|
61
|
+
// Only add for web. This doesn't make much sense for mobile, since the action would be performed for the button
|
|
62
|
+
// as well as the tooltip appearing.
|
|
63
|
+
// TODO: Add tooltip info button next to the icon button on mobile.
|
|
64
|
+
if (tooltip && Platform.OS === "web") {
|
|
65
|
+
return (React.createElement(Tooltip, { idealDirection: tooltip.idealDirection, text: tooltip.text }, renderIconButton()));
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
return renderIconButton();
|
|
69
|
+
}
|
|
70
|
+
});
|
|
58
71
|
//# sourceMappingURL=IconButton.js.map
|
package/dist/IconButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { IconButton } from "./IconButton";
|
|
3
|
+
export function InfoTooltipButton({ text, size }) {
|
|
4
|
+
return (React.createElement(IconButton, { accessibilityLabel: "info", bgColor: "transparent", icon: "exclamation", iconColor: "blue", size: size, tooltip: { text }, onClick: () => { } }));
|
|
5
|
+
}
|
|
6
|
+
//# sourceMappingURL=InfoTooltipButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InfoTooltipButton.js","sourceRoot":"","sources":["../src/InfoTooltipButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAOxC,MAAM,UAAU,iBAAiB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAyB;IACpE,OAAO,CACL,oBAAC,UAAU,IACT,kBAAkB,EAAC,MAAM,EACzB,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,aAAa,EAClB,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,EAAC,IAAI,EAAC,EACf,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,GACjB,CACH,CAAC;AACJ,CAAC"}
|
package/dist/SelectList.js
CHANGED
|
@@ -1,25 +1,47 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { Platform } from "react-native";
|
|
3
|
+
import { Icon } from "./Icon";
|
|
2
4
|
import RNPickerSelect from "./PickerSelect";
|
|
3
5
|
import { Unifier } from "./Unifier";
|
|
4
6
|
import { WithLabel } from "./WithLabel";
|
|
5
7
|
export function SelectList({ options, value, onChange, label, labelColor, style, placeholder, }) {
|
|
6
8
|
const withLabelProps = { label, labelColor };
|
|
7
9
|
return (React.createElement(WithLabel, Object.assign({}, withLabelProps),
|
|
8
|
-
React.createElement(RNPickerSelect
|
|
10
|
+
React.createElement(RNPickerSelect
|
|
11
|
+
// Icon only needed for iOs, web and android use default icons
|
|
12
|
+
, {
|
|
13
|
+
// Icon only needed for iOs, web and android use default icons
|
|
14
|
+
Icon: () => {
|
|
15
|
+
return Platform.OS === "ios" ? (React.createElement(Icon, { color: "darkGray", name: "angle-down", size: "md" })) : null;
|
|
16
|
+
}, items: options, placeholder: placeholder ? { label: placeholder, value: "" } : {}, style: {
|
|
9
17
|
viewContainer: {
|
|
10
18
|
flexDirection: (style === null || style === void 0 ? void 0 : style.flexDirection) || "row",
|
|
11
19
|
justifyContent: (style === null || style === void 0 ? void 0 : style.justifyContent) || "center",
|
|
12
20
|
alignItems: (style === null || style === void 0 ? void 0 : style.alignItems) || "center",
|
|
13
21
|
minHeight: (style === null || style === void 0 ? void 0 : style.minHeight) || 50,
|
|
14
22
|
width: (style === null || style === void 0 ? void 0 : style.width) || "100%",
|
|
15
|
-
// Add padding so the border doesn't mess up layouts
|
|
16
|
-
paddingHorizontal: (style === null || style === void 0 ? void 0 : style.paddingHorizontal) || 6,
|
|
17
|
-
paddingVertical: (style === null || style === void 0 ? void 0 : style.paddingVertical) || 4,
|
|
18
23
|
borderColor: (style === null || style === void 0 ? void 0 : style.borderColor) || Unifier.theme.gray,
|
|
19
24
|
borderWidth: (style === null || style === void 0 ? void 0 : style.borderWidth) || 1,
|
|
20
25
|
borderRadius: (style === null || style === void 0 ? void 0 : style.borderRadius) || 5,
|
|
21
26
|
backgroundColor: (style === null || style === void 0 ? void 0 : style.backgroundColor) || Unifier.theme.white,
|
|
22
27
|
},
|
|
28
|
+
inputIOS: {
|
|
29
|
+
paddingVertical: 12,
|
|
30
|
+
paddingHorizontal: 10,
|
|
31
|
+
paddingRight: 30,
|
|
32
|
+
},
|
|
33
|
+
iconContainer: {
|
|
34
|
+
top: 13,
|
|
35
|
+
right: 10,
|
|
36
|
+
bottom: 12,
|
|
37
|
+
paddingLeft: 40,
|
|
38
|
+
},
|
|
39
|
+
inputWeb: {
|
|
40
|
+
// Add padding so the border doesn't mess up layouts
|
|
41
|
+
paddingHorizontal: (style === null || style === void 0 ? void 0 : style.paddingHorizontal) || 6,
|
|
42
|
+
paddingVertical: (style === null || style === void 0 ? void 0 : style.paddingVertical) || 4,
|
|
43
|
+
borderRadius: (style === null || style === void 0 ? void 0 : style.borderRadius) || 5,
|
|
44
|
+
},
|
|
23
45
|
}, value: value, onValueChange: onChange })));
|
|
24
46
|
}
|
|
25
47
|
//# sourceMappingURL=SelectList.js.map
|
package/dist/SelectList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../src/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../src/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAiBtC,MAAM,UAAU,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,GACK;IAChB,MAAM,cAAc,GAAG,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC;IAE3C,OAAO,CACL,oBAAC,SAAS,oBAAK,cAAc;QAC3B,oBAAC,cAAc;QACb,8DAA8D;;YAA9D,8DAA8D;YAC9D,IAAI,EAAE,GAAG,EAAE;gBACT,OAAO,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAC7B,oBAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CACtD,CAAC,CAAC,CAAC,IAAI,CAAC;YACX,CAAC,EACD,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC,CAAC,EAAE,EAC/D,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,aAAa,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,KAAI,KAAK;oBAC5C,cAAc,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,KAAI,QAAQ;oBACjD,UAAU,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,KAAI,QAAQ;oBACzC,SAAS,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,KAAI,EAAE;oBACjC,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KAAI,MAAM;oBAC7B,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,OAAO,CAAC,KAAK,CAAC,IAAI;oBACrD,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,CAAC;oBACpC,YAAY,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,KAAI,CAAC;oBACtC,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,OAAO,CAAC,KAAK,CAAC,KAAK;iBAC/D;gBACD,QAAQ,EAAE;oBACR,eAAe,EAAE,EAAE;oBACnB,iBAAiB,EAAE,EAAE;oBACrB,YAAY,EAAE,EAAE;iBACjB;gBACD,aAAa,EAAE;oBACb,GAAG,EAAE,EAAE;oBACP,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,WAAW,EAAE,EAAE;iBAChB;gBACD,QAAQ,EAAE;oBACR,oDAAoD;oBACpD,iBAAiB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,KAAI,CAAC;oBAChD,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,CAAC;oBAC5C,YAAY,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,KAAI,CAAC;iBACvC;aACF,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,GACvB,CACQ,CACb,CAAC;AACJ,CAAC"}
|
package/dist/TapToEdit.js
CHANGED
|
@@ -16,6 +16,7 @@ import { Field } from "./Field";
|
|
|
16
16
|
import { Icon } from "./Icon";
|
|
17
17
|
import { Text } from "./Text";
|
|
18
18
|
export const TapToEdit = (_a) => {
|
|
19
|
+
var _b, _c;
|
|
19
20
|
var { value, setValue, placeholder, title, onSave, editable = true, isEditing = false, rowBoxProps, transform, fieldComponent } = _a, fieldProps = __rest(_a, ["value", "setValue", "placeholder", "title", "onSave", "editable", "isEditing", "rowBoxProps", "transform", "fieldComponent"]);
|
|
20
21
|
const [editing, setEditing] = useState(false);
|
|
21
22
|
if (editable && !setValue) {
|
|
@@ -68,6 +69,22 @@ export const TapToEdit = (_a) => {
|
|
|
68
69
|
// ???
|
|
69
70
|
displayValue = value.join(", ");
|
|
70
71
|
}
|
|
72
|
+
else if ((fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.type) === "address") {
|
|
73
|
+
let city = "";
|
|
74
|
+
if (value === null || value === void 0 ? void 0 : value.city) {
|
|
75
|
+
city = (value === null || value === void 0 ? void 0 : value.state) || value.zipcode ? `${value.city}, ` : `${value.city}`;
|
|
76
|
+
}
|
|
77
|
+
let state = "";
|
|
78
|
+
if (value === null || value === void 0 ? void 0 : value.state) {
|
|
79
|
+
state = (value === null || value === void 0 ? void 0 : value.zipcode) ? `${value.state} ` : `${value.state}`;
|
|
80
|
+
}
|
|
81
|
+
const zip = value === null || value === void 0 ? void 0 : value.zipcode;
|
|
82
|
+
const addressLineOne = (_b = value === null || value === void 0 ? void 0 : value.address1) !== null && _b !== void 0 ? _b : "";
|
|
83
|
+
const addressLineTwo = (_c = value === null || value === void 0 ? void 0 : value.address2) !== null && _c !== void 0 ? _c : "";
|
|
84
|
+
const addressLineThree = `${city}${state}${zip}`;
|
|
85
|
+
// Only add new lines if lines before and after are not empty to avoid awkward whitespace
|
|
86
|
+
displayValue = `${addressLineOne}${addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""}${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
|
|
87
|
+
}
|
|
71
88
|
}
|
|
72
89
|
return (React.createElement(Box, Object.assign({ direction: "row", justifyContent: "between", paddingX: 3, paddingY: 2, width: "100%" }, rowBoxProps),
|
|
73
90
|
React.createElement(Box, null,
|
package/dist/TapToEdit.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAe,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAC,KAAK,EAAa,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAmB5B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAYT,EAAgB,EAAE
|
|
1
|
+
{"version":3,"file":"TapToEdit.js","sourceRoot":"","sources":["../src/TapToEdit.tsx"],"names":[],"mappings":"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"}
|
package/dist/Toast.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare function useToast(): any;
|
|
3
|
+
export declare function Toast({ message, data, }: {
|
|
4
|
+
message: string;
|
|
5
|
+
data: {
|
|
6
|
+
variant?: "default" | "warning" | "error";
|
|
7
|
+
buttonText?: string;
|
|
8
|
+
buttonOnClick?: () => void | Promise<void>;
|
|
9
|
+
};
|
|
10
|
+
}): React.ReactElement;
|
package/dist/Toast.js
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Dimensions } from "react-native";
|
|
3
|
+
import { useToast as useRNToast } from "react-native-toast-notifications";
|
|
4
|
+
import { Box } from "./Box";
|
|
5
|
+
import { Button } from "./Button";
|
|
6
|
+
import { Icon } from "./Icon";
|
|
7
|
+
import { Text } from "./Text";
|
|
8
|
+
export function useToast() {
|
|
9
|
+
const toast = useRNToast();
|
|
10
|
+
return {
|
|
11
|
+
show: (text, options) => {
|
|
12
|
+
return toast.show(text, {
|
|
13
|
+
data: options,
|
|
14
|
+
});
|
|
15
|
+
},
|
|
16
|
+
hide: (id) => toast.hide(id),
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
export function Toast({ message, data, }) {
|
|
20
|
+
// margin 8 on either side, times the standard 4px we multiply by.
|
|
21
|
+
const width = Math.min(Dimensions.get("window").width - 16 * 4, 712);
|
|
22
|
+
const { variant, buttonText, buttonOnClick } = data !== null && data !== void 0 ? data : {};
|
|
23
|
+
let color = "darkGray";
|
|
24
|
+
if (variant === "warning") {
|
|
25
|
+
color = "orange";
|
|
26
|
+
}
|
|
27
|
+
else if (variant === "error") {
|
|
28
|
+
color = "red";
|
|
29
|
+
}
|
|
30
|
+
return (React.createElement(Box, { alignItems: "center", color: color, direction: "row", flex: "shrink", marginBottom: 4, marginLeft: 8, marginRight: 8, maxWidth: width, padding: 2, paddingX: 4, paddingY: 3, rounding: 4 },
|
|
31
|
+
Boolean(variant === "error") && (React.createElement(Box, { marginRight: 4 },
|
|
32
|
+
React.createElement(Icon, { color: "white", name: "exclamation-circle", size: "lg" }))),
|
|
33
|
+
Boolean(variant === "warning") && (React.createElement(Box, { marginRight: 4 },
|
|
34
|
+
React.createElement(Icon, { color: "white", name: "exclamation-triangle", size: "lg" }))),
|
|
35
|
+
React.createElement(Box, { alignItems: "center", direction: "column", flex: "shrink", justifyContent: "center" },
|
|
36
|
+
React.createElement(Text, { color: "white", size: "lg", weight: "bold" }, message)),
|
|
37
|
+
Boolean(buttonOnClick && buttonText) && (React.createElement(Box, { alignItems: "center", justifyContent: "center", marginLeft: 4 },
|
|
38
|
+
React.createElement(Button, { color: "lightGray", shape: "pill", text: buttonText, onClick: buttonOnClick })))));
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=Toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface TooltipProps {
|
|
3
|
+
children: React.ReactElement;
|
|
4
|
+
text: string;
|
|
5
|
+
idealDirection?: "top" | "bottom" | "left" | "right";
|
|
6
|
+
bgColor?: "white" | "lightGray" | "gray" | "darkGray";
|
|
7
|
+
}
|
|
8
|
+
export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<unknown>>;
|
|
9
|
+
export {};
|
package/dist/Tooltip.js
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { Dimensions, Platform, Pressable, } from "react-native";
|
|
4
|
+
import { Portal } from "react-native-portalize";
|
|
5
|
+
import { Text } from "./Text";
|
|
6
|
+
import { Unifier } from "./Unifier";
|
|
7
|
+
const TOOLTIP_OFFSET = 8;
|
|
8
|
+
// How many pixels to leave between the tooltip and the edge of the screen
|
|
9
|
+
const TOOLTIP_OVERFLOW_PADDING = 20;
|
|
10
|
+
const overflowLeft = (x) => {
|
|
11
|
+
return x < TOOLTIP_OVERFLOW_PADDING;
|
|
12
|
+
};
|
|
13
|
+
const overflowRight = (x) => {
|
|
14
|
+
const { width: layoutWidth } = Dimensions.get("window");
|
|
15
|
+
return x + TOOLTIP_OVERFLOW_PADDING > layoutWidth;
|
|
16
|
+
};
|
|
17
|
+
const getTooltipPosition = ({ children, tooltip, measured, idealDirection, }) => {
|
|
18
|
+
if (!measured) {
|
|
19
|
+
console.debug("No measurements for child yet, cannot show tooltip.");
|
|
20
|
+
return {};
|
|
21
|
+
}
|
|
22
|
+
const { pageY: childrenY, height: childrenHeight, pageX: childrenX, width: childrenWidth, } = children;
|
|
23
|
+
const { width: tooltipWidth, height: tooltipHeight } = tooltip;
|
|
24
|
+
const horizontalCenter = childrenX + childrenWidth / 2;
|
|
25
|
+
const right = childrenX + childrenWidth + TOOLTIP_OFFSET;
|
|
26
|
+
const left = childrenX - tooltipWidth - TOOLTIP_OFFSET;
|
|
27
|
+
const top = childrenY - tooltipHeight - TOOLTIP_OFFSET;
|
|
28
|
+
const bottom = childrenY + childrenHeight + TOOLTIP_OFFSET;
|
|
29
|
+
const verticalCenter = top + childrenHeight + TOOLTIP_OFFSET;
|
|
30
|
+
// Top is overflowed if it would go off either side or the top of the screen.
|
|
31
|
+
const overflowTop = top < TOOLTIP_OVERFLOW_PADDING;
|
|
32
|
+
// Bottom is overflowed if it would go off either side or the bottom of the screen.
|
|
33
|
+
const overflowBottom = bottom + tooltipHeight + TOOLTIP_OVERFLOW_PADDING > Dimensions.get("window").height;
|
|
34
|
+
// If it would overflow to the right, try to put it above, if not, put it on the left.
|
|
35
|
+
// If it would overflow to the left, try to put it above, if not, put it to the right.
|
|
36
|
+
// Happy path:
|
|
37
|
+
if (idealDirection === "left" && !overflowLeft(left)) {
|
|
38
|
+
return { left, top: verticalCenter };
|
|
39
|
+
}
|
|
40
|
+
else if (idealDirection === "right" && !overflowRight(right + tooltipWidth)) {
|
|
41
|
+
return { left: right, top: verticalCenter };
|
|
42
|
+
}
|
|
43
|
+
else if (idealDirection === "bottom" &&
|
|
44
|
+
!overflowBottom &&
|
|
45
|
+
!overflowLeft(horizontalCenter - tooltipWidth) &&
|
|
46
|
+
!overflowRight(horizontalCenter + tooltipWidth)) {
|
|
47
|
+
return { left: horizontalCenter - tooltipWidth / 2, top: bottom };
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
// At this point, we're either trying to place it above or below, and force it into the viewport.
|
|
51
|
+
let y = top;
|
|
52
|
+
if ((idealDirection === "bottom" && !overflowBottom) || overflowTop) {
|
|
53
|
+
y = bottom;
|
|
54
|
+
}
|
|
55
|
+
// If it fits in the viewport, center it above the child.
|
|
56
|
+
if (!overflowLeft(horizontalCenter - tooltipWidth) &&
|
|
57
|
+
!overflowRight(horizontalCenter + tooltipWidth)) {
|
|
58
|
+
return { left: horizontalCenter - tooltipWidth / 2, top: y };
|
|
59
|
+
}
|
|
60
|
+
// Failing that, if it fits on the left, put it there, otherwise to the right. We know it's smaller than the
|
|
61
|
+
// viewport.
|
|
62
|
+
else if (overflowLeft(horizontalCenter - tooltipWidth)) {
|
|
63
|
+
return { left: TOOLTIP_OVERFLOW_PADDING, top: y };
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
return {
|
|
67
|
+
left: Dimensions.get("window").width - TOOLTIP_OVERFLOW_PADDING - tooltipWidth,
|
|
68
|
+
top: y,
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
// eslint-disable-next-line react/display-name
|
|
74
|
+
export const Tooltip = forwardRef((props, _ref) => {
|
|
75
|
+
const { text, children, bgColor, idealDirection } = props;
|
|
76
|
+
const hoverDelay = 500;
|
|
77
|
+
const hoverEndDelay = 1500;
|
|
78
|
+
const [visible, setVisible] = React.useState(false);
|
|
79
|
+
const [measurement, setMeasurement] = React.useState({
|
|
80
|
+
children: {},
|
|
81
|
+
tooltip: {},
|
|
82
|
+
measured: false,
|
|
83
|
+
});
|
|
84
|
+
const showTooltipTimer = React.useRef();
|
|
85
|
+
const hideTooltipTimer = React.useRef();
|
|
86
|
+
const childrenWrapperRef = React.useRef();
|
|
87
|
+
const touched = React.useRef(false);
|
|
88
|
+
const isWeb = Platform.OS === "web";
|
|
89
|
+
React.useEffect(() => {
|
|
90
|
+
return () => {
|
|
91
|
+
if (showTooltipTimer.current) {
|
|
92
|
+
clearTimeout(showTooltipTimer.current);
|
|
93
|
+
}
|
|
94
|
+
if (hideTooltipTimer.current) {
|
|
95
|
+
clearTimeout(hideTooltipTimer.current);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
}, []);
|
|
99
|
+
const handleOnLayout = ({ nativeEvent: { layout } }) => {
|
|
100
|
+
var _a;
|
|
101
|
+
(_a = childrenWrapperRef === null || childrenWrapperRef === void 0 ? void 0 : childrenWrapperRef.current) === null || _a === void 0 ? void 0 : _a.measure((_x, _y, width, height, pageX, pageY) => {
|
|
102
|
+
setMeasurement({
|
|
103
|
+
children: { pageX, pageY, height, width },
|
|
104
|
+
tooltip: Object.assign({}, layout),
|
|
105
|
+
measured: true,
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
const handleTouchStart = () => {
|
|
110
|
+
if (hideTooltipTimer.current) {
|
|
111
|
+
clearTimeout(hideTooltipTimer.current);
|
|
112
|
+
}
|
|
113
|
+
showTooltipTimer.current = setTimeout(() => {
|
|
114
|
+
touched.current = true;
|
|
115
|
+
setVisible(true);
|
|
116
|
+
}, 100);
|
|
117
|
+
};
|
|
118
|
+
const handleHoverIn = () => {
|
|
119
|
+
if (hideTooltipTimer.current) {
|
|
120
|
+
clearTimeout(hideTooltipTimer.current);
|
|
121
|
+
}
|
|
122
|
+
showTooltipTimer.current = setTimeout(() => {
|
|
123
|
+
touched.current = true;
|
|
124
|
+
setVisible(true);
|
|
125
|
+
}, hoverDelay);
|
|
126
|
+
};
|
|
127
|
+
const handleHoverOut = () => {
|
|
128
|
+
touched.current = false;
|
|
129
|
+
if (showTooltipTimer.current) {
|
|
130
|
+
clearTimeout(showTooltipTimer.current);
|
|
131
|
+
}
|
|
132
|
+
hideTooltipTimer.current = setTimeout(() => {
|
|
133
|
+
setVisible(false);
|
|
134
|
+
setMeasurement({ children: {}, tooltip: {}, measured: false });
|
|
135
|
+
}, hoverEndDelay);
|
|
136
|
+
};
|
|
137
|
+
const mobilePressProps = {
|
|
138
|
+
onPress: React.useCallback(() => {
|
|
139
|
+
var _a, _b;
|
|
140
|
+
if (touched.current) {
|
|
141
|
+
return null;
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
return (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
145
|
+
}
|
|
146
|
+
}, [children.props]),
|
|
147
|
+
};
|
|
148
|
+
const webPressProps = {
|
|
149
|
+
onHoverIn: () => {
|
|
150
|
+
var _a, _b;
|
|
151
|
+
handleHoverIn();
|
|
152
|
+
(_b = (_a = children.props).onHoverIn) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
153
|
+
},
|
|
154
|
+
onHoverOut: () => {
|
|
155
|
+
var _a, _b;
|
|
156
|
+
handleHoverOut();
|
|
157
|
+
(_b = (_a = children.props).onHoverOut) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
158
|
+
},
|
|
159
|
+
};
|
|
160
|
+
return (React.createElement(React.Fragment, null,
|
|
161
|
+
visible && (React.createElement(Portal, null,
|
|
162
|
+
React.createElement(Pressable, { style: Object.assign(Object.assign({ alignSelf: "flex-start", justifyContent: "center", paddingHorizontal: 16, backgroundColor: Unifier.theme[bgColor !== null && bgColor !== void 0 ? bgColor : "darkGray"], borderRadius: 16, paddingVertical: 8, display: "flex", flexShrink: 1, maxWidth: Math.max(Dimensions.get("window").width - 32, 300) }, getTooltipPosition(Object.assign(Object.assign({}, measurement), { idealDirection }))), (measurement.measured ? { opacity: 1 } : { opacity: 0 })), testID: "tooltip-container", onLayout: handleOnLayout, onPress: () => {
|
|
163
|
+
setVisible(false);
|
|
164
|
+
} },
|
|
165
|
+
React.createElement(Text, { color: "white" }, text)))),
|
|
166
|
+
React.createElement(Pressable, Object.assign({ onTouchStart: handleTouchStart }, (isWeb ? webPressProps : mobilePressProps)), React.cloneElement(children, {
|
|
167
|
+
ref: childrenWrapperRef,
|
|
168
|
+
}))));
|
|
169
|
+
});
|
|
170
|
+
//# sourceMappingURL=Tooltip.js.map
|