ferns-ui 0.36.1 → 0.36.3

package/src/Constants.ts

@@ -1,53 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,409 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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>
-  );
-};