ferns-ui 0.47.10 → 1.0.0

package/src/TextField.tsx

@@ -1,25 +1,19 @@
 import {getCalendars} from "expo-localization";
-import {AsYouType} from "libphonenumber-js";
-import React, {ReactElement, useCallback, useContext, useMemo, useState} from "react";
+import React, {FC, useMemo, useState} from "react";
 import {
-  ActivityIndicator,
+  DimensionValue,
   KeyboardTypeOptions,
   Platform,
   Pressable,
+  StyleProp,
   TextInput,
   View,
 } from "react-native";
 
-import {Box} from "./Box";
-import {TextFieldProps} from "./Common";
-import {DateTimeActionSheet} from "./DateTimeActionSheet";
-import {printDate, printDateAndTime, printTime} from "./DateUtilities";
-import {DecimalRangeActionSheet} from "./DecimalRangeActionSheet";
-import {HeightActionSheet} from "./HeightActionSheet";
+import {TextFieldProps, TextStyleWithOutline} from "./Common";
+import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
 import {Icon} from "./Icon";
-import {NumberPickerActionSheet} from "./NumberPickerActionSheet";
-import {ThemeContext} from "./Theme";
-import {WithLabel} from "./WithLabel";
+import {useTheme} from "./Theme";
 
 const keyboardMap: {[id: string]: string | undefined} = {
   date: "default",
@@ -60,41 +54,30 @@ const textContentMap: {
   username: "username",
 };
 
-export const TextField = ({
-  blurOnSubmit = true,
+export const TextField: FC<TextFieldProps> = ({
+  title,
+  disabled,
+  helperText,
+  errorText,
   value,
-  height: propsHeight,
   onChange,
-  min,
-  max,
+  placeholder,
+  blurOnSubmit = true,
+  iconName,
+  onIconClick,
   type = "text",
-  searching,
   autoComplete,
-  autoFocus,
-  disabled,
-  errorMessage,
-  errorMessageColor,
   inputRef,
   multiline,
-  rows,
-  placeholder,
+  rows = 1,
   grow,
-  label,
-  labelColor,
   returnKeyType,
   onBlur,
-  style,
   onEnter,
   onSubmitEditing,
   testID,
-  transformValue,
-}: TextFieldProps): ReactElement => {
-  const {theme} = useContext(ThemeContext);
-
-  const dateActionSheetRef: React.RefObject<any> = React.createRef();
-  const numberRangeActionSheetRef: React.RefObject<any> = React.createRef();
-  const decimalRangeActionSheetRef: React.RefObject<any> = React.createRef();
-  const weightActionSheetRef: React.RefObject<any> = React.createRef();
+}) => {
+  const {theme} = useTheme();
 
   const calendar = getCalendars()[0];
   const localTimeZone = calendar?.timeZone;
@@ -103,282 +86,147 @@ export const TextField = ({
   }
 
   const [focused, setFocused] = useState(false);
-  const [height, setHeight] = useState(propsHeight || 40);
-  const [showDate, setShowDate] = useState(false);
+  const [height, setHeight] = useState(rows * 40);
 
-  const renderIcon = () => {
-    if (type !== "search") {
-      return null;
-    }
-    if (searching) {
-      return (
-        <Box marginRight={4}>
-          <ActivityIndicator color={theme.primary} size="small" />
-        </Box>
-      );
+  const borderColor = useMemo(() => {
+    if (disabled) {
+      return theme.border.activeNeutral;
+    } else if (errorText) {
+      return theme.border.error;
     } else {
-      return (
-        <Box marginRight={2}>
-          <Icon name="search" prefix="far" size="md" />
-        </Box>
-      );
+      return focused ? theme.border.focus : theme.border.dark;
     }
-  };
+  }, [
+    disabled,
+    errorText,
+    focused,
+    theme.border.activeNeutral,
+    theme.border.dark,
+    theme.border.error,
+    theme.border.focus,
+  ]);
 
-  let borderColor;
-  if (errorMessage) {
-    borderColor = theme.red;
-  } else if (focused) {
-    borderColor = theme.blue;
-  } else {
-    borderColor = theme.gray;
-  }
-
-  const getHeight = useCallback(() => {
+  const calculatedHeight: DimensionValue = useMemo(() => {
     if (grow) {
       return Math.max(40, height);
     } else if (multiline) {
       return height || "100%";
     } else {
-      return 40;
+      return 20;
     }
   }, [grow, height, multiline]);
 
   const defaultTextInputStyles = useMemo(() => {
-    const defaultStyles = {
+    const style: StyleProp<TextStyleWithOutline> = {
       flex: 1,
-      paddingTop: 4,
-      paddingRight: 4,
-      paddingBottom: 4,
-      paddingLeft: 0,
-      height: getHeight(),
       width: "100%",
-      color: theme.darkGray,
-      fontFamily: theme.primaryFont,
-      ...style,
+      height: calculatedHeight,
+      color: theme.text.primary,
+      fontFamily: "text",
+      fontSize: 16,
+      paddingVertical: 0,
+      gap: 10,
     };
 
     if (Platform.OS === "web") {
-      defaultStyles.outline = 0;
+      style.outline = "none";
     }
+    return style;
+  }, [calculatedHeight, theme.text.primary]);
 
-    return defaultStyles;
-  }, [getHeight, style, theme.darkGray, theme.primaryFont]);
-
-  const isHandledByModal = [
-    "date",
-    "datetime",
-    "time",
-    "numberRange",
-    "decimalRange",
-    "height",
-  ].includes(type);
-
-  const isEditable = !disabled && !isHandledByModal;
+  if (["numberRange", "decimalRange", "height"].includes(type)) {
+    console.warn(`${type} is not yet supported`);
+  }
 
-  const shouldAutocorrect = type === "text" && (!autoComplete || autoComplete === "on");
+  const shouldAutocorrect =
+    ["text", "textarea"].includes(type) && (!autoComplete || autoComplete === "on");
 
   const keyboardType = keyboardMap[type];
   const textContentType = textContentMap[type || "text"];
 
-  const withLabelProps = {
-    label,
-    labelColor,
-  };
-
-  const onTap = useCallback((): void => {
-    if (disabled) {
-      return;
-    }
-    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, disabled, numberRangeActionSheetRef, type, weightActionSheetRef]);
-
-  let displayValue = value;
-  if (value) {
-    const timezone = transformValue?.options?.timezone || localTimeZone;
-
-    if (type === "date") {
-      displayValue = printDate(value, {ignoreTime: true});
-    } else if (type === "time") {
-      displayValue = printTime(value, {timezone, showTimezone: true});
-    } else if (type === "datetime") {
-      displayValue = printDateAndTime(value, {timezone, showTimezone: true});
-    } else if (type === "height") {
-      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
-      // becoming something like `"(123"`
-      // which would give the same `"123"` value
-      // 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 (displayValue !== formattedPhoneNumber && value.length !== 4) {
-        displayValue = formattedPhoneNumber;
-      }
-    }
-  } else {
-    // Set some default values for modal-edited fields so we don't go from uncontrolled to
-    // controlled when setting the date.
-    if (["date", "datetime", "time"].includes(type)) {
-      displayValue = "";
-    }
-  }
-
-  const Wrapper = isHandledByModal ? Pressable : View;
-
   return (
-    <>
-      <WithLabel
-        label={errorMessage}
-        labelColor={errorMessageColor || "red"}
-        labelPlacement="after"
-        labelSize="sm"
+    <View
+      style={{
+        flexDirection: "column",
+        width: "100%",
+      }}
+    >
+      {title && <FieldTitle text={title} />}
+      {Boolean(errorText) && errorText && <FieldError text={errorText} />}
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          backgroundColor: disabled ? theme.surface.neutralLight : theme.surface.base,
+          borderColor,
+          borderWidth: focused ? 3 : 1,
+          paddingHorizontal: focused ? 10 : 12,
+          paddingVertical: focused ? 6 : 8,
+          borderRadius: 4,
+          overflow: "hidden",
+        }}
       >
-        <WithLabel {...withLabelProps}>
-          <Wrapper
-            style={{
-              flexDirection: "row",
-              justifyContent: "center",
-              alignItems: "center",
-              // height: multiline || grow ? undefined : 40,
-              minHeight: getHeight(),
-              width: "100%",
-              // Add padding so the border doesn't mess up layouts
-              paddingHorizontal: focused ? 10 : 14,
-              paddingVertical: focused ? 0 : 4,
-              borderColor,
-              borderWidth: focused ? 5 : 1,
-              borderRadius: 16,
-              backgroundColor: disabled ? theme.gray : theme.white,
-              overflow: "hidden",
-            }}
-            onPress={() => {
-              // This runs on web
-              onTap();
-            }}
-            onTouchStart={() => {
-              // This runs on mobile
-              onTap();
-            }}
-          >
-            {renderIcon()}
-            <TextInput
-              ref={(ref) => {
-                if (inputRef) {
-                  inputRef(ref);
-                }
-              }}
-              autoCapitalize={type === "text" ? "sentences" : "none"}
-              autoCorrect={shouldAutocorrect}
-              autoFocus={autoFocus}
-              blurOnSubmit={blurOnSubmit}
-              editable={isEditable}
-              keyboardType={keyboardType as KeyboardTypeOptions}
-              multiline={multiline}
-              numberOfLines={rows || 4}
-              placeholder={placeholder}
-              placeholderTextColor={theme.gray}
-              returnKeyType={type === "number" || type === "decimal" ? "done" : returnKeyType}
-              secureTextEntry={type === "password"}
-              style={defaultTextInputStyles}
-              testID={testID}
-              textContentType={textContentType}
-              underlineColorAndroid="transparent"
-              value={displayValue}
-              onBlur={() => {
-                if (!isHandledByModal) {
-                  setFocused(false);
-                }
-                if (onBlur) {
-                  onBlur({value: value ?? ""});
-                }
-                // if (type === "date") {
-                //   actionSheetRef?.current?.hide();
-                // }
-              }}
-              onChangeText={(text) => {
-                if (!onChange) {
-                  return;
-                }
-                if (type === "phoneNumber") {
-                  const formattedPhoneNumber = new AsYouType("US").input(text);
-                  // another workaround for the same issue as above with backspacing phone numbers
-                  if (formattedPhoneNumber === value) {
-                    onChange({value: text});
-                  } else {
-                    onChange({value: formattedPhoneNumber});
-                  }
-                } else if (type === "number") {
-                  text = text.replace(/[^0-9]/g, "");
-                  onChange({value: !isNaN(parseInt(text)) ? parseInt(text).toString() : ""});
-                } else if (type === "date" || type === "datetime" || type === "time") {
-                  // Do nothing, this is handled by the date time action sheet
-                } else {
-                  onChange({value: text});
-                }
-              }}
-              onContentSizeChange={(event) => {
-                if (!grow) {
-                  return;
-                }
-                setHeight(event.nativeEvent.contentSize.height);
-              }}
-              onFocus={() => {
-                if (!isHandledByModal) {
-                  setFocused(true);
-                }
-              }}
-              onSubmitEditing={() => {
-                if (onEnter) {
-                  onEnter();
-                }
-                if (onSubmitEditing) {
-                  onSubmitEditing();
-                }
-              }}
-            />
-          </Wrapper>
-        </WithLabel>
-      </WithLabel>
-      {(type === "date" || type === "time" || type === "datetime") && (
-        <DateTimeActionSheet
-          actionSheetRef={dateActionSheetRef}
-          mode={type}
-          transformValue={transformValue}
+        <TextInput
+          ref={(ref) => {
+            if (inputRef) {
+              inputRef(ref);
+            }
+          }}
+          accessibilityHint="Enter text here"
+          accessibilityLabel="Text input field"
+          accessibilityState={{disabled}}
+          autoCapitalize={type === "text" ? "sentences" : "none"}
+          autoCorrect={shouldAutocorrect}
+          blurOnSubmit={blurOnSubmit}
+          editable={!disabled}
+          enterKeyHint={returnKeyType}
+          keyboardType={keyboardType as KeyboardTypeOptions}
+          multiline={multiline}
+          numberOfLines={rows || 4}
+          placeholder={placeholder}
+          placeholderTextColor={theme.text.secondaryLight}
+          secureTextEntry={type === "password"}
+          style={defaultTextInputStyles}
+          testID={testID}
+          textContentType={textContentType}
+          underlineColorAndroid="transparent"
           value={value}
-          visible={showDate}
-          onChange={(result) => {
-            onChange(result);
-            setShowDate(false);
-            setFocused(false);
+          onBlur={() => {
+            if (disabled) return;
+
+            if (onBlur) {
+              onBlur(value ?? "");
+            }
+          }}
+          onChangeText={onChange}
+          onContentSizeChange={(event) => {
+            if (!grow) {
+              return;
+            }
+            setHeight(event.nativeEvent.contentSize.height);
+          }}
+          onFocus={() => {
+            if (!disabled) {
+              setFocused(true);
+            }
+          }}
+          onSubmitEditing={() => {
+            if (onEnter) {
+              onEnter();
+            }
+            if (onSubmitEditing) {
+              onSubmitEditing();
+            }
           }}
-          onDismiss={() => setShowDate(false)}
         />
-      )}
-      {/* {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 && (
+        {Boolean(iconName) && (
+          <Pressable accessibilityRole="button" onPress={onIconClick}>
+            <Icon iconName={iconName!} size="md" />
+          </Pressable>
+        )}
+      </View>
+      {helperText && <FieldHelperText text={helperText} />}
+      {/* {type === "numberRange" && value && (
         <NumberPickerActionSheet
           actionSheetRef={numberRangeActionSheetRef}
           max={max || (min || 0) + 100}
@@ -395,8 +243,8 @@ export const TextField = ({
           value={value}
           onChange={(result) => onChange(result)}
         />
-      )}
-      {type === "height" && (
+      )} */}
+      {/* {type === "height" && (
         <HeightActionSheet
           actionSheetRef={weightActionSheetRef}
           value={value}
@@ -404,7 +252,7 @@ export const TextField = ({
             onChange(result);
           }}
         />
-      )}
-    </>
+      )} */}
+    </View>
   );
 };

package/src/TextFieldNumberActionSheet.tsx

@@ -23,10 +23,7 @@ export class NumberPickerActionSheet extends React.Component<
           <Box alignItems="end" display="flex" width="100%">
             <Box width="33%">
               <Button
-                color="blue"
-                size="lg"
                 text="Save"
-                type="ghost"
                 onClick={() => {
                   this.props.actionSheetRef?.current?.setModalVisible(false);
                 }}
@@ -43,7 +40,7 @@ export class NumberPickerActionSheet extends React.Component<
               if (!date) {
                 return;
               }
-              this.props.onChange({event, value: date.toString()});
+              this.props.onChange(date.toString());
             }}
           />
         </Box>