ferns-ui 0.34.1 → 0.35.0

package/src/Box.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+/* eslint-disable react/prop-types */
+import React, {useImperativeHandle} from "react";
 import {
   KeyboardAvoidingView,
   Platform,
@@ -43,8 +44,31 @@ const ALIGN_SELF = {
 
 const BORDER_WIDTH = 1;
 
-export class Box extends React.Component<BoxProps, {}> {
-  BOX_STYLE_MAP: {
+// eslint-disable-next-line react/display-name
+export const Box = React.forwardRef((props: BoxProps, ref) => {
+  useImperativeHandle(ref, () => ({
+    scrollToEnd: () => {
+      if (scrollRef && scrollRef.current) {
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
+        // avoid this, but it works well enough.
+        setTimeout(() => {
+          scrollRef && scrollRef.current && (scrollRef.current as any).scrollToEnd();
+        }, 50);
+      }
+    },
+
+    scrollTo: (y: number) => {
+      if (scrollRef && scrollRef.current) {
+        // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
+        // avoid this, but it works well enough.
+        setTimeout(() => {
+          scrollRef && scrollRef.current && (scrollRef.current as any).scrollTo({y});
+        }, 50);
+      }
+    },
+  }));
+
+  const BOX_STYLE_MAP: {
     [prop: string]: (
       value: any,
       all: {[prop: string]: any}
@@ -78,7 +102,7 @@ export class Box extends React.Component<BoxProps, {}> {
     },
     justifyContent: (value: JustifyContent) => ({justifyContent: ALIGN_CONTENT[value]}),
     height: (value) => {
-      if (this.props.border && !isNaN(Number(value))) {
+      if (props.border && !isNaN(Number(value))) {
         return {height: Number(value) + 2 * 2};
       } else {
         return {height: value};
@@ -124,7 +148,7 @@ export class Box extends React.Component<BoxProps, {}> {
       return {overflow: value};
     },
     width: (value) => {
-      if (this.props.border && !isNaN(Number(value))) {
+      if (props.border && !isNaN(Number(value))) {
         return {width: Number(value) + 2 * 2};
       } else {
         return {width: value};
@@ -181,119 +205,104 @@ export class Box extends React.Component<BoxProps, {}> {
     },
   };
 
-  scrollRef = React.createRef();
-
-  constructor(props: BoxProps) {
-    super(props);
-    if (props.scrollRef) {
-      this.scrollRef = props.scrollRef;
-    }
-  }
-
-  public scrollToEnd = () => {
-    if (this.scrollRef && this.scrollRef.current) {
-      // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
-      // avoid this, but it works well enough.
-      setTimeout(() => {
-        this.scrollRef && this.scrollRef.current && (this.scrollRef.current as any).scrollToEnd();
-      }, 50);
-    }
-  };
-
-  public scrollTo = (y: number) => {
-    if (this.scrollRef && this.scrollRef.current) {
-      // HACK HACK HACK...but it works. Probably need to do some onContentSizeChange or onLayout to
-      // avoid this, but it works well enough.
-      setTimeout(() => {
-        this.scrollRef && this.scrollRef.current && (this.scrollRef.current as any).scrollTo({y});
-      }, 50);
-    }
-  };
+  const scrollRef = props.scrollRef ?? React.createRef();
 
-  propsToStyle(): any {
+  const propsToStyle = (): any => {
     let style: any = {};
-    for (const prop of Object.keys(this.props)) {
-      const value = (this.props as any)[prop];
-      if (this.BOX_STYLE_MAP[prop]) {
-        Object.assign(style, this.BOX_STYLE_MAP[prop](value, this.props));
+    for (const prop of Object.keys(props)) {
+      const value = (props as any)[prop];
+      if (BOX_STYLE_MAP[prop]) {
+        Object.assign(style, BOX_STYLE_MAP[prop](value, props));
       } else if (prop !== "children" && prop !== "onClick") {
         style[prop] = value;
         // console.warn(`Box: unknown property ${prop}`);
       }
     }
 
-    if (this.props.wrap && this.props.alignItems) {
+    if (props.wrap && props.alignItems) {
       console.warn("React Native doesn't support wrap and alignItems together.");
     }
 
     // Finally, dangerously set overrides.
-    if (this.props.dangerouslySetInlineStyle) {
-      style = {...style, ...this.props.dangerouslySetInlineStyle.__style};
+    if (props.dangerouslySetInlineStyle) {
+      style = {...style, ...props.dangerouslySetInlineStyle.__style};
     }
 
     return style;
-  }
+  };
 
-  render() {
-    let box;
+  const onHoverIn = () => {
+    props.onHoverStart?.();
+  };
 
-    if (this.props.onClick) {
-      box = (
-        <Pressable
-          style={this.propsToStyle()}
-          testID={this.props.testID ? `${this.props.testID}-clickable` : undefined}
-          // TODO: refactor this better..
-          onLayout={this.props.onLayout}
-          onPress={() => {
-            Unifier.utils.haptic();
-            this.props.onClick();
-          }}
-        >
-          {this.props.children}
-        </Pressable>
-      );
-    } else {
-      box = (
-        <View style={this.propsToStyle()} testID={this.props.testID}>
-          {this.props.children}
-        </View>
-      );
-    }
+  const onHoverOut = () => {
+    props.onHoverEnd?.();
+  };
 
-    if (this.props.scroll) {
-      const {justifyContent, alignContent, alignItems, ...scrollStyle} = this.propsToStyle();
+  let box;
 
-      box = (
-        <ScrollView
-          ref={this.props.scrollRef || this.scrollRef}
-          contentContainerStyle={{justifyContent, alignContent, alignItems}}
-          horizontal={this.props.overflow === "scrollX"}
-          keyboardShouldPersistTaps="handled"
-          nestedScrollEnabled
-          scrollEventThrottle={50}
-          style={scrollStyle}
-          onScroll={(event) => {
-            if (this.props.onScroll && event) {
-              this.props.onScroll(event.nativeEvent.contentOffset.y);
-            }
-          }}
-        >
-          {box}
-        </ScrollView>
-      );
-    }
+  if (props.onClick) {
+    box = (
+      <Pressable
+        style={propsToStyle()}
+        testID={props.testID ? `${props.testID}-clickable` : undefined}
+        onLayout={props.onLayout}
+        onPointerEnter={onHoverIn}
+        onPointerLeave={onHoverOut}
+        onPress={() => {
+          Unifier.utils.haptic();
+          props.onClick!();
+        }}
+      >
+        {props.children}
+      </Pressable>
+    );
+  } else {
+    box = (
+      <View
+        style={propsToStyle()}
+        testID={props.testID}
+        onPointerEnter={onHoverIn}
+        onPointerLeave={onHoverOut}
+      >
+        {props.children}
+      </View>
+    );
+  }
 
-    if (this.props.avoidKeyboard) {
-      box = (
-        <KeyboardAvoidingView
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-          keyboardVerticalOffset={this.props.keyboardOffset}
-          style={{flex: 1, display: "flex"}}
-        >
-          <SafeAreaView style={{flex: 1, display: "flex"}}>{box}</SafeAreaView>
-        </KeyboardAvoidingView>
-      );
-    }
-    return box;
+  if (props.scroll) {
+    const {justifyContent, alignContent, alignItems, ...scrollStyle} = propsToStyle();
+
+    box = (
+      <ScrollView
+        ref={props.scrollRef || scrollRef}
+        contentContainerStyle={{justifyContent, alignContent, alignItems}}
+        horizontal={props.overflow === "scrollX"}
+        keyboardShouldPersistTaps="handled"
+        nestedScrollEnabled
+        scrollEventThrottle={50}
+        style={scrollStyle}
+        onScroll={(event) => {
+          if (props.onScroll && event) {
+            props.onScroll(event.nativeEvent.contentOffset.y);
+          }
+        }}
+      >
+        {box}
+      </ScrollView>
+    );
+  }
+
+  if (props.avoidKeyboard) {
+    box = (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={props.keyboardOffset}
+        style={{flex: 1, display: "flex"}}
+      >
+        <SafeAreaView style={{flex: 1, display: "flex"}}>{box}</SafeAreaView>
+      </KeyboardAvoidingView>
+    );
   }
-}
+  return box;
+});

package/src/Common.ts

@@ -1,4 +1,4 @@
-import {ReactElement, ReactNode, SyntheticEvent} from "react";
+import React, {ReactElement, ReactNode, SyntheticEvent} from "react";
 import {ListRenderItemInfo} from "react-native";
 
 export interface BaseProfile {
@@ -1932,14 +1932,12 @@ export interface BoxProps {
   wrap?: boolean;
   zIndex?: number | "auto";
 
-  // Pattern additions
-  onClick?: any;
-  className?: any;
+  onClick?: () => void | Promise<void>;
+  className?: string;
   style?: any;
-
-  // Pattern Addition. Adds keyboard aware scrollview
+  onHoverStart?: () => void | Promise<void>;
+  onHoverEnd?: () => void | Promise<void>;
   scroll?: boolean;
-  // Pattern Addition. Shadows!
   shadow?: boolean;
   border?: AllColors;
   borderBottom?: AllColors;
@@ -1949,9 +1947,9 @@ export interface BoxProps {
 
   avoidKeyboard?: boolean;
   keyboardOffset?: number;
-  scrollRef?: any;
+  scrollRef?: React.RefObject<any>;
   onScroll?: (offsetY: number) => void;
-  onLayout?: (event: any) => void;
+  onLayout?: (event: LayoutChangeEvent) => void;
   testID?: string;
 }
 

package/src/TableRow.tsx

@@ -40,7 +40,7 @@ export function TableRow({
 }: Props): React.ReactElement {
   const [isExpanded, setIsExpanded] = React.useState(expanded || false);
   const {columns, hasDrawerContents} = useTableContext();
-  const rowRef = useRef<Box>(null);
+  const rowRef = useRef<typeof Box>(null);
 
   const renderCellWithColumnIndex = (child: React.ReactNode, index: number) => {
     if (!columns[index]) {

package/src/TextField.tsx

@@ -190,7 +190,7 @@ export function TextField({
     } else if (type === "height") {
       weightActionSheetRef?.current?.show();
     }
-  }, [decimalRangeActionSheetRef, numberRangeActionSheetRef, type, weightActionSheetRef]);
+  }, [decimalRangeActionSheetRef, disabled, numberRangeActionSheetRef, type, weightActionSheetRef]);
 
   let displayValue = value;
   if (displayValue) {
@@ -297,8 +297,8 @@ export function TextField({
                 if (!isHandledByModal) {
                   setFocused(false);
                 }
-                if (onBlur && value) {
-                  onBlur({value});
+                if (onBlur) {
+                  onBlur({value: value ?? ""});
                 }
                 // if (type === "date") {
                 //   actionSheetRef?.current?.hide();

package/src/Tooltip.tsx

@@ -118,7 +118,8 @@ const getTooltipPosition = ({
 
 interface TooltipProps {
   children: React.ReactElement;
-  text: string;
+  // If text is undefined, the children will be rendered without a tooltip.
+  text?: string;
   idealDirection?: "top" | "bottom" | "left" | "right";
   bgColor?: "white" | "lightGray" | "gray" | "darkGray";
 }
@@ -214,6 +215,12 @@ export const Tooltip = (props: TooltipProps) => {
     }, [children.props]),
   };
 
+  // Allow disabling tooltips when there is no string, otherwise you need to wrap the children in a function to
+  // determine if there should be a tooltip or not, which gets messy.
+  if (!text) {
+    return children;
+  }
+
   return (
     <>
       {visible && (

package/src/Unifier.ts

@@ -2,10 +2,11 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as Clipboard from "expo-clipboard";
 import * as Font from "expo-font";
 import {FontSource} from "expo-font";
 import * as Haptics from "expo-haptics";
-import {Clipboard, Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
+import {Dimensions, Keyboard, Linking, Platform, Vibration} from "react-native";
 
 import {PermissionKind, UnifiedTheme} from "./Common";
 import {requestPermissions} from "./Permissions";