ferns-ui 1.4.0 → 1.5.1

package/src/DateUtilities.tsx

@@ -333,3 +333,38 @@ export function getIsoDate(date: string | undefined): string | undefined {
   }
   return convertNullToUndefined(DateTime.fromISO(date).toUTC().toISO());
 }
+
+const usTimezoneOptions = [
+  {label: "Eastern", value: "America/New_York"},
+  {label: "Central", value: "America/Chicago"},
+  {label: "Mountain", value: "America/Denver"},
+  {label: "Pacific", value: "America/Los_Angeles"},
+  {label: "Alaska", value: "America/Anchorage"},
+  {label: "Hawaii", value: "Pacific/Honolulu"},
+  {label: "Arizona", value: "America/Phoenix"},
+];
+
+export function getTimezoneOptions(location: "USA" | "Worldwide", shortTimezone = false) {
+  let timezones: [string, string][];
+  if (location === "USA") {
+    timezones = usTimezoneOptions.map((tz) => [tz.label, tz.value]);
+  } else {
+    timezones = (Intl as any).supportedValuesOf("timeZone").map((tz: any) => {
+      return [tz, tz];
+    });
+  }
+  return timezones.map(([name, tz]) => {
+    const dateTime = DateTime.now().setZone(tz);
+    let tzAbbr = dateTime.toFormat("ZZZZ"); // Gets timezone abbreviation like "EST", "CST", etc.
+
+    // Special case for Arizona which returns MST during standard time
+    if (tz === "America/Phoenix") {
+      tzAbbr = "AZ";
+    }
+
+    return {
+      label: shortTimezone ? tzAbbr : name,
+      value: tz,
+    };
+  });
+}

package/src/Field.tsx

@@ -50,7 +50,7 @@ export const Field: FC<FieldProps> = ({type, ...rest}) => {
   } else if (type && ["date", "time", "datetime"].includes(type)) {
     return (
       <DateTimeField
-        {...(rest as DateTimeFieldProps)}
+        {...(rest as DateTimeFieldProps as any)}
         type={type as "date" | "time" | "datetime"}
       />
     );

package/src/PhoneNumberField.tsx

@@ -25,7 +25,7 @@ export const PhoneNumberField: FC<PhoneNumberFieldProps> = ({
 
   const validatePhoneNumber = useCallback(
     (phoneNumber: string): string | undefined => {
-      if (phoneNumber.trim() === "") {
+      if (!phoneNumber || phoneNumber.trim() === "") {
         return undefined;
       }
       const parsedNumber = parsePhoneNumberFromString(phoneNumber, defaultCountryCode);
@@ -85,10 +85,10 @@ export const PhoneNumberField: FC<PhoneNumberFieldProps> = ({
       if (error && !validationError) {
         setError(undefined);
       }
+
+      // Ensure invalid values don't propagate up
       if (!validationError) {
         onChange(formattedValue);
-      } else {
-        onChange(""); // Ensure invalid values don't propagate up
       }
     },
     [onChange, error, validatePhoneNumber, formatPhoneNumber]

package/src/TimezonePicker.tsx

@@ -1,37 +1,46 @@
 import React from "react";
 
-import {Box} from "./Box";
-import {TimezonePickerProps} from "./Common";
+import {SelectFieldPropsBase} from "./Common";
+import {getTimezoneOptions} from "./DateUtilities";
 import {SelectField} from "./SelectField";
 
-// TODO: Support world wide timezones
-const options = [
-  {label: "Eastern", value: "America/New_York"},
-  {label: "Central", value: "America/Chicago"},
-  {label: "Mountain", value: "America/Denver"},
-  {label: "Pacific", value: "America/Los_Angeles"},
-  {label: "Alaska", value: "America/Anchorage"},
-  {label: "Hawaii", value: "Pacific/Honolulu"},
-  {label: "Arizona", value: "America/Phoenix"},
-];
+interface TimezonePickerProps extends Omit<SelectFieldPropsBase, "options"> {
+  timezone?: string;
+  onChange: (value: string) => void;
+  location?: "USA" | "Worldwide";
+  hideTitle?: boolean;
+  shortTimezone?: boolean;
+}
 
-export const TimezonePicker = ({
+export const TimezonePicker: React.FC<TimezonePickerProps> = ({
   timezone,
   onChange,
-  showLabel,
-  width = 100,
+  location = "USA",
+  hideTitle = false,
+  shortTimezone = false,
+  ...fieldProps
 }: TimezonePickerProps): React.ReactElement => {
-  if (showLabel) {
-    return (
-      <Box maxWidth={width}>
-        <SelectField options={options} title="Timezone" value={timezone} onChange={onChange} />
-      </Box>
-    );
-  } else {
-    return (
-      <Box maxWidth={width}>
-        <SelectField options={options} value={timezone} onChange={onChange} />
-      </Box>
-    );
+  // eslint-disable-next-line react/display-name
+  const tzOptions = React.useMemo(
+    () => getTimezoneOptions(location, shortTimezone),
+    [location, shortTimezone]
+  );
+
+  // Check that value is in the list of options
+  const valueIndex = tzOptions.findIndex((t) => t.value === timezone);
+  if (valueIndex === -1) {
+    console.warn(`${timezone} is not a valid timezone`);
   }
+
+  const title = hideTitle ? undefined : "Timezone";
+
+  return (
+    <SelectField
+      title={title}
+      {...fieldProps}
+      options={tzOptions}
+      value={timezone}
+      onChange={onChange}
+    />
+  );
 };

package/src/table/TableBoolean.tsx

@@ -60,7 +60,7 @@ export const TableBoolean: FC<TableBooleanProps> = ({value, isEditing = false})
             justifyContent: "center",
           }}
         >
-          <Icon color={value ? "success" : "secondaryLight"} iconName={value ? "check" : "x"} />
+          <Icon color={value ? "success" : "error"} iconName={value ? "check" : "x"} />
         </View>
       </View>
     );