314 lines
12 KiB
TypeScript
314 lines
12 KiB
TypeScript
// Metro module 11440 (f11441).
|
|
import { useState, useEffect, useCallback, memo } from "react";
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../a11y/AccessibilityStore";
|
|
import EmojiStore from "../../emojis/EmojiStore";
|
|
import ChannelStore from "../../../stores/ChannelStore";
|
|
import GuildMemberStore from "../../../stores/GuildMemberStore";
|
|
import { Routes } from "../../../Constants";
|
|
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/defaultAreStatesEqual";
|
|
import useChannelName from "../../channel/useChannelName";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import * as _native from "../../../design/void/native";
|
|
import { Icon } from "../../../design/void/native";
|
|
import Module10990 from "../../../_bundle/Module10990";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import AvatarUtils from "../../../utils/AvatarUtils";
|
|
import UnicodeEmojis from "../../emojis/UnicodeEmojis";
|
|
import { useMemberActionsForChannel, useNextMemberAction, useAllActionsCompleted } from "../MemberActionUtils";
|
|
import { NewMemberActionTypes, CHANNEL_ACTION_BANNER_HEIGHT } from "../GuildOnboardingHomeTypes";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import * as _timing from "../../../design/animation/reanimated/timing/timing";
|
|
import Module11442 from "../../../_bundle/Module11442";
|
|
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
|
|
import { transitionTo } from "../../routing/router_utils";
|
|
import Module6684 from "../../../_bundle/Module6684";
|
|
import { useCanSeeOnboardingHome } from "../OnboardingHomeUtils";
|
|
let useStyles, ChannelActionEmoji, __initData, __initData2, MemberActionChatInputBanner, Component;
|
|
const ActionChannelInfo = function ActionChannelInfo(props) {
|
|
const action = props.action;
|
|
const stateFromStores2 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(action.channelId));
|
|
const channelName = useChannelName(stateFromStores2, true);
|
|
return <Text {...stateFromStores2 == null ? {
|
|
variant: "text-xxs/normal",
|
|
color: "text-default",
|
|
children: intl.format(t.MkzlDL, {
|
|
channelName: intl.string(t.J90oLW)
|
|
})
|
|
} : {
|
|
variant: "text-xxs/normal",
|
|
color: "text-default",
|
|
children: intl.format(t.MkzlDL, {
|
|
channelName
|
|
})
|
|
}} />;
|
|
};
|
|
ChannelActionEmoji = function ChannelActionEmoji(props) {
|
|
const emoji = props.emoji;
|
|
const styles2 = useStyles();
|
|
const r29 = <View style={styles2.emojiPlaceholder}>
|
|
<Icon size={Icon.Sizes.REFRESH_SMALL_16} source={Module10990} />
|
|
</View>;
|
|
const id = emoji?.id;
|
|
const name = emoji?.name;
|
|
const stateFromStores2 = useStateFromStores([EmojiStore], () => id != null ? EmojiStore.getCustomEmojiById(id) : null, [id]);
|
|
return stateFromStores2 != null ? <FastImage style={styles2.emoji} source={{
|
|
uri: AvatarUtils.getEmojiURL({
|
|
id: stateFromStores2.id,
|
|
animated: stateFromStores2.animated,
|
|
size: EMOJI_URL_BASE_SIZE
|
|
})
|
|
}} resizeMode="contain" /> : name != null ? UnicodeEmojis.getByName(UnicodeEmojis.convertSurrogateToName(name, false)) != null ? <Text style={styles2.textEmoji} variant="heading-lg/normal">{name}</Text> : r29 : r29;
|
|
};
|
|
MemberActionChatInputBanner = function MemberActionChatInputBanner(props) {
|
|
let c18841_6, state, setState, state2, setState2, sharedValue, sharedValue2;
|
|
const channel = props.channel;
|
|
c18841_6 = void 0;
|
|
state = void 0;
|
|
setState = void 0;
|
|
state2 = void 0;
|
|
setState2 = void 0;
|
|
sharedValue = void 0;
|
|
sharedValue2 = void 0;
|
|
const styles = useStyles();
|
|
const memberActionsForChannel = useMemberActionsForChannel(channel.guild_id, channel);
|
|
const { channelAction, completed } = memberActionsForChannel;
|
|
const nextMemberAction = useNextMemberAction(channel.guild_id, channelAction?.channelId);
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
const isViewAction = channelAction?.actionType === NewMemberActionTypes.VIEW;
|
|
c18841_6 = isViewAction;
|
|
[state, setState] = useState(CHANNEL_ACTION_BANNER_HEIGHT);
|
|
[state2, setState2] = useState(CHANNEL_ACTION_BANNER_HEIGHT);
|
|
sharedValue = useSharedValue(0);
|
|
sharedValue2 = useSharedValue(completed ? state2 : 0);
|
|
useEffect(() => {
|
|
if (!completed && !c18841_6) {
|
|
sharedValue.set(state);
|
|
} else {
|
|
sharedValue.set(0);
|
|
}
|
|
}, [sharedValue, completed, isViewAction, state]);
|
|
useEffect(() => {
|
|
if (completed && nextMemberAction != null) {
|
|
sharedValue2.set(state2);
|
|
} else {
|
|
sharedValue2.set(0);
|
|
}
|
|
}, [sharedValue2, completed, nextMemberAction, state2]);
|
|
const G = function G() {
|
|
let r25;
|
|
const r4 = {
|
|
height: null
|
|
};
|
|
if (stateFromStores) {
|
|
r4.height = sharedValue.get();
|
|
r25 = r4;
|
|
} else {
|
|
r4.height = _ReanimatedRexport.withDelay(completed ? 800 : 200, _timing.withTiming(sharedValue.get(), {
|
|
duration: 400,
|
|
easing: _native.DECELERATED_EASING
|
|
}));
|
|
r25 = r4;
|
|
}
|
|
return r25;
|
|
};
|
|
G.__closure = {
|
|
useReducedMotion: stateFromStores,
|
|
height: sharedValue,
|
|
withDelay: _ReanimatedRexport.withDelay,
|
|
completed,
|
|
withTiming: _timing.withTiming,
|
|
DECELERATED_EASING: _native.DECELERATED_EASING
|
|
};
|
|
G.__workletHash = 5585837927201;
|
|
G.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(G);
|
|
const B = function B() {
|
|
let r26;
|
|
const r5 = {
|
|
height: null
|
|
};
|
|
if (stateFromStores) {
|
|
r5.height = sharedValue2.get();
|
|
r26 = r5;
|
|
} else {
|
|
r5.height = _ReanimatedRexport.withDelay(c18841_6 ? 0 : completed ? 1200 : 0, _timing.withTiming(sharedValue2.get(), {
|
|
duration: 400,
|
|
easing: _native.DECELERATED_EASING
|
|
}));
|
|
r26 = r5;
|
|
}
|
|
return r26;
|
|
};
|
|
B.__closure = {
|
|
useReducedMotion: stateFromStores,
|
|
nextHeight: sharedValue2,
|
|
withDelay: _ReanimatedRexport.withDelay,
|
|
isViewAction,
|
|
completed,
|
|
withTiming: _timing.withTiming,
|
|
DECELERATED_EASING: _native.DECELERATED_EASING
|
|
};
|
|
B.__workletHash = 10256555667281;
|
|
B.__initData = __initData2;
|
|
const animatedStyle2 = useAnimatedStyle(B);
|
|
const callback = useCallback((a0) => {
|
|
setState(a0.nativeEvent.layout.height);
|
|
}, [setState]);
|
|
const callback2 = useCallback((a0) => {
|
|
setState2(a0.nativeEvent.layout.height);
|
|
}, [setState2]);
|
|
if (channelAction == null) {
|
|
return null;
|
|
}
|
|
const renderAction = function renderAction() {
|
|
let r1 = null;
|
|
if (channelAction != null) {
|
|
const r21 = [<ChannelActionEmoji emoji={channelAction.emoji} />, <View style={styles.text}>
|
|
<Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.wrap}>{channelAction.title}</Text>
|
|
<Text variant="text-xxs/normal" color="text-muted">
|
|
{intl.string(t["ElGg8+"])}
|
|
</Text>
|
|
</View>, ,];
|
|
let r44 = completed;
|
|
if (completed) {
|
|
r44 = <Icon disableColor size={Icon.Sizes.MEDIUM} source={Module11442} />;
|
|
}
|
|
r21[2] = r44;
|
|
r1 = <View style={styles.container}>{r21}</View>;
|
|
}
|
|
return r1;
|
|
};
|
|
const r127 = [<View style={styles.measurement} onLayout={callback}>
|
|
{renderAction()}
|
|
</View>, isViewAction ? !isViewAction : <ReanimatedRexport.View style={[styles.animatedContainer, animatedStyle]}>
|
|
{renderAction()}
|
|
</ReanimatedRexport.View>, ,];
|
|
let r136 = null;
|
|
if (completed) {
|
|
const r137 = nextMemberAction != null;
|
|
r136 = null;
|
|
if (r137) {
|
|
const renderNextAction = function renderNextAction() {
|
|
return nextMemberAction != null ? <PressableHighlight accessibilityRole="button" accessibilityLabel={intl.string(t.PDTjLN)} style={styles.container} onPress={() => transitionTo(Routes.CHANNEL(channel.guild_id, nextMemberAction.channelId))}>
|
|
<ChannelActionEmoji emoji={nextMemberAction.emoji} />
|
|
<View style={styles.text}>
|
|
<Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.wrap}>
|
|
{intl.format(t["/beONw"], {
|
|
step: nextMemberAction.title
|
|
})}
|
|
</Text>
|
|
<ActionChannelInfo action={nextMemberAction} />
|
|
</View>
|
|
<View style={styles.circle}>
|
|
<Icon size={Icon.Sizes.REFRESH_SMALL_16} style={styles.icon} source={Module6684} />
|
|
</View>
|
|
</PressableHighlight> : null;
|
|
};
|
|
r136 = <>
|
|
<View style={styles.measurement} onLayout={callback2}>
|
|
{renderNextAction()}
|
|
</View>
|
|
<ReanimatedRexport.View style={[styles.animatedContainer, animatedStyle2]}>
|
|
{renderNextAction()}
|
|
</ReanimatedRexport.View>
|
|
</>;
|
|
}
|
|
}
|
|
r127[2] = r136;
|
|
return <>{r127}</>;
|
|
};
|
|
useStyles = createStyles({
|
|
animatedContainer: {
|
|
overflow: "hidden"
|
|
},
|
|
measurement: {
|
|
opacity: 0,
|
|
position: "absolute"
|
|
},
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 8
|
|
},
|
|
text: {
|
|
flexGrow: 1,
|
|
flexShrink: 1,
|
|
marginLeft: 8
|
|
},
|
|
wrap: {
|
|
flexShrink: 1,
|
|
flexWrap: "wrap"
|
|
},
|
|
emoji: {
|
|
width: 24,
|
|
height: 24
|
|
},
|
|
textEmoji: {
|
|
width: 24,
|
|
textAlign: "center"
|
|
},
|
|
emojiPlaceholder: {
|
|
width: 24,
|
|
height: 24,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
borderRadius: Module712.radii.md,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
circle: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
height: 20,
|
|
width: 20,
|
|
borderRadius: 15,
|
|
marginLeft: 8,
|
|
backgroundColor: Module712.colors.BACKGROUND_BRAND
|
|
},
|
|
icon: {
|
|
tintColor: Module712.colors.WHITE
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function MemberActionChatInputBannerTsx1(){const{useReducedMotion,height,withDelay,completed,withTiming,DECELERATED_EASING}=this.__closure;if(useReducedMotion){return{height:height.get()};}return{height:withDelay(completed?800:200,withTiming(height.get(),{duration:400,easing:DECELERATED_EASING}))};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function MemberActionChatInputBannerTsx2(){const{useReducedMotion,nextHeight,withDelay,isViewAction,completed,withTiming,DECELERATED_EASING}=this.__closure;if(useReducedMotion){return{height:nextHeight.get()};}return{height:withDelay(!isViewAction&&completed?1200:0,withTiming(nextHeight.get(),{duration:400,easing:DECELERATED_EASING}))};}"
|
|
};
|
|
Component = memo(function({ channel: channel2 }) {
|
|
const canSeeOnboardingHome = useCanSeeOnboardingHome(channel2.guild_id);
|
|
const stateFromStores2 = useStateFromStores([GuildMemberStore], () => GuildMemberStore.getSelfMember(channel2.guild_id)?.isPending === true);
|
|
return useAllActionsCompleted(channel2.guild_id) ? null : stateFromStores2 ? null : canSeeOnboardingHome ? <MemberActionChatInputBanner channel={channel2} /> : null;
|
|
});
|
|
const r84 = memo(function({ channel: channel3 }) {
|
|
let r27;
|
|
const memberActionsForChannel = useMemberActionsForChannel(channel3.guild_id, channel3);
|
|
const { channelAction: channelAction2, completed: completed2 } = memberActionsForChannel;
|
|
const nextMemberAction2 = useNextMemberAction(channel3.guild_id, channelAction2?.channelId);
|
|
const actionType = channelAction2?.actionType;
|
|
L8: {
|
|
if (actionType === NewMemberActionTypes.VIEW) {
|
|
r27 = null;
|
|
if (!completed2) {
|
|
break L8;
|
|
}
|
|
r27 = nextMemberAction2 != null ? <Component channel={channel3} /> : null;
|
|
} else {
|
|
r27 = <Component channel={channel3} />;
|
|
}
|
|
}
|
|
return r27;
|
|
});
|
|
export { Component as MemberActionChatInputBannerGuarded };
|
|
export { r84 as MemberActionsChatInputBannerGuardedOuter };
|