2014400bed
* refactor: move web utils to packages * fix: build and lint errors * chore: update drag handle plugin * chore: update table cell type to fix build errors * fix: build errors * chore: sync few changes * fix: build errors * chore: minor fixes related to duplicate assets imports * fix: build errors * chore: minor changes
95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
"use client";
|
|
import { FC } from "react";
|
|
import { Controller, useFormContext } from "react-hook-form";
|
|
import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { IProject } from "@plane/types";
|
|
// ui
|
|
import { CustomSelect } from "@plane/ui";
|
|
// components
|
|
import { getTabIndex } from "@plane/utils";
|
|
import { MemberDropdown } from "@/components/dropdowns";
|
|
import { ProjectNetworkIcon } from "@/components/project";
|
|
// helpers
|
|
|
|
type Props = {
|
|
isMobile?: boolean;
|
|
};
|
|
|
|
const ProjectAttributes: FC<Props> = (props) => {
|
|
const { isMobile = false } = props;
|
|
const { t } = useTranslation();
|
|
const { control } = useFormContext<IProject>();
|
|
const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
|
|
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="flex-shrink-0 h-7" tabIndex={getIndex("network")}>
|
|
<CustomSelect
|
|
value={value}
|
|
onChange={onChange}
|
|
label={
|
|
<div className="flex items-center gap-1 h-full">
|
|
{currentNetwork ? (
|
|
<>
|
|
<ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
|
|
{t(currentNetwork.i18n_label)}
|
|
</>
|
|
) : (
|
|
<span className="text-custom-text-400">{t("select_network")}</span>
|
|
)}
|
|
</div>
|
|
}
|
|
placement="bottom-start"
|
|
className="h-full"
|
|
buttonClassName="h-full"
|
|
noChevron
|
|
tabIndex={getIndex("network")}
|
|
>
|
|
{NETWORK_CHOICES.map((network) => (
|
|
<CustomSelect.Option key={network.key} value={network.key}>
|
|
<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-xs text-custom-text-400">{t(network.description)}</p>
|
|
</div>
|
|
</div>
|
|
</CustomSelect.Option>
|
|
))}
|
|
</CustomSelect>
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
<Controller
|
|
name="project_lead"
|
|
control={control}
|
|
render={({ field: { value, onChange } }) => {
|
|
if (value === undefined || value === null || typeof value === "string")
|
|
return (
|
|
<div className="flex-shrink-0 h-7" tabIndex={getIndex("lead")}>
|
|
<MemberDropdown
|
|
value={value ?? null}
|
|
onChange={(lead) => onChange(lead === value ? null : lead)}
|
|
placeholder={t("lead")}
|
|
multiple={false}
|
|
buttonVariant="border-with-text"
|
|
tabIndex={5}
|
|
/>
|
|
</div>
|
|
);
|
|
else return <></>;
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectAttributes;
|