ferns-ui 0.34.0 → 0.35.0

package/src/Avatar.tsx

@@ -2,11 +2,13 @@
 import {ImageResult, manipulateAsync, SaveFormat} from "expo-image-manipulator";
 import {launchImageLibraryAsync, MediaTypeOptions} from "expo-image-picker";
 import React, {useEffect, useState} from "react";
-import {Image, ImageResizeMode, Text, View} from "react-native";
+import {Image, ImageResizeMode, Platform, Text, View} from "react-native";
 
 import {Box} from "./Box";
-import {AllColors, iconSizeToNumber} from "./Common";
+import {AllColors, IconName, UnsignedUpTo12} from "./Common";
 import {Icon} from "./Icon";
+import {isMobileDevice} from "./MediaQuery";
+import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 
 const sizes = {
@@ -17,6 +19,37 @@ const sizes = {
   xl: 120,
 };
 
+const sizeIconPadding: {[id: string]: UnsignedUpTo12} = {
+  xs: 0,
+  sm: 0,
+  md: 1,
+  lg: 1,
+  xl: 2,
+};
+
+const statusIcons: {[id: string]: {icon: IconName; color: AllColors; label: string}} = {
+  online: {icon: "circle", color: "green", label: "Online"},
+  offline: {icon: "circle", color: "gray", label: "Offline"},
+  doNotDisturb: {icon: "minus-circle", color: "red", label: "Do Not Disturb"},
+  away: {icon: "moon", color: "orange", label: "Away"},
+  meeting: {icon: "calendar", color: "orange", label: "In a Meeting"},
+  vacation: {icon: "plane", color: "orange", label: "On Vacation"},
+  sick: {icon: "clinic-medical", color: "orange", label: "Sick"},
+  outOfOffice: {icon: "clock", color: "orange", label: "Out of Office"},
+  commuting: {icon: "car", color: "orange", label: "Commuting"},
+};
+
+export type AvatarStatus =
+  | "online"
+  | "offline"
+  | "doNotDisturb"
+  | "away"
+  | "meeting"
+  | "vacation"
+  | "sick"
+  | "outOfOffice"
+  | "commuting";
+
 interface AvatarProps {
   // Color for the background of the circle when no src picture is present.
   backgroundColor?: AllColors;
@@ -67,10 +100,24 @@ interface AvatarProps {
    * The image format that the image will be saved as after any edits by the expo-image-manipulator
    */
   avatarImageFormat?: SaveFormat;
+  /**
+   * The status of the user to display with the avatar.
+   */
+  status?: AvatarStatus;
+  /**
+   * If true, the status indicator will show a mobile icon instead of a dot, if status is one of
+   * "online", "away", "offline", or "doNotDisturb". Will show the normal status icon in other cases.
+   */
+  statusMobile?: boolean;
+  /**
+   * Text to show when hovering over the avatar image. Only works on web.
+   */
+  statusText?: string;
 }
 
 export const Avatar = (props: AvatarProps): React.ReactElement => {
   const [isImageLoaded, setIsImageLoaded] = useState(true);
+  const [hovered, setHovered] = useState(false);
   const [src, setSrc] = useState(props.src ?? undefined);
   const {
     name,
@@ -135,56 +182,136 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
     );
   };
 
-  return (
-    <Box
-      border={outline ? "white" : undefined}
-      height={height}
-      overflow="hidden"
-      position="relative"
-      rounding="circle"
-      width={editAvatarImage ? width + iconSizeToNumber(size) : width}
-    >
-      {editAvatarImage && (
-        <Box bottom position="absolute" right zIndex={5} onClick={pickImage}>
-          <Icon color="black" name="edit" size={size} />
-        </Box>
-      )}
-      {src && isImageLoaded ? (
-        // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
-        // unrounded box around the Image.
-        <Image
-          resizeMode={imageFit as ImageResizeMode}
-          source={{uri: src, cache: "force-cache"}}
-          style={{
-            borderRadius: radius,
-            height,
-            width,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            overflow: "hidden",
-          }}
-          onError={handleImageError}
-        />
-      ) : (
-        <View
-          style={{
-            height,
-            width,
-            borderRadius: radius,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: props.backgroundColor
-              ? Unifier.theme[props.backgroundColor]
-              : Unifier.theme.gray,
+  const renderEditIcon = () => {
+    if (editAvatarImage && hovered && Platform.OS === "web") {
+      return (
+        <Box
+          alignItems="center"
+          dangerouslySetInlineStyle={{
+            __style: {backgroundColor: "rgba(255,255,255,0.5)", borderRadius: radius},
           }}
+          height={height}
+          justifyContent="center"
+          position="absolute"
+          // width={width}
+          zIndex={5}
+          onClick={pickImage}
+        >
+          <Icon color="darkGray" name="edit" size={size} />
+        </Box>
+      );
+    } else if (editAvatarImage && Platform.OS !== "web") {
+      return (
+        <Box
+          bottom
+          left={Boolean(props.status)}
+          paddingX={sizeIconPadding[size]}
+          position="absolute"
+          right={!Boolean(props.status)}
+          zIndex={5}
+          onClick={pickImage}
         >
-          <Text style={{fontSize, color: props.textColor ?? Unifier.theme.darkGray}}>
-            {computedInitials}
-          </Text>
-        </View>
-      )}
+          <Icon color="darkGray" name="edit" size={size} />
+        </Box>
+      );
+    }
+    return null;
+  };
+
+  const renderStatusIcon = () => {
+    if (!props.status) {
+      return null;
+    }
+    // eslint-disable-next-line prefer-const
+    let {icon, color} = statusIcons[props.status];
+    if (
+      props.statusMobile &&
+      ["online", "away", "offline", "doNotDisturb"].includes(props.status)
+    ) {
+      icon = "mobile-alt";
+    }
+    if (!icon || !color) {
+      console.warn(`Avatar: Invalid status ${props.status}`);
+      return null;
+    }
+    return (
+      <Box bottom paddingX={sizeIconPadding[size]} position="absolute" right zIndex={5}>
+        <Icon color={color} name={icon} size={size} />
+      </Box>
+    );
+  };
+
+  const avatar = (
+    <Box height={height} position="relative" width={width}>
+      <Box
+        border={outline ? "white" : undefined}
+        height={height}
+        overflow="hidden"
+        position="relative"
+        rounding="circle"
+        width={width}
+        onHoverEnd={() => setHovered(false)}
+        onHoverStart={() => setHovered(true)}
+      >
+        {src && isImageLoaded ? (
+          // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
+          // unrounded box around the Image.
+          <Image
+            resizeMode={imageFit as ImageResizeMode}
+            source={{uri: src, cache: "force-cache"}}
+            style={{
+              borderRadius: radius,
+              height,
+              width,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+            }}
+            onError={handleImageError}
+          />
+        ) : (
+          <View
+            style={{
+              height,
+              width,
+              borderRadius: radius,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: props.backgroundColor
+                ? Unifier.theme[props.backgroundColor]
+                : Unifier.theme.gray,
+            }}
+          >
+            <Text style={{fontSize, color: props.textColor ?? Unifier.theme.darkGray}}>
+              {computedInitials}
+            </Text>
+          </View>
+        )}
+      </Box>
+      {/* Needs to come after the image so it renders on top. */}
+      {renderEditIcon()}
+      {renderStatusIcon()}
     </Box>
   );
+
+  let status = props.statusText;
+  if (!status && props.status) {
+    status = statusIcons[props.status]?.label;
+  }
+
+  if (status) {
+    // Need to wrap the tooltip so it doesn't expand to 100% width and render the tooltip off. Don't show the
+    // tooltips on mobile because they intercept the edit avatar clicks.
+    return (
+      <Box width={width}>
+        <Tooltip idealDirection="top" text={isMobileDevice() ? undefined : status}>
+          {avatar}
+        </Tooltip>
+      </Box>
+    );
+  } else {
+    return avatar;
+  }
 };

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;
 }
 
@@ -1997,6 +1995,8 @@ export interface NavigatorProps {
 
 export type TooltipDirection = "top" | "bottom" | "left" | "right";
 
+export type IndicatorDirection = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+
 export interface PillProps {
   text: string;
   color: AllColors;

package/src/IconButton.tsx

@@ -1,13 +1,15 @@
 import React, {forwardRef, useState} from "react";
-import {Platform, Pressable} from "react-native";
+import {Platform, Pressable, View, ViewStyle} from "react-native";
 
 import {
+  AllColors,
   ButtonColor,
   Color,
   IconName,
   IconPrefix,
   IconSize,
   iconSizeToNumber,
+  IndicatorDirection,
   ThemeColor,
   TooltipDirection,
 } from "./Common";
@@ -34,6 +36,8 @@ export interface IconButtonProps {
     text: string;
     idealDirection?: TooltipDirection;
   };
+  indicator?: boolean;
+  indicatorStyle?: {position: IndicatorDirection; color: AllColors};
 }
 
 // eslint-disable-next-line react/display-name
@@ -50,6 +54,8 @@ export const IconButton = forwardRef(
       confirmationText = "Are you sure you want to continue?",
       confirmationHeading = "Confirm",
       tooltip,
+      indicator,
+      indicatorStyle = {position: "bottomRight", color: "primary"},
     }: IconButtonProps,
     ref
   ) => {
@@ -65,6 +71,15 @@ export const IconButton = forwardRef(
       color = Unifier.theme[bgColor];
     }
 
+    const IndicatorPosition = {
+      bottomRight: {bottom: "20%", right: "20%"},
+      bottomLeft: {bottom: "20%", left: "20%"},
+      topRight: {top: "20%", right: "20%"},
+      topLeft: {top: "20%", left: "20%"},
+    };
+
+    const indicatorPosition = {position: "absolute", ...IndicatorPosition[indicatorStyle.position]};
+
     const renderConfirmation = () => {
       return (
         <Modal
@@ -117,7 +132,18 @@ export const IconButton = forwardRef(
             }}
           >
             <Icon color={iconColor} name={icon} prefix={prefix || "fas"} size={size} />
+            {indicator && (
+              <View style={indicatorPosition as ViewStyle}>
+                <Icon
+                  color={indicatorStyle.color}
+                  name="circle"
+                  prefix={prefix || "fas"}
+                  size="sm"
+                />
+              </View>
+            )}
           </Pressable>
+
           {Boolean(withConfirmation) && renderConfirmation()}
         </>
       );

package/src/Switch.tsx

@@ -7,7 +7,7 @@ import {WithLabel} from "./WithLabel";
 export class Switch extends React.Component<SwitchProps, {}> {
   render() {
     return (
-      <WithLabel labelInline labelJustifyContent="between" {...this.props}>
+      <WithLabel labelAlignItems="center" labelInline labelJustifyContent="between" {...this.props}>
         <NativeSwitch
           disabled={this.props.disabled}
           value={this.props.switched}

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();