ferns-ui 0.16.0 → 0.17.0

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.16.0",
+  "version": "0.17.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

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