104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { Controller, useFormContext } from "react-hook-form";
|
|
// plane imports
|
|
import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import type { IProject } from "@plane/types";
|
|
import { SelectionDropdown } from "@/components/common/selection-dropdown";
|
|
import { getTabIndex } from "@plane/utils";
|
|
// components
|
|
import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
|
|
import { ProjectNetworkIcon } from "@/components/project/project-network-icon";
|
|
|
|
type Props = {
|
|
isMobile?: boolean;
|
|
};
|
|
|
|
function ProjectAttributes(props: Props) {
|
|
const { isMobile = false } = props;
|
|
const { t } = useTranslation();
|
|
const { control } = useFormContext<IProject>();
|
|
const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
|
|
const projectAttributeChipClassName =
|
|
"nodedc-modal-chip !h-10 !rounded-[1.25rem] !px-4 !py-2 !text-13";
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Controller
|
|
name="network"
|
|
control={control}
|
|
render={({ field: { onChange, value } }) => {
|
|
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
|
|
|
|
return (
|
|
<div className="h-7 flex-shrink-0" tabIndex={getIndex("network")}>
|
|
<SelectionDropdown
|
|
options={NETWORK_CHOICES.map((network) => ({
|
|
key: String(network.key),
|
|
title: (
|
|
<div className="flex items-start gap-2">
|
|
<ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
|
|
<div className="-mt-1">
|
|
<p>{t(network.i18n_label)}</p>
|
|
<p className="text-11 text-placeholder">{t(network.description)}</p>
|
|
</div>
|
|
</div>
|
|
),
|
|
isChecked: value === network.key,
|
|
onClick: () => onChange(network.key),
|
|
}))}
|
|
menuButton={
|
|
<div className="flex h-full items-center gap-1">
|
|
{currentNetwork ? (
|
|
<>
|
|
<ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
|
|
{t(currentNetwork.i18n_label)}
|
|
</>
|
|
) : (
|
|
<span className="text-placeholder">{t("select_network")}</span>
|
|
)}
|
|
</div>
|
|
}
|
|
placement="bottom-start"
|
|
menuButtonWrapperClassName={projectAttributeChipClassName}
|
|
tabIndex={getIndex("network")}
|
|
/>
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
<Controller
|
|
name="project_lead"
|
|
control={control}
|
|
render={({ field: { value, onChange } }) => {
|
|
if (value === undefined || value === null || typeof value === "string")
|
|
return (
|
|
<div className="h-7 flex-shrink-0" tabIndex={getIndex("lead")}>
|
|
<MemberDropdown
|
|
value={value ?? null}
|
|
onChange={(lead) => onChange(lead === value ? null : lead)}
|
|
placeholder={t("lead")}
|
|
multiple={false}
|
|
buttonVariant="border-with-text"
|
|
buttonClassName={projectAttributeChipClassName}
|
|
buttonContainerClassName="!h-10"
|
|
showUserDetails
|
|
tabIndex={getIndex("lead")}
|
|
/>
|
|
</div>
|
|
);
|
|
else return <></>;
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProjectAttributes;
|
|
|
|
export { ProjectAttributes };
|