plane/apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx

67 lines
1.9 KiB
TypeScript
Raw Normal View History

2022-11-19 14:21:26 +00:00
import React from "react";
// react hook form
import { Controller } from "react-hook-form";
// hooks
import useUser from "lib/hooks/useUser";
// types
import type { IIssue } from "types";
import type { Control } from "react-hook-form";
import { UserIcon } from "@heroicons/react/24/outline";
type Props = {
control: Control<IIssue, any>;
};
import { SearchListbox } from "ui";
2022-11-19 14:21:26 +00:00
const SelectParent: React.FC<Props> = ({ control }) => {
const { issues: projectIssues } = useUser();
const getSelectedIssueKey = (issueId: string | undefined) => {
const identifier = projectIssues?.results?.find((i) => i.id.toString() === issueId?.toString())
?.project_detail?.identifier;
2022-11-19 14:21:26 +00:00
const sequenceId = projectIssues?.results?.find(
(i) => i.id.toString() === issueId?.toString()
)?.sequence_id;
if (issueId) return `${identifier}-${sequenceId}`;
else return "Parent issue";
};
return (
<Controller
control={control}
name="parent"
render={({ field: { value, onChange } }) => (
<SearchListbox
title="Parent issue"
optionsFontsize="sm"
options={projectIssues?.results?.map((issue) => {
return {
value: issue.id,
display: issue.name,
element: (
<div className="flex items-center space-x-3">
<div className="block truncate">
<span className="block truncate">{`${getSelectedIssueKey(issue.id)}`}</span>
<span className="block truncate text-gray-400">{issue.name}</span>
</div>
</div>
),
};
})}
value={value}
width="xs"
buttonClassName="max-h-30 overflow-y-scroll"
optionsClassName="max-h-30 overflow-y-scroll"
onChange={onChange}
icon={<UserIcon className="h-4 w-4 text-gray-400" />}
/>
2022-11-19 14:21:26 +00:00
)}
/>
);
};
export default SelectParent;