ferns-ui 0.32.3 → 0.34.0

package/src/Button.tsx

@@ -1,6 +1,6 @@
 import debounce from "lodash/debounce";
 import React, {useState} from "react";
-import {ActivityIndicator, TouchableOpacity, View} from "react-native";
+import {ActivityIndicator, Pressable, View} from "react-native";
 
 import {Box} from "./Box";
 import {ButtonColor, Color, IconName, IconPrefix, TooltipDirection, UnifiedTheme} from "./Common";
@@ -134,7 +134,7 @@ export function Button({
   const renderButton = () => {
     return (
       <View>
-        <TouchableOpacity
+        <Pressable
           disabled={disabled || loading}
           style={{
             alignSelf: inline === true ? undefined : "stretch",
@@ -201,7 +201,7 @@ export function Button({
               <ActivityIndicator color={getTextColor(color as Color)} size="small" />
             </Box>
           )}
-        </TouchableOpacity>
+        </Pressable>
         {Boolean(withConfirmation) && renderConfirmation()}
       </View>
     );

package/src/Common.ts

@@ -1974,6 +1974,7 @@ export type DrawerDirection = "left" | "right" | "bottom" | "top";
 
 export interface ErrorBoundaryProps {
   onError?: (error: Error, stack: any) => void;
+  children?: ReactNode;
 }
 
 export interface FaceBookButtonProps {
@@ -2140,6 +2141,7 @@ export interface MetaProps {
   itemType?: string;
   key?: string;
   property?: string;
+  children?: ReactNode;
 }
 
 export interface ImageProps {
@@ -2195,6 +2197,7 @@ export interface BodyProps {
   padding?: UnsignedUpTo12;
   height?: number | string;
   avoidKeyboard?: boolean; // default true
+  children?: ReactNode;
 }
 
 export interface ChatPaneProps {

package/src/IconButton.tsx

@@ -1,5 +1,5 @@
 import React, {forwardRef, useState} from "react";
-import {Platform, TouchableOpacity} from "react-native";
+import {Platform, Pressable} from "react-native";
 
 import {
   ButtonColor,
@@ -90,7 +90,7 @@ export const IconButton = forwardRef(
     function renderIconButton(): React.ReactElement {
       return (
         <>
-          <TouchableOpacity
+          <Pressable
             ref={ref as any}
             hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
             style={{
@@ -117,7 +117,7 @@ export const IconButton = forwardRef(
             }}
           >
             <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
-          </TouchableOpacity>
+          </Pressable>
           {Boolean(withConfirmation) && renderConfirmation()}
         </>
       );

package/src/PickerSelect.tsx

@@ -30,6 +30,7 @@ import {
   Keyboard,
   Modal,
   Platform,
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
@@ -191,7 +192,7 @@ export function RNPickerSelect({
   }, [items, placeholder]);
 
   const getSelectedItem = useCallback(
-    (key, val) => {
+    (key: any, val: any) => {
       let idx = options.findIndex((item: any) => {
         if (item.key && key) {
           return isEqual(item.key, key);
@@ -326,7 +327,7 @@ export function RNPickerSelect({
             />
           </TouchableOpacity>
         </View>
-        <TouchableOpacity
+        <Pressable
           hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}
           testID="done_button"
           onPress={() => {
@@ -353,7 +354,7 @@ export function RNPickerSelect({
               {doneText}
             </Text>
           </View>
-        </TouchableOpacity>
+        </Pressable>
       </View>
     );
   };
@@ -406,7 +407,7 @@ export function RNPickerSelect({
   const renderIOS = () => {
     return (
       <View style={[defaultStyles.viewContainer, style.viewContainer]}>
-        <TouchableOpacity
+        <Pressable
           activeOpacity={1}
           style={{
             flexDirection: "row",
@@ -422,7 +423,7 @@ export function RNPickerSelect({
           {...touchableWrapperProps}
         >
           {renderTextInputOrChildren()}
-        </TouchableOpacity>
+        </Pressable>
         <Modal
           animationType={animationType}
           supportedOrientations={["portrait", "landscape"]}
@@ -432,7 +433,7 @@ export function RNPickerSelect({
           onOrientationChange={onOrientationChange}
           {...modalProps}
         >
-          <TouchableOpacity
+          <Pressable
             style={[defaultStyles.modalViewTop, style.modalViewTop]}
             testID="ios_modal_top"
             onPress={() => {
@@ -462,7 +463,7 @@ export function RNPickerSelect({
   };
 
   const renderAndroidHeadless = () => {
-    const Component: any = fixAndroidTouchableBug ? View : TouchableOpacity;
+    const Component: any = fixAndroidTouchableBug ? View : Pressable;
     return (
       <Component
         activeOpacity={1}

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

@@ -256,7 +256,7 @@ export const SplitPage = ({
               style={{
                 width: width - 8,
                 padding: 4,
-                height: elementArray.length > 1 ? "90vh" : "100vh",
+                height: elementArray.length > 1 ? "90%" : "100%",
                 paddingBottom: bottomNavBarHeight,
               }}
             >

package/src/Table.tsx

@@ -1,4 +1,5 @@
 import React, {Children, ReactElement} from "react";
+import {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 
 import {ScrollView} from "./ScrollView";
 import {ColumnSortInterface, TableContextProvider} from "./tableContext";
@@ -19,7 +20,7 @@ interface TableProps {
   /**
    * Use numbers for pixels: `maxHeight={100}` and strings for percentages: `maxHeight="100%"`.
    */
-  maxHeight?: number | string;
+  maxHeight?: DimensionValue;
   /**
    * If true, the header will stick to the top of the table when scrolling. Defaults to true.
    */
@@ -47,11 +48,11 @@ export function Table({
   });
 
   // Calculate the total width of the table. If the table has only number widths, calculate a width. Otherwise use 100%.
-  let width: string | number;
+  let width: DimensionValue;
   if (columns.every((column) => typeof column === "number")) {
     width = columns.reduce((acc, curr) => {
       return (acc as number) + (curr as number);
-    }, 0);
+    }, 0) as number;
     if (hasDrawerContents) {
       width = (width as number) + 30;
     }

package/src/Tooltip.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import {forwardRef} from "react";
 import {
   Dimensions,
   LayoutChangeEvent,
@@ -124,8 +123,7 @@ interface TooltipProps {
   bgColor?: "white" | "lightGray" | "gray" | "darkGray";
 }
 
-// eslint-disable-next-line react/display-name
-export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
+export const Tooltip = (props: TooltipProps) => {
   const {text, children, bgColor, idealDirection} = props;
   const hoverDelay = 500;
   const hoverEndDelay = 1500;
@@ -180,7 +178,7 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
     showTooltipTimer.current = setTimeout(() => {
       touched.current = true;
       setVisible(true);
-    }, 100) as unknown as NodeJS.Timeout;
+    }, 100);
   };
 
   const handleHoverIn = () => {
@@ -191,7 +189,7 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
     showTooltipTimer.current = setTimeout(() => {
       touched.current = true;
       setVisible(true);
-    }, hoverDelay) as unknown as NodeJS.Timeout;
+    }, hoverDelay);
   };
 
   const handleHoverOut = () => {
@@ -203,7 +201,7 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
     hideTooltipTimer.current = setTimeout(() => {
       setVisible(false);
       setMeasurement({children: {}, tooltip: {}, measured: false});
-    }, hoverEndDelay) as unknown as NodeJS.Timeout;
+    }, hoverEndDelay);
   };
 
   const mobilePressProps = {
@@ -216,17 +214,6 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
     }, [children.props]),
   };
 
-  const webPressProps = {
-    onHoverIn: () => {
-      handleHoverIn();
-      children.props.onHoverIn?.();
-    },
-    onHoverOut: () => {
-      handleHoverOut();
-      children.props.onHoverOut?.();
-    },
-  };
-
   return (
     <>
       {visible && (
@@ -255,13 +242,21 @@ export const Tooltip = forwardRef((props: TooltipProps, _ref: any) => {
           </Pressable>
         </Portal>
       )}
-      <Pressable
+      <View
         ref={childrenWrapperRef}
+        onPointerEnter={() => {
+          handleHoverIn();
+          children.props.onHoverIn?.();
+        }}
+        onPointerLeave={() => {
+          handleHoverOut();
+          children.props.onHoverOut?.();
+        }}
         onTouchStart={handleTouchStart}
-        {...(isWeb ? webPressProps : mobilePressProps)}
+        {...(!isWeb && mobilePressProps)}
       >
         {children}
-      </Pressable>
+      </View>
     </>
   );
-});
+};

package/src/index.tsx

@@ -56,6 +56,7 @@ export * from "./NumberPickerActionSheet";
 export * from "./ModalSheet";
 export * from "./ProgressBar";
 export * from "./DateTimeField";
+export * from "./SideDrawer";
 export * from "./Table";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";