@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
156 lines • 8.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReactionPicker = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable no-unused-expressions */
var React = tslib_1.__importStar(require("react"));
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var react_components_1 = require("@fluentui/react-components");
var react_1 = require("@iconify/react");
var fluentEmojis_json_1 = tslib_1.__importDefault(require("../../data/fluentEmojis.json"));
var useFluentEmojis_1 = require("../../hooks/useFluentEmojis");
var useOnClickOutside_1 = require("../../hooks/useOnClickOutside");
var ReactionGroups_1 = require("./ReactionGroups");
var RenderEmoji_1 = require("./RenderEmoji");
var useReactionPickerStyle_1 = require("./useReactionPickerStyle");
var PICKER_WIDTH = 350;
var PICKER_HEIGHT = 420;
var DEFAULT_GROUP = 'Smileys & Emotion';
var ReactionPicker = function (props) {
var onSelect = props.onSelect, isOpen = props.isOpen, onDismiss = props.onDismiss, returnType = props.returnType, target = props.target;
var pickerRef = React.useRef(null);
var styles = (0, useReactionPickerStyle_1.useReactionPickerStyles)();
var _a = React.useState([]), renderEmoji = _a[0], setRenderEmoji = _a[1];
var _b = React.useState(''), searchValue = _b[0], setSearchValue = _b[1];
var _c = React.useState(), groups = _c[0], setGroups = _c[1];
var _d = React.useState(DEFAULT_GROUP), selectedGroup = _d[0], setSelectedGroup = _d[1];
var groupsRef = React.useRef();
var _e = React.useState(), pickerStyles = _e[0], setStyles = _e[1];
var isSearchingRef = React.useRef(false);
var _f = (0, useFluentEmojis_1.useFluentEmojis)(), getFluentEmojisByGroup = _f.getFluentEmojisByGroup, getFluentEmojis = _f.getFluentEmojis;
var onClose = React.useCallback(function () {
onDismiss();
}, [onDismiss]);
(0, useOnClickOutside_1.useOnClickOutside)(true, pickerRef, onClose);
var loadEmoji = React.useCallback(function (selectedGroup) {
isSearchingRef.current = false;
setSearchValue('');
if (!(groupsRef === null || groupsRef === void 0 ? void 0 : groupsRef.current)) {
return;
}
var emojiList = selectedGroup
? groupsRef.current[selectedGroup]
: groups[DEFAULT_GROUP];
setRenderEmoji([]);
var _loop_1 = function (index) {
var emojiInfo = emojiList[index];
if (emojiInfo) {
setRenderEmoji(function (emojis) {
return tslib_1.__spreadArray(tslib_1.__spreadArray([], emojis, true), [
React.createElement(RenderEmoji_1.RenderEmoji, { key: index, emoji: emojiInfo, onSelect: function (emoji) {
document.body.style.pointerEvents = '';
onSelect(emoji, emojiInfo);
onDismiss();
} }),
], false);
});
}
};
for (var index = 0; index < emojiList.length; index++) {
_loop_1(index);
}
}, [fluentEmojis_json_1.default, onSelect, onDismiss, groups, returnType]);
React.useEffect(function () {
var countainerBounds = target === null || target === void 0 ? void 0 : target.getBoundingClientRect();
var pickerTopPosition = 0;
var pickerLeftPosition = 0;
if ((countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.top) + PICKER_HEIGHT > window.innerHeight) {
pickerTopPosition = countainerBounds.top - PICKER_HEIGHT - 10;
if (pickerTopPosition < 0) {
pickerTopPosition = 0;
}
}
else {
pickerTopPosition = (countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.bottom) + 10;
if (pickerTopPosition < 0) {
pickerTopPosition = 0;
}
}
if ((countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.left) + PICKER_WIDTH > window.innerWidth) {
pickerLeftPosition = (countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.left) - PICKER_WIDTH;
}
else {
pickerLeftPosition = countainerBounds === null || countainerBounds === void 0 ? void 0 : countainerBounds.left;
}
setStyles({
top: "".concat(pickerTopPosition, "px"),
left: "".concat(pickerLeftPosition, "px"),
zIndex: '1000000',
display: isOpen ? 'block' : 'none',
});
}, [target, isOpen, pickerRef]);
React.useEffect(function () {
var listByGroup = getFluentEmojisByGroup();
groupsRef.current = listByGroup;
setGroups(listByGroup);
}, []);
React.useEffect(function () {
setRenderEmoji([]);
setSearchValue('');
loadEmoji(DEFAULT_GROUP);
}, [isOpen]);
var searchEmoji = React.useCallback(function (searchText) {
isSearchingRef.current = true;
var mewlist = getFluentEmojis().filter(function (emojiInfo) {
var _a;
if (emojiInfo) {
return (_a = emojiInfo.keywords) === null || _a === void 0 ? void 0 : _a.some(function (keyword) {
return keyword.includes(searchText);
});
}
return false;
});
setRenderEmoji([]);
var _loop_2 = function (index) {
var emojiInfo = mewlist[index];
if (emojiInfo) {
setRenderEmoji(function (emojis) {
return tslib_1.__spreadArray(tslib_1.__spreadArray([], emojis, true), [
React.createElement(RenderEmoji_1.RenderEmoji, { key: index, emoji: emojiInfo, onSelect: function (emoji) {
onSelect(emoji, emojiInfo);
onDismiss();
} }),
], false);
});
}
};
for (var index = 0; index < mewlist.length; index++) {
_loop_2(index);
}
}, [onSelect, onDismiss, groups, returnType]);
return (React.createElement(React.Fragment, null,
React.createElement(react_components_1.Card, { className: styles.card, style: pickerStyles, ref: pickerRef },
React.createElement("div", { className: styles.cardContent },
React.createElement(react_components_1.Input, { value: searchValue, placeholder: ControlStrings_1.default.HoverReactionBarSearchEmojiPlaceholder, onChange: function (ev, data) {
var _a;
setSearchValue((data === null || data === void 0 ? void 0 : data.value) || '');
if (!((_a = ev.currentTarget) === null || _a === void 0 ? void 0 : _a.value)) {
loadEmoji(selectedGroup);
}
else {
searchEmoji(ev.currentTarget.value);
}
}, type: "search", className: styles.searchBox, contentBefore: React.createElement(react_1.Icon, { icon: "fluent:search-20-regular", color: react_components_1.tokens.colorBrandForeground1 }), onKeyDown: function (ev) {
if (ev.key === 'Enter') {
searchEmoji(ev.currentTarget.value);
}
} }),
React.createElement("div", { className: styles.emojiList }, renderEmoji),
isSearchingRef.current ? null : (React.createElement(ReactionGroups_1.ReactionGroups, { selectedGroup: selectedGroup, groups: groups, onSelectedGroup: function (groupName) {
setSelectedGroup(groupName);
loadEmoji(groupName);
} }))))));
};
exports.ReactionPicker = ReactionPicker;
//# sourceMappingURL=ReactionPicker.js.map