react-quick-reactions
Version:
A popup emoji-reaction component for React.
21 lines (20 loc) • 3.12 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { OuterDiv, CloseButton, Header, SelectionContainer, ReactionElement, Overlay, PopupPositioningWrapper, } from "../../styles/ReactionPopoverStyles";
import { CloseSvg } from "../svg/CloseSvg";
export const ReactionPopover = (props) => {
const { animation = "fade", isVisible = false, onClickReaction, closeButton, header = "Quick reactions", outerDivClassName, closeButtonClassName, headerClassName, selectionContainerClassName, reactionElementClassName, reactionsArray, changeHeaderOnReactionElemHover = true, hideHeader, hideCloseButton, disableClickAwayToClose, onClose, wide, triggerTransformValues, placement = "bottom-start", } = props;
const [popoverHeader, setPopoverHeader] = useState(header);
// Resets the popover header to its default value (props.headerAlt).
const resetHeader = () => setPopoverHeader(header);
return (_jsxs(_Fragment, { children: [!disableClickAwayToClose && isVisible && _jsx(Overlay, { onClick: onClose }), _jsx(PopupPositioningWrapper, Object.assign({ triggerTransformValues: triggerTransformValues, placement: placement, hideHeader: hideHeader, wide: wide, arrayLength: reactionsArray.length }, { children: _jsxs(OuterDiv, Object.assign({ className: "rqr-outer-div" + (outerDivClassName ? " " + outerDivClassName : ""), visible: isVisible, hideHeader: hideHeader, wide: wide, arrayLength: reactionsArray.length, animation: animation }, { children: [!hideHeader && (_jsx(Header, Object.assign({ className: "rqr-header" + (headerClassName ? " " + headerClassName : "") }, { children: popoverHeader }))), !hideCloseButton && (_jsx(CloseButton, Object.assign({ className: "rqr-close-button" +
(closeButtonClassName ? " " + closeButtonClassName : ""), onClick: onClose, wide: wide }, { children: closeButton ? closeButton : _jsx(CloseSvg, {}) }))), _jsx(SelectionContainer, Object.assign({ className: "rqr-selection-container" +
(selectionContainerClassName
? " " + selectionContainerClassName
: "") }, { children: reactionsArray === null || reactionsArray === void 0 ? void 0 : reactionsArray.map((item, index) => (_jsx(ReactionElement, Object.assign({ className: "rqr-reaction-element" +
(reactionElementClassName
? " " + reactionElementClassName
: ""), id: item === null || item === void 0 ? void 0 : item.id, onClick: () => onClickReaction(item), onMouseEnter: changeHeaderOnReactionElemHover
? () => setPopoverHeader(item === null || item === void 0 ? void 0 : item.name)
: () => undefined, onMouseLeave: resetHeader }, { children: item === null || item === void 0 ? void 0 : item.content }), (item === null || item === void 0 ? void 0 : item.name) + "-" + index))) }))] })) }))] }));
};