Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/readonly/state.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+export type TReadonlyStateProps = {
+  className?: string;
+  iconSize?: string;
+  hideIcon?: boolean;
+  value: string | undefined | null;
+  placeholder?: string;
+  projectId: string | undefined;
+  workspaceSlug: string;
+};
+
+export const ReadonlyState: React.FC<TReadonlyStateProps> = observer((props) => {
+  const { className, iconSize = "size-4", hideIcon = false, value, placeholder, projectId, workspaceSlug } = props;
+  // states
+  const [stateLoader, setStateLoader] = useState(false);
+  const { t } = useTranslation();
+  const { getStateById, getProjectStateIds, fetchProjectStates } = useProjectState();
+  // derived values
+  const stateIds = getProjectStateIds(projectId);
+  const state = getStateById(value);
+
+  // fetch states if not provided
+  const fetchStates = async () => {
+    if ((stateIds === undefined || stateIds.length === 0) && projectId) {
+      setStateLoader(true);
+      try {
+        await fetchProjectStates(workspaceSlug, projectId);
+      } finally {
+        setStateLoader(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchStates();
+  }, [projectId, workspaceSlug]);
+
+  if (stateLoader) {
+    return (
+      <Loader className={cn("flex items-center gap-1 text-sm", className)}>
+        <Loader.Item height="16px" width="16px" className="rounded-full" />
+        <Loader.Item height="16px" width="50px" />
+      </Loader>
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center gap-1 text-sm", className)}>
+      {!hideIcon && (
+        <StateGroupIcon
+          stateGroup={state?.group ?? "backlog"}
+          className={cn(iconSize, "flex-shrink-0")}
+          color={state?.color}
+        />
+      )}
+      <span className="flex-grow truncate">{state?.name ?? placeholder ?? t("common.none")}</span>
+    </div>
+  );
+});