ferns-ui 0.36.1 → 0.36.3

package/src/SplitPage.tsx

@@ -1,302 +0,0 @@
-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 {SplitPageProps} from "./Common";
-import {FlatList} from "./FlatList";
-import {IconButton} from "./IconButton";
-import {mediaQueryLargerThan} from "./MediaQuery";
-import {SegmentedControl} from "./SegmentedControl";
-import {Spinner} from "./Spinner";
-import {Unifier} from "./Unifier";
-
-// 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 = ({
-  children,
-  tabs = [],
-  loading = false,
-  color,
-  keyboardOffset,
-  renderListViewItem,
-  renderListViewHeader,
-  renderContent,
-  onSelectionChange = () => {},
-  listViewData,
-  listViewExtraData,
-  listViewWidth,
-  bottomNavBarHeight,
-  showItemList,
-  selectLimit,
-}: SplitPageProps) => {
-  const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
-  const [activeTabs, setActiveTabs] = useState<number[]>([0, 1]);
-  const {width} = Dimensions.get("window");
-
-  const isMobileDevice = !mediaQueryLargerThan("sm");
-
-  const elementArray = Children.toArray(children).filter((c) => c !== null);
-
-  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;
-  }
-
-  if (elementArray.length > 2 && elementArray.length !== tabs.length) {
-    console.warn("There must be a tab for each child");
-    return null;
-  }
-
-  const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
-    return (
-      <Box
-        onClick={() => {
-          onItemSelect(itemInfo);
-        }}
-      >
-        {renderListViewItem(itemInfo)}
-      </Box>
-    );
-  };
-
-  const renderList = () => {
-    return (
-      <View
-        style={{
-          width: listViewWidth ?? 300,
-          maxWidth: listViewWidth ?? 300,
-          flexGrow: 1,
-          flexShrink: 0,
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        {renderListViewHeader && renderListViewHeader()}
-        <FlatList
-          data={listViewData}
-          extraData={listViewExtraData}
-          keyExtractor={(item) => item.id}
-          renderItem={renderItem}
-        />
-      </View>
-    );
-  };
-
-  const renderListContent = () => {
-    return (
-      <Box flex="grow" padding={2}>
-        {renderContent && renderContent(selectedId)}
-      </Box>
-    );
-  };
-
-  const renderChildrenContent = () => {
-    if (Array.isArray(children) && elementArray.length > 2) {
-      return (
-        <View
-          style={{
-            flex: 1,
-            width: "100%",
-            height: "100%",
-            alignItems: "center",
-          }}
-        >
-          <Box marginBottom={4} paddingX={4} width="100%">
-            <SegmentedControl
-              items={tabs}
-              multiselect
-              selectLimit={selectLimit || tabs.length}
-              selectedItemIndexes={activeTabs}
-              onChange={(index) => {
-                setActiveTabs([...(index.activeIndex as number[])]);
-              }}
-            />
-          </Box>
-          <Box
-            direction="row"
-            flex="grow"
-            height="100%"
-            paddingX={4}
-            width={activeTabs.length > 1 ? "100%" : "60%"}
-          >
-            {activeTabs.map((tabIndex, i) => {
-              return (
-                <ScrollView
-                  key={tabIndex}
-                  contentContainerStyle={{
-                    flex: 1,
-                  }}
-                  style={{
-                    flex: 1,
-                    width: "60%",
-                    height: "100%",
-                    paddingRight: i ? 0 : 16,
-                    paddingLeft: i ? 16 : 0,
-                  }}
-                >
-                  {elementArray[tabIndex]}
-                </ScrollView>
-              );
-            })}
-          </Box>
-        </View>
-      );
-    } else {
-      return (
-        <Box alignItems="center" direction="row" flex="grow" justifyContent="center" paddingX={2}>
-          {elementArray.map((element, index) => {
-            return (
-              <ScrollView
-                key={index}
-                contentContainerStyle={{
-                  flex: 1,
-                }}
-                style={{
-                  flex: 1,
-                  width: "60%",
-                  height: "100%",
-                }}
-              >
-                {element}
-              </ScrollView>
-            );
-          })}
-        </Box>
-      );
-    }
-  };
-
-  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 ? "90%" : "100%",
-                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"
-      height="100%"
-      keyboardOffset={keyboardOffset}
-      padding={2}
-      width="100%"
-    >
-      {loading === true && <Spinner color={Unifier.theme.darkGray as any} size="md" />}
-      {Boolean(isMobileDevice) ? renderMobileSplitPage() : renderSplitPage()}
-    </Box>
-  );
-};

package/src/Switch.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import {Switch as NativeSwitch} from "react-native";
-
-import {SwitchProps} from "./Common";
-import {WithLabel} from "./WithLabel";
-
-export class Switch extends React.Component<SwitchProps, {}> {
-  render() {
-    return (
-      <WithLabel labelAlignItems="center" labelInline labelJustifyContent="between" {...this.props}>
-        <NativeSwitch
-          disabled={this.props.disabled}
-          value={this.props.switched}
-          onValueChange={this.props.onChange}
-        />
-      </WithLabel>
-    );
-  }
-}

package/src/Table.tsx

@@ -1,87 +0,0 @@
-import React, {Children, ReactElement} from "react";
-import {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
-
-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?: DimensionValue;
-  /**
-   * If true, the header will stick to the top of the table when scrolling. Defaults to true.
-   */
-  stickyHeader?: boolean;
-  /**
-   * If true, alternate rows will have a light gray background. Defaults to true.
-   */
-  alternateRowBackground?: boolean;
-}
-
-export function Table({
-  children,
-  columns,
-  borderStyle,
-  alternateRowBackground = true,
-  maxHeight,
-  stickyHeader = true,
-}: TableProps): React.ReactElement {
-  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: DimensionValue;
-  if (columns.every((column) => typeof column === "number")) {
-    width = columns.reduce((acc, curr) => {
-      return (acc as number) + (curr as number);
-    }, 0) as number;
-    if (hasDrawerContents) {
-      width = (width as number) + 30;
-    }
-  } else {
-    width = "100%";
-  }
-
-  return (
-    <TableContextProvider
-      alternateRowBackground={alternateRowBackground}
-      borderStyle={borderStyle}
-      columns={columns}
-      hasDrawerContents={hasDrawerContents}
-      setSortColumn={setSortColumn}
-      sortColumn={sortColumn}
-      stickyHeader={stickyHeader}
-    >
-      <ScrollView horizontal style={{width, maxWidth: "100%"}}>
-        <ScrollView
-          stickyHeaderIndices={stickyHeader ? [0] : undefined}
-          style={{width, maxWidth: "100%", flex: 1, maxHeight}}
-        >
-          {Children.map(children, (child, index) =>
-            React.cloneElement(child as any, {
-              color: index % 2 === 1 && alternateRowBackground ? "lightGray" : "white",
-            })
-          )}
-        </ScrollView>
-      </ScrollView>
-    </TableContextProvider>
-  );
-}

package/src/TableHeader.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-
-import {Box} from "./Box";
-import {BoxColor} from "./Common";
-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;
-  color?: BoxColor;
-}
-
-/**
- * Use TableHeader to group the header content in Table.
- */
-export function TableHeader({
-  children,
-  display = "tableHeaderGroup",
-  color,
-}: TableHeaderProps): React.ReactElement {
-  return (
-    <Box color={color ?? "white"} display={display === "visuallyHidden" ? "none" : "flex"}>
-      <TableRow headerRow>{children}</TableRow>
-    </Box>
-  );
-}

package/src/TableHeaderCell.tsx

@@ -1,76 +0,0 @@
-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 flex="grow" justifyContent="center" marginBottom={2} marginTop={2} width={width}>
-        {children}
-      </Box>
-    );
-  }
-}

package/src/TableRow.tsx

@@ -1,87 +0,0 @@
-import React, {Children, useRef} from "react";
-
-import {Box} from "./Box";
-import {BoxColor} from "./Common";
-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[];
-  /**
-   * Background color of the row. Defaults to white.
-   */
-  color?: BoxColor;
-}
-
-/**
- * Use TableRow to define a row in Table.
- */
-export function TableRow({
-  children,
-  headerRow = false,
-  expanded,
-  drawerContents,
-  color = "white",
-}: Props): React.ReactElement {
-  const [isExpanded, setIsExpanded] = React.useState(expanded || false);
-  const {columns, hasDrawerContents} = useTableContext();
-  const rowRef = useRef<typeof 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} color={color} dangerouslySetInlineStyle={border} width="100%">
-      <Box direction="row" paddingY={1} 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>
-  );
-}