ferns-ui 0.27.0 → 0.28.0

package/src/Modal.tsx

@@ -1,9 +1,12 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import {Dimensions, Modal as RNModal} from "react-native";
+import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
 import {Heading} from "./Heading";
+import {IconButton} from "./IconButton";
+import {isMobileDevice} from "./MediaQuery";
 import {Text} from "./Text";
 
 interface ModalProps {
@@ -26,6 +29,8 @@ interface ModalProps {
   // Requires primaryButtonText to be defined, but is not required itself.
   secondaryButtonText?: string;
   secondaryButtonOnClick?: (value?: any) => void;
+  // Whether to show a close button in the upper left of modals or action sheets.
+  showClose?: boolean;
 }
 
 export const Modal = ({
@@ -42,17 +47,57 @@ export const Modal = ({
   primaryButtonDisabled = false,
   secondaryButtonText,
   secondaryButtonOnClick,
+  showClose = false,
 }: ModalProps): React.ReactElement => {
+  const actionSheetRef = useRef<ActionSheetRef>(null);
+
   if (subHeading && !heading) {
     throw new Error("Cannot render Modal with subHeading and no heading");
   }
-  if (!footer && !primaryButtonText && !secondaryButtonText) {
+  if (!footer && !primaryButtonText && !secondaryButtonText && !showClose) {
     throw new Error(
-      "Cannot render Modal without footer, primaryButtonText, or secondaryButtonText"
+      "Cannot render Modal without footer, primaryButtonText, secondaryButtonText, or showClose"
     );
   }
 
-  function renderHeader(): React.ReactElement {
+  let sizePx: string | number = 540;
+  if (size === "md") {
+    sizePx = 720;
+  } else if (size === "lg") {
+    sizePx = 900;
+  }
+
+  // Adjust size for small screens
+  if (sizePx > Dimensions.get("window").width) {
+    sizePx = "90%";
+  }
+
+  // Modal uses a visible prop, but ActionSheet uses a setModalVisible method on a reference.
+  // Open the action sheet ref when the visible prop changes.
+  useEffect(() => {
+    if (actionSheetRef.current) {
+      actionSheetRef.current.setModalVisible(visible);
+    }
+  }, [visible, actionSheetRef]);
+
+  const renderClose = (): React.ReactElement | null => {
+    if (!showClose) {
+      return null;
+    }
+    return (
+      <Box padding={3} width="100%">
+        <IconButton
+          accessibilityLabel="close"
+          bgColor="white"
+          icon="times"
+          iconColor="darkGray"
+          onClick={() => onDismiss()}
+        />
+      </Box>
+    );
+  };
+
+  const renderModalHeader = (): React.ReactElement => {
     return (
       <Box paddingY={3} width="100%">
         <Box>
@@ -67,8 +112,9 @@ export const Modal = ({
         )}
       </Box>
     );
-  }
-  function renderFooter(): React.ReactElement | null {
+  };
+
+  const renderModalFooter = (): React.ReactElement | null => {
     if (footer) {
       return footer;
     }
@@ -93,56 +139,106 @@ export const Modal = ({
         </Box>
       </Box>
     );
-  }
+  };
 
-  let sizePx: string | number = 540;
-  if (size === "md") {
-    sizePx = 720;
-  } else if (size === "lg") {
-    sizePx = 900;
-  }
+  const renderModal = (): React.ReactElement => {
+    return (
+      <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
+        <Box
+          alignItems="center"
+          alignSelf="center"
+          color="white"
+          dangerouslySetInlineStyle={{
+            __style: {
+              zIndex: 1,
+              shadowColor: "#999",
+              shadowOffset: {
+                width: 4,
+                height: 6,
+              },
+              shadowRadius: 4,
+              shadowOpacity: 1.0,
+              elevation: 8,
+            },
+          }}
+          direction="column"
+          justifyContent="center"
+          marginTop={12}
+          maxWidth={sizePx}
+          minWidth={300}
+          paddingX={8}
+          paddingY={2}
+          rounding={6}
+          shadow
+          width={sizePx}
+        >
+          <Box marginBottom={6} width="100%">
+            {renderClose()}
+            {renderModalHeader()}
+            <Box paddingY={4}>{children}</Box>
+            <Box paddingY={4}>{renderModalFooter()}</Box>
+          </Box>
+        </Box>
+      </RNModal>
+    );
+  };
 
-  // Adjust size for small screens
-  if (sizePx > Dimensions.get("window").width) {
-    sizePx = "90%";
-  }
+  const renderActionSheet = (): React.ReactElement => {
+    return (
+      <ActionSheet ref={actionSheetRef} onClose={onDismiss}>
+        <Box direction="row" marginBottom={2} paddingX={2} paddingY={2} width="100%">
+          <Box marginRight={4}>
+            {Boolean(secondaryButtonText) && (
+              <Button
+                color="darkGray"
+                inline
+                text={secondaryButtonText ?? ""}
+                type="ghost"
+                onClick={secondaryButtonOnClick}
+              />
+            )}
+            {Boolean(showClose) && (
+              <IconButton
+                accessibilityLabel="close"
+                bgColor="white"
+                icon="times"
+                iconColor="darkGray"
+                onClick={() => onDismiss()}
+              />
+            )}
+          </Box>
+          <Box direction="column" flex="grow">
+            <Heading align={align === "center" ? "center" : undefined} size="sm">
+              {heading}
+            </Heading>
+            {Boolean(subHeading) && (
+              <Box paddingY={2}>
+                <Text align={align === "center" ? "center" : undefined}>{subHeading}</Text>
+              </Box>
+            )}
+          </Box>
 
-  return (
-    <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
-      <Box
-        alignItems="center"
-        alignSelf="center"
-        color="white"
-        dangerouslySetInlineStyle={{
-          __style: {
-            zIndex: 1,
-            shadowColor: "#999",
-            shadowOffset: {
-              width: 4,
-              height: 6,
-            },
-            shadowRadius: 4,
-            shadowOpacity: 1.0,
-            elevation: 8,
-          },
-        }}
-        direction="column"
-        justifyContent="center"
-        marginTop={12}
-        maxWidth={sizePx}
-        minWidth={300}
-        paddingX={8}
-        paddingY={2}
-        rounding={6}
-        shadow
-        width={sizePx}
-      >
-        <Box marginBottom={6} width="100%">
-          {renderHeader()}
-          <Box paddingY={4}>{children}</Box>
-          <Box paddingY={4}>{renderFooter()}</Box>
+          <Box alignSelf="end">
+            {Boolean(primaryButtonText) && (
+              <Button
+                color="primary"
+                disabled={primaryButtonDisabled}
+                inline
+                text={primaryButtonText!}
+                type="ghost"
+                onClick={primaryButtonOnClick}
+              />
+            )}
+          </Box>
         </Box>
-      </Box>
-    </RNModal>
-  );
+        <Box marginBottom={12}>{children}</Box>
+      </ActionSheet>
+    );
+  };
+
+  if (isMobileDevice()) {
+    return renderActionSheet();
+  } else {
+    return renderModal();
+  }
 };

package/src/PickerSelect.tsx

@@ -364,7 +364,11 @@ export function RNPickerSelect({
     }
 
     return (
-      <View style={[defaultStyles.iconContainer, style.iconContainer]} testID="icon_container">
+      <View
+        pointerEvents="none"
+        style={[defaultStyles.iconContainer, style.iconContainer]}
+        testID="icon_container"
+      >
         <Icon testID="icon" />
       </View>
     );

package/src/TapToEdit.tsx

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

package/src/TextField.tsx

@@ -1,71 +1,18 @@
 import {AsYouType} from "libphonenumber-js";
 import moment from "moment-timezone";
 import React, {ReactElement, useCallback, useMemo, useState} from "react";
-import {ActivityIndicator, KeyboardTypeOptions, Platform, TextInput, View} from "react-native";
-import {Calendar} from "react-native-calendars";
+import {ActivityIndicator, KeyboardTypeOptions, Platform, Pressable, TextInput} from "react-native";
 
 import {Box} from "./Box";
 import {TextFieldProps} from "./Common";
 import {DateTimeActionSheet} from "./DateTimeActionSheet";
 import {DecimalRangeActionSheet} from "./DecimalRangeActionSheet";
-import {Heading} from "./Heading";
 import {HeightActionSheet} from "./HeightActionSheet";
 import {Icon} from "./Icon";
-import {IconButton} from "./IconButton";
 import {NumberPickerActionSheet} from "./NumberPickerActionSheet";
 import {Unifier} from "./Unifier";
 import {WithLabel} from "./WithLabel";
 
-function CalendarHeader(props: any) {
-  const {addMonth, month} = props;
-  const displayDate = moment(month[0]).format("MMM YYYY");
-  return (
-    <Box alignItems="center" direction="row" height={40} justifyContent="between" width="100%">
-      <IconButton
-        accessibilityLabel="arrow"
-        bgColor="white"
-        icon="angle-double-left"
-        iconColor="blue"
-        size="md"
-        onClick={() => {
-          addMonth(-12);
-        }}
-      />
-      <IconButton
-        accessibilityLabel="arrow"
-        bgColor="white"
-        icon="angle-left"
-        iconColor="blue"
-        size="md"
-        onClick={() => {
-          addMonth(-1);
-        }}
-      />
-      <Heading size="sm">{displayDate}</Heading>
-      <IconButton
-        accessibilityLabel="arrow"
-        bgColor="white"
-        icon="angle-right"
-        iconColor="blue"
-        size="md"
-        onClick={() => {
-          addMonth(1);
-        }}
-      />
-      <IconButton
-        accessibilityLabel="arrow"
-        bgColor="white"
-        icon="angle-double-right"
-        iconColor="blue"
-        size="md"
-        onClick={() => {
-          addMonth(12);
-        }}
-      />
-    </Box>
-  );
-}
-
 const keyboardMap = {
   date: "default",
   email: "email-address",
@@ -144,7 +91,7 @@ export function TextField({
     if (type !== "search") {
       return null;
     }
-    if (searching === true) {
+    if (searching) {
       return (
         <Box marginRight={4}>
           <ActivityIndicator color={Unifier.theme.primary} size="small" />
@@ -181,9 +128,9 @@ export function TextField({
   const defaultTextInputStyles = useMemo(() => {
     const defaultStyles = {
       flex: 1,
-      paddingTop: 10,
-      paddingRight: 10,
-      paddingBottom: 10,
+      paddingTop: 4,
+      paddingRight: 4,
+      paddingBottom: 4,
       paddingLeft: 0,
       height: getHeight(),
       width: "100%",
@@ -199,8 +146,14 @@ export function TextField({
     return defaultStyles;
   }, [getHeight, style]);
 
-  const isHandledByModal =
-    type === "date" || type === "numberRange" || type === "decimalRange" || type === "height";
+  const isHandledByModal = [
+    "date",
+    "datetime",
+    "time",
+    "numberRange",
+    "decimalRange",
+    "height",
+  ].includes(type);
 
   const isEditable = !disabled && !isHandledByModal;
 
@@ -213,11 +166,29 @@ export function TextField({
     label,
     labelColor,
   };
-  if (value) {
+
+  const onTap = useCallback((): void => {
+    if (["date", "datetime", "time"].includes(type)) {
+      setShowDate(true);
+    } else if (type === "numberRange") {
+      numberRangeActionSheetRef?.current?.show();
+    } else if (type === "decimalRange") {
+      decimalRangeActionSheetRef?.current?.show();
+    } else if (type === "height") {
+      weightActionSheetRef?.current?.show();
+    }
+  }, [decimalRangeActionSheetRef, numberRangeActionSheetRef, type, weightActionSheetRef]);
+
+  let displayValue = value;
+  if (displayValue) {
     if (type === "date") {
-      value = moment.utc(value).format("MM/DD/YYYY");
+      displayValue = moment(value).format("MM/DD/YYYY");
+    } else if (type === "time") {
+      displayValue = moment(value).format("h:mm A");
+    } else if (type === "datetime") {
+      displayValue = moment(value).format("MM/DD/YYYY h:mm A");
     } else if (type === "height") {
-      value = `${Math.floor(Number(value) / 12)} ft, ${Number(value) % 12} in`;
+      displayValue = `${Math.floor(Number(value) / 12)} ft, ${Number(value) % 12} in`;
     } else if (type === "phoneNumber") {
       // By default, if a value is something like `"(123)"`
       // then Backspace would only erase the rightmost brace
@@ -226,9 +197,9 @@ export function TextField({
       // which would then be formatted back to `"(123)"`
       // and so a user wouldn't be able to erase the phone number.
       // This is the workaround for that.
-      const formattedPhoneNumber = new AsYouType("US").input(value);
-      if (value !== formattedPhoneNumber && value.length !== 4) {
-        value = formattedPhoneNumber;
+      const formattedPhoneNumber = new AsYouType("US").input(displayValue);
+      if (displayValue !== formattedPhoneNumber && displayValue.length !== 4) {
+        displayValue = formattedPhoneNumber;
       }
     }
   }
@@ -242,34 +213,30 @@ export function TextField({
         labelSize="sm"
       >
         <WithLabel {...withLabelProps}>
-          <View
+          <Pressable
             style={{
               flexDirection: "row",
               justifyContent: "center",
               alignItems: "center",
-              // height: 40,
-              // minHeight: getHeight(),
+              // height: multiline || grow ? undefined : 40,
               minHeight: getHeight(),
               width: "100%",
               // Add padding so the border doesn't mess up layouts
               paddingHorizontal: paddingX || focused ? 10 : 14,
               paddingVertical: paddingY || focused ? 0 : 4,
               borderColor,
-              borderWidth: focused && !errorMessage ? 5 : 1,
+              borderWidth: focused ? 5 : 1,
               borderRadius: 16,
               backgroundColor: disabled ? Unifier.theme.gray : Unifier.theme.white,
               overflow: "hidden",
             }}
-            onTouchEnd={() => {
-              if (type === "date") {
-                dateActionSheetRef?.current?.setModalVisible(true);
-              } else if (type === "numberRange") {
-                numberRangeActionSheetRef?.current?.setModalVisible(true);
-              } else if (type === "decimalRange") {
-                decimalRangeActionSheetRef?.current?.setModalVisible(true);
-              } else if (type === "height") {
-                weightActionSheetRef?.current?.setModalVisible(true);
-              }
+            onPress={() => {
+              // This runs on web
+              onTap();
+            }}
+            onTouchStart={() => {
+              // This runs on mobile
+              onTap();
             }}
           >
             {renderIcon()}
@@ -292,10 +259,9 @@ export function TextField({
               returnKeyType={type === "number" || type === "decimal" ? "done" : returnKeyType}
               secureTextEntry={type === "password"}
               style={defaultTextInputStyles}
-              // For react-native-autofocus
               textContentType={textContentType}
               underlineColorAndroid="transparent"
-              value={value}
+              value={displayValue}
               onBlur={() => {
                 if (!isHandledByModal) {
                   setFocused(false);
@@ -304,7 +270,7 @@ export function TextField({
                   onBlur({value});
                 }
                 // if (type === "date") {
-                //   actionSheetRef?.current?.setModalVisible(false);
+                //   actionSheetRef?.current?.hide();
                 // }
               }}
               onChangeText={(text) => {
@@ -332,9 +298,6 @@ export function TextField({
                 if (!isHandledByModal) {
                   setFocused(true);
                 }
-                if (Platform.OS === "web" && type === "date") {
-                  setShowDate(true);
-                }
               }}
               onSubmitEditing={() => {
                 if (onEnter) {
@@ -345,30 +308,36 @@ export function TextField({
                 }
               }}
             />
-          </View>
+          </Pressable>
         </WithLabel>
       </WithLabel>
-      {type === "date" && Platform.OS !== "web" && (
+      {(type === "date" || type === "time" || type === "datetime") && (
         <DateTimeActionSheet
           actionSheetRef={dateActionSheetRef}
-          mode="date"
+          mode={type}
           value={value}
-          onChange={(result) => onChange(result)}
+          visible={showDate}
+          onChange={(result) => {
+            onChange(result);
+            setShowDate(false);
+            setFocused(false);
+          }}
+          onDismiss={() => setShowDate(false)}
         />
       )}
-      {type === "date" && Platform.OS === "web" && showDate && (
-        <Box maxWidth={300}>
-          {/* TODO: Calendar should disappear when you click away from it. */}
-          <Calendar
-            customHeader={CalendarHeader}
-            initialDate={value}
-            onDayPress={(day: any) => {
-              onChange({value: day.dateString});
-              setShowDate(false);
-            }}
-          />
-        </Box>
-      )}
+      {/* {type === "date" && showDate && ( */}
+      {/*  <Box maxWidth={300}> */}
+      {/*    /!* TODO: Calendar should disappear when you click away from it. *!/ */}
+      {/*    <Calendar */}
+      {/*      customHeader={CalendarHeader} */}
+      {/*      initialDate={value} */}
+      {/*      onDayPress={(day: any) => { */}
+      {/*        onChange({value: day.dateString}); */}
+      {/*        setShowDate(false); */}
+      {/*      }} */}
+      {/*    /> */}
+      {/*  </Box> */}
+      {/* )} */}
       {type === "numberRange" && value && (
         <NumberPickerActionSheet
           actionSheetRef={numberRangeActionSheetRef}