ferns-ui 0.6.0 → 0.6.1

package/dist/Button.d.ts

@@ -1,20 +1,17 @@
 import React from "react";
-import { ButtonProps, Color } from "./Common";
-interface ButtonState {
-    loading: boolean;
+import { ButtonColor, Color, GestaltIconName, IconPrefix } from "./Common";
+export interface ButtonProps {
+    children?: React.ReactElement;
+    text: string;
+    color?: ButtonColor | Color;
+    disabled?: boolean;
+    inline?: boolean;
+    size?: "sm" | "md" | "lg";
+    type?: "solid" | "ghost" | "outline";
+    loading?: boolean;
+    onClick: any;
+    icon?: GestaltIconName | string;
+    iconPrefix?: IconPrefix;
+    iconColor?: ButtonColor | Color;
 }
-export declare class Button extends React.Component<ButtonProps, ButtonState> {
-    state: {
-        loading: boolean;
-    };
-    HEIGHTS: {
-        sm: number;
-        md: number;
-        lg: number;
-    };
-    getBackgroundColor(color: string): string;
-    getTextColor(color: Color): Color;
-    getBorderColor(color: string): string;
-    render(): JSX.Element;
-}
-export {};
+export declare function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color, }: ButtonProps): JSX.Element;

package/dist/Button.js

@@ -1,9 +1,8 @@
 import debounce from "lodash/debounce";
-import React from "react";
+import React, { useState } from "react";
 import { ActivityIndicator, TouchableOpacity } from "react-native";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
-// import {Icon} from "./Icon";
 import { Text } from "./Text";
 import { Unifier } from "./Unifier";
 const buttonTextColor = {
@@ -20,83 +19,77 @@ const buttonTextColor = {
     twitter: "white",
     google: "white",
 };
-export class Button extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { loading: false };
-        this.HEIGHTS = {
-            sm: 36,
-            md: 40,
-            lg: 48,
-        };
-    }
-    getBackgroundColor(color) {
-        if (this.props.type === "ghost" || this.props.type === "outline") {
+const HEIGHTS = {
+    sm: 36,
+    md: 40,
+    lg: 48,
+};
+export function Button({ disabled, type, loading: propsLoading, children, text, inline, icon, iconPrefix, size, onClick, color = "lightGray", }) {
+    const [loading, setLoading] = useState(propsLoading);
+    const getBackgroundColor = (backgroundColor) => {
+        if (type === "ghost" || type === "outline") {
             return "transparent";
         }
         else {
-            return Unifier.theme[color];
+            return Unifier.theme[backgroundColor];
         }
-    }
-    getTextColor(color) {
-        if (this.props.type === "ghost" || this.props.type === "outline") {
-            return color;
+    };
+    const getTextColor = (textColor) => {
+        if (type === "ghost" || type === "outline") {
+            return textColor;
         }
-        else if (color === undefined) {
+        else if (textColor === undefined) {
             return "darkGray";
         }
         else {
-            return buttonTextColor[color] || "white";
+            return buttonTextColor[textColor] || "white";
         }
-    }
-    getBorderColor(color) {
-        if (this.props.type === "outline") {
-            return Unifier.theme[this.getTextColor(color)];
+    };
+    const getBorderColor = (borderColor) => {
+        if (type === "outline") {
+            return Unifier.theme[getTextColor(borderColor)];
         }
         else {
             return "transparent";
         }
+    };
+    if (color === "gray") {
+        color = "lightGray";
     }
-    render() {
-        let color = this.props.color || "lightGray";
-        if (color === "gray") {
-            color = "lightGray";
-        }
-        return (React.createElement(TouchableOpacity, { disabled: this.props.disabled || this.props.loading, style: {
-                alignSelf: this.props.inline === true ? undefined : "stretch",
-                height: this.HEIGHTS[this.props.size || "md"],
-                backgroundColor: this.getBackgroundColor(color),
-                // width: this.props.inline === true ? undefined : "100%",
-                flexShrink: this.props.inline ? 1 : 0,
-                // flexGrow: this.props.inline ? 0 : 1,
-                alignItems: "center",
-                justifyContent: "center",
-                borderRadius: 5,
-                borderColor: this.getBorderColor(color),
-                borderWidth: this.props.type === "outline" ? 2 : 0,
-                opacity: this.props.disabled ? 0.4 : 1,
-                flexDirection: "row",
-                paddingHorizontal: 4 * 2,
-            }, onPress: debounce(async () => {
-                Unifier.utils.haptic();
-                this.setState({ loading: true });
-                try {
-                    if (this.props.onClick) {
-                        await this.props.onClick();
-                    }
-                }
-                catch (e) {
-                    this.setState({ loading: false });
-                    throw e;
+    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();
                 }
-                this.setState({ loading: false });
-            }, 500, { leading: true }) },
-            this.props.icon !== undefined && (React.createElement(Box, { paddingX: 2 },
-                React.createElement(Icon, { color: this.getTextColor(this.props.color), name: this.props.icon, prefix: this.props.iconPrefix || "far", size: this.props.size }))),
-            Boolean(this.props.children) && this.props.children,
-            Boolean(this.props.text) && (React.createElement(Text, { color: this.getTextColor(color), font: "button", inline: this.props.inline, size: this.props.size, skipLinking: true, weight: "bold" }, this.props.text)),
-            (this.state.loading || this.props.loading) && (React.createElement(Box, { marginLeft: 2 },
-                React.createElement(ActivityIndicator, { color: this.getTextColor(color), size: "small" })))));
-    }
+            }
+            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" })))));
 }
 //# 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":"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"}

package/dist/Common.d.ts

@@ -288,19 +288,6 @@ export interface BoxProps {
     onLayout?: (event: any) => void;
 }
 export declare type BoxColor = AllColors | "transparent";
-export interface ButtonProps {
-    text: string;
-    color?: ButtonColor | Color;
-    disabled?: boolean;
-    inline?: boolean;
-    size?: "sm" | "md" | "lg";
-    type?: "solid" | "ghost" | "outline";
-    loading?: boolean;
-    onClick: any;
-    icon?: GestaltIconName | string;
-    iconPrefix?: IconPrefix;
-    iconColor?: ButtonColor | Color;
-}
 export interface DrawerProps {
     animationOpenTime: number;
     animationCloseTime: number;

package/dist/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAgVA,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;AAu5BD,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":"AAgVA,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;AAq4BD,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/ImageBackground.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface ImageBackgroundProps {
+    children?: any;
     style?: any;
     source: any;
 }

package/dist/ImageBackground.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBackground.js","sourceRoot":"","sources":["../src/ImageBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,eAAe,IAAI,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAOtE,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAmC;IAC5E,MAAM;QACJ,OAAO,oBAAC,qBAAqB,oBAAK,IAAI,CAAC,KAAK,EAAI,CAAC;IACnD,CAAC;CACF"}
+{"version":3,"file":"ImageBackground.js","sourceRoot":"","sources":["../src/ImageBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,eAAe,IAAI,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAQtE,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAmC;IAC5E,MAAM;QACJ,OAAO,oBAAC,qBAAqB,oBAAK,IAAI,CAAC,KAAK,EAAI,CAAC;IACnD,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -158,7 +158,6 @@
     "react-native-gesture-handler": "^2.1.0",
     "react-native-haptic-feedback": "^1.10.0",
     "react-native-modalize": "^2.0.12",
-    "react-native-navigation": "^6.12.0",
     "react-native-permissions": "^3.1.0",
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",
@@ -189,7 +188,6 @@
     "react-native-gesture-handler": "^2.1.0",
     "react-native-haptic-feedback": "^1.10.0",
     "react-native-modalize": "^2.0.12",
-    "react-native-navigation": "^6.12.0",
     "react-native-permissions": "^3.1.0",
     "react-native-picker-select": "^8.0.0",
     "react-native-portalize": "^1.0.7",

package/src/Button.tsx

@@ -1,17 +1,30 @@
 import debounce from "lodash/debounce";
-import React from "react";
+import React, {useState} from "react";
 import {ActivityIndicator, TouchableOpacity} from "react-native";
 
-import {UnifiedTheme} from ".";
 import {Box} from "./Box";
-import {ButtonProps, Color} from "./Common";
+import {ButtonColor, Color, GestaltIconName, IconPrefix, UnifiedTheme} from "./Common";
 import {Icon} from "./Icon";
-// import {Icon} from "./Icon";
 import {Text} from "./Text";
 import {Unifier} from "./Unifier";
 
-interface ButtonState {
-  loading: boolean;
+export interface ButtonProps {
+  children?: React.ReactElement;
+  text: string;
+  // TODO make this work for all colors
+  color?: ButtonColor | Color;
+  // default gray
+  disabled?: boolean; // default false
+  inline?: boolean; // default false
+  size?: "sm" | "md" | "lg"; // default md
+
+  // Pattern Addition
+  type?: "solid" | "ghost" | "outline";
+  loading?: boolean;
+  onClick: any;
+  icon?: GestaltIconName | string;
+  iconPrefix?: IconPrefix;
+  iconColor?: ButtonColor | Color;
 }
 
 const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
@@ -29,112 +42,121 @@ const buttonTextColor: {[buttonColor: string]: "white" | "darkGray"} = {
   google: "white",
 };
 
-export class Button extends React.Component<ButtonProps, ButtonState> {
-  state = {loading: false};
+const HEIGHTS = {
+  sm: 36,
+  md: 40,
+  lg: 48,
+};
 
-  HEIGHTS = {
-    sm: 36,
-    md: 40,
-    lg: 48,
-  };
+export function Button({
+  disabled,
+  type,
+  loading: propsLoading,
+  children,
+  text,
+  inline,
+  icon,
+  iconPrefix,
+  size,
+  onClick,
+  color = "lightGray",
+}: ButtonProps) {
+  const [loading, setLoading] = useState(propsLoading);
 
-  getBackgroundColor(color: string): string {
-    if (this.props.type === "ghost" || this.props.type === "outline") {
+  const getBackgroundColor = (backgroundColor: string): string => {
+    if (type === "ghost" || type === "outline") {
       return "transparent";
     } else {
-      return Unifier.theme[color as keyof UnifiedTheme] as string;
+      return Unifier.theme[backgroundColor as keyof UnifiedTheme];
     }
-  }
+  };
 
-  getTextColor(color: Color): Color {
-    if (this.props.type === "ghost" || this.props.type === "outline") {
-      return color;
-    } else if (color === undefined) {
+  const getTextColor = (textColor: Color): Color => {
+    if (type === "ghost" || type === "outline") {
+      return textColor;
+    } else if (textColor === undefined) {
       return "darkGray";
     } else {
-      return buttonTextColor[color] || "white";
+      return buttonTextColor[textColor] || "white";
     }
-  }
+  };
 
-  getBorderColor(color: string) {
-    if (this.props.type === "outline") {
-      return Unifier.theme[this.getTextColor(color as Color)];
+  const getBorderColor = (borderColor: string): string => {
+    if (type === "outline") {
+      return Unifier.theme[getTextColor(borderColor as Color)];
     } else {
       return "transparent";
     }
-  }
+  };
 
-  render() {
-    let color = this.props.color || "lightGray";
-    if (color === "gray") {
-      color = "lightGray";
-    }
-    return (
-      <TouchableOpacity
-        disabled={this.props.disabled || this.props.loading}
-        style={{
-          alignSelf: this.props.inline === true ? undefined : "stretch",
-          height: this.HEIGHTS[this.props.size || "md"],
-          backgroundColor: this.getBackgroundColor(color),
-          // width: this.props.inline === true ? undefined : "100%",
-          flexShrink: this.props.inline ? 1 : 0,
-          // flexGrow: this.props.inline ? 0 : 1,
-          alignItems: "center",
-          justifyContent: "center",
-          borderRadius: 5,
-          borderColor: this.getBorderColor(color),
-          borderWidth: this.props.type === "outline" ? 2 : 0,
-          opacity: this.props.disabled ? 0.4 : 1,
-          flexDirection: "row",
-          paddingHorizontal: 4 * 2,
-        }}
-        onPress={debounce(
-          async () => {
-            Unifier.utils.haptic();
-            this.setState({loading: true});
-            try {
-              if (this.props.onClick) {
-                await this.props.onClick();
-              }
-            } catch (e) {
-              this.setState({loading: false});
-              throw e;
-            }
-            this.setState({loading: false});
-          },
-          500,
-          {leading: true}
-        )}
-      >
-        {this.props.icon !== undefined && (
-          <Box paddingX={2}>
-            <Icon
-              color={this.getTextColor(this.props.color as Color)}
-              name={this.props.icon}
-              prefix={this.props.iconPrefix || "far"}
-              size={this.props.size}
-            />
-          </Box>
-        )}
-        {Boolean(this.props.children) && this.props.children}
-        {Boolean(this.props.text) && (
-          <Text
-            color={this.getTextColor(color as Color)}
-            font="button"
-            inline={this.props.inline}
-            size={this.props.size}
-            skipLinking
-            weight="bold"
-          >
-            {this.props.text}
-          </Text>
-        )}
-        {(this.state.loading || this.props.loading) && (
-          <Box marginLeft={2}>
-            <ActivityIndicator color={this.getTextColor(color as Color)} size="small" />
-          </Box>
-        )}
-      </TouchableOpacity>
-    );
+  if (color === "gray") {
+    color = "lightGray";
   }
+  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();
+            }
+          } catch (e) {
+            setLoading(false);
+            throw e;
+          }
+          setLoading(false);
+        },
+        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)}
+          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>
+  );
 }

package/src/Common.ts

@@ -584,24 +584,6 @@ export interface BoxProps {
 
 export type BoxColor = AllColors | "transparent";
 
-export interface ButtonProps {
-  text: string;
-  // TODO make this work for all colors
-  color?: ButtonColor | Color;
-  // default gray
-  disabled?: boolean; // default false
-  inline?: boolean; // default false
-  size?: "sm" | "md" | "lg"; // default md
-
-  // Pattern Addition
-  type?: "solid" | "ghost" | "outline";
-  loading?: boolean;
-  onClick: any;
-  icon?: GestaltIconName | string;
-  iconPrefix?: IconPrefix;
-  iconColor?: ButtonColor | Color;
-}
-
 export interface DrawerProps {
   animationOpenTime: number;
   animationCloseTime: number;

package/src/ImageBackground.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {ImageBackground as ImageBackgroundNative} from "react-native";
 
 interface ImageBackgroundProps {
+  children?: any;
   style?: any;
   source: any;
 }