ferns-ui 0.41.1 → 0.42.0

package/src/TableHeaderCell.tsx

@@ -8,12 +8,12 @@ import {useTableContext} from "./tableContext";
 /**
  * Use TableHeaderCell to define a header cell in Table.
  */
-export function TableHeaderCell({
+export const TableHeaderCell = ({
   children,
   index,
   sortable,
   onSortChange,
-}: TableHeaderCellProps): ReactElement {
+}: TableHeaderCellProps): ReactElement => {
   const {columns, setSortColumn, sortColumn} = useTableContext();
   const width = columns[index];
   if (!width) {
@@ -69,4 +69,4 @@ export function TableHeaderCell({
       </Box>
     );
   }
-}
+};

package/src/TableRow.tsx

@@ -8,13 +8,13 @@ import {useTableContext} from "./tableContext";
 /**
  * Use TableRow to define a row in Table.
  */
-export function TableRow({
+export const TableRow = ({
   children,
   headerRow = false,
   expanded,
   drawerContents,
   color = "white",
-}: TableRowProps): React.ReactElement {
+}: TableRowProps): React.ReactElement => {
   const [isExpanded, setIsExpanded] = React.useState(expanded || false);
   const {columns, hasDrawerContents} = useTableContext();
   const rowRef = useRef<typeof Box>(null);
@@ -61,4 +61,4 @@ export function TableRow({
       )}
     </Box>
   );
-}
+};

package/src/TapToEdit.tsx

@@ -160,7 +160,7 @@ export const TapToEdit = ({
         try {
           const url = new URL(value);
           displayValue = url?.hostname ?? value;
-        } catch (e) {
+        } catch (error) {
           // Don't print an error message for empty values.
           if (value) {
             console.debug(`Invalid URL: ${value}`);

package/src/Text.tsx

@@ -12,7 +12,7 @@ const fontSizes = {
   lg: 16,
 };
 
-export function Text({
+export const Text = ({
   align = "left",
   children,
   color,
@@ -28,7 +28,7 @@ export function Text({
   skipLinking,
   testID,
   weight = "normal",
-}: TextProps): React.ReactElement {
+}: TextProps): React.ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   function propsToStyle(): any {
@@ -115,4 +115,4 @@ export function Text({
       </Hyperlink>
     );
   }
-}
+};

package/src/TextArea.tsx

@@ -3,6 +3,6 @@ import React from "react";
 import {TextAreaProps} from "./Common";
 import {TextField} from "./TextField";
 
-export function TextArea({height, ...rest}: TextAreaProps): React.ReactElement {
+export const TextArea = ({height, ...rest}: TextAreaProps): React.ReactElement => {
   return <TextField {...rest} height={height ?? 100} multiline />;
-}
+};

package/src/TextField.tsx

@@ -59,7 +59,7 @@ const textContentMap: {
   username: "username",
 };
 
-export function TextField({
+export const TextField = ({
   blurOnSubmit = true,
   value,
   height: propsHeight,
@@ -86,7 +86,7 @@ export function TextField({
   onEnter,
   onSubmitEditing,
   testID,
-}: TextFieldProps): ReactElement {
+}: TextFieldProps): ReactElement => {
   const {theme} = useContext(ThemeContext);
 
   const dateActionSheetRef: React.RefObject<any> = React.createRef();
@@ -404,4 +404,4 @@ export function TextField({
       )}
     </>
   );
-}
+};

package/src/Toast.tsx

@@ -8,33 +8,50 @@ import {AllColors, ToastProps} from "./Common";
 import {Icon} from "./Icon";
 import {IconButton} from "./IconButton";
 import {Text} from "./Text";
+import {isAPIError, printAPIError} from "./Utilities";
 
 const TOAST_DURATION_MS = 3 * 1000;
 
-export function useToast(): any {
+export function useToast(): {
+  warn: (text: string, options?: Omit<ToastProps["data"], "variant">) => string;
+  hide: (id: string) => void;
+  show: (text: string, options?: ToastProps["data"]) => string;
+  catch: (error: any, message?: string, options?: Omit<ToastProps["data"], "variant">) => void;
+  error: (text: string, options?: Omit<ToastProps["data"], "variant">) => string;
+} {
   const toast = useRNToast();
+  const show = (text: string, options?: ToastProps["data"]): string => {
+    return toast.show(text, {
+      data: options,
+      // a duration of 0 keeps the toast up infinitely until hidden
+      duration: options?.persistent ? 0 : TOAST_DURATION_MS,
+    });
+  };
   return {
-    show: (
-      text: string,
-      options?: {
-        variant?: "default" | "warning" | "error";
-        buttonText?: string;
-        buttonOnClick: () => void | Promise<void>;
-        persistent?: boolean;
-        onDismiss?: () => void | Promise<void>;
-      }
-    ): string => {
-      return toast.show(text, {
-        data: options,
-        // a duration of 0 keeps the toast up infinitely until hidden
-        duration: options?.persistent ? 0 : TOAST_DURATION_MS,
-      });
+    show,
+    warn: (text: string, options?: Omit<ToastProps["data"], "variant">): string => {
+      return show(text, {...options, variant: "warning"});
+    },
+    error: (text: string, options?: Omit<ToastProps["data"], "variant">): string => {
+      return show(text, {...options, variant: "error"});
     },
     hide: (id: string) => toast.hide(id),
+    catch: (error: any, message?: string, options?: Omit<ToastProps["data"], "variant">): void => {
+      let exceptionMsg;
+      if (isAPIError(error)) {
+        // Get the error without details.
+        exceptionMsg = `${message}: ${printAPIError(error)}`;
+        console.error(exceptionMsg);
+      } else {
+        exceptionMsg = error?.message ?? error?.error ?? String(error);
+        console.error(`${message}: ${exceptionMsg}`);
+      }
+      show(exceptionMsg, {...options, variant: "error"});
+    },
   };
 }
 
-export function Toast({message, data}: ToastProps): React.ReactElement {
+export const Toast = ({message, data}: ToastProps): React.ReactElement => {
   // margin 8 on either side, times the standard 4px we multiply by.
   const width = Math.min(Dimensions.get("window").width - 16 * 4, 712);
   const {variant, buttonText, buttonOnClick, persistent, onDismiss} = data ?? {};
@@ -89,4 +106,4 @@ export function Toast({message, data}: ToastProps): React.ReactElement {
       )}
     </Box>
   );
-}
+};

package/src/Tooltip.tsx

@@ -138,6 +138,7 @@ export const Tooltip = (props: TooltipProps) => {
 
   const isWeb = Platform.OS === "web";
 
+  // If the tooltip is visible, and the user clicks outside of the tooltip, hide it.
   React.useEffect(() => {
     return () => {
       if (showTooltipTimer.current) {

package/src/Unifier.ts

@@ -151,8 +151,8 @@ class UnifierClass {
         } else {
           return null;
         }
-      } catch (e) {
-        console.error(`[storage] Error reading ${key}`, e);
+      } catch (error) {
+        console.error(`[storage] Error reading ${key}`, error);
         return defaultValue || null;
       }
     },
@@ -160,9 +160,9 @@ class UnifierClass {
       try {
         const jsonValue = JSON.stringify(item);
         await AsyncStorage.setItem(key, jsonValue);
-      } catch (e) {
-        console.error(`[storage] Error storing ${key}`, item, e);
-        throw new Error(e as any);
+      } catch (error) {
+        console.error(`[storage] Error storing ${key}`, item, error);
+        throw new Error(error as any);
       }
     },
   };

package/src/Utilities.tsx

@@ -3,7 +3,7 @@
 import get from "lodash/get";
 import {Platform} from "react-native";
 
-import {BaseProfile, IconSize} from "./Common";
+import {APIError, BaseProfile, IconSize} from "./Common";
 import {COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES} from "./Constants";
 
 export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
@@ -308,3 +308,15 @@ export function formattedCountyCode(state: string, countyName: string): string {
 
   return `${countyData.stateFP}${countyData.countyFP}`;
 }
+
+export function isAPIError(error: any): error is APIError {
+  return error && error.data?.title;
+}
+
+export function printAPIError(error: APIError, details = true): string {
+  let message = error.data?.title;
+  if (error.data?.detail && details) {
+    message = `${message}: ${error.data?.detail}`;
+  }
+  return message;
+}

package/src/WebAddressAutocomplete.tsx

@@ -34,6 +34,7 @@ export const WebAddressAutocomplete = ({
   const [scriptLoaded, setScriptLoaded] = useState(true);
   const autocompleteInputRef = useRef(null);
 
+  // Load the Google Maps script and initialize the autocomplete.
   useEffect(() => {
     const callbackName = "initAutocomplete";
     if (!googleMapsApiKey) {

package/src/WithLabel.tsx

@@ -4,7 +4,7 @@ import {Box} from "./Box";
 import {WithLabelProps} from "./Common";
 import {Text} from "./Text";
 
-export function WithLabel({
+export const WithLabel = ({
   label,
   labelInline,
   labelJustifyContent,
@@ -14,7 +14,7 @@ export function WithLabel({
   labelColor,
   show,
   children,
-}: WithLabelProps): React.ReactElement | null {
+}: WithLabelProps): React.ReactElement | null => {
   if (!children) {
     return null;
   }
@@ -42,4 +42,4 @@ export function WithLabel({
       )}
     </Box>
   );
-}
+};

package/src/tableContext.tsx

@@ -31,7 +31,7 @@ const TableContext: Context<TableContextType> = createContext<TableContextType>(
 
 export const {Provider} = TableContext;
 
-export function TableContextProvider({
+export const TableContextProvider = ({
   children,
   columns,
   hasDrawerContents,
@@ -40,7 +40,7 @@ export function TableContextProvider({
   stickyHeader,
   borderStyle,
   alternateRowBackground,
-}: Props): React.ReactElement<typeof Provider> {
+}: Props): React.ReactElement<typeof Provider> => {
   return (
     <Provider
       value={{
@@ -56,7 +56,7 @@ export function TableContextProvider({
       {children}
     </Provider>
   );
-}
+};
 
 export function useTableContext(): TableContextType {
   const {