forked from github/plane
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { FC } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
import { TIssue } from "@plane/types";
|
|
// hooks
|
|
import { useIssueDetail } from "@/hooks/store";
|
|
// components
|
|
import { IssueListItem } from "./issue-list-item";
|
|
// types
|
|
import { TSubIssueOperations } from "./root";
|
|
|
|
export interface IIssueList {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
parentIssueId: string;
|
|
spacingLeft: number;
|
|
disabled: boolean;
|
|
handleIssueCrudState: (
|
|
key: "create" | "existing" | "update" | "delete",
|
|
issueId: string,
|
|
issue?: TIssue | null
|
|
) => void;
|
|
subIssueOperations: TSubIssueOperations;
|
|
}
|
|
|
|
export const IssueList: FC<IIssueList> = observer((props) => {
|
|
const {
|
|
workspaceSlug,
|
|
projectId,
|
|
parentIssueId,
|
|
spacingLeft = 10,
|
|
disabled,
|
|
handleIssueCrudState,
|
|
subIssueOperations,
|
|
} = props;
|
|
// hooks
|
|
const {
|
|
subIssues: { subIssuesByIssueId },
|
|
} = useIssueDetail();
|
|
|
|
const subIssueIds = subIssuesByIssueId(parentIssueId);
|
|
|
|
return (
|
|
<>
|
|
<div className="relative">
|
|
{subIssueIds &&
|
|
subIssueIds.length > 0 &&
|
|
subIssueIds.map((issueId) => (
|
|
<>
|
|
<IssueListItem
|
|
workspaceSlug={workspaceSlug}
|
|
projectId={projectId}
|
|
parentIssueId={parentIssueId}
|
|
issueId={issueId}
|
|
spacingLeft={spacingLeft}
|
|
disabled={disabled}
|
|
handleIssueCrudState={handleIssueCrudState}
|
|
subIssueOperations={subIssueOperations}
|
|
/>
|
|
</>
|
|
))}
|
|
|
|
<div
|
|
className={`absolute bottom-0 top-0 ${spacingLeft > 10 ? `border-l border-custom-border-100` : ``}`}
|
|
style={{ left: `${spacingLeft - 12}px` }}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
});
|