discord-decomp/modules/share/native/ShareAttachments.tsx

// Metro module 13041 (f13042).
import { useCallback, useMemo } from "react";
import { View } from "react-native";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle, useAnimatedScrollHandler } from "../../reanimated/ReanimatedRexport";
import Module4611 from "../../../_bundle/Module4611";
import { STANDARD_EASING } from "../../../design/void/native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import { hexWithOpacity } from "../../../utils/ColorUtils";
import { intl, t } from "../../../intl/index.native";
import AttachmentPreview from "../../media/native/AttachmentPreview";
import * as _UploadUtils from "../../../utils/native/UploadUtils";
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Module4611);
const GRADIENT_EASING_CONFIG = {
  duration: 300,
  easing: STANDARD_EASING
};
const useStyles = createStyles({
  containerRevamp: {
    marginHorizontal: -Module712.space.PX_16
  },
  attachmentPreviewContentContainer: {
    flexDirection: "row",
    gap: Module712.space.PX_8
  },
  attachmentPreviewContentContainerRevamp: {
    paddingHorizontal: Module712.space.PX_16
  },
  attachmentPreview: {
    height: 60,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    overflow: "hidden",
    borderRadius: Module712.radii.sm
  },
  leftGradient: {
    width: 50,
    position: "absolute",
    left: 0,
    top: 0,
    bottom: 0,
    zIndex: 100
  },
  rightGradient: {
    width: 50,
    position: "absolute",
    right: 0,
    top: 0,
    bottom: 0,
    zIndex: 100
  },
  gradient: {
    color: Module712.colors.BACKGROUND_SURFACE_HIGH
  }
});
const __initData = {
  code: "function ShareAttachmentsTsx1(){const{withTiming,contentOffset,GRADIENT_EASING_CONFIG}=this.__closure;return{opacity:withTiming(contentOffset.get()<=0?0:1,GRADIENT_EASING_CONFIG)};}"
};
const __initData2 = {
  code: "function ShareAttachmentsTsx2(){const{withTiming,contentOffset,layoutWidth,contentWidth,GRADIENT_EASING_CONFIG}=this.__closure;return{opacity:withTiming(contentOffset.get()+layoutWidth.get()>=contentWidth.get()?0:1,GRADIENT_EASING_CONFIG)};}"
};
const __initData3 = {
  code: "function ShareAttachmentsTsx3(event){const{contentOffset,contentWidth,layoutWidth}=this.__closure;contentOffset.set(event.contentOffset.x);contentWidth.set(event.contentSize.width);layoutWidth.set(event.layoutMeasurement.width);}"
};
export default function ShareAttachments(props) {
  const { attachments, isRevamp = false } = props;
  const styles = useStyles();
  const sharedValue = useSharedValue(0);
  const sharedValue2 = useSharedValue(0);
  const sharedValue3 = useSharedValue(0);
  const y = () => ({
    opacity: _timing.withTiming(sharedValue.get() <= 0 ? 0 : 1, GRADIENT_EASING_CONFIG)
  });
  y.__closure = {
    withTiming: _timing.withTiming,
    contentOffset: sharedValue,
    GRADIENT_EASING_CONFIG
  };
  y.__workletHash = 3302668154466;
  y.__initData = __initData;
  const animatedStyle = useAnimatedStyle(y);
  const S = () => ({
    opacity: _timing.withTiming(sharedValue.get() + sharedValue3.get() >= sharedValue2.get() ? 0 : 1, GRADIENT_EASING_CONFIG)
  });
  S.__closure = {
    withTiming: _timing.withTiming,
    contentOffset: sharedValue,
    layoutWidth: sharedValue3,
    contentWidth: sharedValue2,
    GRADIENT_EASING_CONFIG
  };
  S.__workletHash = 13996707009656;
  S.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(S);
  const v = function v(a0) {
    sharedValue.set(a0.contentOffset.x);
    sharedValue2.set(a0.contentSize.width);
    sharedValue3.set(a0.layoutMeasurement.width);
  };
  v.__closure = {
    contentOffset: sharedValue,
    contentWidth: sharedValue2,
    layoutWidth: sharedValue3
  };
  v.__workletHash = 12660577105859;
  v.__initData = __initData3;
  const animatedScrollHandler = useAnimatedScrollHandler(v);
  const callback = useCallback((a0) => {
    sharedValue3.set(a0.nativeEvent.layout.width);
  }, [sharedValue3]);
  const callback2 = useCallback((a0) => {
    sharedValue2.set(a0);
  }, [sharedValue2]);
  const memo = useMemo(() => hexWithOpacity(styles.gradient.color, 0), [styles.gradient.color]);
  return attachments.length !== 0 ? <View style={isRevamp ? styles.containerRevamp : void 0}>
    <AnimatedComponent start={{
      x: 0,
      y: 0
    }} end={{
      x: 1,
      y: 0
    }} colors={[styles.gradient.color, memo]} style={[styles.leftGradient, animatedStyle]} pointerEvents="box-none" />
    <AnimatedComponent start={{
      x: 0,
      y: 0
    }} end={{
      x: 1,
      y: 0
    }} colors={[memo, styles.gradient.color]} style={[styles.rightGradient, animatedStyle2]} pointerEvents="box-none" />
    <ReanimatedRexport.ScrollView contentContainerStyle={[styles.attachmentPreviewContentContainer, isRevamp ? styles.attachmentPreviewContentContainerRevamp : void 0]} horizontal onScroll={animatedScrollHandler} onLayout={callback} onContentSizeChange={callback2} scrollEventThrottle={16} showsHorizontalScrollIndicator={false} accessibilityRole="list" accessibilityLabel={intl.string(t.RhtzFe)}>
      {attachments.map((attachment, index) => <View key={index} style={styles.attachmentPreview}>
        <AttachmentPreview uri={attachment.uri} width={60} height={60} isImage={_UploadUtils.isImage(attachment.uri, attachment.mimeType)} isVideo={_UploadUtils.isVideo(attachment.uri, attachment.mimeType)} fileName={attachment.name} showPlayOnVideoPreview />
      </View>)}
    </ReanimatedRexport.ScrollView>
  </View> : null;
};