ferns-ui 0.26.0 → 0.26.1

package/src/SplitPage.tsx

@@ -1,8 +1,9 @@
-import React, {Children, ReactChild, ReactElement, useState} from "react";
-import {ListRenderItemInfo, ScrollView, View} from "react-native";
+import React, {Children, useCallback, useEffect, useState} from "react";
+import {Dimensions, ListRenderItemInfo, ScrollView, View} from "react-native";
+import {SwiperFlatList} from "react-native-swiper-flatlist";
 
 import {Box} from "./Box";
-import {Color, SPACING} from "./Common";
+import {SplitPageProps} from "./Common";
 import {FlatList} from "./FlatList";
 import {IconButton} from "./IconButton";
 import {mediaQueryLargerThan} from "./MediaQuery";
@@ -10,24 +11,6 @@ import {SegmentedControl} from "./SegmentedControl";
 import {Spinner} from "./Spinner";
 import {Unifier} from "./Unifier";
 
-interface SplitPageProps {
-  children?: ReactChild | ReactChild[] | null;
-  tabs?: string[];
-  // TODO: figure out navigation
-  navigation?: any;
-  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;
-  selectLimit?: number;
-}
-
 // A component for rendering a list on one side and a details view on the right for large screens,
 // and a scrollable list where clicking an item takes you the details view.
 export const SplitPage = ({
@@ -39,16 +22,41 @@ export const SplitPage = ({
   renderListViewItem,
   renderListViewHeader,
   renderContent,
+  onSelectionChange = () => {},
   listViewData,
   listViewExtraData,
   listViewWidth,
+  bottomNavBarHeight,
+  showItemList,
   selectLimit,
 }: SplitPageProps) => {
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
   const [activeTabs, setActiveTabs] = useState<number[]>(tabs.length > 2 ? [0, 1] : []);
+  const {width} = Dimensions.get("window");
+
+  const isMobileDevice = !mediaQueryLargerThan("sm");
 
   const elementArray = Children.toArray(children);
 
+  const onItemSelect = useCallback(
+    (item: ListRenderItemInfo<any>) => {
+      setSelectedId(item.index);
+      onSelectionChange(item);
+    },
+    [onSelectionChange]
+  );
+
+  const onItemDeselect = useCallback(() => {
+    setSelectedId(undefined);
+    onSelectionChange(undefined);
+  }, [onSelectionChange]);
+
+  useEffect(() => {
+    if (showItemList) {
+      onItemDeselect();
+    }
+  }, [showItemList, onItemDeselect]);
+
   if (!children && !renderContent) {
     console.warn("A child node is required");
     return null;
@@ -63,7 +71,7 @@ export const SplitPage = ({
     return (
       <Box
         onClick={() => {
-          setSelectedId(itemInfo.index);
+          onItemSelect(itemInfo);
         }}
       >
         {renderListViewItem(itemInfo)}
@@ -72,19 +80,14 @@ export const SplitPage = ({
   };
 
   const renderList = () => {
-    if (!mediaQueryLargerThan("sm") && selectedId) {
-      return null;
-    }
     return (
       <View
         style={{
-          width: mediaQueryLargerThan("sm") ? listViewWidth ?? 300 : "100%",
-          maxWidth: mediaQueryLargerThan("sm") ? listViewWidth ?? 300 : "100%",
+          width: listViewWidth ?? 300,
+          maxWidth: listViewWidth ?? 300,
           flexGrow: 1,
           flexShrink: 0,
           display: "flex",
-          paddingTop: "12px",
-          paddingBottom: "12px",
           flexDirection: "column",
         }}
       >
@@ -102,16 +105,6 @@ export const SplitPage = ({
   const renderListContent = () => {
     return (
       <Box flex="grow" padding={2}>
-        {!mediaQueryLargerThan("sm") && (
-          <Box width="100%">
-            <IconButton
-              accessibilityLabel="close"
-              icon="times"
-              iconColor="darkGray"
-              onClick={() => setSelectedId(undefined)}
-            />
-          </Box>
-        )}
         {renderContent && renderContent(selectedId)}
       </Box>
     );
@@ -128,7 +121,7 @@ export const SplitPage = ({
             alignItems: "center",
           }}
         >
-          <Box paddingX={4} paddingY={2} width="100%">
+          <Box marginBottom={4} paddingX={4} width="100%">
             <SegmentedControl
               items={tabs}
               multiselect
@@ -143,10 +136,10 @@ export const SplitPage = ({
             direction="row"
             flex="grow"
             height="100%"
-            paddingX={2}
+            paddingX={4}
             width={activeTabs.length > 1 ? "100%" : "60%"}
           >
-            {activeTabs.map((tabIndex) => {
+            {activeTabs.map((tabIndex, i) => {
               return (
                 <ScrollView
                   key={tabIndex}
@@ -156,8 +149,9 @@ export const SplitPage = ({
                   style={{
                     flex: 1,
                     width: "60%",
-                    padding: 3 * SPACING,
                     height: "100%",
+                    paddingRight: i ? 0 : 16,
+                    paddingLeft: i ? 16 : 0,
                   }}
                 >
                   {elementArray[tabIndex]}
@@ -180,7 +174,6 @@ export const SplitPage = ({
                 style={{
                   flex: 1,
                   width: "60%",
-                  padding: 3 * SPACING,
                   height: "100%",
                 }}
               >
@@ -193,21 +186,117 @@ export const SplitPage = ({
     }
   };
 
+  const renderMobileList = () => {
+    if (isMobileDevice && selectedId !== undefined) {
+      return null;
+    }
+
+    return (
+      <View
+        style={{
+          width: "100%",
+          maxWidth: "100%",
+          height: "100%",
+          flexGrow: 1,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {renderListViewHeader && renderListViewHeader()}
+        <FlatList
+          data={listViewData}
+          extraData={listViewExtraData}
+          keyExtractor={(item) => item.id}
+          nestedScrollEnabled
+          renderItem={renderItem}
+        />
+      </View>
+    );
+  };
+
+  const renderMobileListContent = () => {
+    if (isMobileDevice && selectedId === undefined) {
+      return null;
+    }
+
+    return (
+      <Box flex="grow" padding={2}>
+        {isMobileDevice && (
+          <Box width="100%">
+            <IconButton
+              accessibilityLabel="close"
+              icon="times"
+              iconColor="darkGray"
+              onClick={() => onItemDeselect()}
+            />
+          </Box>
+        )}
+        {renderContent && renderContent(selectedId)}
+      </Box>
+    );
+  };
+
+  const renderMobileChildrenContent = () => {
+    if (selectedId === undefined) {
+      return null;
+    }
+    return (
+      <SwiperFlatList
+        nestedScrollEnabled
+        paginationStyle={{justifyContent: "center", width: "95%"}}
+        renderAll
+        showPagination
+        style={{width: "100%"}}
+      >
+        {elementArray.map((element, i) => {
+          return (
+            <View
+              key={i}
+              style={{
+                width: width - 8,
+                padding: 4,
+                height: elementArray.length > 1 ? "90vh" : "100vh",
+                paddingBottom: bottomNavBarHeight,
+              }}
+            >
+              {element}
+            </View>
+          );
+        })}
+      </SwiperFlatList>
+    );
+  };
+
+  const renderSplitPage = () => {
+    return (
+      <>
+        {renderList()}
+        {renderContent ? renderListContent() : renderChildrenContent()}
+      </>
+    );
+  };
+
+  const renderMobileSplitPage = () => {
+    const renderMainContent = renderContent
+      ? renderMobileListContent()
+      : renderMobileChildrenContent();
+    return selectedId === undefined ? renderMobileList() : renderMainContent;
+  };
+
   return (
     <Box
       avoidKeyboard
       color={color || "lightGray"}
       direction="row"
       display="flex"
-      flex="grow"
       height="100%"
       keyboardOffset={keyboardOffset}
       padding={2}
       width="100%"
     >
       {loading === true && <Spinner color={Unifier.theme.darkGray as any} size="md" />}
-      {renderList()}
-      {renderContent ? renderListContent() : renderChildrenContent()}
+      {Boolean(isMobileDevice) ? renderMobileSplitPage() : renderSplitPage()}
     </Box>
   );
 };

package/src/TapToEdit.tsx

@@ -7,6 +7,7 @@ import {BoxProps} from "./Common";
 import {Field, FieldProps} from "./Field";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
+import {formatAddress} from "./Utilities";
 
 export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
   title: string;
@@ -113,29 +114,15 @@ export const TapToEdit = ({
         displayValue = value.join(", ");
       } else if (fieldProps?.type === "url") {
         // Show only the domain, full links are likely too long.
-        const url = new URL(value);
-        displayValue = url?.hostname ?? value;
-      } else if (fieldProps?.type === "address") {
-        let city = "";
-        if (value?.city) {
-          city = value?.state || value.zipcode ? `${value.city}, ` : `${value.city}`;
-        }
-
-        let state = "";
-        if (value?.state) {
-          state = value?.zipcode ? `${value.state} ` : `${value.state}`;
+        try {
+          const url = new URL(value);
+          displayValue = url?.hostname ?? value;
+        } catch (e) {
+          console.debug(`Invalid URL: ${value}`);
+          displayValue = value;
         }
-
-        const zip = value?.zipcode || "";
-
-        const addressLineOne = value?.address1 ?? "";
-        const addressLineTwo = value?.address2 ?? "";
-        const addressLineThree = `${city}${state}${zip}`;
-
-        // Only add new lines if lines before and after are not empty to avoid awkward whitespace
-        displayValue = `${addressLineOne}${
-          addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
-        }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
+      } else if (fieldProps?.type === "address") {
+        displayValue = formatAddress(value);
       }
     }
 

package/src/TextField.tsx

@@ -1,6 +1,6 @@
 import {AsYouType} from "libphonenumber-js";
 import moment from "moment-timezone";
-import React, {ReactElement, useState} from "react";
+import React, {ReactElement, useCallback, useMemo, useState} from "react";
 import {ActivityIndicator, KeyboardTypeOptions, Platform, TextInput, View} from "react-native";
 import {Calendar} from "react-native-calendars";
 
@@ -168,7 +168,7 @@ export function TextField({
     borderColor = Unifier.theme.gray;
   }
 
-  const getHeight = () => {
+  const getHeight = useCallback(() => {
     if (grow) {
       return Math.max(40, height);
     } else if (multiline) {
@@ -176,7 +176,29 @@ export function TextField({
     } else {
       return 40;
     }
-  };
+  }, [grow, height, multiline]);
+
+  const defaultTextInputStyles = useMemo(() => {
+    const defaultStyles = {
+      flex: 1,
+      paddingTop: 10,
+      paddingRight: 10,
+      paddingBottom: 10,
+      paddingLeft: 0,
+      height: getHeight(),
+      width: "100%",
+      color: Unifier.theme.darkGray,
+      fontFamily: Unifier.theme.primaryFont,
+      ...style,
+    };
+
+    if (Platform.OS === "web") {
+      defaultStyles.outline = 0;
+    }
+
+    return defaultStyles;
+  }, [getHeight, style]);
+
   const isHandledByModal =
     type === "date" || type === "numberRange" || type === "decimalRange" || type === "height";
 
@@ -269,20 +291,7 @@ export function TextField({
               placeholderTextColor={Unifier.theme.gray}
               returnKeyType={type === "number" || type === "decimal" ? "done" : returnKeyType}
               secureTextEntry={type === "password"}
-              style={{
-                flex: 1,
-                paddingTop: 10,
-                paddingRight: 10,
-                paddingBottom: 10,
-                paddingLeft: 0,
-                height: getHeight(),
-                width: "100%",
-                color: Unifier.theme.darkGray,
-                fontFamily: Unifier.theme.primaryFont,
-                // Remove border in web.
-                outlineWidth: 0,
-                ...style,
-              }}
+              style={defaultTextInputStyles}
               // For react-native-autofocus
               textContentType={textContentType}
               underlineColorAndroid="transparent"

package/src/Utilities.tsx

@@ -4,14 +4,12 @@ import get from "lodash/get";
 
 export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
   const inline = get(inlineStyle, "__style");
-  const dangerouslySetInlineStyle = {
+  return {
     __style: {
       ...inline,
       ...newStyle,
     },
   };
-
-  return dangerouslySetInlineStyle;
 }
 
 /*
@@ -159,3 +157,26 @@ export const union =
   <T,>(...fns: Functor<T>[]) =>
   (val: T) =>
     concat(fns.map((fn) => fn(val)));
+
+export function formatAddress(address: any): string {
+  let city = "";
+  if (address?.city) {
+    city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
+  }
+
+  let state = "";
+  if (address?.state) {
+    state = address?.zipcode ? `${address.state} ` : `${address.state}`;
+  }
+
+  const zip = address?.zipcode || "";
+
+  const addressLineOne = address?.address1 ?? "";
+  const addressLineTwo = address?.address2 ?? "";
+  const addressLineThree = `${city}${state}${zip}`;
+
+  // Only add new lines if lines before and after are not empty to avoid awkward whitespace
+  return `${addressLineOne}${
+    addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
+  }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
+}

package/src/WithLabel.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
 import {Box} from "./Box";
-import {AllColors, JustifyContent, TextSize} from "./Common";
+import {AllColors, JustifyContent, ReactChildren, TextSize} from "./Common";
 import {Text} from "./Text";
 
 export interface WithLabelProps {
-  children: React.ReactNode;
+  children?: ReactChildren;
   show?: boolean;
   label?: string;
   labelInline?: boolean;
@@ -24,7 +24,10 @@ export function WithLabel({
   labelColor,
   show,
   children,
-}: WithLabelProps) {
+}: WithLabelProps): React.ReactElement | null {
+  if (!children) {
+    return null;
+  }
   return (
     <Box
       direction={labelInline ? "row" : "column"}

package/src/index.tsx

@@ -1,5 +1,6 @@
 export * from "./Constants";
 export * from "./Common";
+export * from "./MediaQuery";
 export * from "./ActionSheet";
 export * from "./Avatar";
 export * from "./Badge";
@@ -69,7 +70,7 @@ interface Insets {
   right?: number;
 }
 
-// Lifted from react-native-navigatino
+// Lifted from react-native-navigation
 // import {Options} from "./Options";
 export interface LayoutComponent<P = {}> {
   /**
@@ -453,7 +454,7 @@ export interface OptionsTopBarTitle {
     passProps?: object;
   };
   /**
-   * Top Bar title height in densitiy pixels
+   * Top Bar title height in density pixels
    * #### (Android specific)
    */
   height?: number;
@@ -496,7 +497,7 @@ export interface OptionsTopBarBackButton {
    */
   icon?: ImageRequireSource;
   /**
-   * Weither the back button is visible or not
+   * Whether the back button is visible or not
    * @default true
    */
   visible?: boolean;
@@ -1005,14 +1006,14 @@ export interface OverlayOptions {
    */
   interceptTouchOutside?: boolean;
   /**
-   * Control wether this Overlay should handle Keyboard events.
+   * Control whether this Overlay should handle Keyboard events.
    * Set this to true if your Overlay contains a TextInput.
    */
   handleKeyboardEvents?: boolean;
 }
 export interface ModalOptions {
   /**
-   * Control wether this modal should be dismiss using swipe gesture when the modalPresentationStyle = 'pageSheet'
+   * Control whether this modal should be dismiss using swipe gesture when the modalPresentationStyle = 'pageSheet'
    * #### (iOS specific)
    */
   swipeToDismiss?: boolean;