ferns-ui 0.32.2 → 0.33.0

package/src/IconButton.tsx

@@ -1,5 +1,5 @@
 import React, {forwardRef, useState} from "react";
-import {Platform, TouchableOpacity} from "react-native";
+import {Platform, Pressable} from "react-native";
 
 import {
   ButtonColor,
@@ -90,7 +90,7 @@ export const IconButton = forwardRef(
     function renderIconButton(): React.ReactElement {
       return (
         <>
-          <TouchableOpacity
+          <Pressable
             ref={ref as any}
             hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
             style={{
@@ -117,7 +117,7 @@ export const IconButton = forwardRef(
             }}
           >
             <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
-          </TouchableOpacity>
+          </Pressable>
           {Boolean(withConfirmation) && renderConfirmation()}
         </>
       );

package/src/PickerSelect.tsx

@@ -30,6 +30,7 @@ import {
   Keyboard,
   Modal,
   Platform,
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
@@ -191,7 +192,7 @@ export function RNPickerSelect({
   }, [items, placeholder]);
 
   const getSelectedItem = useCallback(
-    (key, val) => {
+    (key: any, val: any) => {
       let idx = options.findIndex((item: any) => {
         if (item.key && key) {
           return isEqual(item.key, key);
@@ -326,7 +327,7 @@ export function RNPickerSelect({
             />
           </TouchableOpacity>
         </View>
-        <TouchableOpacity
+        <Pressable
           hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}
           testID="done_button"
           onPress={() => {
@@ -353,7 +354,7 @@ export function RNPickerSelect({
               {doneText}
             </Text>
           </View>
-        </TouchableOpacity>
+        </Pressable>
       </View>
     );
   };
@@ -406,7 +407,7 @@ export function RNPickerSelect({
   const renderIOS = () => {
     return (
       <View style={[defaultStyles.viewContainer, style.viewContainer]}>
-        <TouchableOpacity
+        <Pressable
           activeOpacity={1}
           style={{
             flexDirection: "row",
@@ -422,7 +423,7 @@ export function RNPickerSelect({
           {...touchableWrapperProps}
         >
           {renderTextInputOrChildren()}
-        </TouchableOpacity>
+        </Pressable>
         <Modal
           animationType={animationType}
           supportedOrientations={["portrait", "landscape"]}
@@ -432,7 +433,7 @@ export function RNPickerSelect({
           onOrientationChange={onOrientationChange}
           {...modalProps}
         >
-          <TouchableOpacity
+          <Pressable
             style={[defaultStyles.modalViewTop, style.modalViewTop]}
             testID="ios_modal_top"
             onPress={() => {
@@ -462,7 +463,7 @@ export function RNPickerSelect({
   };
 
   const renderAndroidHeadless = () => {
-    const Component: any = fixAndroidTouchableBug ? View : TouchableOpacity;
+    const Component: any = fixAndroidTouchableBug ? View : Pressable;
     return (
       <Component
         activeOpacity={1}

package/src/SplitPage.tsx

@@ -256,7 +256,7 @@ export const SplitPage = ({
               style={{
                 width: width - 8,
                 padding: 4,
-                height: elementArray.length > 1 ? "90vh" : "100vh",
+                height: elementArray.length > 1 ? "90%" : "100%",
                 paddingBottom: bottomNavBarHeight,
               }}
             >

package/src/Table.tsx

@@ -1,4 +1,5 @@
 import React, {Children, ReactElement} from "react";
+import {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 
 import {ScrollView} from "./ScrollView";
 import {ColumnSortInterface, TableContextProvider} from "./tableContext";
@@ -19,7 +20,7 @@ interface TableProps {
   /**
    * Use numbers for pixels: `maxHeight={100}` and strings for percentages: `maxHeight="100%"`.
    */
-  maxHeight?: number | string;
+  maxHeight?: DimensionValue;
   /**
    * If true, the header will stick to the top of the table when scrolling. Defaults to true.
    */
@@ -47,11 +48,11 @@ export function Table({
   });
 
   // Calculate the total width of the table. If the table has only number widths, calculate a width. Otherwise use 100%.
-  let width: string | number;
+  let width: DimensionValue;
   if (columns.every((column) => typeof column === "number")) {
     width = columns.reduce((acc, curr) => {
       return (acc as number) + (curr as number);
-    }, 0);
+    }, 0) as number;
     if (hasDrawerContents) {
       width = (width as number) + 30;
     }

package/src/TapToEdit.tsx

@@ -8,7 +8,7 @@ import {Field, FieldProps} from "./Field";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 
-export function formatAddress(address: any): string {
+export function formatAddress(address: any, asString = false): string {
   let city = "";
   if (address?.city) {
     city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
@@ -25,10 +25,16 @@ export function formatAddress(address: any): string {
   const addressLineTwo = address?.address2 ?? "";
   const addressLineThree = `${city}${state}${zip}`;
 
-  // Only add new lines if lines before and after are not empty to avoid awkward whitespace
-  return `${addressLineOne}${
-    addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
-  }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
+  if (!asString) {
+    // Only add new lines if lines before and after are not empty to avoid awkward whitespace
+    return `${addressLineOne}${
+      addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
+  } else {
+    return `${addressLineOne}${
+      addressLineOne && (addressLineTwo || addressLineThree) ? `, ` : ""
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `, ` : ""}${addressLineThree}`;
+  }
 }
 
 export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
@@ -181,6 +187,21 @@ export const TapToEdit = ({
       >
         <Box>
           <Text weight="bold">{title}:</Text>
+          {fieldProps?.type === "address" && (
+            <Box
+              onClick={
+                () =>
+                  Linking.openURL(
+                    `https://www.google.com/maps/search/?q=${formatAddress(value, true)}`
+                  )
+                // eslint-disable-next-line react/jsx-curly-newline
+              }
+            >
+              <Text color="blue" underline={fieldProps?.type === "address"}>
+                Google Maps
+              </Text>
+            </Box>
+          )}
         </Box>
         <Box direction="row">
           <Box onClick={fieldProps?.type === "url" ? openLink : undefined}>