import { useState } from "react"; import { useRouter } from "next/router"; // store import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Tooltip, StateGroupIcon } from "@plane/ui"; // icons import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react"; // helpers import { addSpaceIfCamelCase } from "helpers/string.helper"; // types import { IState } from "types"; type Props = { index: number; state: IState; statesList: IState[]; handleEditState: () => void; handleDeleteState: () => void; }; export const ProjectSettingListItem: React.FC = observer((props) => { const { index, state, statesList, handleEditState, handleDeleteState } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store const { projectState: projectStateStore } = useMobxStore(); // states const [isSubmitting, setIsSubmitting] = useState(false); // derived values const groupStates = statesList.filter((s) => s.group === state.group); const groupLength = groupStates.length; const handleMakeDefault = () => { if (!workspaceSlug || !projectId) return; setIsSubmitting(true); projectStateStore.markStateAsDefault(workspaceSlug.toString(), projectId.toString(), state.id).finally(() => { setIsSubmitting(false); }); }; const handleMove = (state: IState, direction: "up" | "down") => { if (!workspaceSlug || !projectId) return; projectStateStore.moveStatePosition(workspaceSlug.toString(), projectId.toString(), state.id, direction, index); }; return (
{addSpaceIfCamelCase(state.name)}

{state.description}

{index !== 0 && ( )} {!(index === groupLength - 1) && ( )}
{state.default ? ( Default ) : ( )}
); });