ferns-ui 0.44.2 → 0.45.0

package/src/DateUtilities.tsx

@@ -0,0 +1,296 @@
+import {DateTime} from "luxon";
+
+function getDate(date: string, {timezone}: {timezone?: string} = {}): DateTime {
+  if (!date) {
+    throw new Error("Passed undefined");
+  }
+  if (typeof (date as any) !== "string") {
+    throw new Error(`Invalid date type: ${typeof date}`);
+  }
+  const clonedDate = timezone ? DateTime.fromISO(date).setZone(timezone) : DateTime.fromISO(date);
+  if (!clonedDate.isValid) {
+    throw new Error(`Invalid date: ${date}`);
+  }
+  return clonedDate;
+}
+
+export function isTomorrow(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days <= -1 && diff.days > -2;
+}
+
+export function isYesterday(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days <= 1 && diff.days > -1;
+}
+
+export function isToday(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days === 0;
+}
+
+export function isThisYear(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  return clonedDate.year === now.year;
+}
+
+export function isWithinWeek(date: string, {timezone}: {timezone?: string} = {}): boolean {
+  const clonedDate = getDate(date, {timezone});
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
+  return diff.days > -7 && diff.days < 7;
+}
+
+// Prints a human friendly date, e.g. "Tomorrow", "Yesterday", "Monday", "June 19", "December 25,
+// 2022".
+export function humanDate(
+  date: string,
+  {timezone, dontShowTime}: {timezone?: string; dontShowTime?: boolean} = {}
+): string {
+  let clonedDate;
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`humanDate: ${error.message}`);
+  }
+  if (isTomorrow(date, {timezone})) {
+    return "Tomorrow";
+  } else if (isToday(date, {timezone})) {
+    if (dontShowTime) {
+      return "Today";
+    } else {
+      return clonedDate.toFormat("h:mm a");
+    }
+  } else if (isYesterday(date, {timezone})) {
+    return "Yesterday";
+  } else if (isWithinWeek(date, {timezone})) {
+    // E.g. Monday
+    return clonedDate.toFormat("EEEE");
+  } else if (isThisYear(date, {timezone})) {
+    // E.g. June 19
+    return clonedDate.toFormat("MMM d");
+  } else {
+    // December 25, 2022
+    return clonedDate.toFormat("MMM d, iiii");
+  }
+}
+
+// Prints a human friendly date and time, e.g. "Tomorrow 9:00 AM", "Yesterday 9:00 AM", "Monday
+// 9:00 AM", "June 19 9:00 AM", "December 25, 2022 9:00 AM".
+export function humanDateAndTime(
+  date: string,
+  {timezone, showTimezone = true}: {timezone?: string; showTimezone?: boolean} = {}
+): string {
+  let clonedDate;
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`humanDateAndTime: ${error.message}`);
+  }
+  // This should maybe use printTime()
+  let time = clonedDate.toFormat("h:mm a");
+  if (showTimezone) {
+    time += ` ${clonedDate.offsetNameShort}`;
+  }
+  if (isTomorrow(date, {timezone})) {
+    return `Tomorrow ${time}`;
+  } else if (isToday(date, {timezone})) {
+    return time;
+  } else if (isYesterday(date, {timezone})) {
+    return `Yesterday ${time}`;
+  } else if (isWithinWeek(date, {timezone})) {
+    // E.g. Monday 9:00 AM
+    return `${clonedDate.toFormat("EEEE")} ${time}`;
+  } else if (isThisYear(date, {timezone})) {
+    // E.g. June 19
+    return `${clonedDate.toFormat("MMM d")} ${time}`;
+  } else {
+    // December 25, 2022
+    return `${clonedDate.toFormat("MMM d, iiii")} ${time}`;
+  }
+}
+
+// Print date in the format of M/D/YY, taking timezones into account.
+export const printDate = (
+  date?: string,
+  {
+    timezone,
+    showTimezone,
+    ignoreTime,
+    defaultValue,
+  }: {
+    timezone?: string;
+    showTimezone?: boolean;
+    // Ignore the time in the date, treat as a date in timezone.
+    // Will log a warning if the time is not set to midnight UTC.
+    ignoreTime?: boolean;
+    defaultValue?: string;
+  } = {}
+): string => {
+  if (!date) {
+    return defaultValue ?? "Invalid Date";
+  }
+  if (showTimezone) {
+    console.warn("showTimezone is not supported for printDate");
+  }
+
+  let clonedDate;
+  try {
+    clonedDate = getDate(date!, {timezone});
+  } catch (error: any) {
+    throw new Error(`printDate: ${error.message}`);
+  }
+
+  if (ignoreTime) {
+    if (!date) {
+      throw new Error("printDate: Passed undefined");
+    }
+    // Use only the date component, ignore the time.
+    const justDate = DateTime.fromISO(date);
+    // We force it into UTC so we can get the correct date.
+    return justDate.setZone("UTC").toFormat("M/d/yyyy");
+  }
+
+  return clonedDate.toLocaleString(DateTime.DATE_SHORT);
+};
+
+// For printing dates from date times, ignoring the time. These should end in T00:00:00.000Z.
+// For example, the dates returned by Field type="date".
+export const printOnlyDate = (
+  date?: string,
+  {
+    defaultValue,
+  }: {
+    defaultValue?: string;
+  } = {}
+): string => {
+  if (!date) {
+    return defaultValue ?? "Invalid Date";
+  }
+
+  if (!date?.endsWith("T00:00:00.000Z")) {
+    console.warn(
+      "printOnlyDate, but the time is not set to midnight UTC. " +
+        "This may cause unexpected behavior."
+    );
+  }
+  // Use only the date component, ignore the time.
+  const justDate = DateTime.fromISO(date, {zone: "UTC"});
+  // We force it into UTC so we can get the correct date.
+  return justDate.toFormat("M/d/yyyy");
+};
+
+// Print time in the format of HH:mm A, taking timezones into account.
+export function printTime(
+  date?: string,
+  {
+    timezone,
+    showTimezone,
+    defaultValue,
+  }: {
+    timezone: string;
+    showTimezone?: boolean;
+    defaultValue?: string;
+  } = {timezone: "America/New_York", defaultValue: "Invalid Date"}
+): string {
+  if (!date) {
+    return defaultValue ?? "Invalid Date";
+  }
+  let clonedDate;
+  if (!timezone) {
+    throw new Error("printTime: timezone is required");
+  }
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`printTime: ${error.message}`);
+  }
+  if (showTimezone) {
+    return clonedDate.toFormat("h:mm a ZZZZ");
+  } else {
+    return clonedDate.toLocaleString(DateTime.TIME_SIMPLE);
+  }
+}
+
+// Print date in the format of M/D/YY HH:mm A, taking timezones into account.
+export function printDateAndTime(
+  date?: string,
+  {
+    timezone,
+    showTimezone,
+    defaultValue,
+  }: {
+    timezone?: string;
+    showTimezone?: boolean;
+    defaultValue?: string;
+  } = {}
+): string {
+  if (!date) {
+    return defaultValue ?? "Invalid Datetime";
+  }
+  let clonedDate;
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`printDateAndTime: ${error.message}`);
+  }
+  let dateString = clonedDate.toLocaleString(DateTime.DATETIME_SHORT);
+  if (showTimezone) {
+    dateString += ` ${clonedDate.offsetNameShort}`;
+  }
+  return dateString;
+}
+
+// Prints a date range in the format of M/D/YY HH:mm A - M/D/YY HH:mm A EST, taking timezones into
+// account. If the dates are the same, it will print the date only once, e.g. M/D/YY HH:mm A - HH:mm
+// A EST.
+export function printDateRange(
+  start: string,
+  end: string,
+  {timezone, showTimezone = true}: {timezone: string; showTimezone?: boolean}
+): string {
+  const startDate = printDate(start, {timezone, showTimezone: false});
+  const endDate = printDate(end, {timezone, showTimezone: false});
+
+  const startTime = printTime(start, {timezone, showTimezone: false});
+  const endTime = printTime(end, {timezone, showTimezone});
+  if (startDate === endDate) {
+    return `${startDate} ${startTime} - ${endTime}`;
+  } else {
+    return `${startDate} ${startTime} - ${endDate} ${endTime}`;
+  }
+}
+
+// Print since nicely. If less than 2 months, print days, otherwise print months. If over 1 year,
+// print years.
+export function printSince(
+  date: string,
+  {timezone, showAgo = true}: {timezone?: string; showAgo?: boolean} = {}
+): string {
+  let clonedDate;
+  const ago = showAgo ? " ago" : "";
+  try {
+    clonedDate = getDate(date, {timezone});
+  } catch (error: any) {
+    throw new Error(`printSince: ${error.message}`);
+  }
+  const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
+  const diff = now.diff(clonedDate, "months");
+  if (diff.months < 2) {
+    const days = Math.floor(now.diff(clonedDate, "days").days);
+    return `${days} ${days === 1 ? "day" : "days"}${ago}`;
+  } else if (diff.months < 12) {
+    const months = Math.floor(diff.months);
+    return `${months} ${months === 1 ? "month" : "months"}${ago}`;
+  } else {
+    const years = Math.floor(now.diff(clonedDate, "years").years);
+    return `${years} ${years === 1 ? "year" : "years"}${ago}`;
+  }
+}

package/src/Field.tsx

@@ -37,6 +37,7 @@ export const Field = ({
   googleMapsApiKey,
   googlePlacesMobileStyles,
   testID,
+  transformValue,
 }: FieldProps) => {
   const handleAddressChange = (field: string, newValue: string) => {
     onChange({...value, [field]: newValue});
@@ -152,6 +153,7 @@ export const Field = ({
           id={name}
           placeholder={placeholder}
           testID={testID}
+          transformValue={transformValue}
           type={type as "date" | "time" | "datetime"}
           value={value}
           onBlur={(result) => {

package/src/TextField.tsx

@@ -1,3 +1,4 @@
+import {getCalendars} from "expo-localization";
 import {AsYouType} from "libphonenumber-js";
 import React, {ReactElement, useCallback, useContext, useMemo, useState} from "react";
 import {
@@ -12,7 +13,7 @@ import {
 import {Box} from "./Box";
 import {TextFieldProps} from "./Common";
 import {DateTimeActionSheet} from "./DateTimeActionSheet";
-import dayjs from "./dayjsExtended";
+import {printDate, printDateAndTime, printTime} from "./DateUtilities";
 import {DecimalRangeActionSheet} from "./DecimalRangeActionSheet";
 import {HeightActionSheet} from "./HeightActionSheet";
 import {Icon} from "./Icon";
@@ -86,6 +87,7 @@ export const TextField = ({
   onEnter,
   onSubmitEditing,
   testID,
+  transformValue,
 }: TextFieldProps): ReactElement => {
   const {theme} = useContext(ThemeContext);
 
@@ -94,6 +96,12 @@ export const TextField = ({
   const decimalRangeActionSheetRef: React.RefObject<any> = React.createRef();
   const weightActionSheetRef: React.RefObject<any> = React.createRef();
 
+  const calendar = getCalendars()[0];
+  const localTimeZone = calendar?.timeZone;
+  if (!localTimeZone) {
+    console.warn("Could not automatically determine timezone.");
+  }
+
   const [focused, setFocused] = useState(false);
   const [height, setHeight] = useState(propsHeight || 40);
   const [showDate, setShowDate] = useState(false);
@@ -194,24 +202,15 @@ export const TextField = ({
   }, [decimalRangeActionSheetRef, disabled, numberRangeActionSheetRef, type, weightActionSheetRef]);
 
   let displayValue = value;
-  if (displayValue) {
+  if (value) {
+    const timezone = transformValue?.options?.timezone || localTimeZone;
+
     if (type === "date") {
-      // We get off by one errors because UTC midnight might be yesterday. So we add the timezone
-      // offset.
-      if (
-        dayjs.utc(value).hour() === 0 &&
-        dayjs.utc(value).minute() === 0 &&
-        dayjs.utc(value).second() === 0
-      ) {
-        const timezoneOffset = new Date().getTimezoneOffset();
-        displayValue = dayjs.utc(value).add(timezoneOffset, "minutes").format("MM/DD/YYYY");
-      } else {
-        displayValue = dayjs(value).format("MM/DD/YYYY");
-      }
+      displayValue = printDate(value, {ignoreTime: true});
     } else if (type === "time") {
-      displayValue = dayjs(value).format("h:mm A");
+      displayValue = printTime(value, {timezone, showTimezone: true});
     } else if (type === "datetime") {
-      displayValue = dayjs(value).format("MM/DD/YYYY h:mm A");
+      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") {
@@ -222,8 +221,8 @@ export const 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(displayValue);
-      if (displayValue !== formattedPhoneNumber && displayValue.length !== 4) {
+      const formattedPhoneNumber = new AsYouType("US").input(value);
+      if (displayValue !== formattedPhoneNumber && value.length !== 4) {
         displayValue = formattedPhoneNumber;
       }
     }
@@ -308,21 +307,24 @@ export const TextField = ({
                 // }
               }}
               onChangeText={(text) => {
-                if (onChange) {
-                  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 (!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) => {
@@ -352,6 +354,7 @@ export const TextField = ({
         <DateTimeActionSheet
           actionSheetRef={dateActionSheetRef}
           mode={type}
+          transformValue={transformValue}
           value={value}
           visible={showDate}
           onChange={(result) => {

package/src/TextFieldNumberActionSheet.tsx

@@ -5,7 +5,6 @@ import {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import {Button} from "./Button";
 import {NumberPickerActionSheetProps, TextFieldPickerActionSheetProps} from "./Common";
-import dayjs from "./dayjsExtended";
 
 interface NumberPickerActionSheetState {}
 
@@ -39,7 +38,7 @@ export class NumberPickerActionSheet extends React.Component<
             is24Hour
             mode={this.props.mode}
             testID="dateTimePicker"
-            value={dayjs(this.props.value).toDate()}
+            value={this.props.value ? new Date(this.props.value) : new Date()}
             onChange={(event: any, date?: Date) => {
               if (!date) {
                 return;

package/src/TimezonePicker.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {TimezonePickerProps} from "./Common";
+import {SelectList} from "./SelectList";
+import {WithLabel} from "./WithLabel";
+
+// 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"},
+];
+
+export const TimezonePicker = ({
+  timezone,
+  onChange,
+  showLabel,
+  width = 100,
+}: TimezonePickerProps): React.ReactElement => {
+  if (showLabel) {
+    return (
+      <Box maxWidth={width}>
+        <WithLabel label="Timezone">
+          <SelectList
+            allowClear
+            options={options}
+            style={{minHeight: 40}}
+            value={timezone}
+            onChange={onChange}
+          />
+        </WithLabel>
+      </Box>
+    );
+  } else {
+    return (
+      <Box maxWidth={width}>
+        <SelectList
+          allowClear
+          options={options}
+          style={{minHeight: 40}}
+          value={timezone}
+          onChange={onChange}
+        />
+      </Box>
+    );
+  }
+};

package/src/index.tsx

@@ -12,6 +12,7 @@ export * from "./Common";
 export * from "./Constants";
 export * from "./DateTimeActionSheet";
 export * from "./DateTimeField";
+export * from "./DateUtilities";
 export * from "./DecimalRangeActionSheet";
 export * from "./ErrorBoundary";
 export * from "./ErrorPage";

package/src/setupTests.ts

@@ -0,0 +1 @@
+process.env.TZ = "America/New_York";

package/dist/dayjsExtended.d.ts

@@ -1,2 +0,0 @@
-import dayjs from "dayjs";
-export default dayjs;

package/dist/dayjsExtended.js

@@ -1,10 +0,0 @@
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import timezone from "dayjs/plugin/timezone";
-import utc from "dayjs/plugin/utc";
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(relativeTime);
-// eslint-disable-next-line import/no-default-export
-export default dayjs;
-//# sourceMappingURL=dayjsExtended.js.map

package/dist/dayjsExtended.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dayjsExtended.js","sourceRoot":"","sources":["../src/dayjsExtended.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AAEnC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAClB,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AAE3B,oDAAoD;AACpD,eAAe,KAAK,CAAC"}

package/src/dayjsExtended.ts

@@ -1,11 +0,0 @@
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import timezone from "dayjs/plugin/timezone";
-import utc from "dayjs/plugin/utc";
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(relativeTime);
-
-// eslint-disable-next-line import/no-default-export
-export default dayjs;