73 lines
3 KiB
TypeScript
73 lines
3 KiB
TypeScript
import { SetStateAction } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { GripVertical, Pencil } from "lucide-react";
|
|
// Plane
|
|
import { IState } from "@plane/types";
|
|
import { StateGroupIcon } from "@plane/ui";
|
|
// Plane-web
|
|
import { StateTransitionCount } from "@/plane-web/components/workflow";
|
|
import { IStateWorkFlow } from "@/plane-web/types";
|
|
//
|
|
import { StateDelete, StateMarksAsDefault } from "./options";
|
|
|
|
export type StateItemTitleProps = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
setUpdateStateModal: (value: SetStateAction<boolean>) => void;
|
|
stateCount: number;
|
|
disabled: boolean;
|
|
state: IState;
|
|
currentTransitionMap?: IStateWorkFlow;
|
|
};
|
|
|
|
export const StateItemTitle = observer((props: StateItemTitleProps) => {
|
|
const { workspaceSlug, projectId, stateCount, setUpdateStateModal, disabled, state, currentTransitionMap } = props;
|
|
return (
|
|
<div className="flex items-center gap-2 w-full justify-between">
|
|
<div className="flex items-center gap-2">
|
|
{/* draggable indicator */}
|
|
{!disabled && stateCount != 1 && (
|
|
<div className="flex-shrink-0 w-3 h-3 rounded-sm absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
|
|
<GripVertical className="w-3 h-3" />
|
|
</div>
|
|
)}
|
|
{/* state icon */}
|
|
<div className="flex-shrink-0">
|
|
<StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
|
|
</div>
|
|
{/* state title and description */}
|
|
<div className="text-sm px-2 min-h-5">
|
|
<h6 className="text-sm font-medium">{state.name}</h6>
|
|
<p className="text-xs text-custom-text-200">{state.description}</p>
|
|
</div>
|
|
{/* Transition count */}
|
|
<StateTransitionCount currentTransitionMap={currentTransitionMap} />
|
|
</div>
|
|
|
|
{!disabled && (
|
|
<div className="hidden group-hover:flex items-center gap-2">
|
|
{/* state mark as default option */}
|
|
<div className="flex-shrink-0 text-xs transition-all">
|
|
<StateMarksAsDefault
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={projectId}
|
|
stateId={state.id}
|
|
isDefault={state.default ? true : false}
|
|
/>
|
|
</div>
|
|
|
|
{/* state edit options */}
|
|
<div className="flex items-center gap-1 transition-all">
|
|
<button
|
|
className="flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-text-200 hover:text-custom-text-100"
|
|
onClick={() => setUpdateStateModal(true)}
|
|
>
|
|
<Pencil className="w-3 h-3" />
|
|
</button>
|
|
<StateDelete workspaceSlug={workspaceSlug} projectId={projectId} totalStates={stateCount} state={state} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|