91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
// Metro module 11409 (f11410).
|
|
import { useRef, useEffect } from "react";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
|
|
import { useToken } from "../../../../design/tokens/native/useToken";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { isIOS } from "../../../../utils/PlatformUtils";
|
|
import ReanimatedRexport, { FadeOut } from "../../../reanimated/ReanimatedRexport";
|
|
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
|
|
import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
|
|
const useStyles = createStyles((a0, a1) => ({
|
|
container: {
|
|
backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
|
|
width: a0,
|
|
height: a0,
|
|
borderRadius: Module712.radii.round,
|
|
marginHorizontal: a1,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
containerRefresh: {
|
|
width: a0,
|
|
height: a0,
|
|
borderRadius: Module712.radii.sm,
|
|
marginHorizontal: a1,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
animation: {
|
|
width: 30,
|
|
height: 30
|
|
},
|
|
animationRefresh: {
|
|
width: 24,
|
|
height: 24
|
|
}
|
|
}));
|
|
export function PremiumAnimatedGiftButton(props) {
|
|
let active = props.active;
|
|
const { style, activeStyle, disabled, accessibilityState, channelId, animationDataUrl, onAnimationFinished, loop } = props;
|
|
const enabled = useMobileVisualRefreshConfig({
|
|
location: "PremiumAnimatedGiftButton"
|
|
}).enabled;
|
|
const token = useToken(Module712.modules.mobile.CHAT_INPUT_ACTION_BUTTON_SIZE);
|
|
const token2 = useToken(Module712.modules.mobile.CHAT_INPUT_ACTION_BUTTON_MARGIN);
|
|
const token3 = useToken(Module712.modules.mobile.CHAT_INPUT_BUTTON_MIN_TOUCH_TARGET_SIZE);
|
|
const styles = useStyles(token, token2);
|
|
const r63 = Math.max(0, (token3 - token) / 2);
|
|
const ref = useRef(null);
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
useEffect(() => {
|
|
if (!stateFromStores) {
|
|
if (isIOS() && ref != null) {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.reset();
|
|
}
|
|
}
|
|
if (ref != null) {
|
|
const current2 = ref.current;
|
|
if (current2 != null) {
|
|
current2.play();
|
|
}
|
|
}
|
|
}
|
|
}, [channelId, stateFromStores]);
|
|
const exiting = stateFromStores ? void 0 : FadeOut;
|
|
const style2 = [enabled ? styles.containerRefresh : styles.container, style, ,];
|
|
if (active) {
|
|
active = !disabled;
|
|
}
|
|
if (active) {
|
|
active = activeStyle;
|
|
}
|
|
style2[2] = active;
|
|
return <ReanimatedRexport.View exiting={exiting}>
|
|
<PressableOpacity style={style2} hitSlop={r63 > 0 ? r63 : void 0} accessibilityRole="button" accessibilityState={{
|
|
disabled,
|
|
...accessibilityState
|
|
}} {...props}>
|
|
<LottieAnimationView ref={ref} style={enabled ? styles.animationRefresh : styles.animation} source={{
|
|
uri: animationDataUrl
|
|
}} loop={loop} autoPlay={false} onAnimationFinish={onAnimationFinished} />
|
|
</PressableOpacity>
|
|
</ReanimatedRexport.View>;
|
|
}
|