softchatjs-react-native/dist/components/Chat/ChatItem/Reactions.mjs

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

// src/components/Chat/ChatItem/Reactions.tsx
import React4 from "react";
import { View as View2, TouchableOpacity, Text as Text2, Platform } from "react-native";

// src/contexts/ChatProvider.tsx
import React3, { createContext as createContext3, useContext as useContext3 } from "react";

// src/contexts/ModalProvider.tsx
import React, { createContext, useContext, useState } from "react";
import {
  Modal,
  View
} from "react-native";
var initial = {
  displayModal: () => {
  },
  resetModal: () => {
  },
  modalProps: {
    dismissable: true,
    justifyContent: "center",
    children: null,
    animation: "slide",
    containerWidth: "100%"
  }
};
var ModalProviderContext = createContext(initial);

// src/theme/colors.ts
var teal = {
  50: "#DCF2F0",
  100: "#A9DFD8",
  200: "#73CABE",
  300: "#3AB4A4",
  400: "#00A391",
  500: "#00927E",
  600: "#008572",
  700: "#007662",
  800: "#006654",
  900: "#004A38"
};
var green = {
  50: "#E6F5E4",
  100: "#C2E6BD",
  200: "#9AD693",
  300: "#6FC666",
  400: "#4ABA42",
  500: "#17AE13",
  600: "#029F04",
  700: "#008D00",
  800: "#007C00",
  900: "#005E00"
};
var grey = {
  50: "#F6F6FF",
  100: "#F2F1FF",
  200: "#EBEBF9",
  300: "#CAC9D7",
  400: "#ACACB9",
  500: "#82818F",
  600: "#6D6D7A",
  700: "#4D4D59",
  800: "#2B2B36",
  900: "#21222D",
  A100: "#1D1E26"
};
var stone = {
  50: "#F8F8F8",
  100: "#EFEFEF",
  200: "#E8E8E8",
  300: "#D9D9D9",
  400: "#D2D2D2",
  500: "#A0A0A0",
  600: "#87888C",
  700: "#2C2D33",
  800: "#1D1E26",
  900: "#171821"
};

// src/theme/index.ts
var theme = {
  background: {
    primary: stone[900],
    secondary: grey[900],
    disabled: grey[800]
  },
  text: {
    primary: "black",
    secondary: stone[200],
    disabled: stone[500]
  },
  action: {
    primary: teal[50],
    secondary: stone[300]
  },
  chatBubble: {
    left: {
      bgColor: grey[900],
      messageColor: stone[200],
      messageTimeColor: "grey",
      replyBorderColor: stone[200]
    },
    right: {
      bgColor: "#474952",
      messageColor: "white",
      messageTimeColor: "grey",
      replyBorderColor: green[900]
    }
  },
  icon: "white",
  divider: stone[700]
};
var theme_default = theme;

// src/contexts/MessageStateContext.tsx
import React2, {
  createContext as createContext2,
  useState as useState2,
  useContext as useContext2
} from "react";
import { Audio } from "expo-av";

// src/constants/defaultUser.ts
var defaultUser_default = {
  id: "",
  uid: "",
  username: "",
  firstname: "",
  lastname: "",
  profileUrl: "",
  color: "",
  custom: {}
};

// src/contexts/MessageStateContext.tsx
var initialMessageStateContext = {
  globalTextMessage: "",
  setGlobalTextMessage: () => {
  },
  stickers: [],
  setStickers: () => {
  },
  pendingMessages: [],
  addNewPendingMessages: (message) => {
  },
  removePendingMessage: (messageId) => {
  },
  updatePendingMessage: (messageId, message) => {
  },
  playVoiceMessage: (media) => {
  },
  pauseVoiceMessage: () => {
  },
  resumeVoiceMessage: () => {
  },
  audioState: null,
  unload: () => {
  },
  sound: null,
  activeVoiceMessage: null,
  avPlayBackStatus: null,
  userMeta: defaultUser_default,
  setUserMeta: () => {
  },
  conversationList: [],
  setConversationList: () => {
  }
};
var MessageStateContext = createContext2(
  initialMessageStateContext
);

// src/contexts/ChatProvider.tsx
var ConfigContext = createContext3({
  theme: theme_default,
  client: null,
  fontFamily: void 0,
  fontScale: 1
});
function useConfig() {
  return useContext3(ConfigContext);
}

// src/components/Chat/ChatItem/Reactions.tsx
function Reactions(props) {
  const { reactions, position, conversationId, messageId, chatUserId, recipientId, layout } = props;
  const { client, theme: theme2, fontScale } = useConfig();
  const removeReaction = (selected) => {
    if (client) {
      if (selected.uid === chatUserId) {
        const index = reactions.indexOf(selected);
        if (index !== -1) {
          const updateReactions = reactions.filter((r) => reactions.indexOf(r) !== index);
          client.messageClient(conversationId).reactToMessage(
            {
              conversationId,
              messageId,
              reactions: updateReactions,
              to: recipientId
            }
          );
        }
      }
    }
  };
  return /* @__PURE__ */ React4.createElement(View2, { style: [{ flexDirection: "row" }] }, reactions.map((reaction, i) => /* @__PURE__ */ React4.createElement(
    TouchableOpacity,
    {
      key: i,
      onPress: () => removeReaction(reaction),
      style: {
        backgroundColor: position === "left" ? theme2?.background.primary : theme2?.background.secondary,
        borderRadius: 45,
        borderWidth: 1,
        borderColor: theme2?.divider,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row"
      }
    },
    /* @__PURE__ */ React4.createElement(
      Text2,
      {
        style: { fontSize: Platform.OS === "android" ? 16 * fontScale : 18 * fontScale }
      },
      reaction.emoji
    )
  )));
}
export {
  Reactions as default
};
//# sourceMappingURL=Reactions.mjs.map