300 lines
12 KiB
TypeScript
300 lines
12 KiB
TypeScript
// Metro module 5536 (f5537).
|
|
import { useMemo, useLayoutEffect, useRef, useEffect } from "react";
|
|
import { View, StyleSheet } from "react-native";
|
|
import AccessibilityStore from "../../a11y/AccessibilityStore";
|
|
import GuildRoleStore from "../../../stores/GuildRoleStore";
|
|
import GuildStore from "../../../stores/GuildStore";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import GuildOnboardingPromptsStore from "../GuildOnboardingPromptsStore";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
|
|
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
|
|
import useGuildRoleMemberCounts from "../../guild_role_subscriptions/useGuildRoleMemberCounts";
|
|
import { useThemeContext } from "../../../_bundle/Module3901";
|
|
import { useProfileThemeValues } from "../../user_profile/useProfileThemeValues.native";
|
|
import AvatarUtils from "../../../utils/AvatarUtils";
|
|
import getDevicePixelRatio_native from "../../../utils/getDevicePixelRatio.native";
|
|
import { isNotNullish } from "../../../utils/GlobalUtils";
|
|
import { useIsScreenReaderEnabled } from "../../a11y/native/useIsScreenReaderEnabled.native";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import * as _timing from "../../../design/animation/reanimated/timing/timing";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Avatar, AvatarSizes } from "../../../design/void/native";
|
|
import { RoleItem } from "../../user_profile/native/UserProfileRolesCard";
|
|
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
|
|
import Module3771 from "../../../_bundle/Module3771";
|
|
import Module5569 from "../../../_bundle/Module5569";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
const ANIMATION_DURATION = 400;
|
|
const useStyles = createStyles({
|
|
screen: {
|
|
flex: 1,
|
|
position: "relative"
|
|
},
|
|
container: {
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
paddingHorizontal: 24,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
flexGrow: 1
|
|
},
|
|
containerWithoutSplash: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
backgroundImage: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%"
|
|
},
|
|
title: {},
|
|
subtitle: {
|
|
marginTop: 16
|
|
},
|
|
card: {
|
|
marginTop: 24,
|
|
padding: 16,
|
|
paddingBottom: 32,
|
|
borderRadius: Module712.radii.sm,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
|
|
},
|
|
username: {
|
|
marginTop: 16
|
|
},
|
|
rolesHeader: {
|
|
marginTop: 8
|
|
},
|
|
roles: {
|
|
marginTop: 12,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap"
|
|
},
|
|
role: {
|
|
marginRight: 8
|
|
},
|
|
roleOverflow: {
|
|
paddingHorizontal: 8,
|
|
height: 28,
|
|
borderRadius: Module712.radii.xs,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: Module712.colors.BORDER_SUBTLE
|
|
},
|
|
animation: {
|
|
marginTop: 24,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
borderWidth: 2,
|
|
borderRadius: Module712.radii.sm,
|
|
padding: 12,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
wave: {
|
|
transform: [{
|
|
translateX: 24
|
|
}, {
|
|
rotate: "5deg"
|
|
}]
|
|
},
|
|
animationText: {
|
|
flexGrow: 1,
|
|
marginLeft: 8
|
|
},
|
|
getStartedButton: {
|
|
marginTop: 24
|
|
}
|
|
});
|
|
const __initData = {
|
|
code: "function GuildOnboardingCompletedTsx1(){const{withSequence,withTiming,withDelay,ANIMATION_DURATION,Easing,useReducedMotion}=this.__closure;const opacity=withSequence(withTiming(0,{duration:0}),withDelay(ANIMATION_DURATION,withTiming(0.5,{duration:ANIMATION_DURATION})),withTiming(1,{duration:ANIMATION_DURATION,easing:Easing.out(Easing.ease)}));const scale=withSequence(withTiming(1,{duration:0}),withDelay(ANIMATION_DURATION,withTiming(1.5,{duration:ANIMATION_DURATION,easing:Easing.out(Easing.ease)})),withTiming(1,{duration:useReducedMotion?1:ANIMATION_DURATION,easing:Easing.out(Easing.ease)}));const rawRotation=withSequence(withTiming('0deg',{duration:0}),withDelay(ANIMATION_DURATION,withTiming('-2deg',{duration:ANIMATION_DURATION})),withTiming('-5deg',{duration:ANIMATION_DURATION}));return{opacity:opacity,transform:[{rotate:rawRotation},{scale:scale}]};}"
|
|
};
|
|
export default function GuildOnboardingCompleted(props) {
|
|
let stateFromStores, c14909_6, stateFromStoresArray, c14909_8, allSelectedRoleIds, isScreenReaderEnabled, ref, stateFromStores2;
|
|
const { guildId, prompts, completeOnboarding, onClose } = props;
|
|
stateFromStores = void 0;
|
|
c14909_6 = void 0;
|
|
stateFromStoresArray = void 0;
|
|
c14909_8 = void 0;
|
|
allSelectedRoleIds = void 0;
|
|
isScreenReaderEnabled = void 0;
|
|
ref = void 0;
|
|
stateFromStores2 = void 0;
|
|
const styles = useStyles();
|
|
const navigation = useNavigation();
|
|
const stateFromStores3 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
|
|
const guildRoleMemberCounts = useGuildRoleMemberCounts(guildId);
|
|
c14909_6 = guildRoleMemberCounts;
|
|
const r28 = {
|
|
backgroundColor: useProfileThemeValues(useThemeContext().theme)?.rolePillBackgroundColor
|
|
};
|
|
const uri = stateFromStores != null ? AvatarUtils.getGuildSplashURL({
|
|
id: stateFromStores.id,
|
|
splash: stateFromStores.splash,
|
|
size: 400 * getDevicePixelRatio_native()
|
|
}) : null;
|
|
stateFromStoresArray = useStateFromStoresArray([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.getOnboardingResponses(guildId), [guildId]);
|
|
const r85 = prompts.map((prompt) => prompt.options).flat().filter((item) => stateFromStoresArray.includes(item.id));
|
|
c14909_8 = r85;
|
|
const memo = useMemo(() => {
|
|
const allSelectedRoleIds2 = c14909_8.map((item) => item.roleIds).flat().filter(isNotNullish);
|
|
const r23 = c14909_6 != null;
|
|
let numSharedRoleMembers = 0;
|
|
if (r23) {
|
|
const r26 = allSelectedRoleIds2.length > 0;
|
|
numSharedRoleMembers = 0;
|
|
if (r26) {
|
|
const r28 = Math;
|
|
numSharedRoleMembers = r28.max.apply(r28, [...allSelectedRoleIds2.map((item) => {
|
|
let r5 = c14909_6[item];
|
|
if (r5 == null) {
|
|
r5 = 0;
|
|
}
|
|
return r5;
|
|
})]);
|
|
}
|
|
}
|
|
return {
|
|
numSharedRoleMembers,
|
|
allSelectedRoleIds: allSelectedRoleIds2
|
|
};
|
|
}, [guildRoleMemberCounts, r85]);
|
|
const numSharedRoleMembers = memo.numSharedRoleMembers;
|
|
allSelectedRoleIds = memo.allSelectedRoleIds;
|
|
const stateFromStoresArray2 = useStateFromStoresArray([GuildRoleStore], () => GuildRoleStore.getManyRoles(guildId, allSelectedRoleIds), [allSelectedRoleIds, guildId]);
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
headerLeft: () => null
|
|
});
|
|
}, [navigation]);
|
|
isScreenReaderEnabled = useIsScreenReaderEnabled();
|
|
ref = useRef(false);
|
|
useEffect(() => {
|
|
if (isScreenReaderEnabled) {
|
|
if (!ref.current) {
|
|
ref.current = true;
|
|
completeOnboarding();
|
|
}
|
|
return void 0;
|
|
}
|
|
let c25491_0 = setTimeout(() => {
|
|
if (!ref.current) {
|
|
ref.current = true;
|
|
completeOnboarding();
|
|
}
|
|
onClose();
|
|
}, 3600);
|
|
return () => clearTimeout(c25491_0);
|
|
}, [completeOnboarding, onClose, isScreenReaderEnabled]);
|
|
stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
const k = function k() {
|
|
const opacity = _ReanimatedRexport.withSequence(_timing.withTiming(0, {
|
|
duration: 0
|
|
}), _ReanimatedRexport.withDelay(ANIMATION_DURATION, _timing.withTiming(0.5, {
|
|
duration: ANIMATION_DURATION
|
|
})), _timing.withTiming(1, {
|
|
duration: ANIMATION_DURATION,
|
|
easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
|
|
}));
|
|
const scale = _ReanimatedRexport.withSequence(_timing.withTiming(1, {
|
|
duration: 0
|
|
}), _ReanimatedRexport.withDelay(ANIMATION_DURATION, _timing.withTiming(1.5, {
|
|
duration: ANIMATION_DURATION,
|
|
easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
|
|
})), _timing.withTiming(1, {
|
|
duration: stateFromStores2 ? 1 : ANIMATION_DURATION,
|
|
easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
|
|
}));
|
|
return {
|
|
opacity,
|
|
transform: [{
|
|
rotate: _ReanimatedRexport.withSequence(_timing.withTiming("0deg", {
|
|
duration: 0
|
|
}), _ReanimatedRexport.withDelay(ANIMATION_DURATION, _timing.withTiming("-2deg", {
|
|
duration: ANIMATION_DURATION
|
|
})), _timing.withTiming("-5deg", {
|
|
duration: ANIMATION_DURATION
|
|
}))
|
|
}, {
|
|
scale
|
|
}]
|
|
};
|
|
};
|
|
k.__closure = {
|
|
withSequence: _ReanimatedRexport.withSequence,
|
|
withTiming: _timing.withTiming,
|
|
withDelay: _ReanimatedRexport.withDelay,
|
|
ANIMATION_DURATION,
|
|
Easing: _ReanimatedRexport.Easing,
|
|
useReducedMotion: stateFromStores2
|
|
};
|
|
k.__workletHash = 8282245217026;
|
|
k.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(k);
|
|
if (stateFromStores3 != null && stateFromStores != null) {
|
|
const r142 = stateFromStoresArray2.length - 3;
|
|
const r155 = [uri != null ? <FastImage source={{
|
|
uri
|
|
}} style={styles.backgroundImage} /> : null, ,];
|
|
const style = [styles.container, uri == null ? styles.containerWithoutSplash : null];
|
|
const r169 = uri == null;
|
|
let color = "text-overlay-light";
|
|
const r179 = [<Text style={styles.title} accessibilityRole="header" variant="heading-xxl/extrabold" color={r169 ? "mobile-text-heading-primary" : "text-overlay-light"}>
|
|
{intl.string(t.PFWIYe)}
|
|
</Text>, , , ,];
|
|
if (uri == null) {
|
|
color = "text-muted";
|
|
}
|
|
r179[1] = <Text style={styles.subtitle} accessibilityRole="header" variant="text-md/medium" color={color}>
|
|
{intl.string(t.og4NNr)}
|
|
</Text>;
|
|
r179[2] = <View style={styles.card}>
|
|
<Avatar size={AvatarSizes.XXLARGE} user={stateFromStores3} guildId={guildId} animate={false} />
|
|
<Text style={styles.username} variant="heading-xl/semibold" color="mobile-text-heading-primary">{stateFromStores3.username}</Text>
|
|
{numSharedRoleMembers > 0 ? <Text style={styles.rolesHeader} variant="text-sm/normal" color="text-muted">
|
|
{intl.format(t.l1Jc1n, {
|
|
numSharedRoleMembers
|
|
})}
|
|
</Text> : null}
|
|
<View style={styles.roles}>
|
|
{stateFromStoresArray2.slice(0, 3).map((item) => <View key={item.id} style={styles.role}>
|
|
<RoleItem role={item} guildId={stateFromStores.id} disableInteraction />
|
|
</View>)}
|
|
{0 < r142 ? <View style={[styles.roleOverflow, r28]}>
|
|
<Text variant="heading-deprecated-12/semibold" color="mobile-text-heading-primary">
|
|
{`+${r142}`}
|
|
</Text>
|
|
</View> : null}
|
|
</View>
|
|
<ReanimatedRexport.View style={[styles.animation, animatedStyle]}>
|
|
<GuildIcon guild={stateFromStores} size={GuildIconSizes.LARGE} />
|
|
<View style={styles.animationText}>
|
|
<Text variant="text-sm/medium" color="mobile-text-heading-primary">
|
|
{intl.format(t.FXREhf, {
|
|
guildName: stateFromStores.name
|
|
})}
|
|
</Text>
|
|
<Text variant="text-xs/normal" color="text-muted">
|
|
{`${Module3771().format("LL")}`}
|
|
</Text>
|
|
</View>
|
|
<FastImage source={Module5569} style={styles.wave} />
|
|
</ReanimatedRexport.View>
|
|
</View>;
|
|
r179[3] = isScreenReaderEnabled ? <View style={styles.getStartedButton}>
|
|
<Button variant="primary" size="md" grow text={intl.string(t.LhlgY9)} onPress={onClose} />
|
|
</View> : null;
|
|
r155[1] = <SafeAreaPaddingView bottom style={style}>
|
|
<View>{r179}</View>
|
|
</SafeAreaPaddingView>;
|
|
return <View style={styles.screen}>{r155}</View>;
|
|
}
|
|
return null;
|
|
};
|