react-quick-reactions
Version:
A popup emoji-reaction component for React.
25 lines (24 loc) • 3.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReactionPopover = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ReactionPopoverStyles_1 = require("../../styles/ReactionPopoverStyles");
const CloseSvg_1 = require("../svg/CloseSvg");
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] = (0, react_1.useState)(header);
// Resets the popover header to its default value (props.headerAlt).
const resetHeader = () => setPopoverHeader(header);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!disableClickAwayToClose && isVisible && (0, jsx_runtime_1.jsx)(ReactionPopoverStyles_1.Overlay, { onClick: onClose }), (0, jsx_runtime_1.jsx)(ReactionPopoverStyles_1.PopupPositioningWrapper, Object.assign({ triggerTransformValues: triggerTransformValues, placement: placement, hideHeader: hideHeader, wide: wide, arrayLength: reactionsArray.length }, { children: (0, jsx_runtime_1.jsxs)(ReactionPopoverStyles_1.OuterDiv, Object.assign({ className: "rqr-outer-div" + (outerDivClassName ? " " + outerDivClassName : ""), visible: isVisible, hideHeader: hideHeader, wide: wide, arrayLength: reactionsArray.length, animation: animation }, { children: [!hideHeader && ((0, jsx_runtime_1.jsx)(ReactionPopoverStyles_1.Header, Object.assign({ className: "rqr-header" + (headerClassName ? " " + headerClassName : "") }, { children: popoverHeader }))), !hideCloseButton && ((0, jsx_runtime_1.jsx)(ReactionPopoverStyles_1.CloseButton, Object.assign({ className: "rqr-close-button" +
(closeButtonClassName ? " " + closeButtonClassName : ""), onClick: onClose, wide: wide }, { children: closeButton ? closeButton : (0, jsx_runtime_1.jsx)(CloseSvg_1.CloseSvg, {}) }))), (0, jsx_runtime_1.jsx)(ReactionPopoverStyles_1.SelectionContainer, Object.assign({ className: "rqr-selection-container" +
(selectionContainerClassName
? " " + selectionContainerClassName
: "") }, { children: reactionsArray === null || reactionsArray === void 0 ? void 0 : reactionsArray.map((item, index) => ((0, jsx_runtime_1.jsx)(ReactionPopoverStyles_1.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))) }))] })) }))] }));
};
exports.ReactionPopover = ReactionPopover;