ferns-ui 1.3.0 → 1.5.0

package/src/DateTimeField.tsx

@@ -1,33 +1,156 @@
-import {getCalendars} from "expo-localization";
 import {DateTime} from "luxon";
-import React, {useCallback, useEffect, useState} from "react";
+import React, {useCallback, useEffect, useRef, useState} from "react";
+import {TextInput, View} from "react-native";
 
+import {Box} from "./Box";
 import {DateTimeFieldProps, IconName} from "./Common";
 import {DateTimeActionSheet} from "./DateTimeActionSheet";
-import {printDate, printDateAndTime, printTime} from "./DateUtilities";
-import {TextField} from "./TextField";
+import {IconButton} from "./IconButton";
+import {isMobileDevice} from "./MediaQuery";
+import {SelectField} from "./SelectField";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+import {TimezonePicker} from "./TimezonePicker";
 
-// TODO: allow use of keyboard to type in date/time
-export const DateTimeField = ({
+interface SeparatorProps {
+  type: "date" | "time";
+}
+
+const Separator: React.FC<SeparatorProps> = ({type}) => {
+  return (
+    <View>
+      <Text>{type === "time" ? ":" : "/"}</Text>
+    </View>
+  );
+};
+
+interface DateTimeSegmentProps {
+  config: FieldConfig;
+  disabled?: boolean;
+  getFieldValue: (index: number) => string;
+  handleFieldChange: (index: number, text: string, config: FieldConfig) => void;
+  onBlur: (override?: {amPm?: "am" | "pm"; timezone?: string}) => void;
+  onRef: (ref: TextInput | null, index: number) => void;
+  index: number;
+}
+
+const DateTimeSegment: React.FC<DateTimeSegmentProps> = ({
+  disabled,
+  getFieldValue,
+  handleFieldChange,
+  onBlur,
+  onRef,
+  index,
+  config,
+}): React.ReactElement => {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        width: config.width,
+        borderColor: "transparent",
+        backgroundColor: "transparent",
+        overflow: "hidden",
+        padding: 0,
+        flexShrink: 1,
+        height: 40,
+      }}
+    >
+      <TextInput
+        ref={(el) => onRef(el, index)}
+        accessibilityHint={`Enter the ${config.placeholder}`}
+        aria-label="Text input field"
+        inputMode="numeric"
+        placeholder={config.placeholder}
+        readOnly={disabled}
+        selectTextOnFocus
+        style={{width: config.width - 2, textAlign: "center"}}
+        value={getFieldValue(index)}
+        onBlur={() => onBlur()}
+        onChangeText={(text) => {
+          handleFieldChange(index, text, config);
+        }}
+      />
+    </View>
+  );
+};
+
+interface DateTimeProps extends Omit<DateTimeSegmentProps, "index" | "config"> {
+  fieldConfigs: FieldConfig[];
+  type: "date" | "datetime" | "time";
+}
+
+const DateField: React.FC<DateTimeProps> = (segmentProps) => {
+  return (
+    <View style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
+      <DateTimeSegment {...segmentProps} config={segmentProps.fieldConfigs[0]} index={0} />
+      <Separator type="date" />
+      <DateTimeSegment {...segmentProps} config={segmentProps.fieldConfigs[1]} index={1} />
+      <Separator type="date" />
+      <DateTimeSegment {...segmentProps} config={segmentProps.fieldConfigs[2]} index={2} />
+    </View>
+  );
+};
+
+const TimeField: React.FC<DateTimeProps> = ({
+  type,
+  onBlur,
+
+  ...segmentProps
+}) => {
+  return (
+    <View style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between"}}>
+      <DateTimeSegment
+        {...segmentProps}
+        config={segmentProps.fieldConfigs[0]}
+        index={type === "time" ? 0 : 3}
+        onBlur={onBlur}
+      />
+      <Separator type="time" />
+      <DateTimeSegment
+        {...segmentProps}
+        config={segmentProps.fieldConfigs[1]}
+        index={type === "time" ? 1 : 4}
+        onBlur={onBlur}
+      />
+    </View>
+  );
+};
+
+type FieldConfig = {
+  maxLength: number;
+  placeholder: string;
+  width: number;
+};
+
+export const DateTimeField: React.FC<DateTimeFieldProps> = ({
   type,
   value,
   onChange,
-  timezone: tz,
+  timezone: providedTimezone,
+  onTimezoneChange,
   errorText,
   disabled,
-  ...rest
-}: DateTimeFieldProps): React.ReactElement => {
-  const calendar = getCalendars()[0];
-  const timezone = (tz || calendar?.timeZone) ?? "UTC"; // Fallback to UTC if timezone is undefined
-
-  let placeholder: string = "";
-  if (type === "time") {
-    placeholder = "hh:mm a";
-  } else if (type === "datetime") {
-    placeholder = "mm/dd/yyyy hh:mm a";
-  } else if (type === "date") {
-    placeholder = "mm/dd/yyyy";
-  }
+}): React.ReactElement => {
+  const {theme} = useTheme();
+  const dateActionSheetRef: React.RefObject<any> = React.createRef();
+  const [amPm, setAmPm] = useState<"am" | "pm">("am");
+  const [showDate, setShowDate] = useState(false);
+  const [month, setMonth] = useState("");
+  const [day, setDay] = useState("");
+  const [year, setYear] = useState("");
+  const [hour, setHour] = useState("");
+  const [minute, setMinute] = useState("");
+  const [localTimezone, setLocalTimezone] = useState(
+    providedTimezone ?? DateTime.local().zoneName ?? "UTC"
+  );
+
+  // Use provided timezone if available, otherwise use local
+  const timezone = providedTimezone ?? localTimezone;
+  const lastTimezoneRef = useRef(timezone);
+
+  const inputRefs = useRef<(TextInput | null)[]>([]);
 
   let iconName: IconName | undefined;
   if (disabled) {
@@ -38,166 +161,382 @@ export const DateTimeField = ({
     iconName = "calendar";
   }
 
-  const formatValue = useCallback(
-    (val: string) => {
-      if (!val) {
-        return "";
+  let borderColor = theme.border.dark;
+  if (disabled) {
+    borderColor = theme.border.activeNeutral;
+  } else if (errorText) {
+    borderColor = theme.border.error;
+  }
+
+  const getFieldConfigs = useCallback((): FieldConfig[] => {
+    const configs: FieldConfig[] = [];
+    if (type === "date" || type === "datetime") {
+      configs.push(
+        {maxLength: 2, placeholder: "MM", width: 40},
+        {maxLength: 2, placeholder: "DD", width: 30},
+        {maxLength: 4, placeholder: "YYYY", width: 50}
+      );
+    }
+    if (type === "time" || type === "datetime") {
+      configs.push(
+        {maxLength: 2, placeholder: "HH", width: 30},
+        {maxLength: 2, placeholder: "MM", width: 30}
+      );
+    }
+    return configs;
+  }, [type]);
+
+  // Set the inputRefs array to the correct length
+  useEffect(() => {
+    const configs = getFieldConfigs();
+    inputRefs.current = configs.map(() => null);
+  }, [getFieldConfigs]);
+
+  const getISOFromFields = useCallback(
+    (override?: {amPm?: "am" | "pm"; timezone?: string; minute?: string}): string | undefined => {
+      const ampPmVal = override?.amPm ?? amPm;
+      const minuteVal = override?.minute ?? minute;
+      let date;
+      if (type === "datetime") {
+        if (!month || !day || !year || !hour || !minuteVal) {
+          return undefined;
+        }
+        let hourNum = parseInt(hour);
+        if (ampPmVal === "pm" && hourNum !== 12) {
+          hourNum += 12;
+        } else if (ampPmVal === "am" && hourNum === 12) {
+          hourNum = 0;
+        }
+        date = DateTime.fromObject(
+          {
+            year: parseInt(year),
+            month: parseInt(month),
+            day: parseInt(day),
+            hour: hourNum,
+            minute: parseInt(minuteVal),
+          },
+          {
+            zone: override?.timezone ?? timezone,
+          }
+        );
+      } else if (type === "date") {
+        if (!month || !day || !year) {
+          return undefined;
+        }
+        date = DateTime.fromObject(
+          {
+            year: parseInt(year),
+            month: parseInt(month),
+            day: parseInt(day),
+          },
+          {
+            zone: override?.timezone ?? timezone,
+          }
+        );
+      } else {
+        if (!hour || !minuteVal) {
+          return undefined;
+        }
+        let hourNum = parseInt(hour);
+        if (ampPmVal === "pm" && hourNum !== 12) {
+          hourNum += 12;
+        } else if (ampPmVal === "am" && hourNum === 12) {
+          hourNum = 0;
+        }
+        date = DateTime.fromObject(
+          {
+            hour: hourNum,
+            minute: parseInt(minuteVal),
+          },
+          {
+            zone: override?.timezone ?? timezone,
+          }
+        );
       }
-      switch (type) {
-        case "time":
-          return printTime(val, {timezone, showTimezone: true});
-        case "datetime":
-          return printDateAndTime(val, {timezone, showTimezone: true});
-        case "date":
-        default:
-          return printDate(val, {timezone, ignoreTime: true});
+
+      if (date.isValid) {
+        // Always return UTC ISO string
+        return date.toUTC().toISO();
       }
+      return undefined;
     },
-    [timezone, type]
+    [amPm, month, day, year, hour, minute, timezone, type]
   );
 
-  const formatInputDate = useCallback(
-    (input: string) => {
-      const cleanedInput = input.replace(/[^0-9]/g, ""); // Remove non-numeric characters
-      let formatted = input;
-
-      switch (type) {
-        case "time":
-          if (cleanedInput.length >= 2) {
-            formatted = `${cleanedInput.slice(0, 2)}:${cleanedInput.slice(2, 4)}`;
-          } else {
-            formatted = cleanedInput;
-          }
-          break;
-        case "datetime":
-          if (cleanedInput.length >= 2) {
-            formatted = `${cleanedInput.slice(0, 2)}`;
-            if (cleanedInput.length > 2) {
-              formatted += `/${cleanedInput.slice(2, 4)}`;
-            }
-            if (cleanedInput.length > 4) {
-              formatted += `/${cleanedInput.slice(4, 8)}`;
-            }
-            if (cleanedInput.length > 8) {
-              formatted += ` ${cleanedInput.slice(8, 10)}:${cleanedInput.slice(10, 12)}`;
-            }
-          }
-          break;
-        case "date":
-        default:
-          if (cleanedInput.length >= 2) {
-            formatted = `${cleanedInput.slice(0, 2)}`;
-            if (cleanedInput.length > 2) {
-              formatted += `/${cleanedInput.slice(2, 4)}`;
-            }
-            if (cleanedInput.length > 4) {
-              formatted += `/${cleanedInput.slice(4, 8)}`;
+  const handleFieldChange = useCallback(
+    (index: number, text: string, config: FieldConfig) => {
+      const numericValue = text.replace(/[^0-9]/g, "");
+
+      // For minutes, just ensure it's at most 2 digits and valid (0-59)
+      if ((type === "time" && index === 1) || (type === "datetime" && index === 4)) {
+        // For minutes, take the last two digits and remove leading zeros unless it would be empty
+        const finalValue = numericValue.slice(-2).replace(/^0+(?=\d)/, "");
+        const minuteNum = parseInt(finalValue);
+
+        // Only update if it's a valid minute value
+        if (!isNaN(minuteNum) && minuteNum >= 0 && minuteNum <= 59) {
+          setMinute(finalValue);
+
+          // Pass the new minute value directly to getISOFromFields
+          const result = getISOFromFields({minute: finalValue});
+          if (result) {
+            const currentValueUTC = value ? DateTime.fromISO(value).toUTC().toISO() : undefined;
+            if (result !== currentValueUTC) {
+              onChange(result);
             }
           }
-          break;
+        }
+
+        // Auto-advance to next field if current field is full
+        const configs = getFieldConfigs();
+        if (finalValue.length === config.maxLength && index < configs.length - 1) {
+          inputRefs.current[index + 1]?.focus();
+        }
+        return;
       }
 
-      return formatted;
-    },
-    [type]
-  );
+      // For other fields, handle leading zeros
+      const finalValue =
+        numericValue.length > config.maxLength
+          ? numericValue.replace(/^0+/, "").slice(0, config.maxLength)
+          : numericValue;
 
-  const dateActionSheetRef: React.RefObject<any> = React.createRef();
-  const [formattedDate, setFormattedDate] = useState<string>(value ? formatValue(value) : "");
-  const [showDate, setShowDate] = useState(false);
-  const [localError, setLocalError] = useState<string>("");
+      if (type === "date" || type === "datetime") {
+        if (index === 0) setMonth(finalValue);
+        if (index === 1) setDay(finalValue);
+        if (index === 2) setYear(finalValue);
+      }
 
-  const onTextFieldChange = useCallback(
-    (inputDate: string) => {
-      const formattedInput = formatInputDate(inputDate);
-      const cleanedInput = formattedInput.replace(/[^0-9]/g, "");
-
-      let parsedDate;
-      if (type === "datetime" && cleanedInput.length === 12) {
-        const month = cleanedInput.slice(0, 2);
-        const day = cleanedInput.slice(2, 4);
-        const year = cleanedInput.slice(4, 8);
-        const hour = cleanedInput.slice(8, 10);
-        const minute = cleanedInput.slice(10, 12);
-        parsedDate = DateTime.fromFormat(`${month}${day}${year}${hour}${minute}`, "MMddyyyyHHmm", {
-          zone: timezone,
-        });
-      } else if (type === "time" && cleanedInput.length === 4) {
-        const hour = cleanedInput.slice(0, 2);
-        const minute = cleanedInput.slice(2, 4);
-        parsedDate = DateTime.fromFormat(`${hour}${minute}`, "HHmm", {
-          zone: timezone,
-        });
-      } else if (type === "date" && cleanedInput.length === 8) {
-        const month = cleanedInput.slice(0, 2);
-        const day = cleanedInput.slice(2, 4);
-        const year = cleanedInput.slice(4, 8);
-        parsedDate = DateTime.fromFormat(`${month}${day}${year}`, "MMddyyyy", {zone: timezone})
-          .startOf("day")
-          .toUTC();
+      if (type === "time") {
+        if (index === 0) setHour(finalValue);
       }
 
-      if (!parsedDate) {
-        setLocalError("Invalid date/time. Please format as " + `${placeholder}`);
-        setFormattedDate(formattedInput);
-        onChange("");
-        return;
+      if (type === "datetime") {
+        if (index === 3) setHour(finalValue);
       }
-      if (parsedDate?.isValid) {
-        setFormattedDate(formatValue(parsedDate.toISO()));
-        setLocalError("");
-        onChange(parsedDate.toISO());
-      } else if (cleanedInput.length > (type === "datetime" ? 12 : type === "time" ? 4 : 8)) {
-        setLocalError("Invalid date/time");
-        setFormattedDate(formattedInput);
-        onChange("");
-      } else {
-        setFormattedDate(formattedInput);
-        setLocalError("Invalid date/time. Please format as " + `${placeholder}`);
+
+      // We use getISOFromFields to ensure the value is valid and current
+      const result = getISOFromFields();
+      if (result) {
+        const currentValueUTC = value ? DateTime.fromISO(value).toUTC().toISO() : undefined;
+        if (result !== currentValueUTC) {
+          onChange(result);
+        }
+      }
+
+      // Auto-advance to next field if current field is full
+      const configs = getFieldConfigs();
+      if (finalValue.length === config.maxLength && index < configs.length - 1) {
+        inputRefs.current[index + 1]?.focus();
       }
     },
-    [formatInputDate, type, timezone, formatValue, onChange, placeholder]
+    [type, getFieldConfigs, getISOFromFields, onChange, value]
   );
 
   const onActionSheetChange = useCallback(
     (inputDate: string) => {
+      const parsedDate = DateTime.fromISO(inputDate);
+      if (!parsedDate.isValid) {
+        console.warn("Invalid date passed to DateTimeField", inputDate);
+        return;
+      }
+      setAmPm(parsedDate.hour >= 12 ? "pm" : "am");
+
+      if (type === "date" || type === "datetime") {
+        setMonth(parsedDate.month.toString().padStart(2, "0"));
+        setDay(parsedDate.day.toString().padStart(2, "0"));
+        setYear(parsedDate.year.toString());
+      }
+
+      if (type === "time" || type === "datetime") {
+        let hourNum = parsedDate.hour % 12;
+        hourNum = hourNum === 0 ? 12 : hourNum;
+        setHour(hourNum.toString().padStart(2, "0"));
+        setMinute(parsedDate.minute.toString().padStart(2, "0"));
+      }
       onChange(inputDate);
-      setFormattedDate(formatValue(inputDate));
       setShowDate(false);
-      setLocalError("");
     },
-    [formatValue, onChange]
+    [onChange, type]
+  );
+
+  // When fields change, send the value to onChange
+  const onBlur = useCallback(
+    (override?: {amPm?: "am" | "pm"}) => {
+      const iso = getISOFromFields(override);
+      // Compare in UTC to avoid timezone issues
+      const currentValueUTC = value ? DateTime.fromISO(value).toUTC().toISO() : undefined;
+      if (iso && iso !== currentValueUTC) {
+        onChange(iso);
+      }
+    },
+    [getISOFromFields, onChange, value]
   );
 
-  // if the value of the overall field changes via prop from the parent,
-  // update the formattedDate to keep the value of the TextField and DateTimeActionSheet in sync
+  // Handle external value changes
   useEffect(() => {
-    if (value) {
-      const formatted = formatValue(value);
-      if (formattedDate !== formatted) {
-        setFormattedDate(formatted);
+    if (!value) {
+      return;
+    }
+
+    // // If only timezone changed, don't recalculate fields
+    const isOnlyTimezoneChange =
+      lastTimezoneRef.current !== timezone &&
+      DateTime.fromISO(value).toUTC().toISO() ===
+        DateTime.fromISO(value).setZone(timezone).toUTC().toISO();
+
+    lastTimezoneRef.current = timezone;
+
+    if (isOnlyTimezoneChange) {
+      return;
+    }
+
+    const parsedDate = DateTime.fromISO(value).setZone(timezone);
+    if (!parsedDate.isValid) {
+      console.warn("Invalid date passed to DateTimeField", value);
+      return;
+    }
+    setAmPm(parsedDate.hour >= 12 ? "pm" : "am");
+
+    if (type === "date" || type === "datetime") {
+      setMonth(parsedDate.month.toString().padStart(2, "0"));
+      setDay(parsedDate.day.toString().padStart(2, "0"));
+      setYear(parsedDate.year.toString());
+    }
+
+    if (type === "time" || type === "datetime") {
+      let hourNum = parsedDate.hour % 12;
+      hourNum = hourNum === 0 ? 12 : hourNum;
+      setHour(hourNum.toString().padStart(2, "0"));
+      setMinute(parsedDate.minute.toString().padStart(2, "0"));
+    }
+  }, [value, type, timezone]);
+
+  // JOSH: This is where the infinite loop is happening
+  // We update the value of the date according to the zone and then this get triggered
+  // and we update the value of the date according to the zone again
+  const getFieldValue = useCallback(
+    (index: number): string => {
+      if (type === "date" || type === "datetime") {
+        if (index === 0) return month;
+        if (index === 1) return day;
+        if (index === 2) return year;
       }
-      if (errorText) {
-        setLocalError(errorText);
+
+      if (type === "time") {
+        if (index === 0) return hour;
+        if (index === 1) return minute;
       }
-    }
-  }, [value, formatValue, formattedDate, errorText]);
+
+      if (type === "datetime") {
+        if (index === 3) return hour;
+        if (index === 4) return minute;
+      }
+
+      return "";
+    },
+    [type, month, day, year, hour, minute]
+  );
+
+  const fieldConfigs = getFieldConfigs();
+
+  const segmentProps = {
+    disabled,
+    getFieldValue,
+    handleFieldChange,
+    onBlur,
+    fieldConfigs,
+    onRef: (el: TextInput | null, i: number) => (inputRefs.current[i] = el),
+  };
 
   return (
     <>
-      <TextField
-        disabled={disabled}
-        errorText={localError}
-        iconName={iconName}
-        placeholder={placeholder}
-        type="text"
-        value={formattedDate}
-        onChange={onTextFieldChange}
-        onIconClick={() => {
-          setShowDate(true);
+      <View
+        style={{
+          flexDirection: isMobileDevice() ? "column" : "row",
+          borderColor,
+          backgroundColor: theme.surface.base,
+          borderWidth: 1,
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderRadius: 4,
+          alignItems: "center",
+          justifyContent: "space-between",
         }}
-        {...rest}
-      />
+      >
+        {(type === "date" || type === "datetime") && (
+          <View style={{flexDirection: "row", alignItems: "center"}}>
+            <DateField {...segmentProps} type={type} />
+            {!disabled && type === "date" && (
+              <IconButton
+                accessibilityHint="Opens the calendar to select a date and time"
+                accessibilityLabel="Show calendar"
+                iconName={iconName!}
+                variant="muted"
+                onClick={() => setShowDate(true)}
+              />
+            )}
+          </View>
+        )}
+
+        <View style={{flexDirection: "row", alignItems: "center"}}>
+          {(type === "time" || type === "datetime") && <TimeField {...segmentProps} type={type} />}
+          {Boolean(type === "datetime" || type === "time") && (
+            <>
+              <Box direction="column" marginLeft={2} marginRight={2} width={60}>
+                <SelectField
+                  disabled={disabled}
+                  options={[
+                    {label: "am", value: "am"},
+                    {label: "pm", value: "pm"},
+                  ]}
+                  requireValue
+                  value={amPm}
+                  onChange={(result) => {
+                    setAmPm(result as "am" | "pm");
+                    // We need to call onBlur manually because the SelectField doesn't support it
+                    onBlur({amPm: result as "am" | "pm"});
+                  }}
+                />
+              </Box>
+              <Box direction="column" marginRight={2} width={70}>
+                <TimezonePicker
+                  disabled={disabled}
+                  hideTitle
+                  shortTimezone
+                  timezone={timezone}
+                  onChange={(t) => {
+                    if (onTimezoneChange) {
+                      onTimezoneChange(t);
+                    } else {
+                      setLocalTimezone(t);
+                    }
+                    const iso = getISOFromFields({timezone: t});
+                    // Compare in UTC to avoid timezone issues
+                    const currentValueUTC = value
+                      ? DateTime.fromISO(value).toUTC().toISO()
+                      : undefined;
+                    if (iso && iso !== currentValueUTC) {
+                      onChange(iso);
+                    }
+                  }}
+                />
+              </Box>
+            </>
+          )}
+
+          {!disabled && type === "datetime" && (
+            <IconButton
+              accessibilityHint="Opens the calendar to select a date and time"
+              accessibilityLabel="Show calendar"
+              iconName={iconName!}
+              variant="muted"
+              onClick={() => setShowDate(true)}
+            />
+          )}
+        </View>
+      </View>
+
       {!disabled && (
         <DateTimeActionSheet
           actionSheetRef={dateActionSheetRef}