ferns-ui 0.15.0 → 0.17.0

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

package/dist/Common.d.ts

@@ -328,6 +328,9 @@ export interface IconButtonProps {
     bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white";
     disabled?: boolean;
     selected?: boolean;
+    withConfirmation?: boolean;
+    confirmationText?: string;
+    confirmationHeading?: string;
 }
 export interface NavigatorProps {
     config?: any;

package/dist/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAkVA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAkBzB,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;AA64BD,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"}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAkVA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAkBzB,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;AAg5BD,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"}

package/dist/IconButton.d.ts

@@ -1,5 +1,3 @@
-import React from "react";
+/// <reference types="react" />
 import { IconButtonProps } from "./Common";
-export declare class IconButton extends React.Component<IconButtonProps, {}> {
-    render(): JSX.Element;
-}
+export declare function IconButton({ prefix, icon, iconColor, onClick, size, bgColor, withConfirmation, confirmationText, confirmationHeading, }: IconButtonProps): JSX.Element;

package/dist/IconButton.js

@@ -1,41 +1,58 @@
-import React from "react";
+import React, { useState } from "react";
 import { TouchableOpacity } from "react-native";
 import { iconSizeToNumber } from "./Common";
 import { Icon } from "./Icon";
+import { Modal } from "./Modal";
+import { Text } from "./Text";
 import { Unifier } from "./Unifier";
-export class IconButton extends React.Component {
-    render() {
-        let opacity = 1;
-        let color;
-        if (this.props.bgColor === "transparentDarkGray") {
-            opacity = 0.8;
-            color = Unifier.theme.darkGray;
-        }
-        else if (this.props.bgColor === "transparent" || !this.props.bgColor) {
-            opacity = 0.0;
-            color = Unifier.theme.white;
-        }
-        else {
-            color = Unifier.theme[this.props.bgColor];
-        }
-        return (React.createElement(TouchableOpacity, { hitSlop: { top: 10, left: 10, bottom: 10, right: 10 }, style: {
+export function IconButton({ prefix, icon, iconColor, onClick, size, bgColor = "transparent", withConfirmation = false, confirmationText = "Are you sure you want to continue?", confirmationHeading = "Confirm", }) {
+    const [showConfirmation, setShowConfirmation] = useState(false);
+    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];
+    }
+    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, { hitSlop: { top: 10, left: 10, bottom: 10, right: 10 }, style: {
                 opacity,
                 backgroundColor: color,
                 borderRadius: 100,
-                // paddingBottom: iconSizeToNumber(this.props.size) / 4,
-                // paddingTop: iconSizeToNumber(this.props.size) / 4,
-                // paddingLeft: iconSizeToNumber(this.props.size) / 2,
-                // paddingRight: iconSizeToNumber(this.props.size) / 2,
-                width: iconSizeToNumber(this.props.size) * 2.5,
-                height: iconSizeToNumber(this.props.size) * 2.5,
+                // 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();
-                this.props.onClick();
+                if (withConfirmation && !showConfirmation) {
+                    setShowConfirmation(true);
+                }
+                else if (onClick) {
+                    onClick();
+                }
             } },
-            React.createElement(Icon, { color: this.props.iconColor, name: this.props.icon, prefix: this.props.prefix || "fas", size: this.props.size })));
-    }
+            React.createElement(Icon, { color: iconColor, name: icon, prefix: prefix || "fas", size: size })),
+        Boolean(withConfirmation) && renderConfirmation()));
 }
 //# sourceMappingURL=IconButton.js.map

package/dist/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAkB,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA8B;IAClE,MAAM;QACJ,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,IAAI,KAAK,CAAC;QACV,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,qBAAqB,EAAE;YAChD,OAAO,GAAG,GAAG,CAAC;YACd,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;SAChC;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,aAAa,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YACtE,OAAO,GAAG,GAAG,CAAC;YACd,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;SAC7B;aAAM;YACL,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC3C;QACD,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAC,EACnD,KAAK,EAAE;gBACL,OAAO;gBACP,eAAe,EAAE,KAAK;gBACtB,YAAY,EAAE,GAAG;gBACjB,wDAAwD;gBACxD,qDAAqD;gBACrD,sDAAsD;gBACtD,uDAAuD;gBACvD,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG;gBAC9C,MAAM,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG;gBAC/C,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;aACrB,EACD,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC;YAED,oBAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC3B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,EAClC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GACrB,CACe,CACpB,CAAC;IACJ,CAAC;CACF"}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../src/IconButton.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

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()}
+    </>
   );
 }

package/src/Common.ts

@@ -630,6 +630,9 @@ export interface IconButtonProps {
   bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white"; // default transparent
   disabled?: boolean;
   selected?: boolean;
+  withConfirmation?: boolean;
+  confirmationText?: string;
+  confirmationHeading?: string;
 }
 
 export interface NavigatorProps {

package/src/IconButton.tsx

@@ -1,52 +1,89 @@
-import React from "react";
+import React, {useState} from "react";
 import {TouchableOpacity} from "react-native";
 
 import {IconButtonProps, iconSizeToNumber} from "./Common";
 import {Icon} from "./Icon";
+import {Modal} from "./Modal";
+import {Text} from "./Text";
 import {Unifier} from "./Unifier";
 
-export class IconButton extends React.Component<IconButtonProps, {}> {
-  render() {
-    let opacity = 1;
-    let color;
-    if (this.props.bgColor === "transparentDarkGray") {
-      opacity = 0.8;
-      color = Unifier.theme.darkGray;
-    } else if (this.props.bgColor === "transparent" || !this.props.bgColor) {
-      opacity = 0.0;
-      color = Unifier.theme.white;
-    } else {
-      color = Unifier.theme[this.props.bgColor];
-    }
+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);
+
+  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];
+  }
+
+  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
         hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
         style={{
           opacity,
           backgroundColor: color,
           borderRadius: 100,
-          // paddingBottom: iconSizeToNumber(this.props.size) / 4,
-          // paddingTop: iconSizeToNumber(this.props.size) / 4,
-          // paddingLeft: iconSizeToNumber(this.props.size) / 2,
-          // paddingRight: iconSizeToNumber(this.props.size) / 2,
-          width: iconSizeToNumber(this.props.size) * 2.5,
-          height: iconSizeToNumber(this.props.size) * 2.5,
+          // 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();
-          this.props.onClick();
+          if (withConfirmation && !showConfirmation) {
+            setShowConfirmation(true);
+          } else if (onClick) {
+            onClick();
+          }
         }}
       >
-        <Icon
-          color={this.props.iconColor}
-          name={this.props.icon}
-          prefix={this.props.prefix || "fas"}
-          size={this.props.size}
-        />
+        <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
       </TouchableOpacity>
-    );
-  }
+      {Boolean(withConfirmation) && renderConfirmation()}
+    </>
+  );
 }