yeet

modules/guild_onboarding/native/GuildOnboardingPromptOptionButton.tsx

@@ -0,0 +1,358 @@
+// Metro module 5202 (f5203).
+import { useState, useRef, useEffect, useMemo } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import EmojiStore from "../../emojis/EmojiStore";
+import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useAnimatedStyle, useSharedValue } from "../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../design/animation/reanimated/timing/timing";
+import * as _spring from "../../../design/animation/reanimated/spring/spring";
+import useGuildRoleMemberCounts from "../../guild_role_subscriptions/useGuildRoleMemberCounts";
+import { AccessibilityAnnouncer } from "../../../_bundle/Module3902";
+import { intl, t } from "../../../intl/index.native";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { useCheckboxA11yNative } from "../../../_bundle/Module3907";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import Emoji from "../../emojis/native/Emoji";
+import AvatarUtils from "../../../utils/AvatarUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
+import { TextBadge, BadgeColors } from "../../../design/void/native";
+const useStyles = createStyles({
+  container: {
+    borderRadius: Module712.radii.md,
+    borderWidth: 2,
+    borderStyle: "solid",
+    marginBottom: 8
+  },
+  optionButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  optionTextEmoji: {
+    fontSize: 24,
+    lineHeight: 24,
+    marginRight: 12,
+    paddingTop: 5
+  },
+  optionImageEmoji: {
+    height: 24,
+    width: 24,
+    marginRight: 12
+  },
+  optionText: {
+    flexShrink: 1
+  },
+  checkIcon: {
+    position: "absolute",
+    top: -6,
+    right: -6,
+    width: 20,
+    height: 20,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: 10,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  newBadgeWrapper: {
+    position: "absolute",
+    top: -6,
+    right: -6
+  },
+  newBadge: {
+    fontWeight: "bold"
+  },
+  roleCount: {
+    position: "absolute",
+    top: -6,
+    right: 24,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND,
+    borderRadius: 10,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+const __initData = {
+  code: "function GuildOnboardingPromptOptionButtonTsx1(){const{selected,withTiming,Easing,useReducedMotion,withSequence,withSpring}=this.__closure;const rawOpacity=selected?1:0;const opacity=withTiming(rawOpacity,{duration:150,easing:Easing.out(Easing.ease)});const rawScale=selected?1:0.7;const scale=useReducedMotion?rawScale:withSequence(withSpring(rawScale*1.2,{stiffness:80,damping:6,mass:0.3}),withSpring(rawScale,{stiffness:80,damping:6,mass:0.3}));return{opacity:opacity,transform:[{scale:scale}]};}"
+};
+const __initData2 = {
+  code: "function GuildOnboardingPromptOptionButtonTsx2(){const{showMemberCount,withDelay,withTiming,Easing,useReducedMotion}=this.__closure;const rawOpacity=showMemberCount?1:0;const opacity=withDelay(showMemberCount?400:0,withTiming(rawOpacity,{duration:150,easing:Easing.out(Easing.ease)}));const rawTranslate=showMemberCount?0:16;const translateX=useReducedMotion?rawTranslate:withDelay(showMemberCount?400:0,withTiming(rawTranslate,{duration:200,easing:Easing.out(Easing.ease)}));return{opacity:opacity,transform:[{translateX:translateX}]};}"
+};
+const __initData3 = {
+  code: "function GuildOnboardingPromptOptionButtonTsx3(){const{useReducedMotion,Easing,withTiming,selected,selectedBorderColor,isNew,unselectedBrandBorderColor,unselectedBorderColor,selectedBackgroundColor}=this.__closure;const timing=useReducedMotion?{duration:0}:{duration:200,easing:Easing.out(Easing.ease)};return{borderColor:withTiming(selected?selectedBorderColor:isNew?unselectedBrandBorderColor:unselectedBorderColor,timing),backgroundColor:withTiming(selected?selectedBackgroundColor:'transparent',timing)};}"
+};
+const __initData4 = {
+  code: "function GuildOnboardingPromptOptionButtonTsx4(){const{useReducedMotion,scale}=this.__closure;return useReducedMotion?{}:{transform:[{scale:scale.get()}]};}"
+};
+export default function PromptOptionButton(props) {
+  let stateFromStores, c14756_5, memberCount, state, setState, ref, ref2, sharedValue, isUnseen, c14756_13, token, token2, token3, token4;
+  const { guildId, option, selected, onSelect, suppressMemberCount } = props;
+  let canBeNew = props.canBeNew;
+  stateFromStores = void 0;
+  c14756_5 = void 0;
+  memberCount = void 0;
+  state = void 0;
+  setState = void 0;
+  ref = void 0;
+  ref2 = void 0;
+  sharedValue = void 0;
+  isUnseen = void 0;
+  c14756_13 = void 0;
+  token = void 0;
+  token2 = void 0;
+  token3 = void 0;
+  token4 = void 0;
+  const styles = useStyles();
+  const stateFromStores2 = useStateFromStores([EmojiStore], () => (option == null ? void 0 : option.emoji?.id) != null ? EmojiStore.getUsableCustomEmojiById(option == null ? void 0 : option.emoji?.id) : null);
+  stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const R = function R() {
+    const opacity = _timing.withTiming(selected ? 1 : 0, {
+      duration: 150,
+      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+    });
+    const r22 = selected ? 1 : 0.7;
+    return {
+      opacity,
+      transform: [{
+        scale: stateFromStores ? r22 : _ReanimatedRexport.withSequence(_spring.withSpring(1.2 * r22, {
+          stiffness: 80,
+          damping: 6,
+          mass: 0.3
+        }), _spring.withSpring(r22, {
+          stiffness: 80,
+          damping: 6,
+          mass: 0.3
+        }))
+      }]
+    };
+  };
+  R.__closure = {
+    selected,
+    withTiming: _timing.withTiming,
+    Easing: _ReanimatedRexport.Easing,
+    useReducedMotion: stateFromStores,
+    withSequence: _ReanimatedRexport.withSequence,
+    withSpring: _spring.withSpring
+  };
+  R.__workletHash = 8281627194581;
+  R.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(R);
+  const guildRoleMemberCounts = useGuildRoleMemberCounts(guildId);
+  c14756_5 = guildRoleMemberCounts;
+  const r3 = guildRoleMemberCounts == null;
+  let r28 = 0;
+  if (!r3) {
+    const r71 = option.roleIds == null;
+    r28 = 0;
+    if (!r71) {
+      const r73 = Math;
+      r28 = r73.max.apply(r73, [...option.roleIds.map((roleId) => c14756_5[roleId])]);
+    }
+  }
+  memberCount = r28;
+  [state, setState] = useState(false);
+  ref = useRef(null);
+  useEffect(() => {
+    if (state) {
+      ref.current = setTimeout(() => {
+        setState(false);
+        ref.current = null;
+      }, 3000);
+      return () => {
+        if (ref.current != null) {
+          clearTimeout(ref.current);
+        }
+      };
+    }
+  }, [state]);
+  ref2 = useRef(false);
+  useEffect(() => {
+    if (state && (!ref2.current && memberCount > 0)) {
+      AccessibilityAnnouncer.announce(intl.formatToPlainString(t.iyXfAn, {
+        memberCount
+      }), "polite");
+      ref2.current = true;
+    } else if (!state) {
+      ref2.current = false;
+    }
+  }, [state, memberCount]);
+  const G = function G() {
+    const opacity = _ReanimatedRexport.withDelay(state ? 400 : 0, _timing.withTiming(state ? 1 : 0, {
+      duration: 150,
+      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+    }));
+    const r28 = state ? 0 : 16;
+    return {
+      opacity,
+      transform: [{
+        translateX: stateFromStores ? r28 : _ReanimatedRexport.withDelay(state ? 400 : 0, _timing.withTiming(r28, {
+          duration: 200,
+          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+        }))
+      }]
+    };
+  };
+  G.__closure = {
+    showMemberCount: state,
+    withDelay: _ReanimatedRexport.withDelay,
+    withTiming: _timing.withTiming,
+    Easing: _ReanimatedRexport.Easing,
+    useReducedMotion: stateFromStores
+  };
+  G.__workletHash = 9518487706997;
+  G.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(G);
+  sharedValue = useSharedValue(1);
+  isUnseen = canBeNew ? option.isUnseen : canBeNew;
+  const r127 = (option == null ? void 0 : option.emoji?.id) != null || (option == null ? void 0 : option.emoji?.name) != null;
+  c14756_13 = r127;
+  const memo = useMemo(() => {
+    if (c14756_13) {
+      let r30 = option.emoji?.name;
+      if (r30 == null) {
+        r30 = "";
+      }
+      const emojiName = r30.replace(/^:|:$/g, "");
+      return option.description != null && option.description.length > 0 ? intl.formatToPlainString(t.nSzqkg, {
+        emojiName,
+        title: option.title,
+        description: option.description
+      }) : intl.formatToPlainString(t.rBPpAN, {
+        emojiName,
+        title: option.title
+      });
+    }
+    return option.description != null && option.description.length > 0 ? intl.formatToPlainString(t.U4lDOC, {
+      title: option.title,
+      description: option.description
+    }) : option.title;
+  }, [r127, option.emoji?.name, option.title, option.description]);
+  token = useToken(Module712.colors.BACKGROUND_BRAND);
+  token2 = useToken(Module712.colors.BORDER_SUBTLE);
+  token3 = useToken(Module712.colors.BORDER_STRONG);
+  token4 = useToken(Module712.colors.BACKGROUND_BASE_LOWEST);
+  const H = function H() {
+    const r5 = stateFromStores ? {
+      duration: 0
+    } : {
+      duration: 200,
+      easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+    };
+    return {
+      borderColor: _timing.withTiming(selected ? token3 : isUnseen ? token : token2, r5),
+      backgroundColor: _timing.withTiming(selected ? token4 : "transparent", r5)
+    };
+  };
+  H.__closure = {
+    useReducedMotion: stateFromStores,
+    Easing: _ReanimatedRexport.Easing,
+    withTiming: _timing.withTiming,
+    selected,
+    selectedBorderColor: token3,
+    isNew: isUnseen,
+    unselectedBrandBorderColor: token,
+    unselectedBorderColor: token2,
+    selectedBackgroundColor: token4
+  };
+  H.__workletHash = 17180171486485;
+  H.__initData = __initData3;
+  const animatedStyle3 = useAnimatedStyle(H);
+  const q = function q() {
+    return stateFromStores ? {} : {
+      transform: [{
+        scale: sharedValue.get()
+      }]
+    };
+  };
+  q.__closure = {
+    useReducedMotion: stateFromStores,
+    scale: sharedValue
+  };
+  q.__workletHash = 319662489785;
+  q.__initData = __initData4;
+  const animatedStyle4 = useAnimatedStyle(q);
+  const checkboxA11yNative = useCheckboxA11yNative({
+    checked: selected
+  });
+  const props2 = {
+    activeOpacity: 0.6,
+    style: [styles.optionButton],
+    onPress: function onPress() {
+      onSelect(!selected);
+      if (!suppressMemberCount) {
+        setState(!selected);
+      }
+    },
+    onPressIn: function onPressIn() {
+      sharedValue.set(_ReanimatedRexport.withSequence(_timing.withTiming(1, {
+        duration: 0
+      }), _timing.withTiming(1.02, {
+        duration: 200,
+        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+      })));
+    },
+    onPressOut: function onPressOut() {
+      sharedValue.set(_timing.withTiming(1, {
+        duration: 100,
+        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
+      }));
+    },
+    accessibilityRole: checkboxA11yNative.accessibilityRole,
+    accessibilityState: checkboxA11yNative.accessibilityState,
+    accessibilityLabel: memo,
+    children: null
+  };
+  let r217 = (option == null ? void 0 : option.emoji?.id) != null || (option == null ? void 0 : option.emoji?.name) != null;
+  if (r217) {
+    const src = stateFromStores2 != null ? AvatarUtils.getEmojiURL({
+      id: stateFromStores2.id,
+      animated: stateFromStores2.animated,
+      size: EMOJI_URL_BASE_SIZE
+    }) : void 0;
+    let name = option == null ? void 0 : option.emoji?.name;
+    if (name == null) {
+      name = "";
+    }
+    r217 = <View style={{
+      display: "flex",
+      alignItems: "center"
+    }}>
+      <Emoji textEmojiStyle={styles.optionTextEmoji} fastImageStyle={styles.optionImageEmoji} src={src} name={name} />
+    </View>;
+  }
+  props2.children = [r217, <View style={styles.optionText}>
+    <Text variant="text-md/semibold" color="mobile-text-heading-primary">{option.title}</Text>
+    {option.description != null && option.description.length > 0 && <Text variant="text-xs/medium" color="text-default">{option.description}</Text>}
+  </View>];
+  const r266 = [<PressableOpacity {...props2} />, memberCount > 0 ? <ReanimatedRexport.View accessible={false} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden style={[styles.roleCount, animatedStyle2]}>
+    <Text variant="text-xs/semibold" color="text-overlay-light">
+      {intl.format(t.EgKsZA, {
+        memberCount
+      })}
+    </Text>
+  </ReanimatedRexport.View> : null, <ReanimatedRexport.View style={[styles.checkIcon, animatedStyle]}>
+    <CheckmarkSmallIcon size="xs" color={Module712.colors.WHITE} />
+  </ReanimatedRexport.View>, ,];
+  if (canBeNew) {
+    canBeNew = !selected;
+  }
+  if (canBeNew) {
+    canBeNew = option.isUnseen;
+  }
+  if (canBeNew) {
+    canBeNew = <TextBadge color={BadgeColors.BRAND} text={intl.string(t.y2b7CA)} style={styles.newBadgeWrapper} textStyle={styles.newBadge} />;
+  }
+  r266[3] = canBeNew;
+  return <ReanimatedRexport.View style={[animatedStyle4, animatedStyle3, styles.container]}>{r266}</ReanimatedRexport.View>;
+};