ferns-ui 0.36.4 → 0.36.5

package/src/Constants.ts

@@ -0,0 +1,53 @@
+export const USSTATESLIST = [
+  {label: "AL", value: "Alabama"},
+  {label: "AK", value: "Alaska"},
+  {label: "AZ", value: "Arizona"},
+  {label: "AR", value: "Arkansas"},
+  {label: "CA", value: "California"},
+  {label: "CO", value: "Colorado"},
+  {label: "CT", value: "Connecticut"},
+  {label: "DE", value: "Delaware"},
+  {label: "DC", value: "District Of Columbia"},
+  {label: "FL", value: "Florida"},
+  {label: "GA", value: "Georgia"},
+  {label: "HI", value: "Hawaii"},
+  {label: "ID", value: "Idaho"},
+  {label: "IL", value: "Illinois"},
+  {label: "IN", value: "Indiana"},
+  {label: "IA", value: "Iowa"},
+  {label: "KS", value: "Kansas"},
+  {label: "KY", value: "Kentucky"},
+  {label: "LA", value: "Louisiana"},
+  {label: "ME", value: "Maine"},
+  {label: "MD", value: "Maryland"},
+  {label: "MA", value: "Massachusetts"},
+  {label: "MI", value: "Michigan"},
+  {label: "MN", value: "Minnesota"},
+  {label: "MS", value: "Mississippi"},
+  {label: "MO", value: "Missouri"},
+  {label: "MT", value: "Montana"},
+  {label: "NE", value: "Nebraska"},
+  {label: "NV", value: "Nevada"},
+  {label: "NH", value: "New Hampshire"},
+  {label: "NJ", value: "New Jersey"},
+  {label: "NM", value: "New Mexico"},
+  {label: "NY", value: "New York"},
+  {label: "NC", value: "North Carolina"},
+  {label: "ND", value: "North Dakota"},
+  {label: "OH", value: "Ohio"},
+  {label: "OK", value: "Oklahoma"},
+  {label: "OR", value: "Oregon"},
+  {label: "PA", value: "Pennsylvania"},
+  {label: "RI", value: "Rhode Island"},
+  {label: "SC", value: "South Carolina"},
+  {label: "SD", value: "South Dakota"},
+  {label: "TN", value: "Tennessee"},
+  {label: "TX", value: "Texas"},
+  {label: "UT", value: "Utah"},
+  {label: "VT", value: "Vermont"},
+  {label: "VA", value: "Virginia"},
+  {label: "WA", value: "Washington"},
+  {label: "WV", value: "West Virginia"},
+  {label: "WI", value: "Wisconsin"},
+  {label: "WY", value: "Wyoming"},
+];

package/src/CustomSelect.tsx

@@ -0,0 +1,85 @@
+import React, {ReactElement, useEffect, useMemo, useState} from "react";
+
+import {Box} from "./Box";
+import {SelectList} from "./SelectList";
+import {TextField} from "./TextField";
+
+export interface CustomSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{label: string; value: string}>;
+  placeholder?: string;
+  disabled?: boolean;
+  label?: string;
+  labelColor?: string;
+}
+
+export const CustomSelect = ({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  options,
+}: CustomSelectProps): ReactElement | null => {
+  const [customValue, setCustomValue] = useState(value);
+  const [showCustomInput, setShowCustomInput] = useState(false);
+
+  // Boolean that checks if customValue is a value from the
+  // options prop or if it is a true custom value
+  const isValueCustom: boolean = useMemo((): boolean => {
+    // We add an empty value to protect against an empty string custom value or if the placeholder value is selected
+    return ![...options, {value: ""}].map((i) => i.value).includes(customValue);
+  }, [options, customValue]);
+
+  useEffect(() => {
+    setShowCustomInput(isValueCustom);
+    if (!showCustomInput) {
+      setCustomValue(value);
+    }
+  }, [showCustomInput, value, isValueCustom]);
+
+  // Custom select has 3 values - the overall field value, the value of the select menu, and the value of the custom input
+  const handleCustomSelectListChange = (newValue: string) => {
+    // If "custom" is selected from the dropdown, toggle the custom input open and clear the previous value
+    if (newValue === "custom") {
+      setShowCustomInput(true);
+      setCustomValue(isValueCustom ? "custom" : newValue);
+      onChange("");
+    }
+
+    // If any non-custom value is selected
+    else {
+      // Close the custom input if open and clear the value
+      if (showCustomInput) {
+        setShowCustomInput(false);
+      }
+
+      // Update the field value and select value
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <>
+      <SelectList
+        id="providedOptions"
+        options={[...options, {label: "Custom", value: "custom"}]}
+        placeholder={placeholder}
+        value={isValueCustom ? "custom" : customValue}
+        onChange={handleCustomSelectListChange}
+      />
+      {Boolean(showCustomInput) && (
+        <Box paddingY={2}>
+          <TextField
+            disabled={disabled}
+            id="customOptions"
+            placeholder={placeholder}
+            type="text"
+            value={value}
+            onChange={(result) => onChange(result.value)}
+          />
+        </Box>
+      )}
+    </>
+  );
+};

package/src/DateTimeActionSheet.tsx

@@ -0,0 +1,409 @@
+import {Picker} from "@react-native-picker/picker";
+import range from "lodash/range";
+import React, {useEffect, useState} from "react";
+import {Platform, StyleProp, TextInput, TextStyle, View} from "react-native";
+import {Calendar} from "react-native-calendars";
+
+import {Box} from "./Box";
+import {OnChangeCallback} from "./Common";
+import dayjs from "./dayjsExtended";
+import {Heading} from "./Heading";
+import {IconButton} from "./IconButton";
+import {isMobileDevice} from "./MediaQuery";
+import {Modal} from "./Modal";
+import {SelectList} from "./SelectList";
+import {Unifier} from "./Unifier";
+
+const TIME_PICKER_HEIGHT = 104;
+const INPUT_HEIGHT = 40;
+
+const hours = range(1, 13).map((n) => String(n));
+// TODO: support limited picker minutes, e.g. 5 or 15 minute increments.
+const minutes = range(0, 60).map((n) => String(n).padStart(2, "0"));
+const minutesOptions = [...minutes, "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+function TimeInput({
+  type,
+  value,
+  onChange,
+}: {
+  type: "hour" | "minute";
+  value: number;
+  onChange: (value: number) => void;
+}): React.ReactElement {
+  const defaultText = type === "minute" ? String(value).padStart(2, "0") : String(value);
+  const [text, setText] = useState(defaultText);
+  const [focused, setFocused] = useState(false);
+  let error = false;
+  if (type === "hour") {
+    error = !hours.includes(String(Number(text)));
+  } else if (type === "minute") {
+    error = !minutesOptions.includes(String(Number(text)));
+  }
+
+  // Broken out because types don't think "outline" is a valid style.
+  const textInputStyle: StyleProp<TextStyle> = {
+    flex: 1,
+    paddingTop: 4,
+    paddingRight: 4,
+    paddingBottom: 4,
+    paddingLeft: 0,
+    height: INPUT_HEIGHT,
+    width: "100%",
+    color: Unifier.theme.darkGray,
+    fontFamily: Unifier.theme.primaryFont,
+  };
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        height: INPUT_HEIGHT,
+        width: "100%",
+        // Add padding so the border doesn't mess up layouts
+        paddingHorizontal: focused ? 10 : 14,
+        paddingVertical: focused ? 0 : 4,
+        borderColor: error ? Unifier.theme.red : Unifier.theme.blue,
+        borderWidth: focused ? 5 : 1,
+        borderRadius: 5,
+        backgroundColor: Unifier.theme.white,
+      }}
+    >
+      <TextInput
+        keyboardType="number-pad"
+        returnKeyType="done"
+        style={
+          {
+            ...textInputStyle,
+            outline: Platform.select({web: "none"}),
+          } as any
+        }
+        textContentType="none"
+        underlineColorAndroid="transparent"
+        value={text}
+        onBlur={() => {
+          setFocused(false);
+        }}
+        onChangeText={(t) => {
+          setText(t);
+          onChange(Number(t));
+        }}
+        onFocus={() => {
+          setFocused(true);
+        }}
+      />
+    </View>
+  );
+}
+
+function CalendarHeader({
+  addMonth,
+  month,
+}: {
+  addMonth: (num: number) => void;
+  month: Date[];
+}): React.ReactElement {
+  const displayDate = dayjs(month[0]).format("MMM YYYY");
+  return (
+    <Box alignItems="center" direction="row" height={40} justifyContent="between" width="100%">
+      <IconButton
+        accessibilityLabel="arrow"
+        bgColor="white"
+        icon="angle-double-left"
+        iconColor="primary"
+        size="md"
+        onClick={() => {
+          addMonth(-12);
+        }}
+      />
+      <IconButton
+        accessibilityLabel="arrow"
+        bgColor="white"
+        icon="angle-left"
+        iconColor="primary"
+        size="md"
+        onClick={() => {
+          addMonth(-1);
+        }}
+      />
+      <Heading size="sm">{displayDate}</Heading>
+      <IconButton
+        accessibilityLabel="arrow"
+        bgColor="white"
+        icon="angle-right"
+        iconColor="primary"
+        size="md"
+        onClick={() => {
+          addMonth(1);
+        }}
+      />
+      <IconButton
+        accessibilityLabel="arrow"
+        bgColor="white"
+        icon="angle-double-right"
+        iconColor="primary"
+        size="md"
+        onClick={() => {
+          addMonth(12);
+        }}
+      />
+    </Box>
+  );
+}
+
+interface DateTimeActionSheetProps {
+  value?: string;
+  mode?: "date" | "time" | "datetime";
+  // Returns an ISO 8601 string. If mode is "time", the date portion is today.
+  onChange: OnChangeCallback;
+  actionSheetRef: React.RefObject<any>;
+  visible: boolean;
+  onDismiss: () => void;
+}
+
+// For mobile, renders all components in an action sheet.
+// For web, renders all components in a modal.
+// For mobile:
+//   If mode is "time", renders a spinner picker for time picker on both platforms.
+//   If mode is "date", renders our custom calendar on both platforms.
+//   If mode is "datetime", renders a spinner picker for time picker and our custom calendar on both platforms.
+// For web, renders a simplistic text box for time picker and a calendar for date picker in a modal
+//   In the future, web time picker should be a typeahead dropdown like Google calendar.
+export function DateTimeActionSheet({
+  // actionSheetRef,
+  mode,
+  value,
+  onChange,
+  visible,
+  onDismiss,
+}: DateTimeActionSheetProps) {
+  // Accept ISO 8601, HH:mm, or hh:mm A formats. We may want only HH:mm or hh:mm A for mode=time
+  let m;
+  if (value) {
+    m = dayjs(value, ["YYYY", "YYYY-MM-DD", "HH:mm", "hh:mm A"]);
+  } else {
+    m = dayjs();
+  }
+
+  if (!m.isValid()) {
+    throw new Error(`Invalid date/time value ${value}`);
+  }
+
+  let hr = dayjs(m).hour() % 12;
+  if (hr === 0) {
+    hr = 12;
+  }
+
+  const [hour, setHour] = useState<number>(hr);
+  const [minute, setMinute] = useState<number>(dayjs(m).minute());
+  const [amPm, setAmPm] = useState<"am" | "pm">(dayjs(m).format("a") === "am" ? "am" : "pm");
+  const [date, setDate] = useState<string>(dayjs(m).toISOString());
+
+  useEffect(() => {
+    let datetime;
+    if (value) {
+      datetime = dayjs(value, ["YYYY", "YYYY-MM-DD", "HH:mm", "hh:mm A"]);
+    } else {
+      datetime = dayjs();
+    }
+    let h = dayjs(datetime).hour() % 12;
+    if (h === 0) {
+      h = 12;
+    }
+    setHour(h);
+    setMinute(dayjs(datetime).minute());
+    setAmPm(dayjs(datetime).format("a") === "am" ? "am" : "pm");
+    setDate(dayjs(datetime).toISOString());
+  }, [value]);
+
+  // TODO Support 24 hour time for time picker.
+  const renderMobileTime = () => {
+    return (
+      <Box direction="row" width="100%">
+        <Box paddingY={2} width="35%">
+          <Picker
+            itemStyle={{
+              height: TIME_PICKER_HEIGHT,
+            }}
+            selectedValue={hour}
+            style={{
+              height: TIME_PICKER_HEIGHT,
+              backgroundColor: "#FFFFFF",
+            }}
+            onValueChange={(itemValue) => setHour(itemValue)}
+          >
+            {hours.map((n) => (
+              <Picker.Item key={String(n)} label={String(n)} value={String(n)} />
+            ))}
+          </Picker>
+        </Box>
+        <Box paddingY={2} width="35%">
+          <Picker
+            itemStyle={{
+              height: TIME_PICKER_HEIGHT,
+            }}
+            selectedValue={minute}
+            style={{
+              height: TIME_PICKER_HEIGHT,
+              backgroundColor: "#FFFFFF",
+            }}
+            onValueChange={(itemValue) => setMinute(itemValue)}
+          >
+            {minutes.map((n) => (
+              <Picker.Item key={String(n)} label={String(n)} value={String(n)} />
+            ))}
+          </Picker>
+        </Box>
+        <Box paddingY={2} width="30%">
+          <Picker
+            itemStyle={{
+              height: TIME_PICKER_HEIGHT,
+            }}
+            selectedValue={amPm}
+            style={{
+              height: TIME_PICKER_HEIGHT,
+              backgroundColor: "#FFFFFF",
+            }}
+            onValueChange={(itemValue) => setAmPm(itemValue)}
+          >
+            <Picker.Item key="am" label="am" value="am" />
+            <Picker.Item key="pm" label="pm" value="pm" />
+          </Picker>
+        </Box>
+      </Box>
+    );
+  };
+
+  // TODO: Support a typeahead dropdown for time picker, similar to Google Calendar on the web.
+  const renderWebTime = () => {
+    return (
+      <Box direction="row" justifyContent="center" width="100%">
+        <Box width={60}>
+          <TimeInput type="hour" value={hour} onChange={(v) => setHour(v)} />
+        </Box>
+        <Box
+          alignItems="center"
+          height={INPUT_HEIGHT}
+          justifyContent="center"
+          marginLeft={2}
+          marginRight={2}
+        >
+          <Heading size="md">:</Heading>
+        </Box>
+        <Box marginRight={2} width={60}>
+          <TimeInput type="minute" value={minute} onChange={(v) => setMinute(v)} />
+        </Box>
+
+        <Box width={60}>
+          <SelectList
+            options={[
+              {label: "am", value: "am"},
+              {label: "pm", value: "pm"},
+            ]}
+            style={{minHeight: INPUT_HEIGHT}}
+            value={amPm}
+            onChange={(result) => {
+              setAmPm(result as "am" | "pm");
+            }}
+          />
+        </Box>
+      </Box>
+    );
+  };
+
+  const renderDateTime = (): React.ReactElement => {
+    return (
+      <Box>
+        <Box marginBottom={2}>{renderDateCalendar()}</Box>
+        {isMobileDevice() ? renderMobileTime() : renderWebTime()}
+      </Box>
+    );
+  };
+
+  // Note: do not call this if waiting on a state change.
+  const sendOnChange = () => {
+    const hourChange = amPm === "pm" && hour !== 12 ? Number(hour) + 12 : Number(hour);
+    if (mode === "date") {
+      onChange({value: date});
+    } else if (mode === "time") {
+      onChange({
+        value: dayjs().hour(hourChange).minute(Number(minute)).toISOString(),
+      });
+    } else if (mode === "datetime") {
+      onChange({
+        value: dayjs(date).hour(hourChange).minute(Number(minute)).toISOString(),
+      });
+    }
+    onDismiss();
+  };
+
+  const sendClear = () => {
+    onChange({
+      value: "",
+    });
+    onDismiss();
+  };
+
+  // Renders our custom calendar component on mobile or web.
+  const renderDateCalendar = () => {
+    const markedDates: {[id: string]: {selected: boolean; selectedColor: string}} = {};
+    if (date) {
+      markedDates[dayjs(date).format("YYYY-MM-DD")] = {
+        selected: true,
+        selectedColor: Unifier.theme.primary,
+      };
+    }
+    return (
+      <Calendar
+        customHeader={CalendarHeader}
+        initialDate={dayjs(date).format("YYYY-MM-DD")}
+        markedDates={markedDates}
+        onDayPress={(day) => {
+          setDate(day.dateString);
+          // If mode is just date, we can shortcut and close right away. time and datetime need to wait for the
+          // primary button.
+          if (mode === "date") {
+            onChange({value: day.dateString});
+            onDismiss();
+          }
+        }}
+      />
+    );
+  };
+
+  const renderContent = (): React.ReactElement => {
+    if (isMobileDevice()) {
+      if (mode === "date") {
+        return renderDateCalendar();
+      } else if (mode === "time") {
+        return renderMobileTime();
+      } else {
+        return renderDateTime();
+      }
+    } else {
+      if (mode === "date") {
+        return renderDateCalendar();
+      } else if (mode === "time") {
+        return renderWebTime();
+      } else {
+        return renderDateTime();
+      }
+    }
+  };
+
+  return (
+    <Modal
+      primaryButtonOnClick={sendOnChange}
+      primaryButtonText="Save"
+      secondaryButtonOnClick={sendClear}
+      secondaryButtonText="Clear"
+      showClose
+      visible={visible}
+      onDismiss={onDismiss}
+    >
+      {renderContent()}
+    </Modal>
+  );
+}

package/src/DateTimeField.android.tsx

@@ -0,0 +1,101 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import React, {ReactElement, useMemo, useState} from "react";
+import {TextInput} from "react-native";
+
+import {DateTimeFieldProps} from "./Common";
+import dayjs from "./dayjsExtended";
+import {Unifier} from "./Unifier";
+import {WithLabel} from "./WithLabel";
+
+export const DateTimeField = ({
+  mode,
+  value,
+  onChange,
+  errorMessage,
+  pickerType = "default",
+  dateFormat,
+  errorMessageColor,
+}: DateTimeFieldProps): ReactElement => {
+  // const [showCalendar, setShowCalendar] = useState(false);
+  // const [showClock, setShowClock] = useState(false);
+  // const [tempDate, setTempDate] = useState<Date>();
+  const [pickerMode, setPickerMode] = useState(mode);
+  const [showPicker, setShowPicker] = useState(false);
+
+  const showCalendarFirst = mode === "datetime" || mode === "date";
+
+  const defaultFormat = useMemo(() => {
+    if (dateFormat) {
+      return dateFormat;
+    } else {
+      if (mode === "date") {
+        return "MMMM Do YYYY";
+      } else if (mode === "time") {
+        return "h:mm a";
+      } else {
+        return "MMMM Do YYYY, h:mm a";
+      }
+    }
+  }, [mode, dateFormat]);
+
+  const showMode = (currentMode: "date" | "time") => {
+    setShowPicker(true);
+    setPickerMode(currentMode);
+  };
+
+  const showDatePicker = () => {
+    showMode("date");
+  };
+
+  const showTimePicker = () => {
+    showMode("time");
+  };
+
+  return (
+    <WithLabel
+      label={errorMessage}
+      labelColor={errorMessageColor || "red"}
+      labelPlacement="after"
+      labelSize="sm"
+    >
+      <WithLabel>
+        <TextInput
+          inputMode="none"
+          style={{
+            flex: 1,
+            paddingTop: 10,
+            paddingRight: 10,
+            paddingBottom: 10,
+            paddingLeft: 10,
+            height: 40,
+            width: "100%",
+            color: Unifier.theme.darkGray,
+            fontFamily: Unifier.theme.primaryFont,
+            borderWidth: 1,
+          }}
+          value={dayjs(value).format(defaultFormat)}
+          onPressIn={() => {
+            showCalendarFirst ? showDatePicker() : showTimePicker();
+          }}
+        />
+        {showPicker && (
+          <DateTimePicker
+            display={pickerType}
+            mode={pickerMode}
+            testID="dateTimePicker"
+            value={value}
+            onChange={(event, date) => {
+              if (date) {
+                onChange(date);
+                if (pickerMode === "date" && mode === "datetime") {
+                  showTimePicker();
+                }
+              }
+              setShowPicker(false);
+            }}
+          />
+        )}
+      </WithLabel>
+    </WithLabel>
+  );
+};