ferns-ui 1.8.0 → 1.9.1

package/src/TapToEdit.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement, useEffect, useRef, useState} from "react";
+import React, {FC, useEffect, useRef, useState} from "react";
 import {Linking, View} from "react-native";
 
 import {Box} from "./Box";
@@ -9,15 +9,15 @@ import {Icon} from "./Icon";
 // import {useOpenAPISpec} from "./OpenAPIContext";
 import {Text} from "./Text";
 
-const TapToEditTitle = ({
-  title,
-  helperText,
-  onlyShowHelperTextWhileEditing,
-}: {
+const TapToEditTitle: FC<{
   onlyShowHelperTextWhileEditing?: boolean;
   title: string;
   helperText?: string;
-}): ReactElement => {
+}> = ({
+  title,
+  helperText,
+  onlyShowHelperTextWhileEditing,
+}) => {
   return (
     <View style={{flex: 1, justifyContent: "center"}}>
       <Text bold>{title}</Text>
@@ -68,7 +68,7 @@ export function formatAddress(address: AddressInterface, asString = false): stri
   }
 }
 
-export const TapToEdit = ({
+export const TapToEdit: FC<TapToEditProps> = ({
   value,
   setValue,
   title,
@@ -81,8 +81,9 @@ export const TapToEdit = ({
   confirmationTitle = "Confirm",
   helperText: propsHelperText,
   onlyShowHelperTextWhileEditing = true,
+  showClearButton = false,
   ...fieldProps
-}: TapToEditProps): ReactElement => {
+}) => {
   const [editing, setEditing] = useState(false);
   const [initialValue, setInitialValue] = useState();
   const helperText: string | undefined = propsHelperText;
@@ -141,6 +142,22 @@ export const TapToEdit = ({
                   setEditing(false);
                 }}
               />
+              {(showClearButton || ["date", "datetime", "time"].includes(fieldProps?.type)) && (
+                <Button
+                  text="Clear"
+                  variant="muted"
+                  onClick={(): void => {
+                    if (setValue) {
+                      setValue("");
+                      setInitialValue("" as any);
+                    }
+                    if (onSave) {
+                      onSave("");
+                    }
+                    setEditing(false);
+                  }}
+                />
+              )}
               <View style={{marginLeft: 8}}>
                 <Button
                   confirmationText={confirmationText}

package/src/TimezonePicker.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {FC} from "react";
 
 import {SelectFieldPropsBase} from "./Common";
 import {getTimezoneOptions} from "./DateUtilities";
@@ -12,7 +12,7 @@ interface TimezonePickerProps extends Omit<SelectFieldPropsBase, "options"> {
   shortTimezone?: boolean;
 }
 
-export const TimezonePicker: React.FC<TimezonePickerProps> = ({
+export const TimezonePicker: FC<TimezonePickerProps> = ({
   timezone,
   onChange,
   location = "USA",