121 lines
4.6 KiB
TypeScript
121 lines
4.6 KiB
TypeScript
// Metro module 11402 (f11403).
|
|
import { StyleSheet, View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { SMALL_BUTTON_HEIGHT, SMALL_BUTTON_PADDING } from "../../../../design/components/Button/native/ButtonConstants.native";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
|
|
import * as _timingPresets from "../../../../design/animation/reanimated/timing/timingPresets";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { useGradientBottom } from "../../../client_themes/native/ClientThemesOverrides";
|
|
import useAppLauncherOnboardingContent from "./hooks/useAppLauncherOnboardingContent";
|
|
import ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
|
|
import * as _Module11403 from "../../../../_bundle/Module11403";
|
|
import * as _Module11236 from "../../../../_bundle/Module11236";
|
|
let EnteringAnimation, ExitingAnimation;
|
|
const useStyles = createStyles(() => {
|
|
const width = SMALL_BUTTON_HEIGHT + SMALL_BUTTON_PADDING + 2;
|
|
return {
|
|
fakeButton: {
|
|
zIndex: 3,
|
|
borderWidth: 1.5,
|
|
borderColor: Module712.colors.BACKGROUND_BRAND,
|
|
borderRadius: Module712.radii.round,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width,
|
|
height: width,
|
|
marginLeft: 4
|
|
},
|
|
glowMask: {
|
|
zIndex: 1,
|
|
position: "absolute",
|
|
borderRadius: Module712.radii.round,
|
|
top: 0,
|
|
left: 0,
|
|
width,
|
|
height: width,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
marginLeft: 4
|
|
},
|
|
glowLottie: {
|
|
width: "150%",
|
|
height: "150%",
|
|
position: "absolute",
|
|
top: "-25%",
|
|
left: "-25%",
|
|
zIndex: 0,
|
|
opacity: 0.8
|
|
},
|
|
trinketsLottie: {
|
|
zIndex: 4,
|
|
position: "absolute",
|
|
pointerEvents: "none",
|
|
width: "175%",
|
|
height: "175%",
|
|
top: "-43%",
|
|
left: "-38%"
|
|
},
|
|
glowAnimation: {
|
|
pointerEvents: "none"
|
|
}
|
|
};
|
|
});
|
|
const EnteringAnimation2 = function EnteringAnimation() {
|
|
return {
|
|
initialValues: {
|
|
opacity: 0
|
|
},
|
|
animations: {
|
|
opacity: _timing.withTiming(1, _timingPresets.timingStandard)
|
|
}
|
|
};
|
|
};
|
|
EnteringAnimation2.__closure = {
|
|
withTiming: _timing.withTiming,
|
|
timingStandard: _timingPresets.timingStandard
|
|
};
|
|
EnteringAnimation2.__workletHash = 2327377243473;
|
|
EnteringAnimation2.__initData = {
|
|
code: "function EnteringAnimation_AppLauncherOnboardingChatInputButtonAnimationTsx1(){const{withTiming,timingStandard}=this.__closure;const initialValues={opacity:0};const animations={opacity:withTiming(1,timingStandard)};return{initialValues:initialValues,animations:animations};}"
|
|
};
|
|
EnteringAnimation = EnteringAnimation2;
|
|
const ExitingAnimation2 = function ExitingAnimation() {
|
|
return {
|
|
initialValues: {
|
|
opacity: 1
|
|
},
|
|
animations: {
|
|
opacity: _timing.withTiming(0, _timingPresets.timingStandard)
|
|
}
|
|
};
|
|
};
|
|
ExitingAnimation2.__closure = {
|
|
withTiming: _timing.withTiming,
|
|
timingStandard: _timingPresets.timingStandard
|
|
};
|
|
ExitingAnimation2.__workletHash = 1065249287738;
|
|
ExitingAnimation2.__initData = {
|
|
code: "function ExitingAnimation_AppLauncherOnboardingChatInputButtonAnimationTsx2(){const{withTiming,timingStandard}=this.__closure;const initialValues={opacity:1};const animations={opacity:withTiming(0,timingStandard)};return{initialValues:initialValues,animations:animations};}"
|
|
};
|
|
ExitingAnimation = ExitingAnimation2;
|
|
export const APP_LAUNCHER_ONBOARDING_CHAT_INPUT_BUTTON_ANIMATION_DURATION_MS = 7000;
|
|
export function AppLauncherOnboardingChatInputButtonAnimation(props) {
|
|
const channelId = props.channelId;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
const gradientBottom = useGradientBottom();
|
|
useAppLauncherOnboardingContent({
|
|
channelId
|
|
});
|
|
return <>
|
|
<ReanimatedRexport.View entering={EnteringAnimation} exiting={ExitingAnimation} style={[StyleSheet.absoluteFill, styles.glowAnimation]} collapsable={false}>
|
|
<LottieAnimationView collapsable={false} style={styles.glowLottie} source={_Module11403} autoPlay={!stateFromStores} />
|
|
<View collapsable={false} style={[styles.glowMask, gradientBottom]} />
|
|
<View collapsable={false} style={styles.fakeButton} />
|
|
</ReanimatedRexport.View>
|
|
<LottieAnimationView collapsable={false} style={styles.trinketsLottie} source={_Module11236} autoPlay={!stateFromStores} />
|
|
</>;
|
|
}
|