discord-decomp/modules/quests/native/QuestProgressIndicator.tsx

// Metro module 14155 (f14156).
import Module19, { useEffect, useMemo, useRef } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle, useAnimatedProps, cancelAnimation } from "../../reanimated/ReanimatedRexport";
import { Circle, Svg, Defs, LinearGradient, Stop } from "../../../_bundle/Module8531";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../intl/index.native";
import LottieAnimationView from "../../../components_native/common/LottieAnimationView";
import * as _Module14156 from "../../../_bundle/Module14156";
import QuestRewardTile from "./QuestRewardTile";
let __initData, __initData2, __initData3;
const _excluded = ["#666777", "#535564"];
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Circle);
let c9907_13 = {
  "x-sm": 40,
  sm: 64,
  md: 70,
  "md-lg": 100,
  lg: 128
};
const useStyles = createStyles((a0) => ({
  wrapper: {
    position: "relative"
  },
  container: {
    position: "relative",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1
  },
  completionGlow: {
    shadowOffset: {
      width: 0,
      height: 0
    },
    shadowRadius: 20,
    shadowOpacity: 0,
    elevation: 4,
    shadowColor: "#30C77399"
  },
  canvas: {
    transform: [{
      rotate: "-90deg"
    }]
  },
  imageContainer: {
    position: "absolute",
    height: 0.78 * a0,
    width: 0.78 * a0,
    borderRadius: Module712.radii.round,
    overflow: "hidden"
  },
  progressPath: {
    color: Module712.colors.STATUS_POSITIVE
  },
  confetti: {
    position: "absolute",
    pointerEvents: "none"
  },
  opacityMask: {
    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 2
  }
}));
__initData = {
  code: "function QuestProgressIndicatorTsx1(){const{glowOpacity}=this.__closure;return{shadowOpacity:glowOpacity.get()};}"
};
__initData2 = {
  code: "function QuestProgressIndicatorTsx2(){const{circumference,animatedProgress}=this.__closure;return{strokeDashoffset:circumference-circumference*animatedProgress.get()};}"
};
__initData3 = {
  code: "function QuestProgressIndicatorTsx3(){const{underlayOpacity,styles}=this.__closure;return{opacity:underlayOpacity.get(),...styles.opacityMask};}"
};
const r47 = Module19.memo(function QuestProgressIndicator(props) {
  let width, scale, c20961_5, styles, sharedValue, sharedValue2, c20961_9, sharedValue3, ref;
  const { quest, size, progress, loading = false } = props;
  let c20961_1 = loading;
  const { hasConfetti = false, withAnimation, onPress, accessibilityLabel } = props;
  width = void 0;
  scale = void 0;
  c20961_5 = void 0;
  styles = void 0;
  sharedValue = void 0;
  sharedValue2 = void 0;
  c20961_9 = void 0;
  sharedValue3 = void 0;
  ref = void 0;
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const strokeWidth = ({
    "x-sm": 3,
    sm: 3,
    md: 3,
    "md-lg": 4,
    lg: 6
  })[size];
  width = c9907_13[size];
  scale = ({
    "x-sm": 1.6,
    sm: 1,
    md: 1.4,
    "md-lg": 1.5,
    lg: 1.6
  })[size];
  const r52 = width / 2 - strokeWidth / 2;
  const circumference = 2 * Math.PI * r52;
  c20961_5 = circumference;
  styles = useStyles(width);
  sharedValue = useSharedValue(progress);
  sharedValue2 = useSharedValue(loading ? 0.7 : 0);
  const r67 = quest.userStatus?.completedAt != null;
  c20961_9 = r67;
  sharedValue3 = useSharedValue(r67 ? 1 : 0);
  const T = () => ({
    shadowOpacity: sharedValue3.get()
  });
  T.__closure = {
    glowOpacity: sharedValue3
  };
  T.__workletHash = 17183837725505;
  T.__initData = __initData;
  const animatedStyle = useAnimatedStyle(T);
  const D = () => ({
    strokeDashoffset: c20961_5 - c20961_5 * sharedValue.get()
  });
  D.__closure = {
    circumference,
    animatedProgress: sharedValue
  };
  D.__workletHash = 17281152506254;
  D.__initData = __initData2;
  const animatedProps = useAnimatedProps(D);
  const R = () => ({
    opacity: sharedValue2.get(),
    ...styles.opacityMask
  });
  R.__closure = {
    underlayOpacity: sharedValue2,
    styles
  };
  R.__workletHash = 4427598698568;
  R.__initData = __initData3;
  const animatedStyle2 = useAnimatedStyle(R);
  useEffect(() => {
    sharedValue.set(withTiming(progress, {
      duration: stateFromStores ? 0 : 500
    }));
    return () => {
      cancelAnimation(sharedValue);
    };
  }, [sharedValue, progress, stateFromStores]);
  useEffect(() => {
    sharedValue2.set(withTiming(c20961_1 ? 0.7 : 0, {
      duration: 500
    }));
    return () => {
      cancelAnimation(sharedValue2);
    };
  }, [sharedValue2, loading]);
  ref = useRef(null);
  const memo = useMemo(() => ({
    ...styles.confetti,
    width,
    height: width,
    transform: [{
      scale
    }]
  }), [styles.confetti, scale, width]);
  useEffect(() => {
    L6: {
      if (!stateFromStores && c20961_9) {
        sharedValue3.set(withTiming(1, {
          duration: 500
        }));
        const current = ref.current;
        if (current == null) {
          break L6;
        }
        current.play();
      } else {
        sharedValue3.set(0);
        const current2 = ref.current;
        if (current2 != null) {
          current2.reset();
        }
      }
    }
  }, [r67, sharedValue3, stateFromStores]);
  const Component = onPress == null ? Module19.Fragment : PressableOpacity;
  const percent = Math.round(100 * progress);
  const r118 = onPress == null ? {} : {
    onPress
  };
  let accessibilityLabel2 = accessibilityLabel;
  if (accessibilityLabel2 == null) {
    accessibilityLabel2 = intl.formatToPlainString(t.Gj8Jqn, {
      percent
    });
  }
  return <Component {...r118}>
    <ReanimatedRexport.View style={[styles.wrapper, styles.completionGlow, animatedStyle]} accessible accessibilityRole="progressbar" accessibilityLabel={accessibilityLabel2} accessibilityValue={{
      min: 0,
      max: 100,
      now: percent
    }}>
      <ReanimatedRexport.View style={animatedStyle2} />
      <View style={styles.container}>
        <Svg height={width} width={width} style={styles.canvas}>
          <Defs>
            <LinearGradient id="underlayGradient" x1="0" y1="0.5" x2="1" y2="0.5">
              <Stop offset="0" stopColor={_excluded[0]} />
              <Stop offset="1" stopColor={_excluded[1]} />
            </LinearGradient>
          </Defs>
          <Circle cx={width / 2} cy={width / 2} r={r52} fill="none" stroke="url(#underlayGradient)" strokeWidth={strokeWidth} />
          <AnimatedComponent cx={width / 2} cy={width / 2} r={r52} fill="none" stroke={styles.progressPath.color} strokeWidth={strokeWidth} strokeDasharray={circumference} strokeLinecap="round" animatedProps={animatedProps} />
        </Svg>
        {hasConfetti ? <LottieAnimationView ref={ref} style={memo} source={_Module14156} autoPlay={false} loop={false} /> : null}
        <View style={styles.imageContainer}>
          <QuestRewardTile quest={quest} height={0.78 * width} width={0.78 * width} withAnimation={withAnimation} accessibilityLabelPrefix={accessibilityLabel} />
        </View>
      </View>
    </ReanimatedRexport.View>
  </Component>;
});
export default r47;
export { c9907_13 as QUEST_PROGRESS_DIAMETER_BY_SIZE };