ferns-ui 0.14.0 → 0.16.0

package/dist/Avatar.d.ts

@@ -23,6 +23,19 @@ interface AvatarProps {
      * The URL of the user's image.
      */
     src?: string;
+    /**
+     * The fit for the image within the Avatar: "cover" | "contain" | "none".
+     * Default is undefined. See Image.tsx for more info
+     */
+    imageFit?: "cover" | "contain" | "none";
+    /**
+     * Allow user to edit the image of the avatar
+     */
+    editAvatarImage?: boolean;
+    /**
+     * Function to handle the avatar image edit
+     */
+    onChange?: (val: any) => void;
 }
 export declare const Avatar: (props: AvatarProps) => React.ReactElement;
 export {};

package/dist/Avatar.js

@@ -1,6 +1,9 @@
+import { launchImageLibraryAsync, MediaTypeOptions } from "expo-image-picker";
 import React, { useState } from "react";
 import { Image, Text, View } from "react-native";
 import { Box } from "./Box";
+import { iconSizeToNumber } from "./Common";
+import { Icon } from "./Icon";
 import { Unifier } from "./Unifier";
 const sizes = {
     xs: 24,
@@ -10,9 +13,10 @@ const sizes = {
     xl: 120,
 };
 export const Avatar = (props) => {
-    var _a;
+    var _a, _b;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const { name, initials, outline, size = "md", src } = props;
+    const [src, setSrc] = useState((_a = props.src) !== null && _a !== void 0 ? _a : undefined);
+    const { name, initials, outline, size = "md", imageFit = "contain", editAvatarImage, onChange, } = props;
     const width = sizes[size];
     const height = sizes[size];
     const radius = sizes[size] / 2;
@@ -24,28 +28,44 @@ export const Avatar = (props) => {
         .join("")
         .toLocaleUpperCase();
     const handleImageError = () => setIsImageLoaded(false);
-    return (React.createElement(Box, { border: outline ? "white" : undefined, height: height, overflow: "hidden", position: "relative", rounding: "circle", width: width }, src && isImageLoaded ? (
-    // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
-    //  unrounded box around the Image.
-    React.createElement(Image, { resizeMode: "contain", source: { uri: src, cache: "force-cache" }, style: {
-            borderRadius: radius,
-            height,
-            width,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            overflow: "hidden",
-        }, onError: handleImageError })) : (React.createElement(View, { style: {
-            height,
-            width,
-            borderRadius: radius,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: props.backgroundColor
-                ? Unifier.theme[props.backgroundColor]
-                : Unifier.theme.gray,
-        } },
-        React.createElement(Text, { style: { fontSize, color: (_a = props.textColor) !== null && _a !== void 0 ? _a : Unifier.theme.darkGray } }, computedInitials)))));
+    const pickImage = async () => {
+        // TODO: Add permission request to use camera to take a picture
+        const result = await launchImageLibraryAsync({
+            mediaTypes: MediaTypeOptions.Images,
+            allowsEditing: true,
+        });
+        if (!result.cancelled) {
+            setSrc(result.uri);
+            if (onChange) {
+                onChange(result);
+            }
+        }
+    };
+    return (React.createElement(Box, { border: outline ? "white" : undefined, height: height, overflow: "hidden", position: "relative", rounding: "circle", width: editAvatarImage ? width + iconSizeToNumber(size) : width },
+        editAvatarImage && (React.createElement(Box, { bottom: true, position: "absolute", right: true, zIndex: 5, onClick: pickImage },
+            React.createElement(Icon, { color: "black", name: "edit", size: size }))),
+        src && isImageLoaded ? (
+        // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
+        // unrounded box around the Image.
+        React.createElement(Image, { resizeMode: imageFit, source: { uri: src, cache: "force-cache" }, style: {
+                borderRadius: radius,
+                height,
+                width,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+            }, onError: handleImageError })) : (React.createElement(View, { style: {
+                height,
+                width,
+                borderRadius: radius,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: props.backgroundColor
+                    ? Unifier.theme[props.backgroundColor]
+                    : Unifier.theme.gray,
+            } },
+            React.createElement(Text, { style: { fontSize, color: (_b = props.textColor) !== null && _b !== void 0 ? _b : Unifier.theme.darkGray } }, computedInitials)))));
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/Button.d.ts

@@ -13,5 +13,8 @@ export interface ButtonProps {
     icon?: GestaltIconName | string;
     iconPrefix?: IconPrefix;
     iconColor?: ButtonColor | Color;
+    withConfirmation?: boolean;
+    confirmationText?: string;
+    confirmationHeading?: string;
 }
-export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, }: ButtonProps): JSX.Element;
+export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, withConfirmation, confirmationText, confirmationHeading, }: ButtonProps): JSX.Element;

package/dist/Button.js

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { ActivityIndicator, TouchableOpacity } from "react-native";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
+import { Modal } from "./Modal";
 import { Text } from "./Text";
 import { Unifier } from "./Unifier";
 const buttonTextColor = {
@@ -24,8 +25,9 @@ const HEIGHTS = {
     md: 40,
     lg: 48,
 };
-export function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color = "lightGray", }) {
+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", }) {
     const [loading, setLoading] = useState(propsLoading);
+    const [showConfirmation, setShowConfirmation] = useState(false);
     const getBackgroundColor = (backgroundColor) => {
         if (type === "ghost" || type === "outline") {
             return "transparent";
@@ -56,40 +58,54 @@ export function Button({ disabled, type, loading: propsLoading, children, text,
     if (color === "gray") {
         color = "lightGray";
     }
-    return (React.createElement(TouchableOpacity, { disabled: disabled || loading, style: {
-            alignSelf: inline === true ? undefined : "stretch",
-            height: HEIGHTS[size || "md"],
-            backgroundColor: getBackgroundColor(color),
-            // width: inline === true ? undefined : "100%",
-            flexShrink: inline ? 1 : 0,
-            // flexGrow: inline ? 0 : 1,
-            alignItems: "center",
-            justifyContent: "center",
-            borderRadius: 5,
-            borderColor: getBorderColor(color),
-            borderWidth: type === "outline" ? 2 : 0,
-            opacity: disabled ? 0.4 : 1,
-            flexDirection: "row",
-            paddingHorizontal: 4 * 2,
-        }, onPress: debounce(async () => {
-            Unifier.utils.haptic();
-            setLoading(true);
-            try {
-                if (onClick) {
-                    await onClick();
+    const renderConfirmation = () => {
+        return (React.createElement(Modal, { heading: confirmationHeading, primaryButtonOnClick: () => {
+                onClick();
+                setShowConfirmation(false);
+            }, primaryButtonText: "Confirm", secondaryButtonOnClick: () => setShowConfirmation(false), secondaryButtonText: "Cancel", size: "sm", visible: showConfirmation, onDismiss: () => {
+                setShowConfirmation(false);
+            } },
+            React.createElement(Text, null, confirmationText)));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TouchableOpacity, { disabled: disabled || loading, style: {
+                alignSelf: inline === true ? undefined : "stretch",
+                height: HEIGHTS[size || "md"],
+                backgroundColor: getBackgroundColor(color),
+                // width: inline === true ? undefined : "100%",
+                flexShrink: inline ? 1 : 0,
+                // flexGrow: inline ? 0 : 1,
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: 5,
+                borderColor: getBorderColor(color),
+                borderWidth: type === "outline" ? 2 : 0,
+                opacity: disabled ? 0.4 : 1,
+                flexDirection: "row",
+                paddingHorizontal: 4 * 2,
+            }, onPress: debounce(async () => {
+                Unifier.utils.haptic();
+                setLoading(true);
+                try {
+                    if (withConfirmation && !showConfirmation) {
+                        setShowConfirmation(true);
+                    }
+                    else if (onClick) {
+                        await onClick();
+                    }
+                }
+                catch (e) {
+                    setLoading(false);
+                    throw e;
                 }
-            }
-            catch (e) {
                 setLoading(false);
-                throw e;
-            }
-            setLoading(false);
-        }, 500, { leading: true }) },
-        icon !== undefined && (React.createElement(Box, { paddingX: 2 },
-            React.createElement(Icon, { color: getTextColor(color), name: icon, prefix: iconPrefix || "far", size: size }))),
-        Boolean(children) && children,
-        Boolean(text) && (React.createElement(Text, { color: getTextColor(color), font: "button", inline: inline, size: size, skipLinking: true, weight: "bold" }, text)),
-        (loading || loading) && (React.createElement(Box, { marginLeft: 2 },
-            React.createElement(ActivityIndicator, { color: getTextColor(color), size: "small" })))));
+            }, 500, { leading: true }) },
+            icon !== undefined && (React.createElement(Box, { paddingX: 2 },
+                React.createElement(Icon, { color: getTextColor(color), name: icon, prefix: iconPrefix || "far", size: size }))),
+            Boolean(children) && children,
+            Boolean(text) && (React.createElement(Text, { color: getTextColor(color), font: "button", inline: inline, size: size, skipLinking: true, weight: "bold" }, text)),
+            Boolean(loading) && (React.createElement(Box, { marginLeft: 2 },
+                React.createElement(ActivityIndicator, { color: getTextColor(color), size: "small" })))),
+        Boolean(withConfirmation) && renderConfirmation()));
 }
 //# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -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,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAqBlC,MAAM,eAAe,GAAkD;IACrE,IAAI,EAAE,OAAO;IACb,SAAS,EAAE,UAAU;IACrB,GAAG,EAAE,OAAO;IACZ,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,UAAU;IACjB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,MAAM,OAAO,GAAG;IACd,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AAEF,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,OAAO,EAAE,YAAY,EACrB,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,WAAW,GACP;IACZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,kBAAkB,GAAG,CAAC,eAAuB,EAAU,EAAE;QAC7D,IAAI,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,SAAS,EAAE;YAC1C,OAAO,aAAa,CAAC;SACtB;aAAM;YACL,OAAO,OAAO,CAAC,KAAK,CAAC,eAAqC,CAAC,CAAC;SAC7D;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,SAAgB,EAAS,EAAE;QAC/C,IAAI,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,SAAS,EAAE;YAC1C,OAAO,SAAS,CAAC;SAClB;aAAM,IAAI,SAAS,KAAK,SAAS,EAAE;YAClC,OAAO,UAAU,CAAC;SACnB;aAAM;YACL,OAAO,eAAe,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC;SAC9C;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,WAAmB,EAAU,EAAE;QACrD,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,OAAO,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,WAAoB,CAAC,CAAC,CAAC;SAC1D;aAAM;YACL,OAAO,aAAa,CAAC;SACtB;IACH,CAAC,CAAC;IAEF,IAAI,KAAK,KAAK,MAAM,EAAE;QACpB,KAAK,GAAG,WAAW,CAAC;KACrB;IACD,OAAO,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,KAAK,EAAE;YACL,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAClD,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC;YAC7B,eAAe,EAAE,kBAAkB,CAAC,KAAK,CAAC;YAC1C,+CAA+C;YAC/C,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,4BAA4B;YAC5B,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,cAAc,CAAC,KAAK,CAAC;YAClC,WAAW,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACvC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC3B,aAAa,EAAE,KAAK;YACpB,iBAAiB,EAAE,CAAC,GAAG,CAAC;SACzB,EACD,OAAO,EAAE,QAAQ,CACf,KAAK,IAAI,EAAE;YACT,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACvB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,IAAI;gBACF,IAAI,OAAO,EAAE;oBACX,MAAM,OAAO,EAAE,CAAC;iBACjB;aACF;YAAC,OAAO,CAAC,EAAE;gBACV,UAAU,CAAC,KAAK,CAAC,CAAC;gBAClB,MAAM,CAAC,CAAC;aACT;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EACD,GAAG,EACH,EAAC,OAAO,EAAE,IAAI,EAAC,CAChB;QAEA,IAAI,KAAK,SAAS,IAAI,CACrB,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC;YACd,oBAAC,IAAI,IACH,KAAK,EAAE,YAAY,CAAC,KAAc,CAAC,EACnC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,UAAU,IAAI,KAAK,EAC3B,IAAI,EAAE,IAAI,GACV,CACE,CACP;QACA,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ;QAC7B,OAAO,CAAC,IAAI,CAAC,IAAI,CAChB,oBAAC,IAAI,IACH,KAAK,EAAE,YAAY,CAAC,KAAc,CAAC,EACnC,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,WAAW,QACX,MAAM,EAAC,MAAM,IAEZ,IAAI,CACA,CACR;QACA,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CACvB,oBAAC,GAAG,IAAC,UAAU,EAAE,CAAC;YAChB,oBAAC,iBAAiB,IAAC,KAAK,EAAE,YAAY,CAAC,KAAc,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,CACnE,CACP,CACgB,CACpB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -145,6 +145,7 @@
     "eslint-plugin-unused-imports": "2.0.0",
     "expo-font": "^10.0.5",
     "expo-haptics": "~11.3.0",
+    "expo-image-picker": "^13.3.1",
     "lodash": "^4.17.21",
     "mixpanel-browser": "^2.38.0",
     "moment-timezone": "^0.5.35",
@@ -176,13 +177,14 @@
     "@react-native-picker/picker": "2.4.4",
     "expo-font": "^10.0.5",
     "expo-haptics": "~11.3.0",
+    "expo-image-picker": "^13.3.1",
     "lodash": "^4.17.21",
     "mixpanel-browser": "^2.38.0",
     "moment-timezone": "^0.5.35",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
     "react-datetime-picker": "^4.0.1",
+    "react-dev-utils": "^12.0.1",
     "react-dom": "18.2.0",
     "react-native": "0.69.4",
     "react-native-calendars": "^1.1288.2",

package/src/Avatar.tsx

@@ -1,8 +1,10 @@
+import {launchImageLibraryAsync, MediaTypeOptions} from "expo-image-picker";
 import React, {useState} from "react";
-import {Image, Text, View} from "react-native";
+import {Image, ImageResizeMode, Text, View} from "react-native";
 
 import {Box} from "./Box";
-import {AllColors} from "./Common";
+import {AllColors, iconSizeToNumber} from "./Common";
+import {Icon} from "./Icon";
 import {Unifier} from "./Unifier";
 
 const sizes = {
@@ -38,11 +40,33 @@ interface AvatarProps {
    * The URL of the user's image.
    */
   src?: string;
+  /**
+   * The fit for the image within the Avatar: "cover" | "contain" | "none".
+   * Default is undefined. See Image.tsx for more info
+   */
+  imageFit?: "cover" | "contain" | "none";
+  /**
+   * Allow user to edit the image of the avatar
+   */
+  editAvatarImage?: boolean;
+  /**
+   * Function to handle the avatar image edit
+   */
+  onChange?: (val: any) => void;
 }
 
 export const Avatar = (props: AvatarProps): React.ReactElement => {
   const [isImageLoaded, setIsImageLoaded] = useState(true);
-  const {name, initials, outline, size = "md", src} = props;
+  const [src, setSrc] = useState(props.src ?? undefined);
+  const {
+    name,
+    initials,
+    outline,
+    size = "md",
+    imageFit = "contain",
+    editAvatarImage,
+    onChange,
+  } = props;
   const width = sizes[size];
   const height = sizes[size];
   const radius = sizes[size] / 2;
@@ -57,6 +81,22 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
       .toLocaleUpperCase();
 
   const handleImageError = () => setIsImageLoaded(false);
+
+  const pickImage = async () => {
+    // TODO: Add permission request to use camera to take a picture
+    const result = await launchImageLibraryAsync({
+      mediaTypes: MediaTypeOptions.Images,
+      allowsEditing: true,
+    });
+
+    if (!result.cancelled) {
+      setSrc(result.uri);
+      if (onChange) {
+        onChange(result);
+      }
+    }
+  };
+
   return (
     <Box
       border={outline ? "white" : undefined}
@@ -64,13 +104,18 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
       overflow="hidden"
       position="relative"
       rounding="circle"
-      width={width}
+      width={editAvatarImage ? width + iconSizeToNumber(size) : width}
     >
+      {editAvatarImage && (
+        <Box bottom position="absolute" right zIndex={5} onClick={pickImage}>
+          <Icon color="black" name="edit" size={size} />
+        </Box>
+      )}
       {src && isImageLoaded ? (
         // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
-        //  unrounded box around the Image.
+        // unrounded box around the Image.
         <Image
-          resizeMode="contain"
+          resizeMode={imageFit as ImageResizeMode}
           source={{uri: src, cache: "force-cache"}}
           style={{
             borderRadius: radius,

package/src/Button.tsx

@@ -5,6 +5,7 @@ import {ActivityIndicator, TouchableOpacity} from "react-native";
 import {Box} from "./Box";
 import {ButtonColor, Color, GestaltIconName, IconPrefix, UnifiedTheme} from "./Common";
 import {Icon} from "./Icon";
+import {Modal} from "./Modal";
 import {Text} from "./Text";
 import {Unifier} from "./Unifier";
 
@@ -25,6 +26,9 @@ export interface ButtonProps {
   icon?: GestaltIconName | string;
   iconPrefix?: IconPrefix;
   iconColor?: ButtonColor | Color;
+  withConfirmation?: boolean;
+  confirmationText?: string;
+  confirmationHeading?: string;
 }
 
 const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
@@ -60,8 +64,12 @@ export function Button({
   size,
   onClick,
   color = "lightGray",
+  withConfirmation = false,
+  confirmationText = "Are you sure you want to continue?",
+  confirmationHeading = "Confirm",
 }: ButtonProps) {
   const [loading, setLoading] = useState(propsLoading);
+  const [showConfirmation, setShowConfirmation] = useState(false);
 
   const getBackgroundColor = (backgroundColor: string): string => {
     if (type === "ghost" || type === "outline") {
@@ -92,71 +100,99 @@ export function Button({
   if (color === "gray") {
     color = "lightGray";
   }
+
+  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>
+    );
+  };
+
   return (
-    <TouchableOpacity
-      disabled={disabled || loading}
-      style={{
-        alignSelf: inline === true ? undefined : "stretch",
-        height: HEIGHTS[size || "md"],
-        backgroundColor: getBackgroundColor(color),
-        // width: inline === true ? undefined : "100%",
-        flexShrink: inline ? 1 : 0,
-        // flexGrow: inline ? 0 : 1,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: 5,
-        borderColor: getBorderColor(color),
-        borderWidth: type === "outline" ? 2 : 0,
-        opacity: disabled ? 0.4 : 1,
-        flexDirection: "row",
-        paddingHorizontal: 4 * 2,
-      }}
-      onPress={debounce(
-        async () => {
-          Unifier.utils.haptic();
-          setLoading(true);
-          try {
-            if (onClick) {
-              await onClick();
+    <>
+      <TouchableOpacity
+        disabled={disabled || loading}
+        style={{
+          alignSelf: inline === true ? undefined : "stretch",
+          height: HEIGHTS[size || "md"],
+          backgroundColor: getBackgroundColor(color),
+          // width: inline === true ? undefined : "100%",
+          flexShrink: inline ? 1 : 0,
+          // flexGrow: inline ? 0 : 1,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 5,
+          borderColor: getBorderColor(color),
+          borderWidth: type === "outline" ? 2 : 0,
+          opacity: disabled ? 0.4 : 1,
+          flexDirection: "row",
+          paddingHorizontal: 4 * 2,
+        }}
+        onPress={debounce(
+          async () => {
+            Unifier.utils.haptic();
+            setLoading(true);
+            try {
+              if (withConfirmation && !showConfirmation) {
+                setShowConfirmation(true);
+              } else if (onClick) {
+                await onClick();
+              }
+            } catch (e) {
+              setLoading(false);
+              throw e;
             }
-          } catch (e) {
             setLoading(false);
-            throw e;
-          }
-          setLoading(false);
-        },
-        500,
-        {leading: true}
-      )}
-    >
-      {icon !== undefined && (
-        <Box paddingX={2}>
-          <Icon
+          },
+          500,
+          {leading: true}
+        )}
+      >
+        {icon !== undefined && (
+          <Box paddingX={2}>
+            <Icon
+              color={getTextColor(color as Color)}
+              name={icon}
+              prefix={iconPrefix || "far"}
+              size={size}
+            />
+          </Box>
+        )}
+        {Boolean(children) && children}
+        {Boolean(text) && (
+          <Text
             color={getTextColor(color as Color)}
-            name={icon}
-            prefix={iconPrefix || "far"}
+            font="button"
+            inline={inline}
             size={size}
-          />
-        </Box>
-      )}
-      {Boolean(children) && children}
-      {Boolean(text) && (
-        <Text
-          color={getTextColor(color as Color)}
-          font="button"
-          inline={inline}
-          size={size}
-          skipLinking
-          weight="bold"
-        >
-          {text}
-        </Text>
-      )}
-      {(loading || loading) && (
-        <Box marginLeft={2}>
-          <ActivityIndicator color={getTextColor(color as Color)} size="small" />
-        </Box>
-      )}
-    </TouchableOpacity>
+            skipLinking
+            weight="bold"
+          >
+            {text}
+          </Text>
+        )}
+        {Boolean(loading) && (
+          <Box marginLeft={2}>
+            <ActivityIndicator color={getTextColor(color as Color)} size="small" />
+          </Box>
+        )}
+      </TouchableOpacity>
+      {Boolean(withConfirmation) && renderConfirmation()}
+    </>
   );
 }