import { Fragment, ReactNode, useEffect, useRef, useState } from "react"; import { observer } from "mobx-react-lite"; import { Combobox } from "@headlessui/react"; import { usePopper } from "react-popper"; import { Check, ChevronDown, Search, X } from "lucide-react"; // hooks import { useApplication, useModule } from "hooks/store"; import { useDropdownKeyDown } from "hooks/use-dropdown-key-down"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; // components import { DropdownButton } from "./buttons"; // icons import { DiceIcon, Tooltip } from "@plane/ui"; // helpers import { cn } from "helpers/common.helper"; // types import { TDropdownProps } from "./types"; // constants import { BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants"; type Props = TDropdownProps & { button?: ReactNode; dropdownArrow?: boolean; dropdownArrowClassName?: string; projectId: string; showCount?: boolean; onClose?: () => void; } & ( | { multiple: false; onChange: (val: string | null) => void; value: string | null; } | { multiple: true; onChange: (val: string[]) => void; value: string[]; } ); type DropdownOptions = | { value: string | null; query: string; content: JSX.Element; }[] | undefined; type ButtonContentProps = { disabled: boolean; dropdownArrow: boolean; dropdownArrowClassName: string; hideIcon: boolean; hideText: boolean; onChange: (moduleIds: string[]) => void; placeholder: string; showCount: boolean; value: string | string[] | null; }; const ButtonContent: React.FC = (props) => { const { disabled, dropdownArrow, dropdownArrowClassName, hideIcon, hideText, onChange, placeholder, showCount, value, } = props; // store hooks const { getModuleById } = useModule(); if (Array.isArray(value)) return ( <> {showCount ? ( <> {!hideIcon && } {value.length > 0 ? `${value.length} Module${value.length === 1 ? "" : "s"}` : placeholder} ) : value.length > 0 ? (
{value.map((moduleId) => { const moduleDetails = getModuleById(moduleId); return (
{!hideIcon && } {!hideText && ( {moduleDetails?.name} )} {!disabled && ( )}
); })}
) : ( <> {!hideIcon && } {placeholder} )} {dropdownArrow && (