ferns-ui 0.36.4 → 0.37.0

package/src/ScrollView.tsx

@@ -0,0 +1,2 @@
+import {ScrollView} from "react-native";
+export {ScrollView};

package/src/SegmentedControl.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {SegmentedControlProps} from "./Common";
+import {Text} from "./Text";
+
+export const SegmentedControl = ({
+  items,
+  onChange = () => {},
+  selectedItemIndexes = undefined,
+  selectedItemIndex = undefined,
+  multiselect = false,
+  selectLimit = 1,
+}: SegmentedControlProps) => {
+  const renderItem = (item: string | React.ReactNode) => {
+    return (
+      <Text align="center" 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("Multiple selections not allowed without multiselect flag");
+    return null;
+  }
+
+  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
+            alignItems="center"
+            display="flex"
+            height="100%"
+            justifyContent="center"
+            paddingX={1}
+            width="100%"
+            onClick={() => {
+              if (
+                selectedItemIndexes?.length === selectLimit &&
+                !selectedItemIndexes?.includes(index)
+              ) {
+                return;
+              }
+              if (multiselect) {
+                if (selectedItemIndexes?.includes(index)) {
+                  onChange({activeIndex: selectedItemIndexes.filter((i) => i !== index)});
+                } else {
+                  const currentIndexes = [...(selectedItemIndexes as number[])];
+                  currentIndexes?.push(index);
+                  onChange({activeIndex: currentIndexes?.sort() as number[]});
+                }
+              } else {
+                onChange({activeIndex: index});
+              }
+            }}
+          >
+            {renderItem(item)}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};

package/src/SelectList.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {Platform} from "react-native";
+
+import {FieldWithLabelsProps, StyleProp} from "./Common";
+import {Icon} from "./Icon";
+import {RNPickerSelect} from "./PickerSelect";
+import {Unifier} from "./Unifier";
+import {WithLabel} from "./WithLabel";
+
+// Use "" if you want to have an "unset" value.
+export type SelectListOptions = {label: string; value: string}[];
+export interface SelectListProps extends FieldWithLabelsProps {
+  id?: string;
+  name?: string;
+  options: SelectListOptions;
+  onChange: (value: string) => void;
+  value?: string;
+  disabled?: boolean;
+  size?: "md" | "lg";
+  // TODO: Implement placeholder prop for Select Field for both Android and iOS
+  placeholder?: string;
+  style?: StyleProp;
+}
+
+export function SelectList({
+  options,
+  value,
+  onChange,
+  label,
+  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={() => {
+          // 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={{
+          viewContainer: {
+            flexDirection: style?.flexDirection || "row",
+            justifyContent: style?.justifyContent || "center",
+            alignItems: style?.alignItems || "center",
+            minHeight: style?.minHeight || 50,
+            width: style?.width || "100%",
+            borderColor: style?.borderColor || Unifier.theme.gray,
+            borderWidth: style?.borderWidth || 1,
+            borderRadius: style?.borderRadius || 5,
+            backgroundColor,
+          },
+          inputIOS: {
+            paddingVertical: 12,
+            paddingHorizontal: 10,
+            paddingRight: 30,
+          },
+          iconContainer: {
+            top: 13,
+            right: 10,
+            bottom: 12,
+            paddingLeft: 40,
+          },
+          inputWeb: {
+            // Add padding so the border doesn't mess up layouts
+            paddingHorizontal: style?.paddingHorizontal || 6,
+            paddingVertical: style?.paddingVertical || 4,
+            borderRadius: style?.borderRadius || 5,
+          },
+        }}
+        value={value}
+        onValueChange={onChange}
+      />
+    </WithLabel>
+  );
+}

package/src/SideDrawer.tsx

@@ -0,0 +1,62 @@
+import React, {ReactElement} from "react";
+import {Platform, SafeAreaView, StyleProp, ViewStyle} from "react-native";
+import {Drawer} from "react-native-drawer-layout";
+
+import {isMobileDevice} from "./MediaQuery";
+
+export interface SideDrawerProps {
+  // Position of the drawer relative to the child
+  position?: "right" | "left";
+  // Used to open/hide drawer. Use the onClose and onOpen props to control state
+  isOpen: boolean;
+  // Content within the drawer
+  renderContent: () => ReactElement | ReactElement[];
+  // TODO: Allow the hardware back button on Android to close the SideDrawer
+  onClose?: () => void;
+  onOpen?: () => void;
+  drawerType?: "front" | "back" | "slide" | "permanent";
+  // Content that is wrapped by the drawer. The drawer will use the height of the child it wraps. Can be overwritten via styles prop
+  children?: ReactElement;
+  drawerStyles?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_STYLES: StyleProp<ViewStyle> = {
+  width: Platform.OS === "web" ? "40%" : "95%",
+  backgroundColor: "lightgray",
+  borderWidth: 1,
+  borderColor: "gray",
+  overflow: isMobileDevice() ? undefined : "scroll",
+};
+
+export const SideDrawer = ({
+  position = "left",
+  isOpen,
+  renderContent,
+  onClose = () => {},
+  onOpen = () => {},
+  drawerType = "front",
+  children,
+  drawerStyles = {},
+}: SideDrawerProps): ReactElement => {
+  const renderDrawerContent = (): ReactElement => {
+    return <SafeAreaView>{renderContent()}</SafeAreaView>;
+  };
+
+  return (
+    <Drawer
+      drawerPosition={position}
+      drawerStyle={[
+        DEFAULT_STYLES,
+        drawerStyles,
+        {display: Platform.OS === "web" && !isOpen ? "none" : "flex"},
+      ]}
+      drawerType={drawerType}
+      open={isOpen}
+      renderDrawerContent={renderDrawerContent}
+      onClose={onClose}
+      onOpen={onOpen}
+    >
+      {children}
+    </Drawer>
+  );
+};

package/src/Spinner.tsx

@@ -0,0 +1,20 @@
+import React, {ReactElement, useEffect, useState} from "react";
+import {ActivityIndicator} from "react-native";
+
+import {SpinnerProps} from "./Common";
+
+export function Spinner({size, color}: SpinnerProps): ReactElement | null {
+  const [show, setShow] = useState(false);
+
+  // The delay is for perceived performance. You don't want to show a spinner when you're doing a quick action.
+  useEffect(() => {
+    const timer = setTimeout(() => setShow(true), 300);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!show) {
+    return null;
+  }
+  const spinnerSize: "small" | "large" = size === "sm" ? "small" : "large";
+  return <ActivityIndicator color={color || "darkGray"} size={spinnerSize} />;
+}

package/src/SplitPage.native.tsx

@@ -0,0 +1,160 @@
+// TODO: Update SplitPage native to have desktop UX for tablet sized screens
+import React, {useCallback, useEffect, useState} from "react";
+import flattenChildren from "react-keyed-flatten-children";
+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);
+
+  // flattenChildren is necessary to pull children from a React Fragment. Without this,
+  // splitPage would only recognize the fragment container instead stripping it to render
+  // the children individually
+  const elementArray = flattenChildren(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>
+  );
+};