discord-decomp/design/components/ContextMenu/native/ContextMenuItem.native.tsx

// Metro module 13209 (f13210).
import { useCallback } from "react";
import { Pressable } from "react-native";
import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
import ReanimatedRexport, { useAnimatedRef, useSharedValue, useAnimatedReaction, useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
import { createStyles } from "../../Styles/native/createStyles";
import { CONTEXT_MENU_ITEM_PADDING, CONTEXT_MENU_ITEM_BASE_HEIGHT } from "./ContextMenuConstants.native";
import Module712 from "../../../../_bundle/Module712";
import MobileVisualRefreshExperiment from "../../../../modules/themes/experiments/MobileVisualRefreshExperiment";
import * as _ContextMenuState_native from "./ContextMenuState.native";
import * as _spring from "../../../animation/reanimated/spring/spring";
import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
import Icon from "../../../void/Icon/native/Icon";
import { Text } from "../../Text/native/Text";
let __initData, __initData2, __initData3;
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Pressable);
const useStyles = createStyles((a0) => ({
  container: {
    padding: CONTEXT_MENU_ITEM_PADDING,
    minHeight: CONTEXT_MENU_ITEM_BASE_HEIGHT,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 8
  },
  containerRefresh: {
    justifyContent: "flex-start"
  },
  roundedTop: {
    borderTopLeftRadius: Module712.radii.lg,
    borderTopRightRadius: Module712.radii.lg
  },
  roundedBottom: {
    borderBottomLeftRadius: Module712.radii.lg,
    borderBottomRightRadius: Module712.radii.lg
  },
  border: {
    borderBottomWidth: 1,
    borderBottomColor: Module712.colors.BORDER_SUBTLE
  },
  pressed: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  icon: {
    width: 20,
    height: 20,
    tintColor: a0 === "destructive" ? Module712.colors.TEXT_FEEDBACK_CRITICAL : Module712.colors.TEXT_STRONG
  },
  label: {
    flexShrink: 1
  },
  trailingIndicator: {
    marginLeft: "auto"
  }
}));
__initData = {
  code: "function ContextMenuItemNativeTsx1(){const{pan}=this.__closure;return pan.get();}"
};
__initData2 = {
  code: "function ContextMenuItemNativeTsx2(_current,previous){const{measure,ref,index,INDEX_BOUNDS_OFFSET,itemMeasurements,INDEX_BOUNDS_PAGE_X_OFFSET,INDEX_BOUNDS_PAGE_Y_OFFSET,INDEX_BOUNDS_WIDTH_OFFSET,INDEX_BOUNDS_HEIGHT_OFFSET}=this.__closure;if(previous==null||_current===previous)return;const measurements=measure(ref);if(measurements!=null){const{pageX:pageX,pageY:pageY,width:width,height:height}=measurements;const offset=index*INDEX_BOUNDS_OFFSET;itemMeasurements.get()[offset+INDEX_BOUNDS_PAGE_X_OFFSET]=pageX;itemMeasurements.get()[offset+INDEX_BOUNDS_PAGE_Y_OFFSET]=pageY;itemMeasurements.get()[offset+INDEX_BOUNDS_WIDTH_OFFSET]=width;itemMeasurements.get()[offset+INDEX_BOUNDS_HEIGHT_OFFSET]=height;}}"
};
__initData3 = {
  code: "function ContextMenuItemNativeTsx3(){const{activeIndex,index,pressed,withSpring,backgroundColor,SUBTLE_SPRING}=this.__closure;const isActive=activeIndex.get()===index||pressed.get()===1;return{backgroundColor:withSpring(isActive?backgroundColor:'transparent',SUBTLE_SPRING,'animate-always')};}"
};
export function ContextMenuItem(props) {
  let backgroundColor;
  const { label, IconComponent, trailingIndicator: TrailingIndicator, iconSource } = props;
  let start = props.start;
  let end = props.end;
  const { lastInSection, index, state, onPress, variant = "default", accessibilityRole = "button" } = props;
  backgroundColor = void 0;
  const animatedRef = useAnimatedRef();
  const styles = useStyles(variant);
  const r38 = MobileVisualRefreshExperiment("ContextMenuItem");
  const { pan, itemMeasurements, activeIndex } = state;
  const sharedValue = useSharedValue(0);
  const U = () => pan.get();
  U.__closure = {
    pan
  };
  U.__workletHash = 11852115418144;
  U.__initData = __initData;
  const r47 = function(a0, a1) {
    if (a1 != null && a0 !== a1) {
      const r16 = _ReanimatedRexport.measure(animatedRef);
      if (r16 != null) {
        const { pageX, pageY, width, height } = r16;
        const r22 = index * _ContextMenuState_native.INDEX_BOUNDS_OFFSET;
        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_PAGE_X_OFFSET] = pageX;
        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_PAGE_Y_OFFSET] = pageY;
        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_WIDTH_OFFSET] = width;
        itemMeasurements.get()[r22 + _ContextMenuState_native.INDEX_BOUNDS_HEIGHT_OFFSET] = height;
      }
    }
  };
  r47.__closure = {
    measure: _ReanimatedRexport.measure,
    ref: animatedRef,
    index,
    INDEX_BOUNDS_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_OFFSET,
    itemMeasurements,
    INDEX_BOUNDS_PAGE_X_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_PAGE_X_OFFSET,
    INDEX_BOUNDS_PAGE_Y_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_PAGE_Y_OFFSET,
    INDEX_BOUNDS_WIDTH_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_WIDTH_OFFSET,
    INDEX_BOUNDS_HEIGHT_OFFSET: _ContextMenuState_native.INDEX_BOUNDS_HEIGHT_OFFSET
  };
  r47.__workletHash = 9571959267234;
  r47.__initData = __initData2;
  useAnimatedReaction(U, r47);
  backgroundColor = styles.pressed.backgroundColor;
  const R = function R() {
    return {
      backgroundColor: _spring.withSpring(activeIndex.get() === index || sharedValue.get() === 1 ? backgroundColor : "transparent", _springPresets.SUBTLE_SPRING, "animate-always")
    };
  };
  R.__closure = {
    activeIndex,
    index,
    pressed: sharedValue,
    withSpring: _spring.withSpring,
    backgroundColor,
    SUBTLE_SPRING: _springPresets.SUBTLE_SPRING
  };
  R.__workletHash = 624481847983;
  R.__initData = __initData3;
  const animatedStyle = useAnimatedStyle(R);
  const r85 = IconComponent != null ? <IconComponent size="sm" color={styles.icon.tintColor} /> : iconSource != null ? <Icon source={iconSource} style={styles.icon} /> : null;
  const r96 = TrailingIndicator != null ? <TrailingIndicator size="sm" color={styles.icon.tintColor} /> : null;
  const callback = useCallback((a0) => {
    const layout = a0.nativeEvent.layout;
    const { height, width } = layout;
    if (height !== 0 && width !== 0) {
      const r16 = index * _ContextMenuState_native.INDEX_BOUNDS_OFFSET;
      itemMeasurements.get()[r16 + _ContextMenuState_native.INDEX_BOUNDS_HEIGHT_OFFSET] = height;
      itemMeasurements.get()[r16 + _ContextMenuState_native.INDEX_BOUNDS_WIDTH_OFFSET] = width;
    }
  }, [index, itemMeasurements]);
  const callback2 = useCallback(() => {
    activeIndex.set(index);
  }, [activeIndex, index]);
  const callback3 = useCallback(() => {
    activeIndex.set(-1);
  }, [activeIndex]);
  const style = [styles.container, r38 ? styles.containerRefresh : r38, (end ? !end : !lastInSection) && styles.border, , , ,];
  if (start) {
    start = styles.roundedTop;
  }
  style[3] = start;
  if (end) {
    end = styles.roundedBottom;
  }
  style[4] = end;
  style[5] = animatedStyle;
  return <AnimatedComponent ref={animatedRef} style={style} onLayout={callback} onPressIn={callback2} onPressOut={callback3} onPress={onPress} accessibilityRole={accessibilityRole}>
    {r38 && <ReanimatedRexport.View>{r85}</ReanimatedRexport.View>}
    <Text animated variant="text-md/medium" style={styles.label} color={variant === "destructive" ? "text-feedback-critical" : "text-strong"}>{label}</Text>
    {r38 ? !r38 : <ReanimatedRexport.View>{r85}</ReanimatedRexport.View>}
    {r96 != null && <ReanimatedRexport.View style={styles.trailingIndicator}>{r96}</ReanimatedRexport.View>}
  </AnimatedComponent>;
}