359 lines
13 KiB
TypeScript
359 lines
13 KiB
TypeScript
// 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>;
|
|
};
|