ferns-ui 0.25.3 → 0.26.1

package/src/CheckBox.tsx

@@ -1,27 +1,54 @@
-// import {library} from "@fortawesome/fontawesome-svg-core";
-// import {faCheck} from "@fortawesome/free-solid-svg-icons";
 import React from "react";
 
 import {Box} from "./Box";
-import {CheckBoxProps} from "./Common";
+import {BoxColor, CheckBoxProps} from "./Common";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 
-// library.add(faCheck);
+export function CheckBox({
+  color,
+  checked,
+  size,
+  radio,
+  label,
+  labelColor,
+  subLabel,
+  disabled,
+  onChange,
+  onClick,
+  indeterminate,
+}: CheckBoxProps): React.ReactElement {
+  if (checked && indeterminate) {
+    console.error("CheckBox cannot be checked and indeterminate at the same time");
+  }
+
+  const doOnClick = () => {
+    if (disabled) {
+      return;
+    }
+    if (!indeterminate) {
+      onChange({value: !checked});
+    }
+    onClick && onClick();
+  };
 
-export class CheckBox extends React.Component<CheckBoxProps, {}> {
-  renderCheckBox() {
+  const renderCheckBox = () => {
+    let bgColor: BoxColor;
+    if (disabled) {
+      bgColor = "gray";
+    } else if (checked) {
+      bgColor = color || "darkGray";
+    } else {
+      bgColor = "white";
+    }
     return (
       <Box
-        border={this.props.color || "darkGray"}
-        color={this.props.checked ? this.props.color || "darkGray" : "white"}
-        height={this.props.size === "sm" ? 16 : 24}
-        rounding={this.props.radio ? "circle" : 3}
-        width={this.props.size === "sm" ? 16 : 24}
-        onClick={() => {
-          this.props.onChange({value: !this.props.checked});
-          this.props.onClick && this.props.onClick();
-        }}
+        border={color || "darkGray"}
+        color={bgColor}
+        height={size === "sm" ? 16 : 24}
+        rounding={radio ? "circle" : size === "sm" ? 2 : 3}
+        width={size === "sm" ? 16 : 24}
+        onClick={doOnClick}
       >
         <Box
           alignItems="center"
@@ -31,63 +58,61 @@ export class CheckBox extends React.Component<CheckBoxProps, {}> {
           justifyContent="center"
           width="100%"
         >
-          {this.props.checked && (
+          {checked && (
+            <Icon color="white" name="check" prefix="fas" size={size === "sm" ? "sm" : "md"} />
+          )}
+          {indeterminate && (
             <Icon
-              color="white"
-              name="check"
+              color={color || "darkGray"}
+              name="circle"
               prefix="fas"
-              size={this.props.size === "sm" ? "sm" : "md"}
+              size={size === "sm" ? "sm" : "md"}
             />
           )}
         </Box>
       </Box>
     );
-  }
+  };
 
-  render() {
-    return (
+  return (
+    <Box
+      alignItems="center"
+      direction="row"
+      display="flex"
+      maxHeight={60}
+      paddingY={1}
+      width="100%"
+    >
       <Box
-        alignItems="center"
-        direction="row"
         display="flex"
-        maxHeight={60}
-        paddingY={1}
-        width="100%"
+        justifyContent="center"
+        maxWidth={size === "sm" ? 14 : 20}
+        width={size === "sm" ? 14 : 20}
       >
-        <Box
-          display="flex"
-          justifyContent="center"
-          maxWidth={this.props.size === "sm" ? 14 : 20}
-          width={this.props.size === "sm" ? 14 : 20}
-        >
-          {this.renderCheckBox()}
-        </Box>
-        <Box
-          direction="column"
-          display="flex"
-          height="100%"
-          justifyContent="center"
-          marginLeft={4}
-          onClick={() => {
-            this.props.onChange({value: !this.props.checked});
-            this.props.onClick && this.props.onClick();
-          }}
+        {renderCheckBox()}
+      </Box>
+      <Box
+        direction="column"
+        display="flex"
+        height="100%"
+        justifyContent="center"
+        marginLeft={4}
+        onClick={doOnClick}
+      >
+        <Text
+          color={labelColor || "darkGray"}
+          numberOfLines={subLabel ? 1 : 2}
+          size={size}
+          weight="bold"
         >
-          <Text
-            color={this.props.labelColor || "darkGray"}
-            numberOfLines={this.props.subLabel ? 1 : 2}
-            size={this.props.size}
-            weight="bold"
-          >
-            {this.props.label}
+          {label}
+        </Text>
+        {Boolean(subLabel) && (
+          <Text color={labelColor || "darkGray"} size="sm" weight="bold">
+            {subLabel!}
           </Text>
-          {Boolean(this.props.subLabel) && (
-            <Text color={this.props.labelColor || "darkGray"} size="sm" weight="bold">
-              {this.props.subLabel}
-            </Text>
-          )}
-        </Box>
+        )}
       </Box>
-    );
-  }
+    </Box>
+  );
 }

package/src/Common.ts

@@ -1,4 +1,5 @@
-import {SyntheticEvent} from "react";
+import {ReactElement, ReactNode, SyntheticEvent} from "react";
+import {ListRenderItemInfo} from "react-native";
 
 export interface BaseProfile {
   email: string;
@@ -1832,16 +1833,16 @@ export interface BlurBoxProps extends BoxProps {
 }
 
 export interface LayerProps {
-  children: React.ReactNode;
+  children: ReactChildren;
 }
 
 export interface ModalProps {
   header?: React.ReactNode;
   accessibilityModalLabel: string;
-  children?: React.ReactNode;
+  children?: ReactChildren;
   closeOnOutsideClick?: boolean;
-  footer?: React.ReactNode;
-  heading?: string | React.ReactNode;
+  footer?: ReactChild;
+  heading?: string | ReactChild;
   onDismiss: () => void;
   role?: "alertdialog" | "dialog";
   size?: "sm" | "md" | "lg" | number;
@@ -1852,7 +1853,7 @@ export interface BoxProps {
   alignItems?: AlignItems;
   alignSelf?: AlignSelf;
   bottom?: boolean;
-  children?: React.ReactNode;
+  children?: ReactChildren;
   color?: BoxColor;
   column?: UnsignedUpTo12;
   smColumn?: UnsignedUpTo12;
@@ -2019,13 +2020,16 @@ export interface FieldWithLabelsProps {
   labelColor?: AllColors;
   helperText?: string;
   helperTextColor?: AllColors;
-  children?: React.ReactNode;
+  children?: ReactChildren;
 }
 
 export interface DateTimeFieldProps extends FieldWithLabelsProps {
+  label?: string;
   mode: "date" | "time" | "datetime";
   value: Date;
   onChange: (date: Date) => void;
+  dateFormat?: string;
+  pickerType?: "default" | "compact" | "inline" | "spinner";
 }
 
 export interface TextFieldProps extends FieldWithLabelsProps {
@@ -2091,7 +2095,7 @@ export interface SpinnerProps {
 }
 
 export interface MaskProps {
-  children?: React.ReactElement;
+  children?: ReactChildren;
   shape?: "circle" | "rounded" | "square";
   height?: number | string;
   width?: number | string;
@@ -2111,7 +2115,7 @@ export interface IconRowProps {
 export interface LinkProps {
   href: string;
   inline?: boolean;
-  children?: React.ReactNode;
+  children?: ReactChild;
   onClick?: () => void;
   target?: null | "blank";
 }
@@ -2144,7 +2148,7 @@ export interface ImageProps {
   maxWidth?: number;
   maxHeight?: number;
   src: string;
-  children?: React.ReactNode;
+  children?: ReactChildren;
   fit?: "cover" | "contain" | "none";
   onError?: () => void;
   onLoad?: () => void;
@@ -2624,6 +2628,35 @@ export interface PickerProps {
   prompt?: string;
 }
 
+export interface SplitPageProps {
+  /**
+   * can accept either one React Child or any array of ReactChild. If this is not provided,
+   * renderContent must return one or many ReactChild.
+   */
+  children?: ReactChild | ReactChild[] | null;
+  /**
+   * The names of the tabs that will be generated per ReactChild provided. Tabs will not be generated if renderContent is provided in place of children
+   */
+  tabs?: string[];
+  // The select limit for the number of tabs that can be selected
+  selectLimit?: number;
+  // Provide in mobile if you have a bottomTabBar so that split page can adjust accordingly
+  bottomNavBarHeight?: number;
+  // boolean to initiate and handle state from the app that has imported ferns-ui
+  showItemList?: boolean;
+  loading?: boolean;
+  color?: Color;
+  keyboardOffset?: number;
+  renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => ReactElement | null;
+  renderListViewHeader?: () => ReactElement | null;
+  renderContent?: (index?: number) => ReactElement | ReactElement[] | null;
+  listViewData: any[];
+  listViewExtraData?: any;
+  listViewWidth?: number;
+  renderChild?: () => ReactChild;
+  onSelectionChange?: (value?: any) => void | Promise<void>;
+}
+
 export type LogLevel = "fatal" | "error" | "warning" | "info" | "debug" | "critical";
 export type PermissionKind =
   | "location"
@@ -2698,3 +2731,9 @@ export interface AddressInterface {
   state: string;
   zipcode: string;
 }
+
+// TODO: Tighten up type to exclude string, which is almost never an acceptable type for React Native children
+//  (except Heading or Text for example.).
+export type ReactChild = ReactNode;
+export type ReactChildren = ReactNode;
+export type WithChildren<P> = P & {children?: ReactNode};

package/src/DateTimeField.android.tsx

@@ -1,9 +1,10 @@
 import DateTimePicker from "@react-native-community/datetimepicker";
 import moment from "moment-timezone";
-import React, {ReactElement} from "react";
+import React, {ReactElement, useMemo, useState} from "react";
+import {TextInput} from "react-native";
 
-import {Box} from "./Box";
 import {DateTimeFieldProps} from "./Common";
+import {Unifier} from "./Unifier";
 import {WithLabel} from "./WithLabel";
 
 export const DateTimeField = ({
@@ -11,8 +12,45 @@ export const DateTimeField = ({
   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}
@@ -21,35 +59,42 @@ export const DateTimeField = ({
       labelSize="sm"
     >
       <WithLabel>
-        <Box maxWidth={300}>
+        <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={moment(value).format(defaultFormat)}
+          onPressIn={() => {
+            showCalendarFirst ? showDatePicker() : showTimePicker();
+          }}
+        />
+        {showPicker && (
           <DateTimePicker
-            display="spinner"
-            mode={mode === "datetime" ? "date" : mode}
+            display={pickerType}
+            mode={pickerMode}
             testID="dateTimePicker"
-            value={moment(value).toDate()}
-            onChange={(event: any, date: any) => {
-              if (!date) {
-                return;
+            value={value}
+            onChange={(event, date) => {
+              if (date) {
+                onChange(date);
+                if (pickerMode === "date" && mode === "datetime") {
+                  showTimePicker();
+                }
               }
-              onChange(value);
+              setShowPicker(false);
             }}
           />
-          {mode === "datetime" && (
-            <DateTimePicker
-              display="spinner"
-              mode="time"
-              testID="dateTimePicker"
-              value={moment(value).toDate()}
-              onChange={(event: any, date: any) => {
-                // fix to append to date object
-                if (!date) {
-                  return;
-                }
-                onChange(value);
-              }}
-            />
-          )}
-        </Box>
+        )}
       </WithLabel>
     </WithLabel>
   );

package/src/DateTimeField.ios.tsx

@@ -1,9 +1,10 @@
 import DateTimePicker from "@react-native-community/datetimepicker";
 import moment from "moment-timezone";
-import React, {ReactElement} from "react";
+import React, {ReactElement, useMemo, useState} from "react";
+import {TextInput} from "react-native";
 
-import {Box} from "./Box";
 import {DateTimeFieldProps} from "./Common";
+import {Unifier} from "./Unifier";
 import {WithLabel} from "./WithLabel";
 
 export const DateTimeField = ({
@@ -12,29 +13,70 @@ export const DateTimeField = ({
   onChange,
   errorMessage,
   errorMessageColor,
+  dateFormat,
+  pickerType = "inline",
+  label,
 }: DateTimeFieldProps): ReactElement => {
+  const [showPicker, setShowPicker] = useState(false);
+
+  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]);
+
   return (
-    <WithLabel
-      label={errorMessage}
-      labelColor={errorMessageColor || "red"}
-      labelPlacement="after"
-      labelSize="sm"
-    >
-      <WithLabel>
-        <Box maxWidth={300}>
+    <WithLabel label={label} labelSize="lg">
+      <WithLabel
+        label={errorMessage}
+        labelColor={errorMessageColor || "red"}
+        labelPlacement="after"
+        labelSize="sm"
+      >
+        <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={moment(value).format(defaultFormat)}
+          onPressIn={() => {
+            setShowPicker(!showPicker);
+          }}
+        />
+
+        {showPicker && (
           <DateTimePicker
-            display="spinner"
+            accentColor={Unifier.theme.primary}
+            display={pickerType}
             mode={mode}
+            style={{alignSelf: "flex-start"}}
             testID="dateTimePicker"
             value={moment(value).toDate()}
             onChange={(event: any, date: any) => {
               if (!date) {
                 return;
               }
-              onChange(value);
+              onChange(date);
             }}
           />
-        </Box>
+        )}
       </WithLabel>
     </WithLabel>
   );

package/src/DateTimeField.tsx

@@ -4,7 +4,7 @@ import DateTimePickerWeb from "react-datetime-picker";
 import TimePicker from "react-time-picker";
 
 import {Box} from "./Box";
-import {DateTimeFieldProps} from "./Common";
+import {DateTimeFieldProps, WithChildren} from "./Common";
 import {WithLabel} from "./WithLabel";
 
 export const DateTimeField = ({
@@ -13,7 +13,7 @@ export const DateTimeField = ({
   onChange,
   errorMessage,
   errorMessageColor,
-}: DateTimeFieldProps): ReactElement => {
+}: WithChildren<DateTimeFieldProps>): ReactElement => {
   return (
     <WithLabel
       label={errorMessage}

package/src/Field.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import {Box} from "./Box";
 import {CheckBox} from "./CheckBox";
-import {AddressInterface, FieldWithLabelsProps, TextFieldType} from "./Common";
+import {AddressInterface, FieldWithLabelsProps, ReactChildren, TextFieldType} from "./Common";
 import {USSTATESLIST} from "./Constants";
 import {CustomSelect} from "./CustomSelect";
 import {FieldWithLabels} from "./FieldWithLabels";
@@ -66,11 +66,11 @@ export const Field = ({
     onChange(switchValue);
   };
 
-  const renderField = () => {
+  const renderField = (): ReactChildren => {
     if (type === "select") {
       if (!options) {
         console.error("Field with type=select require options");
-        return null;
+        return undefined;
       }
       return (
         <SelectList
@@ -85,7 +85,7 @@ export const Field = ({
     } else if (type === "multiselect") {
       if (!options) {
         console.error("Field with type=multiselect require options");
-        return null;
+        return undefined;
       }
       return (
         <Box width="100%">

package/src/Mask.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import {View} from "react-native";
 
-import {MaskProps} from "./Common";
+import {MaskProps, ReactChildren} from "./Common";
 
-export function Mask(props: MaskProps): React.ReactElement | null {
+export function Mask(props: MaskProps): ReactChildren {
   if (props.shape === "rounded") {
     return <View style={{overflow: "hidden", borderRadius: 12}}>{props.children}</View>;
   } else if (props.shape === "circle") {

package/src/MediaQuery.ts

@@ -26,3 +26,17 @@ export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
   }
   return false;
 }
+
+export function mediaQuerySmallerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+  const media = mediaQuery();
+  if (size === "lg") {
+    return true;
+  } else if (size === "md") {
+    return ["xs", "sm", "md"].includes(media);
+  } else if (size === "sm") {
+    return ["xs", "sm"].includes(media);
+  } else if (size === "xs") {
+    return ["xs"].includes(media);
+  }
+  return false;
+}

package/src/Page.tsx

@@ -97,7 +97,6 @@ export class Page extends React.Component<PageProps, {}> {
           padding={this.props.padding !== undefined ? this.props.padding : 2}
           scroll={this.props.scroll === undefined ? true : this.props.scroll}
           width="100%"
-          // color="ligh"
         >
           {this.renderHeader()}
           {this.props.loading === true && (

package/src/SegmentedControl.tsx

@@ -27,7 +27,7 @@ export const SegmentedControl = ({
   }
 
   if (!multiselect && selectedItemIndexes?.length && selectedItemIndexes?.length > 1) {
-    console.warn("Muliple selections not allowed without multiselect flag");
+    console.warn("Multiple selections not allowed without multiselect flag");
     return null;
   }
 
@@ -49,7 +49,7 @@ export const SegmentedControl = ({
       display="flex"
       height={40}
       justifyContent="between"
-      padding={1}
+      // padding={1}
       rounding={3}
       width="100%"
     >
@@ -58,7 +58,7 @@ export const SegmentedControl = ({
           key={index}
           color={isTabActive(index)}
           height="100%"
-          paddingX={2}
+          // paddingX={2}
           rounding={3}
           width={`${100 / items.length}%`}
         >

package/src/SelectList.tsx

@@ -30,18 +30,25 @@ export function SelectList({
   labelColor,
   style,
   placeholder,
+  disabled,
 }: SelectListProps) {
   const withLabelProps = {label, labelColor};
 
+  let backgroundColor = style?.backgroundColor || Unifier.theme.white;
+  if (disabled) {
+    backgroundColor = Unifier.theme.lightGray;
+  }
+
   return (
     <WithLabel {...withLabelProps}>
       <RNPickerSelect
-        // Icon only needed for iOs, web and android use default icons
         Icon={() => {
+          // Icon only needed for iOS, web and android use default icons
           return Platform.OS === "ios" ? (
             <Icon color="darkGray" name="angle-down" size="md" />
           ) : null;
         }}
+        disabled={disabled}
         items={options}
         placeholder={placeholder ? {label: placeholder, value: ""} : {}}
         style={{
@@ -54,7 +61,7 @@ export function SelectList({
             borderColor: style?.borderColor || Unifier.theme.gray,
             borderWidth: style?.borderWidth || 1,
             borderRadius: style?.borderRadius || 5,
-            backgroundColor: style?.backgroundColor || Unifier.theme.white,
+            backgroundColor,
           },
           inputIOS: {
             paddingVertical: 12,