ferns-ui 0.36.4 → 0.37.0

package/src/IconButton.tsx

@@ -0,0 +1,165 @@
+import React, {forwardRef, useState} from "react";
+import {Platform, Pressable, View, ViewStyle} from "react-native";
+
+import {
+  AllColors,
+  ButtonColor,
+  Color,
+  IconName,
+  IconPrefix,
+  IconSize,
+  iconSizeToNumber,
+  IndicatorDirection,
+  ThemeColor,
+  TooltipDirection,
+} from "./Common";
+import {Icon} from "./Icon";
+import {Modal} from "./Modal";
+import {Text} from "./Text";
+import {Tooltip} from "./Tooltip";
+import {Unifier} from "./Unifier";
+
+export interface IconButtonProps {
+  prefix?: IconPrefix;
+  icon: IconName;
+  accessibilityLabel: string;
+  iconColor: "darkGray" | ButtonColor | ThemeColor | Color;
+  onClick: () => void;
+  size?: IconSize;
+  bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white"; // default transparent
+  disabled?: boolean;
+  selected?: boolean;
+  withConfirmation?: boolean;
+  confirmationText?: string;
+  confirmationHeading?: string;
+  tooltip?: {
+    text: string;
+    idealDirection?: TooltipDirection;
+  };
+  indicator?: boolean;
+  indicatorStyle?: {position: IndicatorDirection; color: AllColors};
+}
+
+// eslint-disable-next-line react/display-name
+export const IconButton = forwardRef(
+  (
+    {
+      prefix,
+      icon,
+      iconColor,
+      onClick,
+      size,
+      bgColor = "transparent",
+      withConfirmation = false,
+      confirmationText = "Are you sure you want to continue?",
+      confirmationHeading = "Confirm",
+      tooltip,
+      indicator,
+      indicatorStyle = {position: "bottomRight", color: "primary"},
+    }: IconButtonProps,
+    ref
+  ) => {
+    const [showConfirmation, setShowConfirmation] = useState(false);
+
+    const opacity = 1;
+    let color: string;
+    if (bgColor === "transparentDarkGray") {
+      color = "rgba(0, 0, 0, 0.5)";
+    } else if (bgColor === "transparent" || !bgColor) {
+      color = "rgba(0, 0, 0, 0.0)";
+    } else {
+      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
+          heading={confirmationHeading}
+          primaryButtonOnClick={() => {
+            onClick();
+            setShowConfirmation(false);
+          }}
+          primaryButtonText="Confirm"
+          secondaryButtonOnClick={(): void => setShowConfirmation(false)}
+          secondaryButtonText="Cancel"
+          size="sm"
+          visible={showConfirmation}
+          onDismiss={(): void => {
+            setShowConfirmation(false);
+          }}
+        >
+          <Text>{confirmationText}</Text>
+        </Modal>
+      );
+    };
+
+    function renderIconButton(): React.ReactElement {
+      return (
+        <>
+          <Pressable
+            ref={ref as any}
+            hitSlop={{top: 10, left: 10, bottom: 10, right: 10}}
+            style={{
+              opacity,
+              backgroundColor: color,
+              borderRadius: 100,
+              // paddingBottom: iconSizeToNumber(size) / 4,
+              // paddingTop: iconSizeToNumber(size) / 4,
+              // paddingLeft: iconSizeToNumber(size) / 2,
+              // paddingRight: iconSizeToNumber(size) / 2,
+              width: iconSizeToNumber(size) * 2.5,
+              height: iconSizeToNumber(size) * 2.5,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+            onPress={() => {
+              Unifier.utils.haptic();
+              if (withConfirmation && !showConfirmation) {
+                setShowConfirmation(true);
+              } else if (onClick) {
+                onClick();
+              }
+            }}
+          >
+            <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()}
+        </>
+      );
+    }
+
+    // Only add for web. This doesn't make much sense for mobile, since the action would be performed for the button
+    // as well as the tooltip appearing.
+    // TODO: Add tooltip info button next to the icon button on mobile.
+    if (tooltip && Platform.OS === "web") {
+      return (
+        <Tooltip idealDirection={tooltip.idealDirection} text={tooltip.text}>
+          {renderIconButton()}
+        </Tooltip>
+      );
+    } else {
+      return renderIconButton();
+    }
+  }
+);

package/src/Image.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {Dimensions, Image as NativeImage} from "react-native";
+
+import {Box} from "./Box";
+import {ImageProps} from "./Common";
+const {width: DEVICE_WIDTH} = Dimensions.get("window");
+
+export class Image extends React.Component<ImageProps, {}> {
+  resizeMode = (fit?: "cover" | "contain" | "none") => {
+    if (!fit || fit === "none") {
+      return undefined;
+    } else {
+      return fit;
+    }
+  };
+
+  width = () => {
+    if (this.props.naturalWidth) {
+      return this.props.naturalWidth;
+    } else if (this.props.fullWidth) {
+      return DEVICE_WIDTH;
+    }
+    throw new Error("Width required for Image");
+  };
+
+  height = () => {
+    if (this.props.naturalWidth) {
+      return this.props.naturalWidth;
+    }
+    return this.width() * (9 / 16);
+  };
+
+  render() {
+    return (
+      <Box color={this.props.color}>
+        <NativeImage
+          resizeMode={this.resizeMode(this.props.fit)}
+          source={{uri: this.props.src, cache: "force-cache"}}
+          style={{
+            height: this.height(),
+            width: this.width(),
+            maxHeight: this.props.maxHeight,
+            maxWidth: this.props.maxWidth,
+            ...this.props.style,
+          }}
+        />
+      </Box>
+    );
+  }
+}

package/src/ImageBackground.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import {ImageBackground as ImageBackgroundNative} from "react-native";
+
+interface ImageBackgroundProps {
+  children?: any;
+  style?: any;
+  source: any;
+}
+
+export class ImageBackground extends React.Component<ImageBackgroundProps, {}> {
+  render() {
+    return <ImageBackgroundNative {...this.props} />;
+  }
+}

package/src/InfoTooltipButton.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import {IconSize} from "./Common";
+import {IconButton} from "./IconButton";
+
+interface InfoTooltipButtonProps {
+  text: string;
+  size?: IconSize;
+}
+
+export function InfoTooltipButton({text, size}: InfoTooltipButtonProps): React.ReactElement {
+  return (
+    <IconButton
+      accessibilityLabel="info"
+      bgColor="transparent"
+      icon="exclamation"
+      iconColor="blue"
+      size={size}
+      tooltip={{text}}
+      onClick={() => {}}
+    />
+  );
+}

package/src/Layer.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import {LayerProps} from "./Common";
+
+interface LayerState {}
+
+// TODO: Flesh out for native.
+export class Layer extends React.Component<LayerProps, LayerState> {
+  constructor(props: LayerProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return this.props.children;
+  }
+}

package/src/Link.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import {LinkProps} from "./Common";
+import {Text} from "./Text";
+
+interface LinkState {}
+
+export class Link extends React.Component<LinkProps, LinkState> {
+  constructor(props: LinkProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return <Text>{this.props.children}</Text>;
+  }
+}

package/src/Mask.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {View} from "react-native";
+
+import {MaskProps, ReactChildren} from "./Common";
+
+export function Mask(props: MaskProps): ReactChildren {
+  if (props.shape === "rounded") {
+    return <View style={{overflow: "hidden", borderRadius: 12}}>{props.children}</View>;
+  } else if (props.shape === "circle") {
+    return <View style={{overflow: "hidden", borderRadius: 1000}}>{props.children}</View>;
+  }
+  if (props.rounding) {
+    const rounding = props.rounding === "circle" ? 100 : props.rounding;
+    // Subtract 1 from rounding because of some very odd rendering.
+    return (
+      <View style={{borderRadius: (rounding - 1) * 4, overflow: "visible"}}>{props.children}</View>
+    );
+  } else {
+    return props.children || null;
+  }
+}

package/src/MediaQuery.ts

@@ -0,0 +1,46 @@
+import {Dimensions} from "react-native";
+
+export function mediaQuery(): "xs" | "sm" | "md" | "lg" {
+  const width = Dimensions.get("window").width;
+  if (width < 576) {
+    return "xs";
+  } else if (width < 768) {
+    return "sm";
+  } else if (width < 1312) {
+    return "md";
+  } else {
+    return "lg";
+  }
+}
+
+export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+  const media = mediaQuery();
+  if (size === "xs") {
+    return true;
+  } else if (size === "sm") {
+    return ["sm", "md", "lg"].includes(media);
+  } else if (size === "md") {
+    return ["md", "lg"].includes(media);
+  } else if (size === "lg") {
+    return ["lg"].includes(media);
+  }
+  return false;
+}
+
+export function mediaQuerySmallerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+  const media = mediaQuery();
+  if (size === "lg") {
+    return true;
+  } else if (size === "md") {
+    return ["xs", "sm", "md"].includes(media);
+  } else if (size === "sm") {
+    return ["xs", "sm"].includes(media);
+  } else if (size === "xs") {
+    return ["xs"].includes(media);
+  }
+  return false;
+}
+
+export function isMobileDevice(): boolean {
+  return !mediaQueryLargerThan("sm");
+}

package/src/Meta.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import {MetaProps} from "./Common";
+
+export class Meta extends React.Component<MetaProps, {}> {
+  render() {
+    return this.props.children || null;
+  }
+}

package/src/Modal.tsx

@@ -0,0 +1,248 @@
+import React, {useEffect, useRef} from "react";
+import {Dimensions, Modal as RNModal} from "react-native";
+import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {Heading} from "./Heading";
+import {IconButton} from "./IconButton";
+import {isMobileDevice} from "./MediaQuery";
+import {Text} from "./Text";
+
+interface ModalProps {
+  onDismiss: () => void;
+  visible: boolean;
+  // Alignment of the header. Default is "center".
+  align?: "center" | "start";
+  // Element to render in the middle part of the modal.
+  children?: React.ReactElement;
+  // Element to render in the bottom of the modal. This takes precedence over primaryButton and secondaryButton.
+  footer?: React.ReactElement;
+  heading?: string;
+  size?: "sm" | "md" | "lg";
+  subHeading?: string;
+  // Renders a primary colored button all the way to the right in the footer, if no footer prop is provided.
+  primaryButtonText?: string;
+  primaryButtonOnClick?: (value?: any) => void;
+  primaryButtonDisabled?: boolean;
+  // Renders a gray button to the left of the primary button in the footer, if no footer prop is provided.
+  // Requires primaryButtonText to be defined, but is not required itself.
+  secondaryButtonText?: string;
+  secondaryButtonOnClick?: (value?: any) => void;
+  // Whether to show a close button in the upper left of modals or action sheets.
+  showClose?: boolean;
+}
+
+export const Modal = ({
+  onDismiss,
+  visible,
+  align = "center",
+  children,
+  footer,
+  heading,
+  size,
+  subHeading,
+  primaryButtonText,
+  primaryButtonOnClick,
+  primaryButtonDisabled = false,
+  secondaryButtonText,
+  secondaryButtonOnClick,
+  showClose = false,
+}: ModalProps): React.ReactElement => {
+  const actionSheetRef = useRef<ActionSheetRef>(null);
+
+  if (subHeading && !heading) {
+    throw new Error("Cannot render Modal with subHeading and no heading");
+  }
+  if (!footer && !primaryButtonText && !secondaryButtonText && !showClose) {
+    throw new Error(
+      "Cannot render Modal without footer, primaryButtonText, secondaryButtonText, or showClose"
+    );
+  }
+
+  let sizePx: string | number = 540;
+  if (size === "md") {
+    sizePx = 720;
+  } else if (size === "lg") {
+    sizePx = 900;
+  }
+
+  // Adjust size for small screens
+  if (sizePx > Dimensions.get("window").width) {
+    sizePx = "90%";
+  }
+
+  // Modal uses a visible prop, but ActionSheet uses a setModalVisible method on a reference.
+  // Open the action sheet ref when the visible prop changes.
+  useEffect(() => {
+    if (actionSheetRef.current) {
+      actionSheetRef.current.setModalVisible(visible);
+    }
+  }, [visible, actionSheetRef]);
+
+  const renderClose = (): React.ReactElement | null => {
+    if (!showClose) {
+      return null;
+    }
+    return (
+      <IconButton
+        accessibilityLabel="close"
+        bgColor="white"
+        icon="times"
+        iconColor="darkGray"
+        onClick={() => onDismiss()}
+      />
+    );
+  };
+
+  const renderModalHeader = (): React.ReactElement => {
+    return (
+      <Box direction="row" padding={3} width="100%">
+        <Box width={40}>{renderClose()}</Box>
+        <Box direction="column" flex="grow">
+          <Heading align={align === "center" ? "center" : undefined} size="sm">
+            {heading}
+          </Heading>
+          {Boolean(subHeading) && (
+            <Box paddingY={2}>
+              <Text align={align === "center" ? "center" : undefined}>{subHeading}</Text>
+            </Box>
+          )}
+        </Box>
+        <Box width={40} />
+      </Box>
+    );
+  };
+
+  const renderModalFooter = (): React.ReactElement | null => {
+    if (footer) {
+      return footer;
+    }
+    return (
+      <Box direction="row" justifyContent="end" width="100%">
+        {Boolean(secondaryButtonText) && (
+          <Box marginRight={4} minWidth={120}>
+            <Button
+              color="gray"
+              text={secondaryButtonText ?? ""}
+              onClick={secondaryButtonOnClick}
+            />
+          </Box>
+        )}
+        <Box minWidth={120}>
+          <Button
+            color="primary"
+            disabled={primaryButtonDisabled}
+            text={primaryButtonText ?? ""}
+            onClick={primaryButtonOnClick}
+          />
+        </Box>
+      </Box>
+    );
+  };
+
+  const renderModal = (): React.ReactElement => {
+    return (
+      <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
+        <Box
+          alignItems="center"
+          alignSelf="center"
+          color="white"
+          dangerouslySetInlineStyle={{
+            __style: {
+              zIndex: 1,
+              shadowColor: "#999",
+              shadowOffset: {
+                width: 4,
+                height: 6,
+              },
+              shadowRadius: 4,
+              shadowOpacity: 1.0,
+              elevation: 8,
+            },
+          }}
+          direction="column"
+          justifyContent="center"
+          marginTop={12}
+          maxWidth={sizePx}
+          minWidth={300}
+          paddingX={8}
+          paddingY={2}
+          rounding={6}
+          shadow
+          width={sizePx}
+        >
+          <Box marginBottom={6} width="100%">
+            {renderModalHeader()}
+            <Box paddingY={4}>{children}</Box>
+            <Box paddingY={4}>{renderModalFooter()}</Box>
+          </Box>
+        </Box>
+      </RNModal>
+    );
+  };
+
+  const renderActionSheet = (): React.ReactElement => {
+    return (
+      <ActionSheet ref={actionSheetRef} onClose={onDismiss}>
+        <Box direction="row" marginBottom={2} paddingX={2} paddingY={2} width="100%">
+          <Box marginRight={4}>
+            {Boolean(showClose) && (
+              <IconButton
+                accessibilityLabel="close"
+                bgColor="white"
+                icon="times"
+                iconColor="darkGray"
+                size="lg"
+                onClick={() => onDismiss()}
+              />
+            )}
+            {Boolean(secondaryButtonText) && (
+              <Button
+                color="darkGray"
+                inline
+                size="lg"
+                text={secondaryButtonText ?? ""}
+                type="ghost"
+                onClick={secondaryButtonOnClick}
+              />
+            )}
+          </Box>
+          <Box alignItems="center" direction="column" flex="grow" justifyContent="center">
+            <Heading align={align === "center" ? "center" : undefined} size="sm">
+              {heading}
+            </Heading>
+            {Boolean(subHeading) && (
+              <Box paddingY={2}>
+                <Text align={align === "center" ? "center" : undefined}>{subHeading}</Text>
+              </Box>
+            )}
+          </Box>
+
+          <Box alignSelf="start" height="100%" justifyContent="start">
+            {Boolean(primaryButtonText) && (
+              <Button
+                color="primary"
+                disabled={primaryButtonDisabled}
+                inline
+                size="md"
+                text={primaryButtonText!}
+                type="ghost"
+                onClick={primaryButtonOnClick}
+              />
+            )}
+          </Box>
+        </Box>
+        <Box marginBottom={12} paddingX={4}>
+          {children}
+        </Box>
+      </ActionSheet>
+    );
+  };
+
+  if (isMobileDevice()) {
+    return renderActionSheet();
+  } else {
+    return renderModal();
+  }
+};

package/src/ModalSheet.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react/display-name */
+import React, {forwardRef, useEffect, useRef} from "react";
+import {Animated} from "react-native";
+import {Modalize} from "react-native-modalize";
+import {Portal} from "react-native-portalize";
+
+export const useCombinedRefs = (...refs: any) => {
+  const targetRef = useRef();
+
+  useEffect(() => {
+    refs.forEach((ref: any) => {
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+};
+
+interface Props {
+  children: any;
+}
+
+export const SimpleContent = forwardRef((props: Props, ref) => {
+  const modalizeRef = useRef(null);
+  const combinedRef = useCombinedRefs(ref, modalizeRef);
+  const animated = useRef(new Animated.Value(0)).current;
+
+  // const renderHeader = () => (
+  //   <Box paddingY={4} marginTop={4} marginBottom={4}>
+  //     <Text>50 users online</Text>
+  //   </Box>
+  // );
+
+  return (
+    <Portal>
+      <Modalize
+        // HeaderComponent={renderHeader}
+        ref={combinedRef}
+        adjustToContentHeight
+        panGestureAnimatedValue={animated}
+        scrollViewProps={{
+          showsVerticalScrollIndicator: false,
+          stickyHeaderIndices: [0],
+        }}
+      >
+        {props.children}
+      </Modalize>
+    </Portal>
+  );
+});