discord-decomp/modules/in_app_notifications/native/NotificationContent.tsx

// Metro module 10335 (f10336).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useState, useMemo, useCallback, useEffect } from "react";
import { Pressable, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useIsScreenReaderEnabled } from "../../a11y/native/useIsScreenReaderEnabled.native";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle, withDelay, withRepeat, cancelAnimation } from "../../reanimated/ReanimatedRexport";
import { getExpandNUXState, MAX_TIMES_SHOWN, ONE_DAY_MS, markExpandNUXStateAsShown, NUX_REVEAL_DELAY_MS, NUX_REVEAL_DURATION_MS, DRAG_HANDLE_BOUNCE_DISTANCE, DRAG_HANDLE_BOUNCE_DURATION_MS } from "./InAppNotificationExpandNux";
import { useSelectedDismissibleContent } from "../../dismissible_content/hooks/useSelectedDismissibleContent";
import { DismissibleContent } from "../../../_bundle/Module1358";
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import MessageNotificationHeader, { SimpleNotificationHeader } from "./MessageNotificationHeader";
let useStyles, useStyles2, __initData, __initData2;
const DragHandle = function DragHandle(props) {
  let c17882_5;
  const onAccessibilityExpand = props.onAccessibilityExpand;
  c17882_5 = void 0;
  const styles = useStyles();
  const isScreenReaderEnabled = useIsScreenReaderEnabled();
  const sharedValue = useSharedValue(0);
  const sharedValue2 = useSharedValue(0);
  const [state, setState] = useState(0);
  const [state2] = useState(() => Date.now());
  const r61 = _slicedToArray(useSelectedDismissibleContent(useMemo(() => {
    const expandNUXState = getExpandNUXState();
    if (expandNUXState.numTimesShown >= MAX_TIMES_SHOWN) {
      return false;
    }
    return !(state2 - expandNUXState.lastShownAtMs < ONE_DAY_MS);
  }, [state2]) ? [DismissibleContent.IN_APP_NOTIFICATION_EXPAND_NUX] : [], void 0, true), 1)[0] === DismissibleContent.IN_APP_NOTIFICATION_EXPAND_NUX;
  c17882_5 = r61;
  const callback = useCallback((a0) => {
    const height = a0.nativeEvent.layout.height;
    setState((prevState) => {
      let r2 = height;
      if (prevState === height) {
        r2 = prevState;
      }
      return r2;
    });
  }, []);
  const c = () => ({
    opacity: sharedValue2.get(),
    height: _ReanimatedRexport.interpolate(sharedValue2.get(), [0, 1], [0, state])
  });
  c.__closure = {
    textRevealProgress: sharedValue2,
    interpolate: _ReanimatedRexport.interpolate,
    textHeight: state
  };
  c.__workletHash = 11744264899632;
  c.__initData = __initData;
  const animatedStyle = useAnimatedStyle(c);
  const A = () => ({
    transform: [{
      translateY: sharedValue.get()
    }]
  });
  A.__closure = {
    dragHandleBounceProgress: sharedValue
  };
  A.__workletHash = 16018166575562;
  A.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(A);
  useEffect(() => {
    if (c17882_5) {
      markExpandNUXStateAsShown();
      sharedValue2.set(withDelay(NUX_REVEAL_DELAY_MS, withTiming(1, {
        duration: NUX_REVEAL_DURATION_MS
      })));
      sharedValue.set(withDelay(NUX_REVEAL_DELAY_MS + NUX_REVEAL_DURATION_MS, withRepeat(withTiming(DRAG_HANDLE_BOUNCE_DISTANCE, {
        duration: DRAG_HANDLE_BOUNCE_DURATION_MS
      }), -1, true)));
      return () => {
        cancelAnimation(sharedValue2);
        cancelAnimation(sharedValue);
      };
    }
  }, [r61, sharedValue2, sharedValue]);
  const r91 = r61 ? <>
    <ReanimatedRexport.View style={[styles.dragHandleTextContainer, animatedStyle]}>
      <Text onLayout={callback} variant="text-xs/normal" color="text-subtle" style={styles.dragHandleText}>
        {intl.string(t["vos6/N"])}
      </Text>
    </ReanimatedRexport.View>
    <ReanimatedRexport.View style={[styles.dragHandle, animatedStyle2]} />
  </> : <View style={styles.dragHandle} />;
  return isScreenReaderEnabled ? onAccessibilityExpand != null ? <Pressable onPress={onAccessibilityExpand} accessibilityRole="button" accessibilityLabel={intl.string(t["PbxI/x"])}>{r91}</Pressable> : r91 : r91;
};
useStyles = createStyles({
  dragHandleTextContainer: {
    overflow: "hidden"
  },
  dragHandleText: {
    position: "absolute",
    left: 0,
    right: 0,
    textAlign: "center",
    paddingBottom: Module712.space.PX_4
  },
  dragHandle: {
    width: 32,
    height: 4,
    alignSelf: "center",
    backgroundColor: Module712.colors.BACKGROUND_ACCENT,
    borderRadius: Module712.radii.xs,
    marginBottom: Module712.space.PX_8
  }
});
useStyles2 = createStyles({
  body: {
    flex: 1
  },
  iconContainer: {
    marginRight: Module712.space.PX_8
  },
  contentContainer: {
    padding: Module712.space.PX_12,
    flexDirection: "row"
  },
  contentContainerExpanded: {
    padding: Module712.space.PX_12,
    paddingBottom: 0,
    flexDirection: "row"
  },
  headerContainer: {
    flex: 1
  },
  labelContainer: {
    flexDirection: "row",
    alignItems: "center"
  }
});
__initData = {
  code: "function NotificationContentTsx1(){const{textRevealProgress,interpolate,textHeight}=this.__closure;return{opacity:textRevealProgress.get(),height:interpolate(textRevealProgress.get(),[0,1],[0,textHeight])};}"
};
__initData2 = {
  code: "function NotificationContentTsx2(){const{dragHandleBounceProgress}=this.__closure;return{transform:[{translateY:dragHandleBounceProgress.get()}]};}"
};
export default function NotificationContent(props) {
  const { icon, children, accessoryLabelNode, rightAccessory, header, showDragHandle = false, onAccessibilityExpand, bodyStyle, expandedContentVisible = false } = props;
  const styles2 = useStyles2();
  const style = expandedContentVisible ? styles2.contentContainerExpanded : styles2.contentContainer;
  return <>
    <View style={style}>
      {icon != null ? <View style={styles2.iconContainer}>{icon}</View> : null}
      <ReanimatedRexport.View style={[styles2.body, bodyStyle]}>
        <View style={styles2.labelContainer}>
          {accessoryLabelNode ?? null}
          <View style={styles2.headerContainer}>
            {header.type === "message" ? <MessageNotificationHeader {...header} /> : <SimpleNotificationHeader {...header} />}
          </View>
        </View>
        {children}
      </ReanimatedRexport.View>
      {rightAccessory}
    </View>
    {showDragHandle ? <DragHandle onAccessibilityExpand={onAccessibilityExpand} /> : null}
  </>;
};