softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
280 lines (269 loc) • 7.26 kB
JavaScript
// src/components/Chat/ChatItem/Preview.tsx
import { View as View3, Text as Text2 } from "react-native";
import React5 from "react";
import { LinkPreview } from "@flyerhq/react-native-link-preview";
// 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/utils/index.ts
import moment from "moment";
import { MessageStates } from "softchatjs-core";
var truncate = (str, len) => {
return str.length > len ? str.substring(0, len) + "..." : str;
};
// src/assets/icons.tsx
import React4 from "react";
import { View as View2 } from "react-native";
import { Svg, Path, G, Defs, ClipPath, Rect } from "react-native-svg";
var LinkIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React4.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React4.createElement(
Path,
{
d: "M11 17H7C5.61667 17 4.43767 16.5123 3.463 15.537C2.48833 14.5617 2.00067 13.3827 2 12C1.99933 10.6173 2.487 9.43833 3.463 8.463C4.439 7.48767 5.618 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5627 7.48767 20.538 8.463C21.5133 9.43833 22.0007 10.6173 22 12C21.9993 13.3827 21.5117 14.562 20.537 15.538C19.5623 16.514 18.3833 17.0013 17 17H13Z",
fill: color
}
));
};
// src/components/Chat/ChatItem/Preview.tsx
import { Image } from "expo-image";
function Preview({
message,
color
}) {
const { theme: theme2, fontFamily, fontScale } = useConfig();
const urlRegex = /(https?:\/\/[^\s]+)/gi;
if (!urlRegex.test(message)) {
return null;
}
return /* @__PURE__ */ React5.createElement(
LinkPreview,
{
text: message,
renderLinkPreview: (data) => /* @__PURE__ */ React5.createElement(
View3,
{
style: {
flexDirection: "row",
alignItems: "flex-start",
width: "100%",
minWidth: 220,
// marginBottom: 5,
// borderWidth: 1,
// borderColor: theme?.icon,
padding: 8,
borderRadius: 10
}
},
data.previewData?.image?.url ? /* @__PURE__ */ React5.createElement(View3, { style: { height: 80, width: 80, borderRadius: 10, backgroundColor: "lightgrey", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React5.createElement(LinkIcon, { color: "black" })) : /* @__PURE__ */ React5.createElement(
Image,
{
source: { uri: data.previewData?.image?.url },
cachePolicy: "disk",
style: { backgroundColor: "lightgrey", borderRadius: 10, height: 80, width: 80 }
}
),
/* @__PURE__ */ React5.createElement(View3, { style: { flex: 1, width: "100%" } }, /* @__PURE__ */ React5.createElement(
Text2,
{
style: {
display: data.previewData?.title ? "flex" : "none",
flex: 1,
color,
marginStart: 8,
textDecorationLine: "underline",
fontFamily
}
},
data.previewData?.title
), /* @__PURE__ */ React5.createElement(
Text2,
{
style: {
display: data.previewData?.description ? "flex" : "none",
flex: 1,
color,
fontSize: 12 * fontScale,
marginStart: 8,
textDecorationLine: "underline",
fontFamily
}
},
truncate(data.previewData?.description || "", 100)
))
)
}
);
}
export {
Preview as default
};
//# sourceMappingURL=Preview.mjs.map