ferns-ui 0.24.0 → 0.25.0

package/dist/Common.d.ts

@@ -319,13 +319,16 @@ export interface PillProps {
     onClick: (enabled: boolean) => void;
 }
 export interface SegmentedControlProps {
-    items: (string | React.ReactNode)[];
-    onChange: ({ activeIndex }: {
-        activeIndex: number;
+    items: string[];
+    onChange?: ({ activeIndex }: {
+        activeIndex: number | number[];
     }) => void;
-    selectedItemIndex: number;
+    selectedItemIndex?: number;
+    selectedItemIndexes?: number[];
     responsive?: boolean;
     size?: "md" | "lg";
+    multiselect?: boolean;
+    selectLimit?: number;
 }
 export interface FieldWithLabelsProps {
     errorMessage?: string;

package/dist/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAorDA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAmBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;AA03BD,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAorDA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AAmBzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,GAAG,EAAE,EAAY,EAAE;IACtD,IAAI,QAAkB,CAAC;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM,IAAI,IAAI,GAAG,EAAE,EAAE;QACpB,QAAQ,GAAG,IAAI,CAAC;KACjB;SAAM;QACL,QAAQ,GAAG,IAAI,CAAC;KACjB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,OAAgE;IAC9F,OAAO,CAAC;QACN,SAAS,EAAE,QAAQ;QACnB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,KAAK;QACZ,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;KACjB,CAAC,OAAO,CAAC,IAAI,MAAM,CAAU,CAAC;AACjC,CAAC;AA63BD,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,OAAO,CACL,OAAO;QACP,OAAO,CAAC,KAAK;QACb,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CACrF,CAAC;AACJ,CAAC"}

package/dist/SegmentedControl.d.ts

@@ -1,6 +1,3 @@
-import React from "react";
+/// <reference types="react" />
 import { SegmentedControlProps } from "./Common";
-export declare class SegmentedControl extends React.Component<SegmentedControlProps, {}> {
-    renderItem(item: string | React.ReactNode): JSX.Element;
-    render(): JSX.Element;
-}
+export declare const SegmentedControl: ({ items, onChange, selectedItemIndexes, selectedItemIndex, multiselect, selectLimit, }: SegmentedControlProps) => JSX.Element | null;

package/dist/SegmentedControl.js

@@ -1,18 +1,48 @@
 import React from "react";
 import { Box } from "./Box";
 import { Text } from "./Text";
-export class SegmentedControl extends React.Component {
-    renderItem(item) {
+export const SegmentedControl = ({ items, onChange = () => { }, selectedItemIndexes = undefined, selectedItemIndex = undefined, multiselect = false, selectLimit = 1, }) => {
+    const renderItem = (item) => {
         return React.createElement(Text, { weight: "bold" }, item);
         // if (typeof item === "string") {
         //   return <Text weight="bold">{item}</Text>;
         // } else {
         //   return item;
         // }
+    };
+    if (selectedItemIndex === undefined && selectedItemIndexes === undefined) {
+        console.warn("One of the following must be defined: selectedItemIndex, selectedItemIndexes");
+        return null;
     }
-    render() {
-        return (React.createElement(Box, { color: "lightGray", direction: "row", display: "flex", height: 40, padding: 1, rounding: 3, width: "100%" }, this.props.items.map((item, index) => (React.createElement(Box, { key: index, color: this.props.selectedItemIndex === index ? "white" : "lightGray", height: "100%", rounding: 3, width: `${100 / this.props.items.length}%` },
-            React.createElement(Box, { alignItems: "center", display: "flex", height: "100%", justifyContent: "center", width: "100%", onClick: () => this.props.onChange({ activeIndex: index }) }, this.renderItem(item)))))));
+    if (!multiselect && (selectedItemIndexes === null || selectedItemIndexes === void 0 ? void 0 : selectedItemIndexes.length) && (selectedItemIndexes === null || selectedItemIndexes === void 0 ? void 0 : selectedItemIndexes.length) > 1) {
+        console.warn("Muliple selections not allowed without multiselect flag");
+        return null;
     }
-}
+    if ((selectedItemIndexes === null || selectedItemIndexes === void 0 ? void 0 : selectedItemIndexes.length) && (selectedItemIndexes === null || selectedItemIndexes === void 0 ? void 0 : selectedItemIndexes.length) > selectLimit) {
+        console.warn("The number of selected items exceeds the limit");
+        return null;
+    }
+    const isTabActive = (index) => {
+        return selectedItemIndex === index || (selectedItemIndexes === null || selectedItemIndexes === void 0 ? void 0 : selectedItemIndexes.includes(index))
+            ? "white"
+            : "lightGray";
+    };
+    return (React.createElement(Box, { color: "lightGray", direction: "row", display: "flex", height: 40, justifyContent: "between", padding: 1, rounding: 3, width: "100%" }, items.map((item, index) => (React.createElement(Box, { key: index, color: isTabActive(index), height: "100%", paddingX: 2, rounding: 3, width: `${100 / items.length}%` },
+        React.createElement(Box, { alignItems: "center", display: "flex", height: "100%", justifyContent: "center", width: "100%", onClick: () => {
+                if (multiselect) {
+                    if (selectedItemIndexes === null || selectedItemIndexes === void 0 ? void 0 : selectedItemIndexes.includes(index)) {
+                        onChange({ activeIndex: selectedItemIndexes.filter((i) => i !== index) });
+                    }
+                    else {
+                        const reversed = selectedItemIndexes === null || selectedItemIndexes === void 0 ? void 0 : selectedItemIndexes.reverse();
+                        reversed === null || reversed === void 0 ? void 0 : reversed.splice(1, 1);
+                        reversed === null || reversed === void 0 ? void 0 : reversed.push(index);
+                        onChange({ activeIndex: reversed });
+                    }
+                }
+                else {
+                    onChange({ activeIndex: index });
+                }
+            } }, renderItem(item)))))));
+};
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAE5B,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAoC;IAC9E,UAAU,CAAC,IAA8B;QACvC,OAAO,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM,IAAE,IAAI,CAAQ,CAAC;QACzC,kCAAkC;QAClC,8CAA8C;QAC9C,WAAW;QACX,iBAAiB;QACjB,IAAI;IACN,CAAC;IAED,MAAM;QACJ,OAAO,CACL,oBAAC,GAAG,IACF,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,KAAK,EACf,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,MAAM,IAEX,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,oBAAC,GAAG,IACF,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EACrE,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG;YAE1C,oBAAC,GAAG,IACF,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,MAAM,EACb,cAAc,EAAC,QAAQ,EACvB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAC,WAAW,EAAE,KAAK,EAAC,CAAC,IAEvD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAClB,CACF,CACP,CAAC,CACE,CACP,CAAC;IACJ,CAAC;CACF"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"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"}

package/dist/SplitPage.d.ts

@@ -1,31 +1,20 @@
-import React from "react";
+import { ReactChild, ReactElement } from "react";
 import { ListRenderItemInfo } from "react-native";
 import { Color } from "./Common";
 interface SplitPageProps {
-    navigation: any;
+    children?: ReactChild | ReactChild[] | null;
+    tabs?: string[];
+    navigation?: any;
     loading?: boolean;
     color?: Color;
     keyboardOffset?: number;
-    rightButton?: string;
-    rightButtonOnClick?: () => void;
-    renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => React.ReactElement | null;
-    renderListViewHeader?: () => React.ReactElement | null;
-    renderContent: (index?: number) => React.ReactElement | null;
+    renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => ReactElement | null;
+    renderListViewHeader?: () => ReactElement | null;
+    renderContent?: (index?: number) => ReactElement | ReactElement[] | null;
     listViewData: any[];
     listViewExtraData?: any;
     listViewWidth?: number;
+    renderChild?: () => ReactChild;
 }
-interface SplitPageState {
-    selectedId?: number;
-}
-export declare class SplitPage extends React.Component<SplitPageProps, SplitPageState> {
-    state: {
-        selectedId: undefined;
-    };
-    actionSheetRef: React.RefObject<any>;
-    renderItem: (itemInfo: ListRenderItemInfo<any>) => JSX.Element;
-    renderList: () => JSX.Element | null;
-    renderListContent: () => JSX.Element;
-    render(): JSX.Element;
-}
+export declare const SplitPage: ({ children, tabs, loading, color, keyboardOffset, renderListViewItem, renderListViewHeader, renderContent, listViewData, listViewExtraData, listViewWidth, }: SplitPageProps) => JSX.Element | null;
 export {};

package/dist/SplitPage.js

@@ -1,51 +1,94 @@
-import React from "react";
-import { View } from "react-native";
+import React, { Children, useState } from "react";
+import { ScrollView, View } from "react-native";
 import { Box } from "./Box";
+import { SPACING } 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 class SplitPage extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { selectedId: undefined };
-        this.actionSheetRef = React.createRef();
-        this.renderItem = (itemInfo) => {
-            return (React.createElement(Box, { onClick: () => {
-                    this.setState({ selectedId: itemInfo.index });
-                } }, this.props.renderListViewItem(itemInfo)));
-        };
-        this.renderList = () => {
-            var _a, _b;
-            if (!mediaQueryLargerThan("sm") && this.state.selectedId) {
-                return null;
-            }
-            return (React.createElement(View, { style: {
-                    width: mediaQueryLargerThan("sm") ? (_a = this.props.listViewWidth) !== null && _a !== void 0 ? _a : 300 : "100%",
-                    maxWidth: mediaQueryLargerThan("sm") ? (_b = this.props.listViewWidth) !== null && _b !== void 0 ? _b : 300 : "100%",
-                    flexGrow: 1,
-                    flexShrink: 0,
-                    display: "flex",
-                    flexDirection: "column",
-                } },
-                this.props.renderListViewHeader && this.props.renderListViewHeader(),
-                React.createElement(FlatList, { data: this.props.listViewData, extraData: this.props.listViewExtraData, keyExtractor: (item) => item.id, renderItem: this.renderItem })));
-        };
-        this.renderListContent = () => {
-            return (React.createElement(Box, { flex: "grow", padding: 2 },
-                !mediaQueryLargerThan("sm") && (React.createElement(Box, { width: "100%" },
-                    React.createElement(IconButton, { accessibilityLabel: "close", icon: "times", iconColor: "darkGray", onClick: () => this.setState({ selectedId: undefined }) }))),
-                this.props.renderContent(this.state.selectedId)));
-        };
+export const SplitPage = ({ children, tabs = [], loading = false, color, keyboardOffset, renderListViewItem, renderListViewHeader, renderContent, listViewData, listViewExtraData, listViewWidth, }) => {
+    const [selectedId, setSelectedId] = useState(undefined);
+    const [activeTabs, setActiveTabs] = useState(tabs.length > 2 ? [0, 1] : []);
+    const elementArray = Children.toArray(children);
+    if (!children && !renderContent) {
+        console.warn("A child node is required");
+        return null;
     }
-    render() {
-        return (React.createElement(Box, { avoidKeyboard: true, color: this.props.color || "lightGray", direction: "row", display: "flex", flex: "grow", height: "100%", keyboardOffset: this.props.keyboardOffset, width: "100%" },
-            this.props.loading === true && React.createElement(Spinner, { color: Unifier.theme.darkGray, size: "md" }),
-            this.renderList(),
-            this.renderListContent()));
+    if (Children.count(children) > 2 && Children.count(children) !== tabs.length) {
+        console.warn("There must be a tab for each child");
+        return null;
     }
-}
+    const renderItem = (itemInfo) => {
+        return (React.createElement(Box, { onClick: () => {
+                setSelectedId(itemInfo.index);
+            } }, renderListViewItem(itemInfo)));
+    };
+    const renderList = () => {
+        if (!mediaQueryLargerThan("sm") && selectedId) {
+            return null;
+        }
+        return (React.createElement(View, { style: {
+                width: mediaQueryLargerThan("sm") ? listViewWidth !== null && listViewWidth !== void 0 ? listViewWidth : 300 : "100%",
+                maxWidth: mediaQueryLargerThan("sm") ? listViewWidth !== null && listViewWidth !== void 0 ? listViewWidth : 300 : "100%",
+                flexGrow: 1,
+                flexShrink: 0,
+                display: "flex",
+                paddingTop: "12px",
+                paddingBottom: "12px",
+                flexDirection: "column",
+            } },
+            renderListViewHeader && renderListViewHeader(),
+            React.createElement(FlatList, { data: listViewData, extraData: listViewExtraData, keyExtractor: (item) => item.id, renderItem: renderItem })));
+    };
+    const renderListContent = () => {
+        return (React.createElement(Box, { flex: "grow", padding: 2 },
+            !mediaQueryLargerThan("sm") && (React.createElement(Box, { width: "100%" },
+                React.createElement(IconButton, { accessibilityLabel: "close", icon: "times", iconColor: "darkGray", onClick: () => setSelectedId(undefined) }))),
+            renderContent && renderContent(selectedId)));
+    };
+    const renderChildrenContent = () => {
+        if (Array.isArray(children) && children.length > 2) {
+            return (React.createElement(View, { style: {
+                    flex: 1,
+                    width: "100%",
+                    height: "100%",
+                    alignItems: "center",
+                } },
+                React.createElement(Box, { paddingX: 4, paddingY: 2, width: "100%" },
+                    React.createElement(SegmentedControl, { items: tabs, multiselect: true, selectLimit: tabs.length, selectedItemIndexes: activeTabs, onChange: (index) => {
+                            setActiveTabs([...index.activeIndex]);
+                        } })),
+                React.createElement(Box, { direction: "row", flex: "grow", height: "100%", paddingX: 2, width: activeTabs.length > 1 ? "100%" : "60%" }, activeTabs.map((tabIndex) => {
+                    return (React.createElement(ScrollView, { key: tabIndex, contentContainerStyle: {
+                            flex: 1,
+                        }, style: {
+                            flex: 1,
+                            width: "60%",
+                            padding: 3 * SPACING,
+                            height: "100%",
+                        } }, elementArray[tabIndex]));
+                }))));
+        }
+        else {
+            return (React.createElement(Box, { alignItems: "center", direction: "row", flex: "grow", justifyContent: "center", paddingX: 2 }, elementArray.map((element, index) => {
+                return (React.createElement(ScrollView, { key: index, contentContainerStyle: {
+                        flex: 1,
+                    }, style: {
+                        flex: 1,
+                        width: "60%",
+                        padding: 3 * SPACING,
+                        height: "100%",
+                    } }, element));
+            })));
+        }
+    };
+    return (React.createElement(Box, { avoidKeyboard: true, color: color || "lightGray", direction: "row", display: "flex", flex: "grow", height: "100%", keyboardOffset: keyboardOffset, padding: 2, width: "100%" },
+        loading === true && React.createElement(Spinner, { color: Unifier.theme.darkGray, size: "md" }),
+        renderList(),
+        renderContent ? renderListContent() : renderChildrenContent()));
+};
 //# sourceMappingURL=SplitPage.js.map

package/dist/SplitPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPage.js","sourceRoot":"","sources":["../src/SplitPage.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SplitPage.js","sourceRoot":"","sources":["../src/SplitPage.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Common.ts

@@ -2001,11 +2001,14 @@ export interface PillProps {
 }
 
 export interface SegmentedControlProps {
-  items: (string | React.ReactNode)[];
-  onChange: ({activeIndex}: {activeIndex: number}) => void;
-  selectedItemIndex: number;
+  items: string[];
+  onChange?: ({activeIndex}: {activeIndex: number | number[]}) => void;
+  selectedItemIndex?: number;
+  selectedItemIndexes?: number[];
   responsive?: boolean;
   size?: "md" | "lg"; // defaults to md
+  multiselect?: boolean;
+  selectLimit?: number;
 }
 
 // Shared props for fields with labels, subtext, and error messages.

package/src/SegmentedControl.tsx

@@ -4,48 +4,89 @@ import {Box} from "./Box";
 import {SegmentedControlProps} from "./Common";
 import {Text} from "./Text";
 
-export class SegmentedControl extends React.Component<SegmentedControlProps, {}> {
-  renderItem(item: string | React.ReactNode) {
+export const SegmentedControl = ({
+  items,
+  onChange = () => {},
+  selectedItemIndexes = undefined,
+  selectedItemIndex = undefined,
+  multiselect = false,
+  selectLimit = 1,
+}: SegmentedControlProps) => {
+  const renderItem = (item: string | React.ReactNode) => {
     return <Text weight="bold">{item}</Text>;
     // if (typeof item === "string") {
     //   return <Text weight="bold">{item}</Text>;
     // } else {
     //   return item;
     // }
+  };
+
+  if (selectedItemIndex === undefined && selectedItemIndexes === undefined) {
+    console.warn("One of the following must be defined: selectedItemIndex, selectedItemIndexes");
+    return null;
+  }
+
+  if (!multiselect && selectedItemIndexes?.length && selectedItemIndexes?.length > 1) {
+    console.warn("Muliple selections not allowed without multiselect flag");
+    return null;
   }
 
-  render() {
-    return (
-      <Box
-        color="lightGray"
-        direction="row"
-        display="flex"
-        height={40}
-        padding={1}
-        rounding={3}
-        width="100%"
-      >
-        {this.props.items.map((item, index) => (
+  if (selectedItemIndexes?.length && selectedItemIndexes?.length > selectLimit) {
+    console.warn("The number of selected items exceeds the limit");
+    return null;
+  }
+
+  const isTabActive = (index: any) => {
+    return selectedItemIndex === index || selectedItemIndexes?.includes(index)
+      ? "white"
+      : "lightGray";
+  };
+
+  return (
+    <Box
+      color="lightGray"
+      direction="row"
+      display="flex"
+      height={40}
+      justifyContent="between"
+      padding={1}
+      rounding={3}
+      width="100%"
+    >
+      {items.map((item, index) => (
+        <Box
+          key={index}
+          color={isTabActive(index)}
+          height="100%"
+          paddingX={2}
+          rounding={3}
+          width={`${100 / items.length}%`}
+        >
           <Box
-            key={index}
-            color={this.props.selectedItemIndex === index ? "white" : "lightGray"}
+            alignItems="center"
+            display="flex"
             height="100%"
-            rounding={3}
-            width={`${100 / this.props.items.length}%`}
+            justifyContent="center"
+            width="100%"
+            onClick={() => {
+              if (multiselect) {
+                if (selectedItemIndexes?.includes(index)) {
+                  onChange({activeIndex: selectedItemIndexes.filter((i) => i !== index)});
+                } else {
+                  const reversed = selectedItemIndexes?.reverse();
+                  reversed?.splice(1, 1);
+                  reversed?.push(index);
+                  onChange({activeIndex: reversed as number[]});
+                }
+              } else {
+                onChange({activeIndex: index});
+              }
+            }}
           >
-            <Box
-              alignItems="center"
-              display="flex"
-              height="100%"
-              justifyContent="center"
-              width="100%"
-              onClick={() => this.props.onChange({activeIndex: index})}
-            >
-              {this.renderItem(item)}
-            </Box>
+            {renderItem(item)}
           </Box>
-        ))}
-      </Box>
-    );
-  }
-}
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/SplitPage.tsx

@@ -1,80 +1,103 @@
-import React from "react";
-import {ListRenderItemInfo, View} from "react-native";
+import React, {Children, ReactChild, ReactElement, useState} from "react";
+import {ListRenderItemInfo, ScrollView, View} from "react-native";
 
 import {Box} from "./Box";
-import {Color} from "./Common";
+import {Color, SPACING} 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";
 
 interface SplitPageProps {
+  children?: ReactChild | ReactChild[] | null;
+  tabs?: string[];
   // TODO: figure out navigation
-  navigation: any;
+  navigation?: any;
   loading?: boolean;
   color?: Color;
   keyboardOffset?: number;
-  rightButton?: string;
-  rightButtonOnClick?: () => void;
-  renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => React.ReactElement | null;
-  renderListViewHeader?: () => React.ReactElement | null;
-  renderContent: (index?: number) => React.ReactElement | null;
+  renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => ReactElement | null;
+  renderListViewHeader?: () => ReactElement | null;
+  renderContent?: (index?: number) => ReactElement | ReactElement[] | null;
   listViewData: any[];
   listViewExtraData?: any;
   listViewWidth?: number;
-}
-
-interface SplitPageState {
-  selectedId?: number;
+  renderChild?: () => ReactChild;
 }
 
 // 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 class SplitPage extends React.Component<SplitPageProps, SplitPageState> {
-  state = {selectedId: undefined};
+export const SplitPage = ({
+  children,
+  tabs = [],
+  loading = false,
+  color,
+  keyboardOffset,
+  renderListViewItem,
+  renderListViewHeader,
+  renderContent,
+  listViewData,
+  listViewExtraData,
+  listViewWidth,
+}: SplitPageProps) => {
+  const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
+  const [activeTabs, setActiveTabs] = useState<number[]>(tabs.length > 2 ? [0, 1] : []);
+
+  const elementArray = Children.toArray(children);
+
+  if (!children && !renderContent) {
+    console.warn("A child node is required");
+    return null;
+  }
 
-  actionSheetRef: React.RefObject<any> = React.createRef();
+  if (Children.count(children) > 2 && Children.count(children) !== tabs.length) {
+    console.warn("There must be a tab for each child");
+    return null;
+  }
 
-  renderItem = (itemInfo: ListRenderItemInfo<any>) => {
+  const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
     return (
       <Box
         onClick={() => {
-          this.setState({selectedId: itemInfo.index});
+          setSelectedId(itemInfo.index);
         }}
       >
-        {this.props.renderListViewItem(itemInfo)}
+        {renderListViewItem(itemInfo)}
       </Box>
     );
   };
 
-  renderList = () => {
-    if (!mediaQueryLargerThan("sm") && this.state.selectedId) {
+  const renderList = () => {
+    if (!mediaQueryLargerThan("sm") && selectedId) {
       return null;
     }
     return (
       <View
         style={{
-          width: mediaQueryLargerThan("sm") ? this.props.listViewWidth ?? 300 : "100%",
-          maxWidth: mediaQueryLargerThan("sm") ? this.props.listViewWidth ?? 300 : "100%",
+          width: mediaQueryLargerThan("sm") ? listViewWidth ?? 300 : "100%",
+          maxWidth: mediaQueryLargerThan("sm") ? listViewWidth ?? 300 : "100%",
           flexGrow: 1,
           flexShrink: 0,
           display: "flex",
+          paddingTop: "12px",
+          paddingBottom: "12px",
           flexDirection: "column",
         }}
       >
-        {this.props.renderListViewHeader && this.props.renderListViewHeader()}
+        {renderListViewHeader && renderListViewHeader()}
         <FlatList
-          data={this.props.listViewData}
-          extraData={this.props.listViewExtraData}
+          data={listViewData}
+          extraData={listViewExtraData}
           keyExtractor={(item) => item.id}
-          renderItem={this.renderItem}
+          renderItem={renderItem}
         />
       </View>
     );
   };
 
-  renderListContent = () => {
+  const renderListContent = () => {
     return (
       <Box flex="grow" padding={2}>
         {!mediaQueryLargerThan("sm") && (
@@ -83,31 +106,106 @@ export class SplitPage extends React.Component<SplitPageProps, SplitPageState> {
               accessibilityLabel="close"
               icon="times"
               iconColor="darkGray"
-              onClick={() => this.setState({selectedId: undefined})}
+              onClick={() => setSelectedId(undefined)}
             />
           </Box>
         )}
-        {this.props.renderContent(this.state.selectedId)}
+        {renderContent && renderContent(selectedId)}
       </Box>
     );
   };
 
-  render() {
-    return (
-      <Box
-        avoidKeyboard
-        color={this.props.color || "lightGray"}
-        direction="row"
-        display="flex"
-        flex="grow"
-        height="100%"
-        keyboardOffset={this.props.keyboardOffset}
-        width="100%"
-      >
-        {this.props.loading === true && <Spinner color={Unifier.theme.darkGray as any} size="md" />}
-        {this.renderList()}
-        {this.renderListContent()}
-      </Box>
-    );
-  }
-}
+  const renderChildrenContent = () => {
+    if (Array.isArray(children) && children.length > 2) {
+      return (
+        <View
+          style={{
+            flex: 1,
+            width: "100%",
+            height: "100%",
+            alignItems: "center",
+          }}
+        >
+          <Box paddingX={4} paddingY={2} width="100%">
+            <SegmentedControl
+              items={tabs}
+              multiselect
+              selectLimit={tabs.length}
+              selectedItemIndexes={activeTabs}
+              onChange={(index) => {
+                setActiveTabs([...(index.activeIndex as number[])]);
+              }}
+            />
+          </Box>
+          <Box
+            direction="row"
+            flex="grow"
+            height="100%"
+            paddingX={2}
+            width={activeTabs.length > 1 ? "100%" : "60%"}
+          >
+            {activeTabs.map((tabIndex) => {
+              return (
+                <ScrollView
+                  key={tabIndex}
+                  contentContainerStyle={{
+                    flex: 1,
+                  }}
+                  style={{
+                    flex: 1,
+                    width: "60%",
+                    padding: 3 * SPACING,
+                    height: "100%",
+                  }}
+                >
+                  {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%",
+                  padding: 3 * SPACING,
+                  height: "100%",
+                }}
+              >
+                {element}
+              </ScrollView>
+            );
+          })}
+        </Box>
+      );
+    }
+  };
+
+  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()}
+    </Box>
+  );
+};