72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Button } from "@calcom/ui";
|
|
import { Edit, Plus, X } from "@calcom/ui/components/icon";
|
|
|
|
import { SearchDialog } from "./SearchDialog";
|
|
|
|
interface ISelectGifInput {
|
|
defaultValue?: string | null;
|
|
onChange: (url: string) => void;
|
|
disabled?: boolean;
|
|
}
|
|
export default function SelectGifInput(props: ISelectGifInput) {
|
|
const { t } = useLocale();
|
|
const [selectedGif, setSelectedGif] = useState(props.defaultValue);
|
|
const [showDialog, setShowDialog] = useState(false);
|
|
|
|
return (
|
|
<div className="flex flex-col items-start space-x-2 space-y-2 rtl:space-x-reverse">
|
|
{selectedGif && (
|
|
<div className="min-h-[200px]">
|
|
<img alt="Selected Gif Image" src={selectedGif} />
|
|
</div>
|
|
)}
|
|
<div className="flex">
|
|
{selectedGif ? (
|
|
<Button
|
|
color="minimal"
|
|
type="button"
|
|
StartIcon={Edit}
|
|
onClick={() => setShowDialog(true)}
|
|
disabled={props.disabled}>
|
|
Change
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
color="minimal"
|
|
type="button"
|
|
StartIcon={Plus}
|
|
onClick={() => setShowDialog(true)}
|
|
disabled={props.disabled}>
|
|
Add from Giphy
|
|
</Button>
|
|
)}
|
|
|
|
{selectedGif && (
|
|
<Button
|
|
color="destructive"
|
|
type="button"
|
|
StartIcon={X}
|
|
onClick={() => {
|
|
setSelectedGif("");
|
|
props.onChange("");
|
|
}}
|
|
disabled={props.disabled}>
|
|
{t("remove")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<SearchDialog
|
|
isOpenDialog={showDialog}
|
|
setIsOpenDialog={setShowDialog}
|
|
onSave={(url) => {
|
|
setSelectedGif(url);
|
|
props.onChange(url);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|