yeet

modules/guild_onboarding_home/native/MemberActionChatInputBanner.tsx

@@ -0,0 +1,313 @@
+// 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 };