softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
346 lines (332 loc) • 9.91 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Modals/UserList.tsx
var UserList_exports = {};
__export(UserList_exports, {
default: () => UserList
});
module.exports = __toCommonJS(UserList_exports);
var import_react_native4 = require("react-native");
var import_react6 = __toESM(require("react"));
// src/contexts/ChatProvider.tsx
var import_react3 = __toESM(require("react"));
// src/contexts/ModalProvider.tsx
var import_react = __toESM(require("react"));
var import_react_native = require("react-native");
var initial = {
displayModal: () => {
},
resetModal: () => {
},
modalProps: {
dismissable: true,
justifyContent: "center",
children: null,
animation: "slide",
containerWidth: "100%"
}
};
var ModalProviderContext = (0, import_react.createContext)(initial);
var useModalProvider = () => (0, import_react.useContext)(ModalProviderContext);
// 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
var import_react2 = __toESM(require("react"));
var import_expo_av = require("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 = (0, import_react2.createContext)(
initialMessageStateContext
);
// src/contexts/ChatProvider.tsx
var ConfigContext = (0, import_react3.createContext)({
theme: theme_default,
client: null,
fontFamily: void 0,
fontScale: 1
});
function useConfig() {
return (0, import_react3.useContext)(ConfigContext);
}
// src/assets/icons.tsx
var import_react4 = __toESM(require("react"));
var import_react_native2 = require("react-native");
var import_react_native_svg = require("react-native-svg");
function XIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ import_react4.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react4.default.createElement(
import_react_native_svg.Path,
{
d: "M6 18L17.94 6M18 18L6.06 6",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
// src/components/Chat/MessageAvatar.tsx
var import_react5 = __toESM(require("react"));
var import_react_native3 = require("react-native");
// src/constants/Colors.ts
var Colors = {
greyLighter: "#F0F0F0"
};
// src/components/Chat/MessageAvatar.tsx
var import_expo_image = require("expo-image");
function MessageAvatar(props) {
const { imgUrl, initials, size = 40, style } = props;
const { fontFamily } = useConfig();
return /* @__PURE__ */ import_react5.default.createElement(
import_react_native3.TouchableOpacity,
{
style: {
height: size,
width: size,
borderRadius: size,
backgroundColor: "black",
alignItems: "center",
justifyContent: "center",
...style
}
},
imgUrl ? /* @__PURE__ */ import_react5.default.createElement(
import_expo_image.Image,
{
source: { uri: imgUrl },
cachePolicy: "disk",
style: {
height: size,
width: size,
borderRadius: size,
backgroundColor: Colors.greyLighter
}
}
) : /* @__PURE__ */ import_react5.default.createElement(
import_react_native3.Text,
{
style: {
fontSize: size / 2,
textTransform: "uppercase",
color: "white",
fontFamily
}
},
initials
)
);
}
// src/components/Modals/UserList.tsx
function UserList(props) {
const { data, goToChat, title = "Start conversation" } = props;
const { theme: theme2, client, fontFamily } = useConfig();
const { resetModal } = useModalProvider();
const startChat = (data2) => {
if (client) {
const msClient = client.newConversation({ ...data2 }, null);
const res = msClient.create("Hey\u{1F44B}");
resetModal();
setTimeout(() => {
goToChat();
}, 500);
}
};
return /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: { ...styles.container, backgroundColor: theme2?.background.primary } }, /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: { ...styles.header } }, /* @__PURE__ */ import_react6.default.createElement(import_react_native4.Text, { style: { color: theme2?.text.secondary, fontFamily, fontSize: 25 } }, title), /* @__PURE__ */ import_react6.default.createElement(import_react_native4.TouchableOpacity, { onPress: () => resetModal() }, /* @__PURE__ */ import_react6.default.createElement(XIcon, { size: 25, color: theme2?.icon }))), /* @__PURE__ */ import_react6.default.createElement(
import_react_native4.FlatList,
{
data,
style: { marginTop: 20 },
renderItem: ({ item, index }) => /* @__PURE__ */ import_react6.default.createElement(
import_react_native4.TouchableOpacity,
{
onPress: () => startChat(item),
style: styles.userItem
},
/* @__PURE__ */ import_react6.default.createElement(
MessageAvatar,
{
size: 50,
initials: item.username.substring(0, 1),
imgUrl: item.profileUrl,
style: { marginEnd: 15 }
}
),
/* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: { flex: 1 } }, /* @__PURE__ */ import_react6.default.createElement(import_react_native4.Text, { style: { color: theme2?.text.secondary, fontSize: 18, fontFamily } }, item.firstname, " ", item.lastname), /* @__PURE__ */ import_react6.default.createElement(import_react_native4.Text, { style: { color: theme2?.text.secondary, fontFamily, fontSize: 12 } }, item.username))
)
}
));
}
var styles = import_react_native4.StyleSheet.create({
container: {
flex: 1,
height: "100%",
width: "100%",
padding: 20
},
header: {
// height: 50,
width: "100%",
flexDirection: "row",
alignItems: "center",
paddingTop: import_react_native4.Platform.OS === "ios" ? 30 : 10,
justifyContent: "space-between"
},
userItem: {
height: 70,
width: "100%",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
}
});
//# sourceMappingURL=UserList.js.map