85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import React, { useMemo, useCallback } from "react";
|
|
import { EmojiRoot } from "../emoji-icon-picker/emoji/emoji";
|
|
import { emojiToString } from "../emoji-icon-picker/helper";
|
|
import { Popover } from "../popover";
|
|
import { cn } from "../utils/classname";
|
|
import { convertPlacementToSideAndAlign, type TPlacement, type TSide, type TAlign } from "../utils/placement";
|
|
|
|
export interface EmojiReactionPickerProps {
|
|
isOpen: boolean;
|
|
handleToggle: (value: boolean) => void;
|
|
buttonClassName?: string;
|
|
closeOnSelect?: boolean;
|
|
disabled?: boolean;
|
|
dropdownClassName?: string;
|
|
label: React.ReactNode;
|
|
onChange: (emoji: string) => void;
|
|
placement?: TPlacement;
|
|
searchDisabled?: boolean;
|
|
searchPlaceholder?: string;
|
|
side?: TSide;
|
|
align?: TAlign;
|
|
}
|
|
|
|
export const EmojiReactionPicker: React.FC<EmojiReactionPickerProps> = (props) => {
|
|
const {
|
|
isOpen,
|
|
handleToggle,
|
|
buttonClassName,
|
|
closeOnSelect = true,
|
|
disabled = false,
|
|
dropdownClassName,
|
|
label,
|
|
onChange,
|
|
placement = "bottom-start",
|
|
searchDisabled = false,
|
|
searchPlaceholder = "Search",
|
|
side = "bottom",
|
|
align = "start",
|
|
} = props;
|
|
|
|
// side and align calculations
|
|
const { finalSide, finalAlign } = useMemo(() => {
|
|
if (placement) {
|
|
const converted = convertPlacementToSideAndAlign(placement);
|
|
return { finalSide: converted.side, finalAlign: converted.align };
|
|
}
|
|
return { finalSide: side, finalAlign: align };
|
|
}, [placement, side, align]);
|
|
|
|
const handleEmojiChange = useCallback(
|
|
(value: string) => {
|
|
const emoji = emojiToString(value);
|
|
onChange(emoji);
|
|
if (closeOnSelect) handleToggle(false);
|
|
},
|
|
[onChange, closeOnSelect, handleToggle]
|
|
);
|
|
|
|
return (
|
|
<Popover open={isOpen} onOpenChange={handleToggle}>
|
|
<Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
|
|
{label}
|
|
</Popover.Button>
|
|
<Popover.Panel
|
|
positionerClassName="z-50"
|
|
className={cn(
|
|
"w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
|
|
dropdownClassName
|
|
)}
|
|
side={finalSide}
|
|
align={finalAlign}
|
|
sideOffset={8}
|
|
data-prevent-outside-click="true"
|
|
>
|
|
<div className="h-80 overflow-hidden overflow-y-auto">
|
|
<EmojiRoot
|
|
onChange={handleEmojiChange}
|
|
searchPlaceholder={searchPlaceholder}
|
|
searchDisabled={searchDisabled}
|
|
/>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Popover>
|
|
);
|
|
};
|