ferns-ui 0.36.4 → 0.36.5

package/src/TapToEdit.tsx

@@ -0,0 +1,221 @@
+import React, {ReactElement, useState} from "react";
+import {Linking} from "react-native";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {BoxProps} from "./Common";
+import {Field, FieldProps} from "./Field";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+
+export function formatAddress(address: any, asString = false): string {
+  let city = "";
+  if (address?.city) {
+    city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
+  }
+
+  let state = "";
+  if (address?.state) {
+    state = address?.zipcode ? `${address.state} ` : `${address.state}`;
+  }
+
+  const zip = address?.zipcode || "";
+
+  const addressLineOne = address?.address1 ?? "";
+  const addressLineTwo = address?.address2 ?? "";
+  const addressLineThree = `${city}${state}${zip}`;
+
+  if (!asString) {
+    // Only add new lines if lines before and after are not empty to avoid awkward whitespace
+    return `${addressLineOne}${
+      addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}`;
+  } else {
+    return `${addressLineOne}${
+      addressLineOne && (addressLineTwo || addressLineThree) ? `, ` : ""
+    }${addressLineTwo}${addressLineTwo && addressLineThree ? `, ` : ""}${addressLineThree}`;
+  }
+}
+
+export interface TapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
+  title: string;
+  value: any;
+  // Not required if not editable.
+  setValue?: (value: any) => void;
+  // Not required if not editable.
+  onSave?: (value: any) => void | Promise<void>;
+  // Defaults to true
+  editable?: boolean;
+  // enable edit mode from outside the component
+  isEditing?: boolean;
+  // For changing how the non-editing row renders
+  rowBoxProps?: Partial<BoxProps>;
+  transform?: (value: any) => string;
+  fieldComponent?: (setValue: () => void) => ReactElement;
+  withConfirmation?: boolean;
+  confirmationText?: string;
+  confirmationHeading?: string;
+}
+
+export const TapToEdit = ({
+  value,
+  setValue,
+  placeholder,
+  title,
+  onSave,
+  editable = true,
+  isEditing = false,
+  rowBoxProps,
+  transform,
+  fieldComponent,
+  withConfirmation = false,
+  confirmationText = "Are you sure you want to save your changes?",
+  confirmationHeading = "Confirm",
+  ...fieldProps
+}: TapToEditProps): ReactElement => {
+  const [editing, setEditing] = useState(false);
+  const [initialValue] = useState(value);
+
+  if (editable && !setValue) {
+    throw new Error("setValue is required if editable is true");
+  }
+
+  if (editable && (editing || isEditing)) {
+    return (
+      <Box direction="column">
+        {fieldComponent ? (
+          fieldComponent(setValue as any)
+        ) : (
+          <Field
+            label={title}
+            placeholder={placeholder}
+            value={value}
+            onChange={setValue}
+            {...fieldProps}
+          />
+        )}
+        {editing && !isEditing && (
+          <Box direction="row">
+            <Button
+              color="blue"
+              confirmationHeading={confirmationHeading}
+              confirmationText={confirmationText}
+              inline
+              text="Save"
+              withConfirmation={withConfirmation}
+              onClick={async (): Promise<void> => {
+                if (!onSave) {
+                  console.error("No onSave provided for editable TapToEdit");
+                } else {
+                  await onSave(value);
+                }
+                setEditing(false);
+              }}
+            />
+            <Box marginLeft={2}>
+              <Button
+                color="red"
+                inline
+                text="Cancel"
+                onClick={(): void => {
+                  if (setValue) {
+                    setValue(initialValue);
+                  }
+                  setEditing(false);
+                }}
+              />
+            </Box>
+          </Box>
+        )}
+      </Box>
+    );
+  } else {
+    let displayValue = value;
+    // If a transform props is present, that takes priority
+    if (transform) {
+      displayValue = transform(value);
+    } else {
+      // If no transform, try and display the value reasonably.
+      if (fieldProps?.type === "boolean") {
+        displayValue = value ? "Yes" : "No";
+      } else if (fieldProps?.type === "percent") {
+        // Prevent floating point errors from showing up by using parseFloat and precision. Pass through parseFloat again
+        // to trim off insignificant zeroes.
+        displayValue = `${parseFloat(parseFloat(String(value * 100)).toPrecision(7))}%`;
+      } else if (fieldProps?.type === "currency") {
+        // TODO: support currencies other than USD in Field and related components.
+        const formatter = new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+          minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+        });
+        displayValue = formatter.format(value);
+      } else if (fieldProps?.type === "multiselect") {
+        // ???
+        displayValue = value.join(", ");
+      } else if (fieldProps?.type === "url") {
+        // Show only the domain, full links are likely too long.
+        try {
+          const url = new URL(value);
+          displayValue = url?.hostname ?? value;
+        } catch (e) {
+          // Don't print an error message for empty values.
+          if (value) {
+            console.debug(`Invalid URL: ${value}`);
+          }
+          displayValue = value;
+        }
+      } else if (fieldProps?.type === "address") {
+        displayValue = formatAddress(value);
+      }
+    }
+
+    const openLink = (): void => {
+      if (fieldProps?.type === "url") {
+        Linking.openURL(value);
+      }
+    };
+
+    return (
+      <Box
+        direction="row"
+        justifyContent="between"
+        paddingX={3}
+        paddingY={2}
+        width="100%"
+        {...rowBoxProps}
+      >
+        <Box>
+          <Text weight="bold">{title}:</Text>
+          {fieldProps?.type === "address" && (
+            <Box
+              onClick={
+                () =>
+                  Linking.openURL(
+                    `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
+                      formatAddress(value, true)
+                    )}`
+                  )
+                // eslint-disable-next-line react/jsx-curly-newline
+              }
+            >
+              <Text color="blue" underline={fieldProps?.type === "address"}>
+                Google Maps
+              </Text>
+            </Box>
+          )}
+        </Box>
+        <Box direction="row">
+          <Box onClick={fieldProps?.type === "url" ? openLink : undefined}>
+            <Text underline={fieldProps?.type === "url"}>{displayValue}</Text>
+          </Box>
+          {editable && (
+            <Box marginLeft={2} onClick={(): void => setEditing(true)}>
+              <Icon color="darkGray" name="edit" prefix="far" size="md" />
+            </Box>
+          )}
+        </Box>
+      </Box>
+    );
+  }
+};

package/src/Text.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import {Text as NativeText, TextStyle} from "react-native";
+
+import {AllColors, Font, TextSize} from "./Common";
+import {Hyperlink} from "./Hyperlink";
+import {Unifier} from "./Unifier";
+
+export interface TextProps {
+  align?: "left" | "right" | "center" | "justify"; // default "left"
+  children?: React.ReactNode;
+  color?: AllColors;
+  inline?: boolean; // default false
+  italic?: boolean; // default false
+  overflow?: "normal" | "breakWord"; // deprecated
+  size?: TextSize; // default "md"
+  truncate?: boolean; // default false
+  font?: Font;
+  underline?: boolean;
+  numberOfLines?: number;
+  skipLinking?: boolean;
+  weight?: "bold" | "normal";
+  testID?: string;
+}
+
+const fontSizes = {
+  sm: 12,
+  md: 14,
+  lg: 16,
+};
+
+export function Text({
+  align = "left",
+  children,
+  color,
+  inline = false,
+  italic = false,
+  overflow,
+  size = "md",
+  truncate = false,
+  font,
+  underline,
+  numberOfLines,
+  skipLinking,
+  testID,
+  weight = "normal",
+}: TextProps): React.ReactElement {
+  function propsToStyle(): any {
+    const style: TextStyle = {};
+    if (overflow) {
+      console.warn(
+        "Text overflow is deprecated. Use `truncate` to cut off the text and add ellipse, otherwise breakWord is the default."
+      );
+    }
+    let computedFont = "primary";
+    if (font === "primary" || !font) {
+      if (weight === "bold") {
+        computedFont = "primaryBoldFont";
+      } else {
+        computedFont = "primaryFont";
+      }
+    } else if (font === "secondary") {
+      if (weight === "bold") {
+        computedFont = "secondaryBoldFont";
+      } else {
+        computedFont = "secondaryFont";
+      }
+    } else if (font === "button") {
+      computedFont = "buttonFont";
+    } else if (font === "title") {
+      computedFont = "titleFont";
+    } else if (font === "accent") {
+      if (weight === "bold") {
+        computedFont = "accentBoldFont";
+      } else {
+        computedFont = "accentFont";
+      }
+    }
+    if (weight === "bold") {
+      style.fontWeight = "bold";
+    }
+
+    style.fontFamily = Unifier.theme[computedFont as keyof typeof Unifier.theme];
+
+    style.fontSize = fontSizes[size || "md"];
+    if (align) {
+      style.textAlign = align;
+    }
+    if (color) {
+      style.color = Unifier.theme[color];
+    } else {
+      style.color = Unifier.theme.darkGray;
+    }
+
+    if (italic) {
+      style.fontStyle = "italic";
+    }
+    if (underline) {
+      style.textDecorationLine = "underline";
+    }
+    // TODO: might be useful for wrapping/truncating
+    // if (numberOfLines !== 1 && !inline) {
+    //   style.flexWrap = "wrap";
+    // }
+
+    return style;
+  }
+
+  let lines = 0;
+  if (numberOfLines && truncate && numberOfLines > 1) {
+    console.error(`Cannot truncate Text and have ${numberOfLines} lines`);
+  }
+  if (numberOfLines) {
+    lines = numberOfLines;
+  } else if (inline || truncate) {
+    lines = 1;
+  }
+  const inner = (
+    <NativeText numberOfLines={lines} style={propsToStyle()} testID={testID}>
+      {children}
+    </NativeText>
+  );
+  if (skipLinking) {
+    return inner;
+  } else {
+    return (
+      <Hyperlink linkDefault linkStyle={{textDecorationLine: "underline"}}>
+        {inner}
+      </Hyperlink>
+    );
+  }
+}

package/src/TextArea.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import {TextAreaProps} from "./Common";
+import {TextField} from "./TextField";
+
+export class TextArea extends React.Component<TextAreaProps, {}> {
+  constructor(props: TextAreaProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const {height, ...props} = this.props;
+    return <TextField {...props} height={height ?? 100} multiline />;
+  }
+}