ferns-ui 0.25.3 → 0.26.1

package/src/SplitPage.native.tsx

@@ -0,0 +1,156 @@
+// TODO: Update SplitPage native to have desktop UX for tablet sized screens
+import React, {Children, useCallback, useEffect, useState} from "react";
+import {Dimensions, ListRenderItemInfo, View} from "react-native";
+import {SwiperFlatList} from "react-native-swiper-flatlist";
+
+import {Box} from "./Box";
+import {SplitPageProps} from "./Common";
+import {FlatList} from "./FlatList";
+import {IconButton} from "./IconButton";
+import {Spinner} from "./Spinner";
+import {Unifier} from "./Unifier";
+
+export const SplitPage = ({
+  children,
+  loading = false,
+  color,
+  keyboardOffset,
+  renderListViewItem,
+  renderListViewHeader,
+  renderContent,
+  onSelectionChange = () => {},
+  listViewData,
+  listViewExtraData,
+  bottomNavBarHeight,
+  showItemList,
+}: SplitPageProps) => {
+  const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
+
+  const elementArray = Children.toArray(children);
+  const {width} = Dimensions.get("window");
+
+  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;
+  }
+
+  const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
+    return (
+      <Box
+        onClick={() => {
+          Unifier.utils.haptic();
+          onItemSelect(itemInfo);
+        }}
+      >
+        {renderListViewItem(itemInfo)}
+      </Box>
+    );
+  };
+
+  const renderList = () => {
+    if (selectedId !== undefined) {
+      return null;
+    }
+
+    return (
+      <View
+        style={{
+          width: "100%",
+          maxWidth: "100%",
+          flexGrow: 1,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+          paddingBottom: bottomNavBarHeight,
+        }}
+      >
+        {renderListViewHeader && renderListViewHeader()}
+        <FlatList
+          data={listViewData}
+          extraData={listViewExtraData}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+        />
+      </View>
+    );
+  };
+
+  const renderListContent = () => {
+    if (selectedId === undefined) {
+      return null;
+    }
+    return (
+      <Box flex="grow" padding={2}>
+        <Box width="100%">
+          <IconButton
+            accessibilityLabel="close"
+            icon="times"
+            iconColor="darkGray"
+            onClick={() => onItemDeselect()}
+          />
+        </Box>
+        {renderContent && renderContent(selectedId)}
+      </Box>
+    );
+  };
+
+  const renderChildrenContent = () => {
+    if (selectedId === undefined) {
+      return null;
+    }
+    return (
+      <SwiperFlatList
+        nestedScrollEnabled
+        renderAll
+        showPagination={elementArray.length > 1}
+        style={{width: "100%"}}
+      >
+        {elementArray.map((element, i) => {
+          return (
+            <View
+              key={i}
+              style={{width, height: elementArray.length > 1 ? "95%" : "100%", padding: 4}}
+            >
+              {element}
+            </View>
+          );
+        })}
+      </SwiperFlatList>
+    );
+  };
+
+  const renderMainContent = renderContent ? renderListContent() : renderChildrenContent();
+
+  return (
+    <Box
+      avoidKeyboard
+      color={color || "lightGray"}
+      flex="grow"
+      height="100%"
+      keyboardOffset={keyboardOffset}
+      width="100%"
+    >
+      {loading === true && <Spinner color={Unifier.theme.darkGray as any} size="md" />}
+      {selectedId === undefined ? renderList() : renderMainContent}
+    </Box>
+  );
+};

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/Table.tsx

@@ -0,0 +1,69 @@
+import React, {Children, ReactElement, useRef} from "react";
+
+import {Box} from "./Box";
+import {ScrollView} from "./ScrollView";
+import {ColumnSortInterface, TableContextProvider} from "./tableContext";
+
+interface TableProps {
+  /**
+   * Must be instances of TableHeader, TableRow, and/or TableFooter components.
+   */
+  children: React.ReactNode | React.ReactNode[];
+  /**
+   * Width of columns in the table. This is used to calculate the width of each column. Can be numbers for pixels or strings for percentages.
+   */
+  columns: Array<number | string>;
+  /**
+   * Specify a border width for Table: "sm" is 1px.
+   */
+  borderStyle?: "sm" | "none";
+  /**
+   * Use numbers for pixels: `maxHeight={100}` and strings for percentages: `maxHeight="100%"`.
+   */
+  maxHeight?: number | string;
+}
+
+export function Table({children, columns, borderStyle, maxHeight}: TableProps): React.ReactElement {
+  const tableRef = useRef(null);
+  const arrayChildren = Children.toArray(children);
+  const [sortColumn, setSortColumn] = React.useState<ColumnSortInterface | undefined>(undefined);
+
+  // Check if any of the rows below have a drawerContents prop to see if we need to render space for the caret.
+  const hasDrawerContents = arrayChildren.some((child) => {
+    return (child as ReactElement).props?.drawerContents;
+  });
+
+  // Calculate the total width of the table. If the table has only number widths, calculate a width. Otherwise use 100%.
+  let width: string | number;
+  if (columns.every((column) => typeof column === "number")) {
+    width = columns.reduce((acc, curr) => {
+      return (acc as number) + (curr as number);
+    }, 0);
+    if (hasDrawerContents) {
+      width = (width as number) + 30;
+    }
+  } else {
+    width = "100%";
+  }
+
+  return (
+    <TableContextProvider
+      columns={columns}
+      hasDrawerContents={hasDrawerContents}
+      setSortColumn={setSortColumn}
+      sortColumn={sortColumn}
+    >
+      <ScrollView horizontal style={{width, maxWidth: "100%"}}>
+        <Box
+          width={width}
+          {...(borderStyle === "sm" ? {borderStyle: "sm", rounding: 1} : {})}
+          ref={tableRef}
+          flex="grow"
+          maxHeight={maxHeight}
+        >
+          {children}
+        </Box>
+      </ScrollView>
+    </TableContextProvider>
+  );
+}

package/src/TableHeader.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {TableRow} from "./TableRow";
+
+interface TableHeaderProps {
+  /**
+   * Must be an instance of TableRow.
+   */
+  children: React.ReactNode | React.ReactNode[];
+  /**
+   * Display `visuallyHidden` ensures the component is visually hidden but still is read by screen readers.
+   */
+  display?: "tableHeaderGroup" | "visuallyHidden";
+  /**
+   * If true, the table header will be sticky and the table body will be scrollable. Not yet implemented.
+   */
+  sticky?: boolean;
+}
+
+/**
+ * Use TableHeader to group the header content in Table.
+ */
+export function TableHeader({
+  children,
+  display = "tableHeaderGroup",
+}: TableHeaderProps): React.ReactElement {
+  return (
+    <Box display={display === "visuallyHidden" ? "none" : "flex"}>
+      <TableRow headerRow>{children}</TableRow>
+    </Box>
+  );
+}

package/src/TableHeaderCell.tsx

@@ -0,0 +1,76 @@
+import React, {ReactElement} from "react";
+
+import {Box} from "./Box";
+import {IconButton} from "./IconButton";
+import {useTableContext} from "./tableContext";
+
+interface Props {
+  /**
+   * The content of the table header cell.
+   */
+  children: ReactElement;
+  index: number;
+  sortable?: boolean;
+  onSortChange?: (direction: "asc" | "desc" | undefined) => void;
+}
+
+/**
+ * Use TableHeaderCell to define a header cell in Table.
+ */
+export function TableHeaderCell({children, index, sortable, onSortChange}: Props): ReactElement {
+  const {columns, setSortColumn, sortColumn} = useTableContext();
+  const width = columns[index];
+  if (!width) {
+    console.warn(`No width defined for column ${index} in TableHeaderCell`);
+  }
+
+  const onClick = () => {
+    // desc => asc => undefined
+    const newSort = sort === "desc" ? "asc" : sort === "asc" ? undefined : "desc";
+    if (setSortColumn) {
+      setSortColumn(newSort ? {column: index, direction: newSort} : undefined);
+    }
+    onSortChange && onSortChange(newSort);
+  };
+  const sort = sortColumn?.column === index ? sortColumn.direction : undefined;
+
+  if (sortable) {
+    if (!onSortChange) {
+      console.error("onSortChange is required when sortable is true");
+    }
+    return (
+      <Box
+        alignItems="center"
+        direction="row"
+        flex="grow"
+        justifyContent="between"
+        marginBottom={2}
+        marginTop={2}
+        maxWidth={width}
+        minHeight={36}
+        width={width}
+        onClick={onClick}
+      >
+        {children}
+        {Boolean(sort) && (
+          <Box paddingX={2}>
+            <IconButton
+              accessibilityLabel="sort"
+              bgColor="white"
+              icon={sort === "asc" ? "arrow-down" : "arrow-up"}
+              iconColor="darkGray"
+              size="sm"
+              onClick={() => {}}
+            />
+          </Box>
+        )}
+      </Box>
+    );
+  } else {
+    return (
+      <Box marginBottom={2} marginTop={2} width={width}>
+        {children}
+      </Box>
+    );
+  }
+}

package/src/TableRow.tsx

@@ -0,0 +1,87 @@
+import React, {Children, useRef} from "react";
+
+import {Box} from "./Box";
+import {IconButton} from "./IconButton";
+import {useTableContext} from "./tableContext";
+
+interface Props {
+  /**
+   * Must be instances of TableCell or TableHeaderCell.
+   */
+  children: React.ReactNode | React.ReactNode[];
+  /**
+   * Header rows have an extra thick bottom border.
+   */
+  headerRow?: boolean;
+  /**
+   * Whether the row should start expanded or not.
+   */
+  expanded?: boolean;
+  /**
+   * When the row is expanded, the drawerContents are shown. If not
+   */
+  drawerContents?: React.ReactNode | React.ReactNode[];
+}
+
+/**
+ * Use TableRow to define a row in Table.
+ */
+export function TableRow({
+  children,
+  headerRow = false,
+  expanded,
+  drawerContents,
+}: Props): React.ReactElement {
+  const [isExpanded, setIsExpanded] = React.useState(expanded || false);
+  const {columns, hasDrawerContents} = useTableContext();
+  const rowRef = useRef<Box>(null);
+
+  const renderCellWithColumnIndex = (child: React.ReactNode, index: number) => {
+    if (!columns[index]) {
+      console.warn(`No width defined for column ${index} in TableRow`);
+      return null;
+    }
+    return (
+      <Box paddingX={2} width={columns[index]}>
+        {child}
+      </Box>
+    );
+  };
+
+  const border = {__style: {borderBottom: `${headerRow ? 2 : 1}px solid #e0e0e0`}};
+
+  return (
+    <Box
+      ref={rowRef}
+      dangerouslySetInlineStyle={border}
+      marginBottom={1}
+      marginTop={1}
+      width="100%"
+    >
+      <Box direction="row" width="100%">
+        {Boolean(drawerContents) && (
+          <Box width={30}>
+            <IconButton
+              accessibilityLabel="expand"
+              bgColor="white"
+              icon={isExpanded ? "chevron-up" : "chevron-down"}
+              iconColor="darkGray"
+              size="sm"
+              onClick={() => {
+                setIsExpanded(!isExpanded);
+              }}
+            />
+          </Box>
+        )}
+        {/* Still render a blank space so the columns line up. */}
+        {Boolean(hasDrawerContents && !drawerContents) && <Box width={30} />}
+        {Children.map(children, renderCellWithColumnIndex)}
+      </Box>
+      {Boolean(isExpanded) && (
+        <Box paddingX={2} width="100%">
+          {drawerContents}
+        </Box>
+      )}
+    </Box>
+  );
+}