@factorialco/f0-react-native 0.19.1

package/src/components/experimental/Lists/DataList/index.tsx

@@ -0,0 +1,186 @@
+import { ReactElement } from "react";
+
+import { ItemContainer } from "./ItemContainer";
+import { cn } from "../../../../lib/utils";
+import { IconType } from "../../../Icon";
+import { PersonAvatar } from "../../../Avatars/PersonAvatar";
+import { CompanyAvatar } from "../../../Avatars/CompanyAvatar";
+import { TeamAvatar } from "../../../Avatars/TeamAvatar";
+import { DotTag, DotTagProps } from "../../../Tags/DotTag";
+import { View, Text } from "react-native";
+
+export type DataListProps = {
+  children: ReactElement<Items>[] | ReactElement<Items>;
+  label?: string;
+  isHorizontalItem?: boolean;
+  tableView?: boolean;
+};
+
+type Items =
+  | typeof Item
+  | typeof PersonItem
+  | typeof CompanyItem
+  | typeof TeamItem;
+
+const _DataList = ({
+  children,
+  label,
+  isHorizontalItem = false,
+  tableView = false,
+}: DataListProps) => {
+  return (
+    <View
+      className={cn(
+        isHorizontalItem
+          ? "flex min-h-12 flex-shrink flex-row"
+          : "min-w-32 max-w-72",
+        tableView ? "px-[8px] pb-[10px] pt-[14px]" : "",
+      )}
+    >
+      {!!label && (
+        <Text
+          className={cn(
+            "px-1.5 text-f1-foreground-secondary",
+            isHorizontalItem ? "mt-1.5 w-36 shrink-0" : "",
+          )}
+        >
+          {label}
+        </Text>
+      )}
+      <View className="flex flex-shrink justify-center gap-0.5">
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export type ItemProps = {
+  text: string;
+  icon?: IconType;
+  action?: ActionType;
+};
+
+export type ActionType = CopyActionType | GenericActionType | NoopActionType;
+
+export type CopyActionType = {
+  type: "copy";
+  text?: string;
+};
+
+export type GenericActionType = {
+  type: "generic";
+  handlePress?: () => void;
+};
+
+export type NoopActionType = {
+  type: "noop";
+};
+
+const Item = ({ text, icon, action }: ItemProps) => {
+  return (
+    <ItemContainer
+      text={text}
+      leftIcon={icon}
+      action={getInternalAction(action, text)}
+    />
+  );
+};
+
+type URL = string;
+
+type EmployeeItemProps = {
+  firstName: string;
+  lastName: string;
+  avatarUrl?: URL;
+  action?: ActionType;
+};
+
+const PersonItem = ({
+  action,
+  avatarUrl,
+  firstName,
+  lastName,
+}: EmployeeItemProps) => {
+  const fullName = `${firstName} ${lastName}`;
+  return (
+    <ItemContainer
+      leftIcon={() => (
+        <PersonAvatar
+          size="xsmall"
+          src={avatarUrl}
+          firstName={firstName}
+          lastName={lastName}
+        />
+      )}
+      text={fullName}
+      action={getInternalAction(action, fullName)}
+    />
+  );
+};
+
+type CompanyItemProps = {
+  name: string;
+  avatarUrl?: URL;
+  action?: ActionType;
+};
+
+const CompanyItem = ({ avatarUrl, name, action }: CompanyItemProps) => {
+  return (
+    <ItemContainer
+      leftIcon={() => (
+        <CompanyAvatar name={name} size="xsmall" src={avatarUrl} />
+      )}
+      text={name}
+      action={getInternalAction(action, name)}
+    />
+  );
+};
+
+type TeamItemProps = {
+  name: string;
+  action?: ActionType;
+};
+
+const TeamItem = ({ action, name }: TeamItemProps) => {
+  return (
+    <ItemContainer
+      leftIcon={() => <TeamAvatar name={name} size="xsmall" />}
+      text={name}
+      action={getInternalAction(action, name)}
+    />
+  );
+};
+
+type DotTagItemProps = DotTagProps;
+
+const DotTagItem = ({ ...props }: DotTagItemProps) => {
+  return (
+    <View className="flex items-start pt-1">
+      <DotTag {...props} />
+    </View>
+  );
+};
+
+/**
+ * convert simplified action type received from user to internal action format
+ * @param action ActionType
+ * @param defaultCopyText what to use if copy text is not present
+ */
+const getInternalAction = (
+  action: ActionType | undefined,
+  defaultCopyText: string,
+): ActionType | undefined => {
+  if (action && action.type === "copy") {
+    return { type: "copy", text: action.text ?? defaultCopyText };
+  }
+
+  return action;
+};
+
+export const DataList = Object.assign(_DataList, {
+  Item,
+  CompanyItem,
+  PersonItem,
+  TeamItem,
+  DotTagItem,
+});