softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
346 lines (336 loc) • 8.96 kB
JavaScript
// src/components/BroadcastLists/index.tsx
import {
View as View3,
Text as Text2,
TouchableOpacity,
StyleSheet as StyleSheet2,
FlatList,
Dimensions
} from "react-native";
import React5, { useState as useState3, useEffect as useEffect2, useCallback } from "react";
import {
Events
} from "softchatjs-core";
// 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/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 MessagePlus = (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: "M8 9H16M8 13H14M12.5 20.5L12 21L9 18H6C5.20435 18 4.44129 17.6839 3.87868 17.1213C3.31607 16.5587 3 15.7956 3 15V7C3 6.20435 3.31607 5.44129 3.87868 4.87868C4.44129 4.31607 5.20435 4 6 4H18C18.7956 4 19.5587 4.31607 20.1213 4.87868C20.6839 5.44129 21 6.20435 21 7V12.5M16 19H22M19 16V22",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
};
var ArrowRight = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React4.createElement(Svg, { width: size, height: size * 2, viewBox: "0 0 12 24", fill: "none" }, /* @__PURE__ */ React4.createElement(
Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.1569 12.7111L4.49994 18.3681L3.08594 16.9541L8.03594 12.0041L3.08594 7.05414L4.49994 5.64014L10.1569 11.2971C10.3444 11.4847 10.4497 11.739 10.4497 12.0041C10.4497 12.2693 10.3444 12.5236 10.1569 12.7111Z",
fill: color
}
));
};
// src/components/BroadcastLists/index.tsx
function BroadcastLists(props) {
const { client, onOpen, renderPlaceholder } = props;
const { fontFamily, theme: theme2, fontScale } = useConfig();
const [broadcastLists, setBroadcastLists] = useState3([]);
const createNewBroadcastList = () => {
const newBroadcastList = client.newBroadcastList([
{
username: "skyline_ace",
uid: "a1b2c3d4e5",
firstname: "Alex",
lastname: "Smith",
profileUrl: "https://avatar.iran.liara.run/public",
custom: { bio: "Lover of heights", hobby: "Climbing" },
color: "#3498db"
}
]);
const res = newBroadcastList.create();
console.log(res);
};
useEffect2(() => {
}, []);
const handleBroadcastListMetaChanged = (event) => {
const list = Object.values(event.broadcastListMeta).flat();
setBroadcastLists(list);
};
useEffect2(() => {
const res = client.getBroadcastLists();
const list = Object.values(res).flat();
setBroadcastLists(list);
client.subscribe(
Events.BROADCAST_LIST_META_CHANGED,
handleBroadcastListMetaChanged
);
return () => {
client.unsubscribe(
Events.BROADCAST_LIST_META_CHANGED,
handleBroadcastListMetaChanged
);
};
}, []);
const renderBroadcastItem = useCallback(
({ item, index }) => {
if (props.renderItem) {
return /* @__PURE__ */ React5.createElement(TouchableOpacity, { key: index, onPress: () => onOpen(item) }, props.renderItem(item, index));
}
return /* @__PURE__ */ React5.createElement(
TouchableOpacity,
{
key: index,
style: [
{
...styles.broadcast_item
},
broadcastLists.length !== index + 1 && {
borderBottomWidth: 1,
borderColor: theme2.divider
}
],
onPress: () => onOpen(item)
},
/* @__PURE__ */ React5.createElement(View3, null, /* @__PURE__ */ React5.createElement(Text2, { style: { fontSize: 20 * fontScale, fontFamily } }, item.conversation.name), /* @__PURE__ */ React5.createElement(Text2, null, item.conversation.participants.length, " Recipients")),
/* @__PURE__ */ React5.createElement(ArrowRight, { size: 12, color: theme2.icon })
);
},
[props.renderItem, broadcastLists, fontScale]
);
return /* @__PURE__ */ React5.createElement(
View3,
{
style: { ...styles.main, backgroundColor: theme2?.background.primary }
},
/* @__PURE__ */ React5.createElement(
FlatList,
{
showsVerticalScrollIndicator: false,
data: broadcastLists,
renderItem: renderBroadcastItem,
ListEmptyComponent: renderPlaceholder ? renderPlaceholder() : /* @__PURE__ */ React5.createElement(
View3,
{
style: {
flex: 1,
height: Dimensions.get("window").height,
alignItems: "center",
justifyContent: "center"
}
},
/* @__PURE__ */ React5.createElement(MessagePlus, { size: 100, color: theme2?.icon }),
/* @__PURE__ */ React5.createElement(
Text2,
{
style: {
color: theme2?.text.disabled,
marginTop: 20 * fontScale,
fontFamily: fontFamily || void 0
}
},
"You have no broadcastlists yet"
)
)
}
)
);
}
var styles = StyleSheet2.create({
main: {
flex: 1,
height: "100%",
width: "100%",
padding: 20
},
broadcast_item: {
paddingVertical: 12,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
}
});
export {
BroadcastLists as default
};
//# sourceMappingURL=index.mjs.map