ferns-ui 1.3.0 → 1.5.0

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/SegmentedControl.tsx

@@ -1,58 +1,124 @@
-import React from "react";
+import React, {useCallback, useState} from "react";
 import {Pressable, View} from "react-native";
 
+import {Badge} from "./Badge";
 import {SegmentedControlProps} from "./Common";
 import {Heading} from "./Heading";
+import {Icon} from "./Icon";
 import {useTheme} from "./Theme";
 
-export const SegmentedControl = ({
+export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   items,
   onChange = () => {},
   size = "md",
   selectedIndex,
-}: SegmentedControlProps) => {
+  maxItems,
+  badges = [],
+}) => {
   const height = size === "md" ? 36 : 44;
   const {theme} = useTheme();
+  const [startIndex, setStartIndex] = useState(0);
+
+  const handlePrevious = useCallback(() => {
+    setStartIndex((prev) => Math.max(0, prev - (maxItems ?? 4)));
+  }, []);
+
+  const handleNext = useCallback(() => {
+    setStartIndex((prev) => Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4)));
+  }, [items.length, maxItems]);
+
+  const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;
+  const visibleBadges = maxItems ? badges.slice(startIndex, startIndex + maxItems) : badges;
+  const canScrollLeft = startIndex > 0;
+  const canScrollRight = maxItems ? startIndex + maxItems < items.length : false;
+  const shouldShowScrollButtons = maxItems ? maxItems < items.length : false;
+
   return (
     <View
       style={{
         display: "flex",
-        flexGrow: 1,
         flexDirection: "row",
-        flexShrink: 1,
         alignItems: "center",
-        gap: 4,
-        height,
-        maxHeight: height,
-        borderRadius: theme.primitives.radius3xl,
-        borderColor: theme.primitives.neutral300,
-        borderWidth: 3,
-        backgroundColor: theme.primitives.neutral300,
+        gap: 8,
       }}
     >
-      {items.map((item, index) => (
-        <Pressable
-          key={index}
-          aria-role="button"
+      {Boolean(shouldShowScrollButtons) && (
+        <Pressable disabled={!canScrollLeft} onPress={handlePrevious}>
+          <Icon
+            color={canScrollLeft ? "linkLight" : "extraLight"}
+            iconName="chevron-left"
+            size="lg"
+          />
+        </Pressable>
+      )}
+      <View
+        style={{
+          display: "flex",
+          flexGrow: 1,
+          flexDirection: "row",
+          flexShrink: 1,
+          alignItems: "center",
+          height,
+          maxHeight: height,
+          backgroundColor: theme.primitives.neutral300,
+          overflow: "hidden",
+          borderRadius: theme.primitives.radius3xl,
+        }}
+      >
+        <View
           style={{
             display: "flex",
-            paddingHorizontal: size === "md" ? theme.spacing.sm : theme.spacing.md,
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100%",
-            flexBasis: 0,
-            gap: 12,
+            flexDirection: "row",
+            gap: 4,
             flexGrow: 1,
-            flexShrink: 0,
-            borderRadius: theme.primitives.radius3xl,
-            backgroundColor: index === selectedIndex ? theme.surface.base : undefined,
-            overflow: "hidden",
+            paddingHorizontal: 4,
+            height: height - 4,
           }}
-          onPress={() => onChange(index)}
         >
-          <Heading size="sm">{item}</Heading>
+          {visibleItems.map((item, index) => {
+            const actualIndex = startIndex + index;
+            return (
+              <Pressable
+                key={actualIndex}
+                aria-role="button"
+                style={{
+                  display: "flex",
+                  paddingHorizontal: 2,
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%",
+                  flexDirection: "row",
+                  gap: 8,
+                  flexGrow: 1,
+                  flexBasis: 0,
+                  borderRadius: theme.primitives.radius3xl,
+                  backgroundColor: actualIndex === selectedIndex ? theme.surface.base : undefined,
+                  overflow: "hidden",
+                }}
+                onPress={() => onChange(actualIndex)}
+              >
+                <Heading size="sm">{item}</Heading>
+                {visibleBadges[index] && (
+                  <Badge
+                    status={visibleBadges[index].status ?? "info"}
+                    value={visibleBadges[index].count}
+                    variant="numberOnly"
+                  />
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+      {Boolean(shouldShowScrollButtons) && (
+        <Pressable disabled={!canScrollRight} onPress={handleNext}>
+          <Icon
+            color={canScrollRight ? "linkLight" : "extraLight"}
+            iconName="chevron-right"
+            size="lg"
+          />
         </Pressable>
-      ))}
+      )}
     </View>
   );
 };

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}
+    />
+  );
 };