ferns-ui 0.22.4 → 0.23.0

package/dist/Tooltip.js

@@ -0,0 +1,170 @@
+import * as React from "react";
+import { forwardRef } from "react";
+import { Dimensions, Platform, Pressable, } from "react-native";
+import { Portal } from "react-native-portalize";
+import { Text } from "./Text";
+import { Unifier } from "./Unifier";
+const TOOLTIP_OFFSET = 8;
+// How many pixels to leave between the tooltip and the edge of the screen
+const TOOLTIP_OVERFLOW_PADDING = 20;
+const overflowLeft = (x) => {
+    return x < TOOLTIP_OVERFLOW_PADDING;
+};
+const overflowRight = (x) => {
+    const { width: layoutWidth } = Dimensions.get("window");
+    return x + TOOLTIP_OVERFLOW_PADDING > layoutWidth;
+};
+const getTooltipPosition = ({ children, tooltip, measured, idealDirection, }) => {
+    if (!measured) {
+        console.debug("No measurements for child yet, cannot show tooltip.");
+        return {};
+    }
+    const { pageY: childrenY, height: childrenHeight, pageX: childrenX, width: childrenWidth, } = children;
+    const { width: tooltipWidth, height: tooltipHeight } = tooltip;
+    const horizontalCenter = childrenX + childrenWidth / 2;
+    const right = childrenX + childrenWidth + TOOLTIP_OFFSET;
+    const left = childrenX - tooltipWidth - TOOLTIP_OFFSET;
+    const top = childrenY - tooltipHeight - TOOLTIP_OFFSET;
+    const bottom = childrenY + childrenHeight + TOOLTIP_OFFSET;
+    const verticalCenter = top + childrenHeight + TOOLTIP_OFFSET;
+    // Top is overflowed if it would go off either side or the top of the screen.
+    const overflowTop = top < TOOLTIP_OVERFLOW_PADDING;
+    // Bottom is overflowed if it would go off either side or the bottom of the screen.
+    const overflowBottom = bottom + tooltipHeight + TOOLTIP_OVERFLOW_PADDING > Dimensions.get("window").height;
+    // If it would overflow to the right, try to put it above, if not, put it on the left.
+    // If it would overflow to the left, try to put it above, if not, put it to the right.
+    // Happy path:
+    if (idealDirection === "left" && !overflowLeft(left)) {
+        return { left, top: verticalCenter };
+    }
+    else if (idealDirection === "right" && !overflowRight(right + tooltipWidth)) {
+        return { left: right, top: verticalCenter };
+    }
+    else if (idealDirection === "bottom" &&
+        !overflowBottom &&
+        !overflowLeft(horizontalCenter - tooltipWidth) &&
+        !overflowRight(horizontalCenter + tooltipWidth)) {
+        return { left: horizontalCenter - tooltipWidth / 2, top: bottom };
+    }
+    else {
+        // At this point, we're either trying to place it above or below, and force it into the viewport.
+        let y = top;
+        if ((idealDirection === "bottom" && !overflowBottom) || overflowTop) {
+            y = bottom;
+        }
+        // If it fits in the viewport, center it above the child.
+        if (!overflowLeft(horizontalCenter - tooltipWidth) &&
+            !overflowRight(horizontalCenter + tooltipWidth)) {
+            return { left: horizontalCenter - tooltipWidth / 2, top: y };
+        }
+        // Failing that, if it fits on the left, put it there, otherwise to the right. We know it's smaller than the
+        // viewport.
+        else if (overflowLeft(horizontalCenter - tooltipWidth)) {
+            return { left: TOOLTIP_OVERFLOW_PADDING, top: y };
+        }
+        else {
+            return {
+                left: Dimensions.get("window").width - TOOLTIP_OVERFLOW_PADDING - tooltipWidth,
+                top: y,
+            };
+        }
+    }
+};
+// eslint-disable-next-line react/display-name
+export const Tooltip = forwardRef((props, _ref) => {
+    const { text, children, bgColor, idealDirection } = props;
+    const hoverDelay = 500;
+    const hoverEndDelay = 1500;
+    const [visible, setVisible] = React.useState(false);
+    const [measurement, setMeasurement] = React.useState({
+        children: {},
+        tooltip: {},
+        measured: false,
+    });
+    const showTooltipTimer = React.useRef();
+    const hideTooltipTimer = React.useRef();
+    const childrenWrapperRef = React.useRef();
+    const touched = React.useRef(false);
+    const isWeb = Platform.OS === "web";
+    React.useEffect(() => {
+        return () => {
+            if (showTooltipTimer.current) {
+                clearTimeout(showTooltipTimer.current);
+            }
+            if (hideTooltipTimer.current) {
+                clearTimeout(hideTooltipTimer.current);
+            }
+        };
+    }, []);
+    const handleOnLayout = ({ nativeEvent: { layout } }) => {
+        var _a;
+        (_a = childrenWrapperRef === null || childrenWrapperRef === void 0 ? void 0 : childrenWrapperRef.current) === null || _a === void 0 ? void 0 : _a.measure((_x, _y, width, height, pageX, pageY) => {
+            setMeasurement({
+                children: { pageX, pageY, height, width },
+                tooltip: Object.assign({}, layout),
+                measured: true,
+            });
+        });
+    };
+    const handleTouchStart = () => {
+        if (hideTooltipTimer.current) {
+            clearTimeout(hideTooltipTimer.current);
+        }
+        showTooltipTimer.current = setTimeout(() => {
+            touched.current = true;
+            setVisible(true);
+        }, 100);
+    };
+    const handleHoverIn = () => {
+        if (hideTooltipTimer.current) {
+            clearTimeout(hideTooltipTimer.current);
+        }
+        showTooltipTimer.current = setTimeout(() => {
+            touched.current = true;
+            setVisible(true);
+        }, hoverDelay);
+    };
+    const handleHoverOut = () => {
+        touched.current = false;
+        if (showTooltipTimer.current) {
+            clearTimeout(showTooltipTimer.current);
+        }
+        hideTooltipTimer.current = setTimeout(() => {
+            setVisible(false);
+            setMeasurement({ children: {}, tooltip: {}, measured: false });
+        }, hoverEndDelay);
+    };
+    const mobilePressProps = {
+        onPress: React.useCallback(() => {
+            var _a, _b;
+            if (touched.current) {
+                return null;
+            }
+            else {
+                return (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        }, [children.props]),
+    };
+    const webPressProps = {
+        onHoverIn: () => {
+            var _a, _b;
+            handleHoverIn();
+            (_b = (_a = children.props).onHoverIn) === null || _b === void 0 ? void 0 : _b.call(_a);
+        },
+        onHoverOut: () => {
+            var _a, _b;
+            handleHoverOut();
+            (_b = (_a = children.props).onHoverOut) === null || _b === void 0 ? void 0 : _b.call(_a);
+        },
+    };
+    return (React.createElement(React.Fragment, null,
+        visible && (React.createElement(Portal, null,
+            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: () => {
+                    setVisible(false);
+                } },
+                React.createElement(Text, { color: "white" }, text)))),
+        React.createElement(Pressable, Object.assign({ onTouchStart: handleTouchStart }, (isWeb ? webPressProps : mobilePressProps)), React.cloneElement(children, {
+            ref: childrenWrapperRef,
+        }))));
+});
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,UAAU,EAAC,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,UAAU,EAGV,QAAQ,EACR,SAAS,GAEV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAG9C,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,0EAA0E;AAC1E,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAgBpC,MAAM,YAAY,GAAG,CAAC,CAAS,EAAW,EAAE;IAC1C,OAAO,CAAC,GAAG,wBAAwB,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,CAAS,EAAW,EAAE;IAC3C,MAAM,EAAC,KAAK,EAAE,WAAW,EAAC,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACtD,OAAO,CAAC,GAAG,wBAAwB,GAAG,WAAW,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,cAAc,GACF,EAAoC,EAAE;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;QACrE,OAAO,EAAE,CAAC;KACX;IAED,MAAM,EACJ,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,cAAc,EACtB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,aAAa,GACrB,GAAwB,QAAQ,CAAC;IAClC,MAAM,EAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAC,GAAG,OAAO,CAAC;IAC7D,MAAM,gBAAgB,GAAG,SAAS,GAAG,aAAa,GAAG,CAAC,CAAC;IACvD,MAAM,KAAK,GAAG,SAAS,GAAG,aAAa,GAAG,cAAc,CAAC;IACzD,MAAM,IAAI,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,CAAC;IAEvD,MAAM,GAAG,GAAG,SAAS,GAAG,aAAa,GAAG,cAAc,CAAC;IACvD,MAAM,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IAC3D,MAAM,cAAc,GAAG,GAAG,GAAG,cAAc,GAAG,cAAc,CAAC;IAE7D,6EAA6E;IAC7E,MAAM,WAAW,GAAG,GAAG,GAAG,wBAAwB,CAAC;IAEnD,mFAAmF;IACnF,MAAM,cAAc,GAClB,MAAM,GAAG,aAAa,GAAG,wBAAwB,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAEtF,sFAAsF;IACtF,sFAAsF;IAEtF,cAAc;IACd,IAAI,cAAc,KAAK,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;QACpD,OAAO,EAAC,IAAI,EAAE,GAAG,EAAE,cAAc,EAAC,CAAC;KACpC;SAAM,IAAI,cAAc,KAAK,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,YAAY,CAAC,EAAE;QAC7E,OAAO,EAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,cAAc,EAAC,CAAC;KAC3C;SAAM,IACL,cAAc,KAAK,QAAQ;QAC3B,CAAC,cAAc;QACf,CAAC,YAAY,CAAC,gBAAgB,GAAG,YAAY,CAAC;QAC9C,CAAC,aAAa,CAAC,gBAAgB,GAAG,YAAY,CAAC,EAC/C;QACA,OAAO,EAAC,IAAI,EAAE,gBAAgB,GAAG,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,MAAM,EAAC,CAAC;KACjE;SAAM;QACL,iGAAiG;QAEjG,IAAI,CAAC,GAAG,GAAG,CAAC;QACZ,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,WAAW,EAAE;YACnE,CAAC,GAAG,MAAM,CAAC;SACZ;QAED,yDAAyD;QACzD,IACE,CAAC,YAAY,CAAC,gBAAgB,GAAG,YAAY,CAAC;YAC9C,CAAC,aAAa,CAAC,gBAAgB,GAAG,YAAY,CAAC,EAC/C;YACA,OAAO,EAAC,IAAI,EAAE,gBAAgB,GAAG,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,EAAC,CAAC;SAC5D;QACD,4GAA4G;QAC5G,YAAY;aACP,IAAI,YAAY,CAAC,gBAAgB,GAAG,YAAY,CAAC,EAAE;YACtD,OAAO,EAAC,IAAI,EAAE,wBAAwB,EAAE,GAAG,EAAE,CAAC,EAAC,CAAC;SACjD;aAAM;YACL,OAAO;gBACL,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,wBAAwB,GAAG,YAAY;gBAC9E,GAAG,EAAE,CAAC;aACP,CAAC;SACH;KACF;AACH,CAAC,CAAC;AASF,8CAA8C;AAC9C,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,KAAmB,EAAE,IAAS,EAAE,EAAE;IACnE,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAC,GAAG,KAAK,CAAC;IACxD,MAAM,UAAU,GAAG,GAAG,CAAC;IACvB,MAAM,aAAa,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC;QACnD,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,EAAE;QACX,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC;IACH,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACxD,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IACxD,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,EAAkC,CAAC;IAE1E,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,MAAM,KAAK,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC;IAEpC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,CAAC,OAAO,EAAE;gBAC5B,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;aACxC;YAED,IAAI,gBAAgB,CAAC,OAAO,EAAE;gBAC5B,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;aACxC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,CAAC,EAAC,WAAW,EAAE,EAAC,MAAM,EAAC,EAAoB,EAAE,EAAE;;QACpE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,0CAAE,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;YAC3E,cAAc,CAAC;gBACb,QAAQ,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAC;gBACvC,OAAO,oBAAM,MAAM,CAAC;gBACpB,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;QACL,CAAC,EAAE;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,gBAAgB,CAAC,OAAO,EAAE;YAC5B,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACzC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EAAE,GAAG,CAA8B,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,gBAAgB,CAAC,OAAO,EAAE;YAC5B,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACzC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EAAE,UAAU,CAA8B,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,IAAI,gBAAgB,CAAC,OAAO,EAAE;YAC5B,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACzC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,cAAc,CAAC,EAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAC,CAAC,CAAC;QAC/D,CAAC,EAAE,aAAa,CAA8B,CAAC;IACjD,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG;QACvB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;;YAC9B,IAAI,OAAO,CAAC,OAAO,EAAE;gBACnB,OAAO,IAAI,CAAC;aACb;iBAAM;gBACL,aAAO,MAAA,QAAQ,CAAC,KAAK,EAAC,OAAO,mDAAK;aACnC;QACH,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACrB,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB,SAAS,EAAE,GAAG,EAAE;;YACd,aAAa,EAAE,CAAC;YAChB,MAAA,MAAA,QAAQ,CAAC,KAAK,EAAC,SAAS,mDAAK;QAC/B,CAAC;QACD,UAAU,EAAE,GAAG,EAAE;;YACf,cAAc,EAAE,CAAC;YACjB,MAAA,MAAA,QAAQ,CAAC,KAAK,EAAC,UAAU,mDAAK;QAChC,CAAC;KACF,CAAC;IAEF,OAAO,CACL;QACG,OAAO,IAAI,CACV,oBAAC,MAAM;YACL,oBAAC,SAAS,IACR,KAAK,gCACH,SAAS,EAAE,YAAY,EACvB,cAAc,EAAE,QAAQ,EACxB,iBAAiB,EAAE,EAAE,EACrB,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,UAAU,CAAC,EACrD,YAAY,EAAE,EAAE,EAChB,eAAe,EAAE,CAAC,EAClB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,CAAC,EACb,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,EAAE,EAAE,GAAG,CAAC,IACzD,kBAAkB,iCAAM,WAA2B,KAAE,cAAc,IAAE,GACrE,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,OAAO,EAAE,CAAC,EAAC,CAAC,CAAC,CAAC,EAAC,OAAO,EAAE,CAAC,EAAC,CAAC,GAEzD,MAAM,EAAC,mBAAmB,EAC1B,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,GAAG,EAAE;oBACZ,UAAU,CAAC,KAAK,CAAC,CAAC;gBACpB,CAAC;gBAED,oBAAC,IAAI,IAAC,KAAK,EAAC,OAAO,IAAE,IAAI,CAAQ,CACvB,CACL,CACV;QACD,oBAAC,SAAS,kBAAC,YAAY,EAAE,gBAAgB,IAAM,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,GACtF,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;YAC5B,GAAG,EAAE,kBAAkB;SACxB,CAAC,CACQ,CACX,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./CheckBox";
 export * from "./DateTimeActionSheet";
 export * from "./ErrorBoundary";
 export * from "./ErrorPage";
+export * from "./FernsProvider";
 export * from "./FlatList";
 export * from "./Field";
 export * from "./Form";
@@ -22,6 +23,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
+export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./Mask";
 export * from "./Meta";
@@ -38,6 +40,8 @@ export * from "./TapToEdit";
 export * from "./Text";
 export * from "./TextArea";
 export * from "./TextField";
+export * from "./Tooltip";
+export * from "./Toast";
 export * from "./UnifiedScreens";
 export * from "./Unifier";
 export * from "./WithLabel";

package/dist/index.js

@@ -13,6 +13,7 @@ export * from "./CheckBox";
 export * from "./DateTimeActionSheet";
 export * from "./ErrorBoundary";
 export * from "./ErrorPage";
+export * from "./FernsProvider";
 export * from "./FlatList";
 export * from "./Field";
 export * from "./Form";
@@ -22,6 +23,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
+export * from "./InfoTooltipButton";
 // export * from "./Layout";
 // export * from "./Drawer";
 export * from "./Link";
@@ -40,6 +42,8 @@ export * from "./TapToEdit";
 export * from "./Text";
 export * from "./TextArea";
 export * from "./TextField";
+export * from "./Tooltip";
+export * from "./Toast";
 export * from "./UnifiedScreens";
 export * from "./Unifier";
 export * from "./WithLabel";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.22.4",
+  "version": "0.23.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -167,6 +167,7 @@
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",
     "react-native-svg": "^13.0.0",
+    "react-native-toast-notifications": "^3.3.1",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-time-picker": "^5.0.0",
@@ -198,6 +199,7 @@
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",
     "react-native-svg": "^13.0.0",
+    "react-native-toast-notifications": "^3.3.1",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-time-picker": "^5.0.0"

package/src/Button.tsx

@@ -29,6 +29,7 @@ export interface ButtonProps {
   withConfirmation?: boolean;
   confirmationText?: string;
   confirmationHeading?: string;
+  shape?: "rounded" | "pill";
 }
 
 const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
@@ -67,6 +68,7 @@ export function Button({
   withConfirmation = false,
   confirmationText = "Are you sure you want to continue?",
   confirmationHeading = "Confirm",
+  shape = "rounded",
 }: ButtonProps) {
   const [loading, setLoading] = useState(propsLoading);
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -136,7 +138,7 @@ export function Button({
           // flexGrow: inline ? 0 : 1,
           alignItems: "center",
           justifyContent: "center",
-          borderRadius: 5,
+          borderRadius: shape === "pill" ? 999 : 5,
           borderColor: getBorderColor(color),
           borderWidth: type === "outline" ? 2 : 0,
           opacity: disabled ? 0.4 : 1,

package/src/Common.ts

@@ -2004,25 +2004,12 @@ export interface IconProps {
   containerStyle?: any;
 }
 
-export interface IconButtonProps {
-  prefix?: IconPrefix;
-  icon: IconName;
-  accessibilityLabel: string;
-  iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
-  onClick: () => void;
-  size?: IconSize;
-  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white"; // default transparent
-  disabled?: boolean;
-  selected?: boolean;
-  withConfirmation?: boolean;
-  confirmationText?: string;
-  confirmationHeading?: string;
-}
-
 export interface NavigatorProps {
   config?: any;
 }
 
+export type TooltipDirection = "top" | "bottom" | "left" | "right";
+
 export interface PillProps {
   text: string;
   color: AllColors;

package/src/FernsProvider.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import {ToastProvider} from "react-native-toast-notifications";
+
+import {Toast} from "./Toast";
+
+export function FernsProvider({children}: {children: React.ReactNode}): React.ReactElement {
+  return (
+    <ToastProvider
+      animationDuration={250}
+      animationType="slide-in"
+      duration={50000}
+      offset={50}
+      placement="bottom"
+      renderToast={(toastOptions) => <Toast {...(toastOptions as any)} />}
+      swipeEnabled
+    >
+      {children}
+    </ToastProvider>
+  );
+}

package/src/IconButton.tsx

@@ -1,89 +1,141 @@
-import React, {useState} from "react";
-import {TouchableOpacity} from "react-native";
+import React, {forwardRef, useState} from "react";
+import {Platform, TouchableOpacity, View} from "react-native";
 
-import {IconButtonProps, iconSizeToNumber} from "./Common";
+import {
+  ButtonColor,
+  Color,
+  IconName,
+  IconPrefix,
+  IconSize,
+  iconSizeToNumber,
+  ThemeColor,
+  TooltipDirection,
+} from "./Common";
 import {Icon} from "./Icon";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
+import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 
-export function IconButton({
-  prefix,
-  icon,
-  iconColor,
-  onClick,
-  size,
-  bgColor = "transparent",
-  withConfirmation = false,
-  confirmationText = "Are you sure you want to continue?",
-  confirmationHeading = "Confirm",
-}: IconButtonProps) {
-  const [showConfirmation, setShowConfirmation] = useState(false);
+export interface IconButtonProps {
+  prefix?: IconPrefix;
+  icon: IconName;
+  accessibilityLabel: string;
+  iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
+  onClick: () => void;
+  size?: IconSize;
+  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white"; // default transparent
+  disabled?: boolean;
+  selected?: boolean;
+  withConfirmation?: boolean;
+  confirmationText?: string;
+  confirmationHeading?: string;
+  tooltip?: {
+    text: string;
+    idealDirection?: TooltipDirection;
+  };
+}
 
-  let opacity = 1;
-  let color;
-  if (bgColor === "transparentDarkGray") {
-    opacity = 0.8;
-    color = Unifier.theme.darkGray;
-  } else if (bgColor === "transparent" || !bgColor) {
-    opacity = 0.0;
-    color = Unifier.theme.white;
-  } else {
-    color = Unifier.theme[bgColor];
-  }
+// eslint-disable-next-line react/display-name
+export const IconButton = forwardRef(
+  (
+    {
+      prefix,
+      icon,
+      iconColor,
+      onClick,
+      size,
+      bgColor = "transparent",
+      withConfirmation = false,
+      confirmationText = "Are you sure you want to continue?",
+      confirmationHeading = "Confirm",
+      tooltip,
+    }: IconButtonProps,
+    ref
+  ) => {
+    const [showConfirmation, setShowConfirmation] = useState(false);
 
-  const renderConfirmation = () => {
-    return (
-      <Modal
-        heading={confirmationHeading}
-        primaryButtonOnClick={() => {
-          onClick();
-          setShowConfirmation(false);
-        }}
-        primaryButtonText="Confirm"
-        secondaryButtonOnClick={(): void => setShowConfirmation(false)}
-        secondaryButtonText="Cancel"
-        size="sm"
-        visible={showConfirmation}
-        onDismiss={(): void => {
-          setShowConfirmation(false);
-        }}
-      >
-        <Text>{confirmationText}</Text>
-      </Modal>
-    );
-  };
+    let opacity = 1;
+    let color: string;
+    if (bgColor === "transparentDarkGray") {
+      opacity = 0.8;
+      color = Unifier.theme.darkGray;
+    } else if (bgColor === "transparent" || !bgColor) {
+      opacity = 1.0;
+      color = Unifier.theme.white;
+    } else {
+      color = Unifier.theme[bgColor];
+    }
 
-  return (
-    <>
-      <TouchableOpacity
-        hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
-        style={{
-          opacity,
-          backgroundColor: color,
-          borderRadius: 100,
-          // paddingBottom: iconSizeToNumber(size) / 4,
-          // paddingTop: iconSizeToNumber(size) / 4,
-          // paddingLeft: iconSizeToNumber(size) / 2,
-          // paddingRight: iconSizeToNumber(size) / 2,
-          width: iconSizeToNumber(size) * 2.5,
-          height: iconSizeToNumber(size) * 2.5,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-        onPress={() => {
-          Unifier.utils.haptic();
-          if (withConfirmation && !showConfirmation) {
-            setShowConfirmation(true);
-          } else if (onClick) {
+    const renderConfirmation = () => {
+      return (
+        <Modal
+          heading={confirmationHeading}
+          primaryButtonOnClick={() => {
             onClick();
-          }
-        }}
-      >
-        <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
-      </TouchableOpacity>
-      {Boolean(withConfirmation) && renderConfirmation()}
-    </>
-  );
-}
+            setShowConfirmation(false);
+          }}
+          primaryButtonText="Confirm"
+          secondaryButtonOnClick={(): void => setShowConfirmation(false)}
+          secondaryButtonText="Cancel"
+          size="sm"
+          visible={showConfirmation}
+          onDismiss={(): void => {
+            setShowConfirmation(false);
+          }}
+        >
+          <Text>{confirmationText}</Text>
+        </Modal>
+      );
+    };
+
+    function renderIconButton(): React.ReactElement {
+      return (
+        <View>
+          <TouchableOpacity
+            ref={ref as any}
+            hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
+            style={{
+              opacity,
+              backgroundColor: color,
+              borderRadius: 100,
+              // paddingBottom: iconSizeToNumber(size) / 4,
+              // paddingTop: iconSizeToNumber(size) / 4,
+              // paddingLeft: iconSizeToNumber(size) / 2,
+              // paddingRight: iconSizeToNumber(size) / 2,
+              width: iconSizeToNumber(size) * 2.5,
+              height: iconSizeToNumber(size) * 2.5,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+            onPress={() => {
+              Unifier.utils.haptic();
+              if (withConfirmation && !showConfirmation) {
+                setShowConfirmation(true);
+              } else if (onClick) {
+                onClick();
+              }
+            }}
+          >
+            <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
+          </TouchableOpacity>
+          {Boolean(withConfirmation) && renderConfirmation()}
+        </View>
+      );
+    }
+
+    // Only add for web. This doesn't make much sense for mobile, since the action would be performed for the button
+    // as well as the tooltip appearing.
+    // TODO: Add tooltip info button next to the icon button on mobile.
+    if (tooltip && Platform.OS === "web") {
+      return (
+        <Tooltip idealDirection={tooltip.idealDirection} text={tooltip.text}>
+          {renderIconButton()}
+        </Tooltip>
+      );
+    } else {
+      return renderIconButton();
+    }
+  }
+);

package/src/InfoTooltipButton.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import {IconSize} from "./Common";
+import {IconButton} from "./IconButton";
+
+interface InfoTooltipButtonProps {
+  text: string;
+  size?: IconSize;
+}
+
+export function InfoTooltipButton({text, size}: InfoTooltipButtonProps): React.ReactElement {
+  return (
+    <IconButton
+      accessibilityLabel="info"
+      bgColor="transparent"
+      icon="exclamation"
+      iconColor="blue"
+      size={size}
+      tooltip={{text}}
+      onClick={() => {}}
+    />
+  );
+}

package/src/Modal.tsx

@@ -108,43 +108,41 @@ export const Modal = ({
   }
 
   return (
-    <Box alignItems="center" flex="grow" height="100%" justifyContent="center" width="100%">
-      <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
-        <Box
-          alignItems="center"
-          alignSelf="center"
-          color="white"
-          dangerouslySetInlineStyle={{
-            __style: {
-              zIndex: 1,
-              shadowColor: "#999",
-              shadowOffset: {
-                width: 4,
-                height: 6,
-              },
-              shadowRadius: 4,
-              shadowOpacity: 1.0,
-              elevation: 8,
+    <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
+      <Box
+        alignItems="center"
+        alignSelf="center"
+        color="white"
+        dangerouslySetInlineStyle={{
+          __style: {
+            zIndex: 1,
+            shadowColor: "#999",
+            shadowOffset: {
+              width: 4,
+              height: 6,
             },
-          }}
-          direction="column"
-          justifyContent="center"
-          marginTop={12}
-          maxWidth={sizePx}
-          minWidth={300}
-          paddingX={8}
-          paddingY={2}
-          rounding={6}
-          shadow
-          width={sizePx}
-        >
-          <Box marginBottom={6} width="100%">
-            {renderHeader()}
-            <Box paddingY={4}>{children}</Box>
-            <Box paddingY={4}>{renderFooter()}</Box>
-          </Box>
+            shadowRadius: 4,
+            shadowOpacity: 1.0,
+            elevation: 8,
+          },
+        }}
+        direction="column"
+        justifyContent="center"
+        marginTop={12}
+        maxWidth={sizePx}
+        minWidth={300}
+        paddingX={8}
+        paddingY={2}
+        rounding={6}
+        shadow
+        width={sizePx}
+      >
+        <Box marginBottom={6} width="100%">
+          {renderHeader()}
+          <Box paddingY={4}>{children}</Box>
+          <Box paddingY={4}>{renderFooter()}</Box>
         </Box>
-      </RNModal>
-    </Box>
+      </Box>
+    </RNModal>
   );
 };