ferns-ui 0.16.0 → 0.18.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/Field.d.ts

@@ -4,26 +4,18 @@ import { SelectListOptions } from "./SelectList";
 export interface FieldProps extends FieldWithLabelsProps {
     name: string;
     label?: string;
-    subLabel?: string;
-    initialValue?: any;
-    handleChange: any;
     height?: number;
-    validate?: (value: any) => boolean;
-    validateErrorMessage?: string;
     type?: "boolean" | "email" | "text" | "textarea" | "number" | "currency" | "percent" | "select" | "password" | "url" | "date" | "multiselect" | "address" | "customSelect";
     rows?: number;
+    value?: any;
+    onChange?: any;
     options?: SelectListOptions;
     placeholder?: string;
     disabled?: boolean;
 }
 /**
- * Field is a fully uncontrolled component for creating various inputs. Fully uncontrolled means Field manages its own
- * state for the TextFields/Switches/etc, not the parent component. When values are updated, Field will pass the data to
- * the parent through the handleChange prop. You can set an initialValue, but you should not update initialValue
- * this prop with the result of handleChange.
- *
  * Note: You MUST set a key={} prop for this component, otherwise you may wind up with stale data. Just changing
  * initialValue will not work.
  *
  */
-export declare function Field(props: FieldProps): JSX.Element;
+export declare const Field: ({ name, label, labelColor, height, type, rows, value, onChange, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, }: FieldProps) => JSX.Element;

package/dist/Field.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Box } from "./Box";
 import { USSTATESLIST } from "./Constants";
 import { FieldWithLabels } from "./FieldWithLabels";
@@ -8,48 +8,20 @@ import { Text } from "./Text";
 import { TextArea } from "./TextArea";
 import { TextField } from "./TextField";
 /**
- * Field is a fully uncontrolled component for creating various inputs. Fully uncontrolled means Field manages its own
- * state for the TextFields/Switches/etc, not the parent component. When values are updated, Field will pass the data to
- * the parent through the handleChange prop. You can set an initialValue, but you should not update initialValue
- * this prop with the result of handleChange.
- *
  * Note: You MUST set a key={} prop for this component, otherwise you may wind up with stale data. Just changing
  * initialValue will not work.
  *
  */
-export function Field(props) {
-    var _a;
-    const [value, setValue] = useState(props.initialValue || "");
-    const [multiselectValue, setMultiselectValue] = useState((_a = props.initialValue) !== null && _a !== void 0 ? _a : []);
+export const Field = ({ name, label, labelColor, height, type, rows, value, onChange, options, placeholder, disabled, errorMessage, errorMessageColor, helperText, helperTextColor, }) => {
     // showCustomInput, customValue, and selectValue are all for type="customSelect"
     const [showCustomInput, setShowCustomInput] = useState(false);
     const [customValue, setCustomValue] = useState("");
-    const [selectValue, setSelectValue] = useState(props.initialValue || "");
-    const handleChange = (newValue) => {
-        if (props.type === "currency") {
-            newValue = newValue.replace("$", "");
-        }
-        else if (props.type === "percent") {
-            newValue = newValue.replace("%", "");
-        }
-        setValue(newValue);
-        if (props.handleChange) {
-            props.handleChange(props.name, newValue);
-        }
-    };
-    useEffect(() => {
-        // upon initialization, set the value within the parent to the initial value
-        handleChange(props.initialValue || (props.options && props.options[0] ? props.options[0].value : ""));
-        // only want to run this once so setting empty dependency array
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     // Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
     const handleCustomSelectListChange = (newValue) => {
         // If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
         if (newValue === "custom") {
             setShowCustomInput(true);
-            setValue("");
-            setSelectValue(newValue);
+            onChange("");
         }
         // If any non-custom value is selected
         else {
@@ -59,80 +31,63 @@ export function Field(props) {
                 setCustomValue("");
             }
             // Update the field value and select value
-            setValue(newValue);
-            setSelectValue(newValue);
-            if (props.handleChange) {
-                props.handleChange(props.name, newValue);
-            }
+            onChange(newValue);
         }
     };
     const handleCustomSelectTextInputChange = (newValue) => {
-        setValue(newValue);
+        onChange(newValue);
         setCustomValue(newValue);
-        if (props.handleChange) {
-            props.handleChange(props.name, newValue);
-        }
     };
     const handleAddressChange = (field, newValue) => {
-        setValue(Object.assign(Object.assign({}, value), { [field]: newValue }));
-        if (props.handleChange) {
-            props.handleChange(props.name, Object.assign(Object.assign({}, value), { [field]: newValue }));
-        }
+        onChange(Object.assign(Object.assign({}, value), { [field]: newValue }));
     };
     const handleSwitchChange = (switchValue) => {
-        setValue(switchValue);
-        if (props.handleChange) {
-            props.handleChange(props.name, switchValue);
-        }
+        onChange(switchValue);
     };
     const renderField = () => {
-        var _a;
-        if (props.type === "select") {
-            if (!props.options) {
+        if (type === "select") {
+            if (!options) {
                 console.error("Field with type=select require options");
                 return null;
             }
-            return (React.createElement(SelectList, { disabled: props.disabled, id: props.name, options: props.options, value: value, onChange: handleChange }));
+            return (React.createElement(SelectList, { disabled: disabled, id: name, options: options, value: value, onChange: onChange }));
         }
-        else if (props.type === "multiselect") {
-            if (!props.options) {
+        else if (type === "multiselect") {
+            if (!options) {
                 console.error("Field with type=multiselect require options");
                 return null;
             }
-            return (React.createElement(Box, { width: "100%" }, props.options.map((o) => (React.createElement(Box, { key: o.label + o.value, direction: "row", justifyContent: "between", width: "100%" },
+            return (React.createElement(Box, { width: "100%" }, options.map((o) => (React.createElement(Box, { key: o.label + o.value, direction: "row", justifyContent: "between", width: "100%" },
                 React.createElement(Box, { flex: "shrink", marginRight: 2 },
                     React.createElement(Text, { weight: "bold" }, o.label)),
                 React.createElement(Box, null,
-                    React.createElement(Switch, { key: o.label + o.value, disabled: props.disabled, id: props.name, name: props.name, switched: (multiselectValue !== null && multiselectValue !== void 0 ? multiselectValue : []).includes(o.value), onChange: (result) => {
+                    React.createElement(Switch, { key: o.label + o.value, disabled: disabled, id: name, name: name, switched: (value !== null && value !== void 0 ? value : []).includes(o.value), onChange: (result) => {
                             let newValue;
                             if (result) {
-                                if (multiselectValue.includes(o.value)) {
+                                if (value.includes(o.value)) {
                                     console.warn(`Tried to add value that already exists: ${o.value}`);
                                     return;
                                 }
-                                newValue = [...multiselectValue, o.value];
+                                newValue = [...value, o.value];
                             }
                             else {
-                                newValue = multiselectValue.filter((v) => v !== o.value);
-                            }
-                            setMultiselectValue(newValue);
-                            if (props.handleChange) {
-                                props.handleChange(props.name, newValue);
+                                newValue = value.filter((v) => v !== o.value);
                             }
+                            onChange(newValue);
                         } })))))));
         }
-        else if (props.type === "textarea") {
-            return (React.createElement(TextArea, { disabled: props.disabled, height: (_a = props.height) !== null && _a !== void 0 ? _a : 100, id: props.name, placeholder: Boolean(value) ? "" : props.placeholder, rows: props.rows, value: String(value), onChange: (result) => handleChange(result.value) }));
+        else if (type === "textarea") {
+            return (React.createElement(TextArea, { disabled: disabled, height: height !== null && height !== void 0 ? height : 100, id: name, placeholder: Boolean(value) ? "" : placeholder, rows: rows, value: String(value), onChange: (result) => onChange(result.value) }));
         }
-        else if (props.type === "boolean") {
-            return (React.createElement(Switch, { disabled: props.disabled, id: props.name, name: props.name, switched: Boolean(value), onChange: (result) => handleSwitchChange(result) }));
+        else if (type === "boolean") {
+            return (React.createElement(Switch, { disabled: disabled, id: name, name: name, switched: Boolean(value), onChange: (result) => handleSwitchChange(result) }));
         }
-        else if (props.type === "date") {
-            return (React.createElement(TextField, { disabled: true, id: props.name, placeholder: props.placeholder, type: "date", 
+        else if (type === "date") {
+            return (React.createElement(TextField, { disabled: true, id: name, placeholder: placeholder, type: "date", 
                 // TODO: allow editing with a date picker
-                value: value, onChange: (result) => handleChange(result.value) }));
+                value: value, onChange: (result) => onChange(result.value) }));
         }
-        else if (props.type === "address") {
+        else if (type === "address") {
             const { address1 = "", address2 = "", city = "", state = "", zipcode = "", } = value;
             return (React.createElement(React.Fragment, null,
                 React.createElement(TextField, { id: "address1", label: "Street Address", type: "text", value: address1, onChange: (result) => handleAddressChange("address1", result.value) }),
@@ -141,45 +96,44 @@ export function Field(props) {
                 React.createElement(SelectList, { id: "state", label: "State", options: USSTATESLIST, placeholder: "Select state", style: { borderRadius: 16 }, value: state, onChange: (result) => handleAddressChange("state", result) }),
                 React.createElement(TextField, { id: "zipcode", label: "Zipcode", type: "text", value: zipcode, onChange: (result) => handleAddressChange("zipcode", result.value) })));
         }
-        else if (props.type === "customSelect") {
-            if (!props.options) {
+        else if (type === "customSelect") {
+            if (!options) {
                 console.error("Field with type=customSelect require options");
                 return null;
             }
             return (React.createElement(React.Fragment, null,
-                React.createElement(SelectList, { id: "providedOptions", options: [...props.options, { label: "Custom", value: "custom" }], placeholder: "Select an option", value: selectValue, onChange: handleCustomSelectListChange }),
+                React.createElement(SelectList, { id: "providedOptions", options: [...options, { label: "Custom", value: "custom" }], placeholder: "Select an option", value: value, onChange: handleCustomSelectListChange }),
                 Boolean(showCustomInput) && (React.createElement(Box, { paddingY: 2 },
-                    React.createElement(TextField, { disabled: props.disabled, id: "customOptions", placeholder: props.placeholder, type: "text", value: customValue, onChange: (result) => handleCustomSelectTextInputChange(result.value) })))));
+                    React.createElement(TextField, { disabled: disabled, id: "customOptions", placeholder: placeholder, type: "text", value: customValue, onChange: (result) => handleCustomSelectTextInputChange(result.value) })))));
         }
         else {
-            let type = "text";
+            let tfType = "text";
+            let tfValue = value;
             // Number is supported differently because we need fractional numbers and they don't work
             // well on iOS.
-            if (props.type && ["date", "email", "password", "url"].indexOf(props.type) > -1) {
-                type = props.type;
+            if (type && ["date", "email", "password", "url"].indexOf(type) > -1) {
+                tfType = type;
             }
-            else if (props.type === "percent" || props.type === "currency") {
-                type = "text";
+            else if (type === "percent" || type === "currency") {
+                tfType = "text";
             }
             let autoComplete = "on";
-            if (type === "password") {
+            if (tfType === "password") {
                 autoComplete = "current-password";
             }
-            else if (type === "email") {
+            else if (tfType === "email") {
                 autoComplete = "username";
             }
-            const stringValue = String(value);
-            // if (props.type === "percent") {
-            //   value = `${Number(value).toFixed(0)}%`;
-            // } else if (props.type === "currency") {
-            //   value = `$${Number(value).toFixed(2)}`;
-            // }
-            // console.log("VAL", value);
-            return (React.createElement(TextField, { autoComplete: autoComplete, disabled: props.disabled, id: props.name, placeholder: props.placeholder, type: type, value: stringValue, onChange: (result) => handleChange(result.value) }));
+            if (type === "percent") {
+                tfValue = `${Number(value).toFixed(0)}%`;
+            }
+            else if (type === "currency") {
+                tfValue = `$${Number(value).toFixed(2)}`;
+            }
+            return (React.createElement(TextField, { autoComplete: autoComplete, disabled: disabled, id: name, placeholder: placeholder, type: tfType, value: tfValue, onChange: (result) => onChange(result.value) }));
         }
     };
     const children = renderField();
-    const { errorMessage, errorMessageColor, helperText, helperTextColor, label, labelColor } = props;
     return (React.createElement(Box, { marginBottom: 5 },
         React.createElement(FieldWithLabels, Object.assign({}, {
             errorMessage,
@@ -189,5 +143,5 @@ export function Field(props) {
             label,
             labelColor,
         }), children)));
-}
+};
 //# sourceMappingURL=Field.js.map

package/dist/Field.js.map

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

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/dist/SelectList.js

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useEffect } from "react";
 import RNPickerSelect from "./PickerSelect";
 import { Unifier } from "./Unifier";
 import { WithLabel } from "./WithLabel";
 export function SelectList({ options, value, onChange, label, labelColor, style }) {
     const withLabelProps = { label, labelColor };
+    useEffect(() => {
+        if (!value && options && options.length > 0) {
+            onChange(options[0].value);
+        }
+    }, [onChange, options, value]);
     return (React.createElement(WithLabel, Object.assign({}, withLabelProps),
         React.createElement(RNPickerSelect, { items: options, placeholder: {}, style: {
                 viewContainer: {

package/dist/SelectList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../src/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAgBtC,MAAM,UAAU,UAAU,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAkB;IAC9F,MAAM,cAAc,GAAG,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC;IAC3C,OAAO,CACL,oBAAC,SAAS,oBAAK,cAAc;QAC3B,oBAAC,cAAc,IACb,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,EAAE,EACf,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,aAAa,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,KAAI,KAAK;oBAC5C,cAAc,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,KAAI,QAAQ;oBACjD,UAAU,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,KAAI,QAAQ;oBACzC,SAAS,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,KAAI,EAAE;oBACjC,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KAAI,MAAM;oBAC7B,oDAAoD;oBACpD,iBAAiB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,KAAI,CAAC;oBAChD,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,CAAC;oBAC5C,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,OAAO,CAAC,KAAK,CAAC,IAAI;oBACrD,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,CAAC;oBACpC,YAAY,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,KAAI,CAAC;oBACtC,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,OAAO,CAAC,KAAK,CAAC,KAAK;iBAC/D;aACF,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,GACvB,CACQ,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SelectList.js","sourceRoot":"","sources":["../src/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGvC,OAAO,cAAc,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAgBtC,MAAM,UAAU,UAAU,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAkB;IAC9F,MAAM,cAAc,GAAG,EAAC,KAAK,EAAE,UAAU,EAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3C,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAC/B,OAAO,CACL,oBAAC,SAAS,oBAAK,cAAc;QAC3B,oBAAC,cAAc,IACb,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,EAAE,EACf,KAAK,EAAE;gBACL,aAAa,EAAE;oBACb,aAAa,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,KAAI,KAAK;oBAC5C,cAAc,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,KAAI,QAAQ;oBACjD,UAAU,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,KAAI,QAAQ;oBACzC,SAAS,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,KAAI,EAAE;oBACjC,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KAAI,MAAM;oBAC7B,oDAAoD;oBACpD,iBAAiB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,iBAAiB,KAAI,CAAC;oBAChD,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,CAAC;oBAC5C,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,OAAO,CAAC,KAAK,CAAC,IAAI;oBACrD,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,CAAC;oBACpC,YAAY,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,KAAI,CAAC;oBACtC,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,OAAO,CAAC,KAAK,CAAC,KAAK;iBAC/D;aACF,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,GACvB,CACQ,CACb,CAAC;AACJ,CAAC"}

package/dist/TapToEdit.d.ts

@@ -1,12 +1,13 @@
 import { ReactElement } from "react";
 import { BoxProps } from "./Common";
 import { FieldProps } from "./Field";
-export interface TapToEditProps extends Omit<FieldProps, "handleChange"> {
+export interface TapToEditProps extends Omit<FieldProps, "handleChange" | "value"> {
     title: string;
+    initialValue: any;
     onSave?: (value: any) => void | Promise<void>;
     editable?: boolean;
     rowBoxProps?: Partial<BoxProps>;
     transform?: (value: any) => string;
     fieldComponent?: (setValue: () => void) => ReactElement;
 }
-export declare const TapToEdit: (props: TapToEditProps) => ReactElement;
+export declare const TapToEdit: ({ initialValue, title, onSave, editable, rowBoxProps, transform, fieldComponent, ...fieldProps }: TapToEditProps) => ReactElement;

package/dist/TapToEdit.js

@@ -15,20 +15,20 @@ import { Button } from "./Button";
 import { Field } from "./Field";
 import { Icon } from "./Icon";
 import { Text } from "./Text";
-export const TapToEdit = (props) => {
+export const TapToEdit = (_a) => {
+    var { initialValue, title, onSave, editable, rowBoxProps, transform, fieldComponent } = _a, fieldProps = __rest(_a, ["initialValue", "title", "onSave", "editable", "rowBoxProps", "transform", "fieldComponent"]);
     const [editing, setEditing] = useState(false);
-    const [value, setValue] = useState(props.initialValue);
-    const { title, editable = true, rowBoxProps, transform, fieldComponent } = props, fieldProps = __rest(props, ["title", "editable", "rowBoxProps", "transform", "fieldComponent"]);
+    const [value, setValue] = useState(initialValue);
     if (editing) {
         return (React.createElement(Box, { direction: "column" },
-            fieldComponent ? (fieldComponent(setValue)) : (React.createElement(Field, Object.assign({ handleChange: (_, val) => setValue(val), label: props.title }, fieldProps))),
+            fieldComponent ? (fieldComponent(setValue)) : (React.createElement(Field, Object.assign({ label: title, onChange: setValue }, fieldProps))),
             React.createElement(Box, { direction: "row" },
                 React.createElement(Button, { color: "blue", inline: true, text: "Save", onClick: async () => {
-                        if (!props.onSave) {
+                        if (!onSave) {
                             console.error("No onSave provided for editable TapToEdit");
                         }
                         else {
-                            await props.onSave(value);
+                            await onSave(value);
                         }
                         setEditing(false);
                     } }),
@@ -38,10 +38,10 @@ export const TapToEdit = (props) => {
                         } })))));
     }
     else {
-        let displayValue = props.initialValue;
+        let displayValue = initialValue;
         // If a transform props is present, that takes priority
         if (transform) {
-            displayValue = transform(props.initialValue);
+            displayValue = transform(initialValue);
         }
         else {
             // If no transform, try and display the value reasonably.

package/dist/TapToEdit.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.16.0",
+  "version": "0.18.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/Field.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 
 import {Box} from "./Box";
 import {AddressInterface, FieldWithLabelsProps, TextFieldType} from "./Common";
@@ -13,13 +13,7 @@ import {TextField} from "./TextField";
 export interface FieldProps extends FieldWithLabelsProps {
   name: string;
   label?: string;
-  subLabel?: string;
-  initialValue?: any;
-  handleChange: any;
   height?: number;
-  // Additional validation
-  validate?: (value: any) => boolean;
-  validateErrorMessage?: string;
   type?:
     | "boolean"
     | "email"
@@ -36,58 +30,45 @@ export interface FieldProps extends FieldWithLabelsProps {
     | "address"
     | "customSelect";
   rows?: number;
+  value?: any;
+  onChange?: any;
   options?: SelectListOptions;
   placeholder?: string;
   disabled?: boolean;
 }
 
 /**
- * Field is a fully uncontrolled component for creating various inputs. Fully uncontrolled means Field manages its own
- * state for the TextFields/Switches/etc, not the parent component. When values are updated, Field will pass the data to
- * the parent through the handleChange prop. You can set an initialValue, but you should not update initialValue
- * this prop with the result of handleChange.
- *
  * Note: You MUST set a key={} prop for this component, otherwise you may wind up with stale data. Just changing
  * initialValue will not work.
  *
  */
-export function Field(props: FieldProps) {
-  const [value, setValue] = useState(props.initialValue || "");
-  const [multiselectValue, setMultiselectValue] = useState(props.initialValue ?? []);
-
+export const Field = ({
+  name,
+  label,
+  labelColor,
+  height,
+  type,
+  rows,
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  errorMessage,
+  errorMessageColor,
+  helperText,
+  helperTextColor,
+}: FieldProps) => {
   // showCustomInput, customValue, and selectValue are all for type="customSelect"
   const [showCustomInput, setShowCustomInput] = useState(false);
   const [customValue, setCustomValue] = useState("");
-  const [selectValue, setSelectValue] = useState(props.initialValue || "");
-
-  const handleChange = (newValue: string) => {
-    if (props.type === "currency") {
-      newValue = newValue.replace("$", "");
-    } else if (props.type === "percent") {
-      newValue = newValue.replace("%", "");
-    }
-    setValue(newValue);
-    if (props.handleChange) {
-      props.handleChange(props.name, newValue);
-    }
-  };
-
-  useEffect(() => {
-    // upon initialization, set the value within the parent to the initial value
-    handleChange(
-      props.initialValue || (props.options && props.options[0] ? props.options[0].value : "")
-    );
-    // only want to run this once so setting empty dependency array
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   // Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
   const handleCustomSelectListChange = (newValue: string) => {
     // If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
     if (newValue === "custom") {
       setShowCustomInput(true);
-      setValue("");
-      setSelectValue(newValue);
+      onChange("");
     }
 
     // If any non-custom value is selected
@@ -99,59 +80,46 @@ export function Field(props: FieldProps) {
       }
 
       // Update the field value and select value
-      setValue(newValue);
-      setSelectValue(newValue);
-      if (props.handleChange) {
-        props.handleChange(props.name, newValue);
-      }
+      onChange(newValue);
     }
   };
 
   const handleCustomSelectTextInputChange = (newValue: string) => {
-    setValue(newValue);
+    onChange(newValue);
     setCustomValue(newValue);
-    if (props.handleChange) {
-      props.handleChange(props.name, newValue);
-    }
   };
 
   const handleAddressChange = (field: string, newValue: string) => {
-    setValue({...value, [field]: newValue});
-    if (props.handleChange) {
-      props.handleChange(props.name, {...value, [field]: newValue});
-    }
+    onChange({...value, [field]: newValue});
   };
 
   const handleSwitchChange = (switchValue: boolean) => {
-    setValue(switchValue);
-    if (props.handleChange) {
-      props.handleChange(props.name, switchValue);
-    }
+    onChange(switchValue);
   };
 
   const renderField = () => {
-    if (props.type === "select") {
-      if (!props.options) {
+    if (type === "select") {
+      if (!options) {
         console.error("Field with type=select require options");
         return null;
       }
       return (
         <SelectList
-          disabled={props.disabled}
-          id={props.name}
-          options={props.options}
+          disabled={disabled}
+          id={name}
+          options={options}
           value={value}
-          onChange={handleChange}
+          onChange={onChange}
         />
       );
-    } else if (props.type === "multiselect") {
-      if (!props.options) {
+    } else if (type === "multiselect") {
+      if (!options) {
         console.error("Field with type=multiselect require options");
         return null;
       }
       return (
         <Box width="100%">
-          {props.options.map((o) => (
+          {options.map((o) => (
             <Box key={o.label + o.value} direction="row" justifyContent="between" width="100%">
               <Box flex="shrink" marginRight={2}>
                 <Text weight="bold">{o.label}</Text>
@@ -159,25 +127,22 @@ export function Field(props: FieldProps) {
               <Box>
                 <Switch
                   key={o.label + o.value}
-                  disabled={props.disabled}
-                  id={props.name}
-                  name={props.name}
-                  switched={(multiselectValue ?? []).includes(o.value)}
+                  disabled={disabled}
+                  id={name}
+                  name={name}
+                  switched={(value ?? []).includes(o.value)}
                   onChange={(result) => {
                     let newValue;
                     if (result) {
-                      if (multiselectValue.includes(o.value)) {
+                      if (value.includes(o.value)) {
                         console.warn(`Tried to add value that already exists: ${o.value}`);
                         return;
                       }
-                      newValue = [...multiselectValue, o.value];
+                      newValue = [...value, o.value];
                     } else {
-                      newValue = multiselectValue.filter((v: string) => v !== o.value);
-                    }
-                    setMultiselectValue(newValue);
-                    if (props.handleChange) {
-                      props.handleChange(props.name, newValue);
+                      newValue = value.filter((v: string) => v !== o.value);
                     }
+                    onChange(newValue);
                   }}
                 />
               </Box>
@@ -185,41 +150,41 @@ export function Field(props: FieldProps) {
           ))}
         </Box>
       );
-    } else if (props.type === "textarea") {
+    } else if (type === "textarea") {
       return (
         <TextArea
-          disabled={props.disabled}
-          height={props.height ?? 100}
-          id={props.name}
-          placeholder={Boolean(value) ? "" : props.placeholder}
-          rows={props.rows}
+          disabled={disabled}
+          height={height ?? 100}
+          id={name}
+          placeholder={Boolean(value) ? "" : placeholder}
+          rows={rows}
           value={String(value)}
-          onChange={(result) => handleChange(result.value)}
+          onChange={(result) => onChange(result.value)}
         />
       );
-    } else if (props.type === "boolean") {
+    } else if (type === "boolean") {
       return (
         <Switch
-          disabled={props.disabled}
-          id={props.name}
-          name={props.name}
+          disabled={disabled}
+          id={name}
+          name={name}
           switched={Boolean(value)}
           onChange={(result) => handleSwitchChange(result)}
         />
       );
-    } else if (props.type === "date") {
+    } else if (type === "date") {
       return (
         <TextField
           disabled
-          id={props.name}
-          placeholder={props.placeholder}
+          id={name}
+          placeholder={placeholder}
           type="date"
           // TODO: allow editing with a date picker
           value={value}
-          onChange={(result) => handleChange(result.value)}
+          onChange={(result) => onChange(result.value)}
         />
       );
-    } else if (props.type === "address") {
+    } else if (type === "address") {
       const {
         address1 = "",
         address2 = "",
@@ -268,8 +233,8 @@ export function Field(props: FieldProps) {
           />
         </>
       );
-    } else if (props.type === "customSelect") {
-      if (!props.options) {
+    } else if (type === "customSelect") {
+      if (!options) {
         console.error("Field with type=customSelect require options");
         return null;
       }
@@ -277,17 +242,17 @@ export function Field(props: FieldProps) {
         <>
           <SelectList
             id="providedOptions"
-            options={[...props.options, {label: "Custom", value: "custom"}]}
+            options={[...options, {label: "Custom", value: "custom"}]}
             placeholder="Select an option"
-            value={selectValue}
+            value={value}
             onChange={handleCustomSelectListChange}
           />
           {Boolean(showCustomInput) && (
             <Box paddingY={2}>
               <TextField
-                disabled={props.disabled}
+                disabled={disabled}
                 id="customOptions"
-                placeholder={props.placeholder}
+                placeholder={placeholder}
                 type="text"
                 value={customValue}
                 onChange={(result) => handleCustomSelectTextInputChange(result.value)}
@@ -297,43 +262,41 @@ export function Field(props: FieldProps) {
         </>
       );
     } else {
-      let type: TextFieldType = "text";
+      let tfType: TextFieldType = "text";
+      let tfValue: string = value;
       // Number is supported differently because we need fractional numbers and they don't work
       // well on iOS.
-      if (props.type && ["date", "email", "password", "url"].indexOf(props.type) > -1) {
-        type = props.type as TextFieldType;
-      } else if (props.type === "percent" || props.type === "currency") {
-        type = "text";
+      if (type && ["date", "email", "password", "url"].indexOf(type) > -1) {
+        tfType = type as TextFieldType;
+      } else if (type === "percent" || type === "currency") {
+        tfType = "text";
       }
       let autoComplete: "on" | "current-password" | "username" = "on";
-      if (type === "password") {
+      if (tfType === "password") {
         autoComplete = "current-password";
-      } else if (type === "email") {
+      } else if (tfType === "email") {
         autoComplete = "username";
       }
-      const stringValue = String(value);
-      // if (props.type === "percent") {
-      //   value = `${Number(value).toFixed(0)}%`;
-      // } else if (props.type === "currency") {
-      //   value = `$${Number(value).toFixed(2)}`;
-      // }
-      // console.log("VAL", value);
+      if (type === "percent") {
+        tfValue = `${Number(value).toFixed(0)}%`;
+      } else if (type === "currency") {
+        tfValue = `$${Number(value).toFixed(2)}`;
+      }
       return (
         <TextField
           autoComplete={autoComplete}
-          disabled={props.disabled}
-          id={props.name}
-          placeholder={props.placeholder}
-          type={type as "date" | "email" | "number" | "password" | "text" | "url"}
-          value={stringValue}
-          onChange={(result) => handleChange(result.value)}
+          disabled={disabled}
+          id={name}
+          placeholder={placeholder}
+          type={tfType as "date" | "email" | "number" | "password" | "text" | "url"}
+          value={tfValue}
+          onChange={(result) => onChange(result.value)}
         />
       );
     }
   };
 
   const children = renderField();
-  const {errorMessage, errorMessageColor, helperText, helperTextColor, label, labelColor} = props;
   return (
     <Box marginBottom={5}>
       <FieldWithLabels
@@ -350,4 +313,4 @@ export function Field(props: FieldProps) {
       </FieldWithLabels>
     </Box>
   );
-}
+};

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

package/src/SelectList.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 
 import {FieldWithLabelsProps, StyleProp} from "./Common";
 import RNPickerSelect from "./PickerSelect";
@@ -21,6 +21,12 @@ export interface SelectListProps extends FieldWithLabelsProps {
 
 export function SelectList({options, value, onChange, label, labelColor, style}: SelectListProps) {
   const withLabelProps = {label, labelColor};
+
+  useEffect(() => {
+    if (!value && options && options.length > 0) {
+      onChange(options[0].value);
+    }
+  }, [onChange, options, value]);
   return (
     <WithLabel {...withLabelProps}>
       <RNPickerSelect

package/src/TapToEdit.tsx

@@ -7,8 +7,9 @@ import {Field, FieldProps} from "./Field";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 
-export interface TapToEditProps extends Omit<FieldProps, "handleChange"> {
+export interface TapToEditProps extends Omit<FieldProps, "handleChange" | "value"> {
   title: string;
+  initialValue: any;
   // Not required if not editable.
   onSave?: (value: any) => void | Promise<void>;
   // Defaults to true
@@ -19,22 +20,26 @@ export interface TapToEditProps extends Omit<FieldProps, "handleChange"> {
   fieldComponent?: (setValue: () => void) => ReactElement;
 }
 
-export const TapToEdit = (props: TapToEditProps): ReactElement => {
+export const TapToEdit = ({
+  initialValue,
+  title,
+  onSave,
+  editable,
+  rowBoxProps,
+  transform,
+  fieldComponent,
+  ...fieldProps
+}: TapToEditProps): ReactElement => {
   const [editing, setEditing] = useState(false);
-  const [value, setValue] = useState(props.initialValue);
+  const [value, setValue] = useState(initialValue);
 
-  const {title, editable = true, rowBoxProps, transform, fieldComponent, ...fieldProps} = props;
   if (editing) {
     return (
       <Box direction="column">
         {fieldComponent ? (
           fieldComponent(setValue as any)
         ) : (
-          <Field
-            handleChange={(_: string, val: any): void => setValue(val)}
-            label={props.title}
-            {...fieldProps}
-          />
+          <Field label={title} onChange={setValue} {...fieldProps} />
         )}
         <Box direction="row">
           <Button
@@ -42,10 +47,10 @@ export const TapToEdit = (props: TapToEditProps): ReactElement => {
             inline
             text="Save"
             onClick={async (): Promise<void> => {
-              if (!props.onSave) {
+              if (!onSave) {
                 console.error("No onSave provided for editable TapToEdit");
               } else {
-                await props.onSave(value);
+                await onSave(value);
               }
               setEditing(false);
             }}
@@ -64,10 +69,10 @@ export const TapToEdit = (props: TapToEditProps): ReactElement => {
       </Box>
     );
   } else {
-    let displayValue = props.initialValue;
+    let displayValue = initialValue;
     // If a transform props is present, that takes priority
     if (transform) {
-      displayValue = transform(props.initialValue);
+      displayValue = transform(initialValue);
     } else {
       // If no transform, try and display the value reasonably.
       if (fieldProps?.type === "boolean") {