@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
63 lines • 3.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.HoverReactionsBarControl = void 0;
var tslib_1 = require("tslib");
/* eslint-disable no-unused-expressions */
/* eslint-disable @rushstack/no-new-null */
var React = tslib_1.__importStar(require("react"));
var react_components_1 = require("@fluentui/react-components");
var react_1 = require("@iconify/react");
var useFluentEmojis_1 = require("../../hooks/useFluentEmojis");
var useOnClickOutside_1 = require("../../hooks/useOnClickOutside");
var ReactionPicker_1 = require("../reactionPicker/ReactionPicker");
var RenderEmoji_1 = require("../reactionPicker/RenderEmoji");
var useHoverReactionsStyles_1 = require("./useHoverReactionsStyles");
var HoverReactionsBarControl = function (props) {
var onSelect = props.onSelect, isOpen = props.isOpen, onDismiss = props.onDismiss, top4Reactions = props.top4Reactions, target = props.target;
var _a = React.useState(false), showEmojiPicker = _a[0], setShowEmojiPicker = _a[1];
var getFluentEmojiByName = (0, useFluentEmojis_1.useFluentEmojis)().getFluentEmojiByName;
var styles = (0, useHoverReactionsStyles_1.useHoverReactionsStyles)();
var _b = React.useState([]), renderEmoji = _b[0], setRenderEmoji = _b[1];
var defaultTop4Reactions = ["Thumbs up", "Red heart", "grinning face with big eyes", "Face with open mouth"];
var toolbarRef = React.useRef(null);
var onClose = React.useCallback(function () {
onDismiss();
}, [onDismiss]);
(0, useOnClickOutside_1.useOnClickOutside)(true, toolbarRef, onClose);
var loadEmoji = React.useCallback(function () {
var topReaction = top4Reactions && (top4Reactions === null || top4Reactions === void 0 ? void 0 : top4Reactions.length) > 0 ? top4Reactions : defaultTop4Reactions;
var renderEmoji = [];
for (var _i = 0, topReaction_1 = topReaction; _i < topReaction_1.length; _i++) {
var emojii = topReaction_1[_i];
var emojiInfo = getFluentEmojiByName(emojii);
if (emojiInfo) {
renderEmoji.push(React.createElement(RenderEmoji_1.RenderEmoji, { key: emojii, className: styles.emojiImage, emoji: emojiInfo, onSelect: function (emoji, emojiInfo) {
onSelect(emoji, emojiInfo);
} }));
}
}
renderEmoji.push(React.createElement(react_1.Icon, { key: "add", className: styles.emojiImage, icon: "fluent:emoji-add-16-regular", width: 30, height: 30, onClick: function (ev) {
ev.preventDefault();
ev.stopPropagation();
setShowEmojiPicker(true);
} }));
setRenderEmoji(renderEmoji);
}, [getFluentEmojiByName, onSelect, onDismiss, top4Reactions, defaultTop4Reactions]);
React.useEffect(function () {
setRenderEmoji([]);
loadEmoji();
}, [isOpen]);
return (React.createElement(React.Fragment, null,
React.createElement(react_components_1.Card, { className: styles.card, style: {
display: isOpen ? "block" : "none",
top: (target === null || target === void 0 ? void 0 : target.offsetTop) - 55,
left: target === null || target === void 0 ? void 0 : target.offsetLeft,
}, ref: toolbarRef },
React.createElement("div", { className: styles.cardContent },
React.createElement("div", { className: styles.emojiList }, renderEmoji)),
showEmojiPicker && (React.createElement(ReactionPicker_1.ReactionPicker, { returnType: "image", isOpen: showEmojiPicker, onDismiss: function () {
setShowEmojiPicker(false);
}, onSelect: onSelect, target: toolbarRef === null || toolbarRef === void 0 ? void 0 : toolbarRef.current })))));
};
exports.HoverReactionsBarControl = HoverReactionsBarControl;
//# sourceMappingURL=HoverReactionBarControl.js.map