Alex van AndelandGitHub
b9128a7a0b
* chore: Add ./components/[name]/index.ts map to package.json * fix: Clarify Popover exports * fix: re-add dropdown to calcom/ui barrel * chore: Add icon barrel file re-export * Fix all calcom/ui imports of its own barrel * Never say 'fix all remaining..' it's never true * Some type fixeS * Linking fixes * Rename sheet.tsx to Sheet.tsx Done through UI, console does NOT like this. * Fixed some test failures
75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
|
|
import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
|
|
import { Icon } from "../../icon";
|
|
|
|
interface IAddVariablesDropdown {
|
|
addVariable: (variable: string) => void;
|
|
isTextEditor?: boolean;
|
|
variables: string[];
|
|
addVariableButtonTop?: boolean;
|
|
}
|
|
|
|
export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<Dropdown>
|
|
<DropdownMenuTrigger className="focus:bg-muted pt-[6px]">
|
|
<div className="items-center ">
|
|
{props.isTextEditor ? (
|
|
<>
|
|
<div className="hidden sm:flex">
|
|
{t("add_variable")}
|
|
<Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
|
|
</div>
|
|
<div className="block sm:hidden">
|
|
{props.addVariableButtonTop ? (
|
|
<div className="flex">
|
|
{t("add_variable")}
|
|
<Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
|
|
</div>
|
|
) : (
|
|
"+"
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex">
|
|
{t("add_variable")}
|
|
<Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<div className="pb-1 pt-4">
|
|
<div className="text-subtle mb-2 px-4 text-left text-xs">
|
|
{t("add_dynamic_variables").toLocaleUpperCase()}
|
|
</div>
|
|
<div className="h-64 overflow-scroll md:h-80">
|
|
{props.variables.map((variable) => (
|
|
<DropdownMenuItem key={variable} className="hover:ring-0">
|
|
<button
|
|
key={variable}
|
|
type="button"
|
|
className="w-full px-4 py-2"
|
|
onClick={() => props.addVariable(t(`${variable}_variable`))}>
|
|
<div className="sm:grid sm:grid-cols-2">
|
|
<div className="mr-3 text-left md:col-span-1">
|
|
{`{${t(`${variable}_variable`).toUpperCase().replace(/ /g, "_")}}`}
|
|
</div>
|
|
<div className="text-default hidden text-left sm:col-span-1 sm:flex">
|
|
{t(`${variable}_info`)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</Dropdown>
|
|
);
|
|
};
|