replyke-rn/dist/components/shared/EmojiSuggestions.js

Replyke React Native components: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.

"use strict";
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var react_native_1 = require("react-native");
// const commonEmojis10 = [
//   "😂",
//   "❤️",
//   "🤣",
//   "😍",
//   "🙏",
//   "🥰",
//   "😊",
//   "😭",
//   "👍",
//   "😅",
// ];
var commonEmojis15 = [
    "😂",
    "❤️",
    "🤣",
    "😍",
    "🙏",
    "🥰",
    "😊",
    "😭",
    "👍",
    "😅",
    "😢",
    "👏",
    "💕",
    "🥺",
    "😘",
];
var EmojiSuggestions = function (_a) {
    var onEmojiClick = _a.onEmojiClick;
    var _b = (0, react_1.useState)(null), clickedEmoji = _b[0], setClickedEmoji = _b[1];
    var scaleAnim = (0, react_1.useState)(new react_native_1.Animated.Value(1))[0];
    var _c = (0, react_1.useState)([]), emojiSubset = _c[0], setEmojiSubset = _c[1];
    (0, react_1.useEffect)(function () {
        // Pick 8 random emojis from the array
        var shuffled = __spreadArray([], commonEmojis15, true).sort(function () { return 0.5 - Math.random(); });
        setEmojiSubset(shuffled.slice(0, 8));
    }, []);
    var handleEmojiClick = function (emoji) {
        setClickedEmoji(emoji);
        // Shrink animation
        react_native_1.Animated.sequence([
            react_native_1.Animated.timing(scaleAnim, {
                toValue: 0.8,
                duration: 100,
                useNativeDriver: true,
            }),
            react_native_1.Animated.timing(scaleAnim, {
                toValue: 1,
                duration: 100,
                useNativeDriver: true,
            }),
        ]).start(function () {
            setClickedEmoji(null);
        });
        onEmojiClick(emoji);
    };
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
            borderBottomWidth: 0.5,
            borderBottomColor: "#e6e6e6",
            padding: 8,
            flexDirection: "row",
            justifyContent: "space-around", // Distribute emojis evenly
            alignItems: "center",
        }, children: emojiSubset.map(function (emoji) { return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: function () { return handleEmojiClick(emoji); }, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
                    transform: [
                        {
                            scale: clickedEmoji === emoji ? scaleAnim : 1,
                        },
                    ],
                    justifyContent: "center",
                    alignItems: "center",
                }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
                        fontSize: 24,
                    }, children: emoji }) }) }, emoji)); }) }));
};
exports.default = EmojiSuggestions;
//# sourceMappingURL=EmojiSuggestions.js.map