yeet

modules/guild_onboarding/native/GuildOnboardingCompleted.tsx

@@ -0,0 +1,299 @@
+// 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;
+};