yeet

modules/display_name_styles/native/DisplayNameStylesEditScreen.tsx

@@ -0,0 +1,402 @@
+// Metro module 14350 (f14351).
+import { useCallback, useState, useMemo } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import UserStore from "../../../stores/UserStore";
+import { AnalyticEvents } from "../../../Constants";
+import { MEDIA_PICKER_SEND_BUTTON_SPRING } from "../../media_keyboard/native/MediaKeyboardConstants";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useRoute, useNavigation } from "../../../_bundle/Module1481";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useDisplayNameStylesPendingName } from "../hooks/useDisplayNameStylesPendingName";
+import { useGuildMemberOrUserPendingDisplayNameStyles } from "../../profile_customization/ProfileCustomizationUtils";
+import useDisplayNameStyles from "../hooks/useDisplayNameStyles";
+import useTheme from "../../../hooks/useTheme";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+import { getEffectColorCount, generateRandomDisplayNameStyles } from "../DisplayNameStylesUtils";
+import { useIsDisplayNameStylesFlywheelSettersEnabled } from "../DisplayNameStylesFlywheelExperiment";
+import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import useDisplayNameStylesEffectDefaultColors_native from "../hooks/useDisplayNameStylesEffectDefaultColors.native";
+import { areArraysShallowEqual } from "../../../_bundle/shallowEqual";
+import { useDisplayNameStylesHandleApply } from "../hooks/useDisplayNameStylesHandleApply";
+import { useVisibleFontOrder } from "../DisplayNameStylesFontOrder";
+import { useVisibleEffectOrder } from "../DisplayNameStylesEffectOrder";
+import { useDisplayNameStylesNewFontsBadge, useDisplayNameStylesNewEffectsBadge } from "../hooks/useDisplayNameStylesNewItems";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import { setTryItOutDisplayNameStyles } from "../../user_profile/UserProfileActionCreators";
+import { setPendingChanges } from "../../user_profile/UserProfileSettingsActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import * as _asyncRequire from "../../../_bundle/asyncRequire";
+import { intl, t } from "../../../intl/index.native";
+import getDisplayNameStylesFontName from "../getDisplayNameStylesFontName";
+import { ThemeContextProvider } from "../../../_bundle/Module3901";
+import { DisplayNameStylesContext } from "../DisplayNameStylesContext";
+import DisplayNameStylesEditPreview from "./DisplayNameStylesEditPreview";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Text } from "../../../design/components/Text/native/Text";
+import { NewTag } from "../../../design/void/native";
+import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+import DisplayNameStylesColorSwatch from "./DisplayNameStylesColorSwatch";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { DiceIcon } from "../../../design/components/Icon/native/redesign/generated/DiceIcon";
+import { DenyIcon } from "../../../design/components/Icon/native/redesign/generated/DenyIcon";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import ReanimatedRexport, { useAnimatedProps, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../design/animation/reanimated/spring/spring";
+let c10092_14, useStyles, __initData, __initData2;
+const ApplyButton = function ApplyButton(props) {
+  const { onPress, visible } = props;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const bottom = useSafeAreaInsets_native().bottom;
+  const r26 = function() {
+    return {
+      pointerEvents: visible ? "box-none" : "none"
+    };
+  };
+  r26.__closure = {
+    visible
+  };
+  r26.__workletHash = 2349569076845;
+  r26.__initData = __initData;
+  const animatedProps = useAnimatedProps(r26);
+  const r32 = function() {
+    const r2 = visible ? 1 : 0;
+    const r1 = visible ? 0 : 60;
+    const r0 = visible ? 1 : 0.9;
+    return {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      marginHorizontal: Module712.space.PX_16,
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      transform: [{
+        translateY: stateFromStores ? r1 : _spring.withSpring(r1, MEDIA_PICKER_SEND_BUTTON_SPRING)
+      }, {
+        scale: stateFromStores ? r0 : _spring.withSpring(r0, MEDIA_PICKER_SEND_BUTTON_SPRING)
+      }],
+      opacity: stateFromStores ? r2 : _spring.withSpring(r2, MEDIA_PICKER_SEND_BUTTON_SPRING)
+    };
+  };
+  r32.__closure = {
+    visible,
+    tokens: Module712,
+    reducedMotion: stateFromStores,
+    withSpring: _spring.withSpring,
+    MEDIA_PICKER_SEND_BUTTON_SPRING
+  };
+  r32.__workletHash = 16786362025671;
+  r32.__initData = __initData2;
+  return <ReanimatedRexport.View style={useAnimatedStyle(r32)}>
+    <ReanimatedRexport.View style={{
+      marginBottom: bottom
+    }} animatedProps={animatedProps}>
+      <Button variant="primary" onPress={useCallback(() => {
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+        onPress();
+      }, [onPress])} size="lg" text={intl.string(t["1Qm822"])} />
+    </ReanimatedRexport.View>
+  </ReanimatedRexport.View>;
+};
+c10092_14 = [DisplayNameEffect.GRADIENT, DisplayNameEffect.GUMMY, DisplayNameEffect.PRISM];
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  contentContainer: {
+    padding: Module712.space.PX_16
+  },
+  fieldButtonGroup: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderRadius: Module712.radii.md
+  },
+  fieldButton: {
+    padding: Module712.space.PX_12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  fieldButtonBorder: {
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_SUBTLE
+  },
+  fieldButtonLabel: {
+    flex: 1,
+    marginRight: Module712.space.PX_12
+  },
+  fieldButtonChevron: {
+    flexDirection: "row",
+    gap: Module712.space.PX_8,
+    flexShrink: 0
+  },
+  fieldButtonTrailing: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  buttonContainer: {
+    marginVertical: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_16,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_MUTED,
+    gap: Module712.space.PX_16
+  }
+});
+__initData = {
+  code: "function DisplayNameStylesEditScreenTsx1(){const{visible}=this.__closure;return{pointerEvents:visible?'box-none':'none'};}"
+};
+__initData2 = {
+  code: "function DisplayNameStylesEditScreenTsx2(){const{visible,tokens,reducedMotion,withSpring,MEDIA_PICKER_SEND_BUTTON_SPRING}=this.__closure;const targetOpacity=visible?1:0;const targetTranslateY=visible?0:60;const targetScale=visible?1:0.9;return{position:'absolute',bottom:0,left:0,right:0,marginHorizontal:tokens.space.PX_16,flexDirection:'column',justifyContent:'flex-end',transform:[{translateY:reducedMotion?targetTranslateY:withSpring(targetTranslateY,MEDIA_PICKER_SEND_BUTTON_SPRING)},{scale:reducedMotion?targetScale:withSpring(targetScale,MEDIA_PICKER_SEND_BUTTON_SPRING)}],opacity:reducedMotion?targetOpacity:withSpring(targetOpacity,MEDIA_PICKER_SEND_BUTTON_SPRING)};}"
+};
+export default function DisplayNameStylesEditScreen() {
+  let displayNameStylesPendingName, c21165_5, c21165_10, displayNameStylesEffectConfig, c21165_12, c21165_13, callback, memo, visibleFontOrder, visibleEffectOrder, showFontsBadge, dismissFontsBadge, showEffectsBadge, dismissEffectsBadge;
+  const styles = useStyles();
+  const route = useRoute();
+  const navigation = useNavigation();
+  let params = route.params;
+  if (params == null) {
+    params = {};
+  }
+  const { guildId, isTryItOut } = params;
+  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  displayNameStylesPendingName = useDisplayNameStylesPendingName(stateFromStores2, guildId);
+  const styles3 = useGuildMemberOrUserPendingDisplayNameStyles(stateFromStores2, guildId);
+  const { guildDisplayNameStyles, pendingDisplayNameStyles, tryItOutDisplayNameStyles } = styles3;
+  const styles2 = useDisplayNameStyles({
+    userId: stateFromStores2?.id,
+    guildId,
+    pendingDisplayNameStyles: isTryItOut ? tryItOutDisplayNameStyles : pendingDisplayNameStyles,
+    ignoreDisabledStylesSetting: true
+  });
+  c21165_5 = styles2;
+  const theme = useTheme();
+  let r86 = styles2?.fontId;
+  if (r86 == null) {
+    r86 = DisplayNameFont.DEFAULT;
+  }
+  const [state, setState] = useState(r86);
+  let r95 = styles2?.effectId;
+  if (r95 == null) {
+    r95 = DisplayNameEffect.SOLID;
+  }
+  const [state2, setState2] = useState(r95);
+  const r105 = getEffectColorCount(state2) > 1;
+  c21165_10 = r105;
+  const isDisplayNameStylesFlywheelSettersEnabled = useIsDisplayNameStylesFlywheelSettersEnabled("DisplayNameStylesEditScreen");
+  displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(state2);
+  c21165_12 = useDisplayNameStylesEffectDefaultColors_native();
+  let r116 = styles2?.colors;
+  if (r116 == null) {
+    r116 = [];
+  }
+  c21165_13 = r116;
+  const [state3, setState3] = useState(r116.length > 0 && !r105 ? r116[0] : displayNameStylesEffectConfig.defaultColors[0]);
+  const [state4, setState4] = useState(() => Object.fromEntries(c10092_14.map((item) => {
+    const r1 = [item, ,];
+    let r2 = c21165_13;
+    if (!(r2.length > 0 && state2 === item)) {
+      r2 = c21165_12[item];
+    }
+    r1[1] = r2;
+    return r1;
+  })));
+  callback = useCallback((c27728_0, c27728_1) => {
+    setState4((prevState4) => {
+      const r0 = {
+        ...prevState4
+      };
+      r0[c27728_0] = c27728_1;
+      return r0;
+    });
+  }, []);
+  memo = useMemo(() => {
+    let r1;
+    if (c21165_10) {
+      let r6 = state4[state2];
+      if (r6 == null) {
+        r6 = displayNameStylesEffectConfig.defaultColors;
+      }
+      r1 = r6;
+    } else {
+      r1 = [state3];
+    }
+    return r1;
+  }, [r105, state4, state2, displayNameStylesEffectConfig.defaultColors, state3]);
+  const memo2 = useMemo(() => {
+    let r9 = state !== c21165_5?.fontId || state2 !== c21165_5?.effectId;
+    if (!r9) {
+      let r19 = c21165_5?.colors;
+      if (r19 == null) {
+        r19 = [];
+      }
+      r9 = !areArraysShallowEqual(memo, r19);
+    }
+    return r9;
+  }, [styles2, state, state2, memo]);
+  const displayNameStylesHandleApply = useDisplayNameStylesHandleApply({
+    hasChanges: memo2,
+    selectedFontId: state,
+    selectedEffectId: state2,
+    selectedColors: memo,
+    defaultColor: displayNameStylesEffectConfig.defaultColors[0],
+    guildId,
+    isTryItOut,
+    onClose: () => navigation.goBack()
+  });
+  visibleFontOrder = useVisibleFontOrder();
+  visibleEffectOrder = useVisibleEffectOrder();
+  const displayNameStylesNewFontsBadge = useDisplayNameStylesNewFontsBadge(visibleFontOrder);
+  showFontsBadge = displayNameStylesNewFontsBadge.showFontsBadge;
+  dismissFontsBadge = displayNameStylesNewFontsBadge.dismissFontsBadge;
+  const displayNameStylesNewEffectsBadge = useDisplayNameStylesNewEffectsBadge(visibleEffectOrder);
+  showEffectsBadge = displayNameStylesNewEffectsBadge.showEffectsBadge;
+  dismissEffectsBadge = displayNameStylesNewEffectsBadge.dismissEffectsBadge;
+  const callback3 = useCallback(() => {
+    const styles = generateRandomDisplayNameStyles(visibleFontOrder, visibleEffectOrder);
+    const { fontId, effectId, colors } = styles;
+    setState(fontId);
+    setState2(effectId);
+    if (getEffectColorCount(effectId) > 1) {
+      callback(effectId, colors);
+    } else {
+      setState3(colors[0]);
+    }
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_SURPRISE_ME);
+  }, [callback, visibleFontOrder, visibleEffectOrder]);
+  const callback4 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (isTryItOut) {
+      setTryItOutDisplayNameStyles(null);
+    } else {
+      setPendingChanges({
+        displayNameStyles: null
+      });
+    }
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_REMOVED);
+    navigation.goBack();
+  }, [navigation, isTryItOut]);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    setPendingChanges({
+      guildId,
+      displayNameStyles: null
+    });
+    navigation.goBack();
+  }, [guildId, navigation]);
+  const callback5 = useCallback(() => {
+    if (showFontsBadge) {
+      dismissFontsBadge();
+    }
+    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesFontPickerSheet"), "DisplayNameStylesFontPickerSheet", {
+      selectedFontId: state,
+      onSelectFont: setState,
+      displayName: displayNameStylesPendingName
+    });
+  }, [state, displayNameStylesPendingName, showFontsBadge, dismissFontsBadge]);
+  const callback7 = useCallback(() => {
+    if (showEffectsBadge) {
+      dismissEffectsBadge();
+    }
+    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesEffectPickerSheet"), "DisplayNameStylesEffectPickerSheet", {
+      userId: stateFromStores2?.id,
+      selectedEffectId: state2,
+      onSelectEffect: setState2
+    });
+  }, [state2, stateFromStores2?.id, showEffectsBadge, dismissEffectsBadge]);
+  const callback6 = useCallback(() => {
+    if (state2 === DisplayNameEffect.GUMMY) {
+      ActionSheetActionCreators.openLazy(import("./DisplayNameStylesGummyColorPickerSheet"), "DisplayNameStylesGummyColorPickerSheet", {
+        selectedColors: memo,
+        onSelectColors: (a0) => callback(DisplayNameEffect.GUMMY, a0)
+      });
+    } else if (c21165_10) {
+      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[36], dependencyMap.paths), "DisplayNameStylesGradientPickerSheet", {
+        selectedColors: memo,
+        selectedEffectId: state2,
+        onSelectColors: (a0) => callback(state2, a0)
+      });
+    } else {
+      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[37], dependencyMap.paths), "DisplayNameStylesColorPickerSheet", {
+        selectedColor: state3,
+        selectedEffectId: state2,
+        onSelectColor: setState3
+      });
+    }
+  }, [r105, memo, state3, state2, callback]);
+  const r47 = intl.string(getDisplayNameStylesFontName(state));
+  const r191 = stateFromStores2 == null;
+  let r192 = null;
+  if (!r191) {
+    const Provider = DisplayNameStylesContext.Provider;
+    const contentContainerStyle = {
+      ...styles.contentContainer,
+      paddingBottom: memo2 ? 70 : 0
+    };
+    const r217 = [<DisplayNameStylesEditPreview user={stateFromStores2} displayName={displayNameStylesPendingName} guildId={guildId} selectedFontId={state} selectedEffectId={state2} selectedColors={memo} />, , ,];
+    const r49 = intl.string(DisplayNameStyles_messages["0JCuGm"]);
+    const r288 = [<Pressable onPress={callback5} style={styles.fieldButton} accessibilityRole="button" accessibilityLabel={showFontsBadge ? `${r49}, ${r47}, ${intl.string(t.y2b7CA)}` : `${r49}, ${r47}`}>
+      <View>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages["0JCuGm"])}
+        </Text>
+        <Text variant="text-md/normal" color="text-subtle">{r47}</Text>
+      </View>
+      {showFontsBadge ? <View style={styles.fieldButtonTrailing}>
+        <NewTag />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View> : <ChevronSmallRightIcon color="icon-muted" />}
+    </Pressable>, , ,];
+    const r300 = intl.string(DisplayNameStyles_messages.RVtMxT);
+    const name = displayNameStylesEffectConfig.name;
+    r288[1] = <Pressable onPress={callback7} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={showEffectsBadge ? `${r300}, ${name}, ${intl.string(t.y2b7CA)}` : `${r300}, ${name}`}>
+      <View>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages.RVtMxT)}
+        </Text>
+        <Text variant="text-md/normal" color="text-subtle">{displayNameStylesEffectConfig.name}</Text>
+      </View>
+      {showEffectsBadge ? <View style={styles.fieldButtonTrailing}>
+        <NewTag />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View> : <ChevronSmallRightIcon color="icon-muted" />}
+    </Pressable>;
+    r288[2] = <Pressable onPress={callback6} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={intl.string(DisplayNameStyles_messages["6OxgN7"])}>
+      <View style={styles.fieldButtonLabel}>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages["6OxgN7"])}
+        </Text>
+        <Text variant={isDisplayNameStylesFlywheelSettersEnabled ? "text-sm/normal" : "text-md/normal"} color="text-subtle" lineClamp={1}>
+          {memo.map((item) => int2hex(item)).join(", ")}
+        </Text>
+      </View>
+      <View style={styles.fieldButtonChevron}>
+        <DisplayNameStylesColorSwatch colors={memo} effectId={state2} />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View>
+    </Pressable>;
+    r217[1] = <View style={styles.fieldButtonGroup}>{r288}</View>;
+    r217[2] = <View style={styles.buttonContainer}>
+      <Button text={intl.string(DisplayNameStyles_messages.NOGFds)} onPress={callback3} variant="tertiary" size="lg" grow icon={<DiceIcon />} iconPosition="start" />
+      {guildId == null && styles2 != null && <Button text={intl.string(DisplayNameStyles_messages.ymq8WQ)} onPress={callback4} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
+      {guildId != null && (guildDisplayNameStyles != null || pendingDisplayNameStyles != null) && <Button text={intl.string(DisplayNameStyles_messages["j/KRxc"])} onPress={callback2} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
+    </View>;
+    r192 = <ThemeContextProvider theme={theme}>
+      <Provider value={{
+        overrideSettings: true
+      }}>
+        <View style={styles.container}>
+          <ScrollView contentContainerStyle={contentContainerStyle}>{r217}</ScrollView>
+          <ApplyButton onPress={displayNameStylesHandleApply} visible={memo2} />
+        </View>
+      </Provider>
+    </ThemeContextProvider>;
+  }
+  return r192;
+};