403 lines
18 KiB
TypeScript
403 lines
18 KiB
TypeScript
// 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;
|
|
};
|