217 lines
8.9 KiB
TypeScript
217 lines
8.9 KiB
TypeScript
// Metro module 11751 (f11752).
|
|
import { useCallback, useEffect } from "react";
|
|
import { ScrollView, View } from "react-native";
|
|
import EmojiStore from "../../emojis/EmojiStore";
|
|
import ChannelStore from "../../../stores/ChannelStore";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import PermissionStore from "../../../stores/PermissionStore";
|
|
import WelcomeScreenStore, { NO_WELCOME_SCREEN } from "../WelcomeScreenStore";
|
|
import { WELCOME_SCREEN_TYPE } from "../WelcomeScreenConstants";
|
|
import { AnalyticEvents, Routes, Fonts } from "../../../Constants";
|
|
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
|
|
import { Permissions } from "../../../_bundle/Module505";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import TextStyles from "../../rebrand/native/TextStyles";
|
|
import { useStateFromStores, useStateFromStoresObject } from "../../../_bundle/Module589";
|
|
import useChannelName from "../../channel/useChannelName";
|
|
import { transitionTo } from "../../routing/router_utils";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import AvatarUtils from "../../../utils/AvatarUtils";
|
|
import UnicodeEmojis from "../../emojis/UnicodeEmojis";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { Icon } from "../../../design/void/native";
|
|
import Module10990 from "../../../_bundle/Module10990";
|
|
import { FormRow } from "../../../design/void/Form/native/index";
|
|
import Dispatcher from "../../../Dispatcher";
|
|
import { fetchWelcomeScreen, welcomeScreenViewed } from "../WelcomeScreenActionCreators";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
|
|
import GuildInviteIcon from "../../guild/native/GuildInviteIcon";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
let useStyles;
|
|
const WelcomeChannelRow = function WelcomeChannelRow(props) {
|
|
let leading;
|
|
const { welcomeChannel, trackOptionSelect: trackOptionSelect2 } = props;
|
|
const styles2 = useStyles();
|
|
const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(welcomeChannel.channel_id));
|
|
const channelName = useChannelName(stateFromStores, true);
|
|
const stateFromStores3 = useStateFromStores([PermissionStore], () => stateFromStores != null && PermissionStore.can(Permissions.VIEW_CHANNEL, stateFromStores));
|
|
const stateFromStores2 = useStateFromStores([EmojiStore], () => welcomeChannel.emoji_id != null ? EmojiStore.getCustomEmojiById(welcomeChannel.emoji_id) : null, [welcomeChannel.emoji_id]);
|
|
const callback2 = useCallback(() => {
|
|
if (stateFromStores != null) {
|
|
trackOptionSelect2();
|
|
transitionTo(Routes.CHANNEL(stateFromStores.guild_id, stateFromStores.id));
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
}
|
|
}, [stateFromStores, trackOptionSelect2]);
|
|
const r48 = stateFromStores != null;
|
|
let r49 = null;
|
|
if (r48) {
|
|
r49 = null;
|
|
if (stateFromStores3) {
|
|
L9: {
|
|
if (stateFromStores2 != null) {
|
|
leading = <FastImage style={styles2.emoji} source={{
|
|
uri: AvatarUtils.getEmojiURL({
|
|
id: stateFromStores2.id,
|
|
animated: stateFromStores2.animated,
|
|
size: EMOJI_URL_BASE_SIZE
|
|
})
|
|
}} resizeMode="contain" />;
|
|
} else {
|
|
if (welcomeChannel.emoji_name != null && UnicodeEmojis.getByName(UnicodeEmojis.convertSurrogateToName(welcomeChannel.emoji_name, false)) != null) {
|
|
leading = <Text style={styles2.emoji} variant="text-sm/medium">{welcomeChannel.emoji_name}</Text>;
|
|
break L9;
|
|
}
|
|
leading = <View style={styles2.placeholderEmojiWrapper}>
|
|
<Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10990} />
|
|
</View>;
|
|
}
|
|
}
|
|
r49 = <FormRow DEPRECATED_style={styles2.welcomeChannel} leading={leading} label={<Text variant="text-sm/semibold" color="interactive-text-active">{welcomeChannel.description}</Text>} subLabel={stateFromStores != null ? <Text variant="text-sm/medium" color="text-default">{channelName}</Text> : null} onPress={callback2} trailing={<FormRow.Arrow />} />;
|
|
}
|
|
}
|
|
return r49;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingHorizontal: 16,
|
|
width: "100%",
|
|
paddingVertical: 32,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
guildIcon: {
|
|
borderRadius: Module712.radii.sm,
|
|
width: 64,
|
|
height: 64,
|
|
marginBottom: 16
|
|
},
|
|
header: {
|
|
...TextStyles(Fonts.DISPLAY_EXTRABOLD, Module712.colors.TEXT_SUBTLE, 24),
|
|
marginBottom: 8,
|
|
textAlign: "center"
|
|
},
|
|
headerGuildName: {
|
|
...TextStyles(Fonts.DISPLAY_EXTRABOLD, Module712.colors.MOBILE_TEXT_HEADING_PRIMARY, 24)
|
|
},
|
|
guildDescription: {
|
|
textAlign: "center",
|
|
marginBottom: 30
|
|
},
|
|
welcomeChannel: {
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
marginTop: 8,
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
channelsTitle: {
|
|
alignSelf: "flex-start"
|
|
},
|
|
emoji: {
|
|
width: 24,
|
|
height: 24
|
|
},
|
|
placeholderEmojiWrapper: {
|
|
padding: 4,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
|
|
borderRadius: Module712.radii.xs
|
|
}
|
|
});
|
|
export default function GuildWelcomeActionSheet(props) {
|
|
let welcomeScreen, fetching, hasError, callback;
|
|
const { guildId, onHide } = props;
|
|
welcomeScreen = void 0;
|
|
fetching = void 0;
|
|
hasError = void 0;
|
|
callback = void 0;
|
|
const styles = useStyles();
|
|
const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
|
|
const stateFromStoresObject = useStateFromStoresObject([WelcomeScreenStore], () => ({
|
|
welcomeScreen: WelcomeScreenStore.get(guildId),
|
|
fetching: WelcomeScreenStore.isFetching(),
|
|
hasError: WelcomeScreenStore.hasError()
|
|
}));
|
|
welcomeScreen = stateFromStoresObject.welcomeScreen;
|
|
fetching = stateFromStoresObject.fetching;
|
|
hasError = stateFromStoresObject.hasError;
|
|
useEffect(() => {
|
|
if (welcomeScreen == null) {
|
|
Dispatcher.wait(() => fetchWelcomeScreen(guildId));
|
|
}
|
|
}, [guildId, welcomeScreen]);
|
|
useEffect(() => {
|
|
if (fetching === false && hasError === true) {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
}
|
|
}, [fetching, hasError]);
|
|
useEffect(() => {
|
|
if (welcomeScreen != null) {
|
|
Dispatcher.wait(() => welcomeScreenViewed(guildId));
|
|
}
|
|
}, [guildId, welcomeScreen]);
|
|
useEffect(() => {
|
|
if (welcomeScreen === NO_WELCOME_SCREEN) {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
}
|
|
}, [welcomeScreen]);
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
|
|
type: WELCOME_SCREEN_TYPE,
|
|
guild_id: guildId
|
|
});
|
|
}, [guildId]);
|
|
useEffect(() => () => {
|
|
if (onHide != null) {
|
|
onHide();
|
|
}
|
|
}, [onHide]);
|
|
callback = useCallback((a0) => {
|
|
if (welcomeScreen != null) {
|
|
const options = [];
|
|
let c27145_0 = options;
|
|
const options_channel_ids = [];
|
|
let c27145_1 = options_channel_ids;
|
|
let has_custom_emojis = false;
|
|
welcomeScreen.welcome_channels.forEach((welcome_channel) => {
|
|
c27145_0.push(welcome_channel.description);
|
|
c27145_1.push(welcome_channel.channel_id);
|
|
if (welcome_channel.emoji_id != null) {
|
|
has_custom_emojis = true;
|
|
}
|
|
});
|
|
AnalyticsUtils.track(AnalyticEvents.GUILD_WELCOME_SCREEN_OPTION_SELECTED, {
|
|
index: a0,
|
|
guild_id: guildId,
|
|
options,
|
|
options_channel_ids,
|
|
guild_description: welcomeScreen.description,
|
|
has_custom_emojis
|
|
});
|
|
}
|
|
}, [guildId, welcomeScreen]);
|
|
return stateFromStores2 == null ? null : welcomeScreen == null ? null : <ActionSheet startExpanded>
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
<GuildInviteIcon style={styles.guildIcon} guild={stateFromStores2} size={GuildInviteIcon.Sizes.MEDIUM} textScale={2} />
|
|
<Text style={styles.header} variant="heading-xl/extrabold" color="text-default">
|
|
{intl.format(t["0aydCN"], {
|
|
guildName: stateFromStores2.name,
|
|
guildNameHook: (a0, a1) => <Text key={a1} style={styles.headerGuildName} variant="heading-xl/extrabold" color="mobile-text-heading-primary">
|
|
{a0}
|
|
</Text>
|
|
})}
|
|
</Text>
|
|
<Text style={styles.guildDescription} variant="text-sm/medium" color="text-default">{welcomeScreen.description}</Text>
|
|
<Text style={styles.channelsTitle} variant="eyebrow" color="text-default">
|
|
{intl.string(t["haj5+i"]).toUpperCase()}
|
|
</Text>
|
|
{welcomeScreen.welcome_channels.map((welcome_channel, index) => {
|
|
return <WelcomeChannelRow key={index} welcomeChannel={welcome_channel} trackOptionSelect={() => callback(index)} />;
|
|
})}
|
|
</ScrollView>
|
|
</ActionSheet>;
|
|
};
|
|
export { WelcomeChannelRow };
|