discord-decomp/modules/icymi/native/NewContentPill.tsx

// Metro module 15391 (f15392).
import { useState, useMemo, useLayoutEffect, useEffect, useCallback } from "react";
import { ActivityIndicator, View } from "react-native";
import GuildStore from "../../../stores/GuildStore";
import ICYMIStore from "../ICYMIStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import ClipView, { CutoutShape } from "../../../design/components/Icon/native/ClipView";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import { useStateFromStoresArray, useStateFromStores } from "../../../_bundle/Module589";
import useTheme from "../../../hooks/useTheme";
import { MIN_ITEMS_FOR_NEW_PILL } from "../ICYMITypes";
import { isGuildItem } from "../ICYMIUtils";
import ReanimatedRexport, { useAnimatedStyle, useAnimatedProps } from "../../reanimated/ReanimatedRexport";
import * as _spring from "../../../design/animation/reanimated/spring/spring";
import { useIsFocused } from "../../../_bundle/Module1483";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { ArrowSmallUpIcon } from "../../../design/components/Icon/native/redesign/generated/ArrowSmallUpIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { isThemeDark } from "../../../design/shared";
let useStyles, springConfig, __initData, __initData2;
const CutoutGuildIcon = function CutoutGuildIcon(props) {
  return <View style={{
    width: 24,
    height: 24
  }}>
    <ClipView cutouts={[{
      shape: CutoutShape.RoundedRect,
      x: 18,
      y: -4,
      width: 32,
      height: 32,
      cornerRadius: Module712.radii.md
    }]}>
      <GuildIcon guild={props.guild} size={GuildIconSizes.XSMALL} style={useStyles().guildIconBG} />
    </ClipView>
  </View>;
};
useStyles = createStyles({
  container: {
    alignSelf: "center",
    alignItems: "center",
    flexDirection: "row",
    paddingRight: 12,
    paddingLeft: 8,
    paddingVertical: 6,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_BRAND
  },
  guildIconBG: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  refreshMorePillContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    height: 32,
    width: "100%",
    zIndex: 100
  }
});
springConfig = {
  overshootClamping: true,
  stiffness: 20,
  damping: 15,
  mass: 0.03
};
__initData = {
  code: "function NewContentPillTsx1(){const{withSpring,showingPill,springConfig}=this.__closure;return{transform:[{translateY:withSpring(showingPill?12:0,springConfig)}],opacity:withSpring(showingPill?1:0,springConfig,'respect-motion-settings')};}"
};
__initData2 = {
  code: "function NewContentPillTsx2(){const{showingPill}=this.__closure;return{pointerEvents:showingPill?'box-none':'none'};}"
};
export default function NewContentPill(props) {
  let stateFromStores, state, setState, memo, setState2, state2, isFocused, state3, setState3;
  const { onPress, isRefreshing } = props;
  stateFromStores = void 0;
  state = void 0;
  setState = void 0;
  memo = void 0;
  setState2 = void 0;
  state2 = void 0;
  isFocused = void 0;
  state3 = void 0;
  setState3 = void 0;
  const styles = useStyles();
  const stateFromStoresArray = useStateFromStoresArray([ICYMIStore], () => ICYMIStore.getNewUnreadDehydratedItems());
  stateFromStores = useStateFromStores([ICYMIStore], () => ICYMIStore.hasNewContent(), []);
  [state, setState] = useState(stateFromStoresArray);
  const theme = useTheme();
  memo = useMemo(() => {
    const r4 = [];
    let c28016_0 = r4;
    state.forEach((item) => {
      if (!(c28016_0.length >= MIN_ITEMS_FOR_NEW_PILL) && isGuildItem(item) && !c28016_0.includes(item.data.guild_id)) {
        c28016_0.push(item.data.guild_id);
      }
    });
    return r4;
  }, [state]);
  const stateFromStoresArray2 = useStateFromStoresArray([GuildStore], () => memo.map((item) => GuildStore.getGuild(item)).filter(Boolean));
  let state4;
  [state4, setState2] = useState(false);
  state2 = stateFromStores ? state4 : stateFromStores;
  const y = function y() {
    return {
      transform: [{
        translateY: _spring.withSpring(state2 ? 12 : 0, springConfig)
      }],
      opacity: _spring.withSpring(state2 ? 1 : 0, springConfig, "respect-motion-settings")
    };
  };
  y.__closure = {
    withSpring: _spring.withSpring,
    showingPill: state2,
    springConfig
  };
  y.__workletHash = 13655660855782;
  y.__initData = __initData;
  const animatedStyle = useAnimatedStyle(y);
  const C = function C() {
    return {
      pointerEvents: state2 ? "box-none" : "none"
    };
  };
  C.__closure = {
    showingPill: state2
  };
  C.__workletHash = 876312391659;
  C.__initData = __initData2;
  const animatedProps = useAnimatedProps(C);
  isFocused = useIsFocused();
  [state3, setState3] = useState(false);
  useLayoutEffect(() => {
    let r3 = state3;
    if (!state3 && (isFocused && stateFromStores)) {
      setState2(false);
    } else {
      if (state3) {
        r3 = isFocused;
      }
      if (r3) {
        r3 = !stateFromStores;
      }
      if (r3) {
        setState2(true);
      }
    }
    setState3(isFocused);
  }, [stateFromStores, isFocused, state3]);
  useEffect(() => {
    if (!isRefreshing) {
      setState(stateFromStoresArray);
    }
  }, [isRefreshing, stateFromStoresArray, stateFromStores]);
  const callback = useCallback(() => {
    onPress();
  }, [onPress]);
  return stateFromStoresArray2.length === 0 ? <ReanimatedRexport.View style={[styles.refreshMorePillContainer, animatedStyle]} animatedProps={animatedProps}>
    <PressableOpacity onPress={callback} style={styles.container}>
      <ArrowSmallUpIcon size="md" color="interactive-text-active" />
      <Text style={{
        marginLeft: 4
      }} variant="heading-md/bold" color="interactive-text-active">
        {intl.string(t["4Nl0Rl"])}
      </Text>
    </PressableOpacity>
  </ReanimatedRexport.View> : <ReanimatedRexport.View style={[styles.refreshMorePillContainer, animatedStyle]} animatedProps={animatedProps}>
    <PressableOpacity onPress={callback} style={styles.container}>
      {isRefreshing ? <ActivityIndicator color={isThemeDark(theme) ? Module712.unsafe_rawColors.WHITE : Module712.unsafe_rawColors.PRIMARY_500} /> : <ArrowSmallUpIcon size="md" color="interactive-text-active" />}
      {stateFromStoresArray2.slice(0, stateFromStoresArray2.length - 1).map((item, index) => <View key={item.id} style={{
        marginLeft: index > 0 ? -2 : 4
      }}>
        <CutoutGuildIcon guild={item} />
      </View>)}
      <View style={{
        marginLeft: stateFromStoresArray2.length > 1 ? -2 : 4
      }}>
        <GuildIcon guild={stateFromStoresArray2[stateFromStoresArray2.length - 1]} size={GuildIconSizes.XSMALL} style={styles.guildIconBG} />
      </View>
    </PressableOpacity>
  </ReanimatedRexport.View>;
};