215 lines
8.5 KiB
TypeScript
215 lines
8.5 KiB
TypeScript
// Metro module 15266 (f15267).
|
|
import { useMemo, useState, useEffect, useRef } from "react";
|
|
import { ActivityIndicator, View } from "react-native";
|
|
import ConnectivityIndicatorStateStore, { ConnectivityIndicatorState } from "../../connectivity/native/ConnectivityIndicatorStateStore";
|
|
import { CONNECTION_BANNER_HEIGHT, YOU_BAR_SPRING_CONFIG } from "./you_bar/YouBarConstants";
|
|
import { AnalyticEvents } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import { ConnectionUnknownIcon } from "../../../design/components/Icon/native/redesign/generated/ConnectionUnknownIcon";
|
|
import { ConnectionFineIcon } from "../../../design/components/Icon/native/redesign/generated/ConnectionFineIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import Module689 from "../../../_bundle/Module689";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import Module5165 from "../../../_bundle/Module5165";
|
|
import Module4611 from "../../../_bundle/Module4611";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { useYouBarBottomMargin } from "./you_bar/hooks/useYouBarMargins";
|
|
import { withSpring } from "../../../design/animation/reanimated/spring/spring";
|
|
import ConnectionIndicatorExperiment from "./ConnectionIndicatorExperiment";
|
|
let _excluded, locations, start, end, locations2, start2, end2, useStyles, ConnectionBannerContent, BackOnlineGlow, __initData, __initData2, ConnectionBannerInner;
|
|
const ConnectionBannerIcon = function ConnectionBannerIcon(props) {
|
|
const state = props.state;
|
|
const styles = useStyles();
|
|
const token2 = useToken(Module712.colors.INTERACTIVE_ICON_DEFAULT);
|
|
if (ConnectivityIndicatorState.WAITING_FOR_NETWORK === state) {
|
|
return <View style={styles.leadingSlot}>
|
|
<ActivityIndicator size="small" color={token2} style={styles.spinner} />
|
|
</View>;
|
|
}
|
|
if (ConnectivityIndicatorState.NO_CONNECTION === state) {
|
|
return <View style={styles.leadingSlot}>
|
|
<ConnectionUnknownIcon size="xs" color={Module712.colors.INTERACTIVE_ICON_DEFAULT} />
|
|
</View>;
|
|
}
|
|
if (ConnectivityIndicatorState.BACK_ONLINE === state) {
|
|
return <View style={styles.leadingSlot}>
|
|
<ConnectionFineIcon size="xs" color={Module712.colors.ICON_FEEDBACK_POSITIVE} />
|
|
</View>;
|
|
}
|
|
};
|
|
ConnectionBannerContent = function ConnectionBannerContent(props) {
|
|
const state = props.state;
|
|
return <View style={useStyles().content}>
|
|
<ConnectionBannerIcon state={state} />
|
|
<Text variant="text-sm/medium" color={state === ConnectivityIndicatorState.BACK_ONLINE ? "text-feedback-positive" : "text-muted"} maxFontSizeMultiplier={1.5}>
|
|
{ConnectivityIndicatorState.WAITING_FOR_NETWORK === state ? intl.string(t.XKk1gp) : ConnectivityIndicatorState.NO_CONNECTION === state ? intl.string(t.zPerw8) : ConnectivityIndicatorState.BACK_ONLINE === state ? intl.string(t.j8lYE2) : void 0}
|
|
</Text>
|
|
</View>;
|
|
};
|
|
BackOnlineGlow = function BackOnlineGlow(props) {
|
|
const progress = props.progress;
|
|
const styles = useStyles();
|
|
const token = useToken(Module712.colors.ICON_FEEDBACK_POSITIVE);
|
|
return <ReanimatedRexport.View style={[styles.glow, {
|
|
opacity: progress
|
|
}]} pointerEvents="none">
|
|
<Module5165 style={styles.glow} maskElement={<Module4611 style={styles.glowMaskGradient} colors={_excluded} locations={locations} start={start} end={end} />}>
|
|
<Module4611 style={styles.glowMaskGradient} colors={useMemo(() => {
|
|
const r4 = Module689(token);
|
|
return [r4.alpha(0).css(), r4.alpha(0.1).css(), r4.alpha(0.28).css(), r4.alpha(0.55).css()];
|
|
}, [token])} locations={locations2} start={start2} end={end2} />
|
|
</Module5165>
|
|
</ReanimatedRexport.View>;
|
|
};
|
|
ConnectionBannerInner = function ConnectionBannerInner() {
|
|
let shouldShowBanner, c21829_1, sharedValue, sharedValue2;
|
|
const styles = useStyles();
|
|
const youBarBottomMargin = useYouBarBottomMargin();
|
|
const stateFromStores2 = useStateFromStores([ConnectivityIndicatorStateStore], () => ConnectivityIndicatorStateStore.getState());
|
|
shouldShowBanner = stateFromStores2 !== ConnectivityIndicatorState.HIDDEN;
|
|
const r4 = stateFromStores2 === ConnectivityIndicatorState.BACK_ONLINE;
|
|
c21829_1 = r4;
|
|
const r33 = stateFromStores2 !== ConnectivityIndicatorState.HIDDEN ? stateFromStores2 : null;
|
|
sharedValue = useSharedValue(0);
|
|
const [state, setState] = useState(r33);
|
|
sharedValue2 = useSharedValue(0);
|
|
if (r33 != null && state !== r33) {
|
|
setState(r33);
|
|
}
|
|
useEffect(() => {
|
|
const r0 = shouldShowBanner ? 1 : 0;
|
|
const n = function n(a0) {
|
|
if (!(a0 !== true || shouldShowBanner)) {
|
|
_ReanimatedRexport.runOnJS(setState)(null);
|
|
}
|
|
};
|
|
n.__closure = {
|
|
shouldShowBanner,
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
setRenderState: setState
|
|
};
|
|
n.__workletHash = 3065113239920;
|
|
n.__initData = __initData;
|
|
sharedValue2.set(withSpring(r0, YOU_BAR_SPRING_CONFIG, "respect-motion-settings", n));
|
|
}, [shouldShowBanner, sharedValue2]);
|
|
useEffect(() => {
|
|
sharedValue.set(withSpring(c21829_1 ? 1 : 0, YOU_BAR_SPRING_CONFIG));
|
|
}, [r4, sharedValue]);
|
|
const A = () => ({
|
|
transform: [{
|
|
translateY: (1 - sharedValue2.get()) * CONNECTION_BANNER_HEIGHT
|
|
}],
|
|
opacity: sharedValue2.get()
|
|
});
|
|
A.__closure = {
|
|
progress: sharedValue2,
|
|
CONNECTION_BANNER_HEIGHT
|
|
};
|
|
A.__workletHash = 13973493587548;
|
|
A.__initData = __initData2;
|
|
return <ReanimatedRexport.View pointerEvents="none" style={[styles.container, {
|
|
height: youBarBottomMargin + CONNECTION_BANNER_HEIGHT
|
|
}, useAnimatedStyle(A)]}>
|
|
{state === ConnectivityIndicatorState.BACK_ONLINE ? <BackOnlineGlow progress={sharedValue} /> : null}
|
|
{state != null ? <ConnectionBannerContent state={state} /> : null}
|
|
</ReanimatedRexport.View>;
|
|
};
|
|
_excluded = ["transparent", "black", "black", "transparent"];
|
|
locations = [0, 0.25, 0.75, 1];
|
|
start = {
|
|
x: 0,
|
|
y: 0.5
|
|
};
|
|
end = {
|
|
x: 1,
|
|
y: 0.5
|
|
};
|
|
locations2 = [0, 0.4, 0.75, 1];
|
|
start2 = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
end2 = {
|
|
x: 0,
|
|
y: 1
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0
|
|
},
|
|
glow: {
|
|
position: "absolute",
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0
|
|
},
|
|
glowMaskGradient: {
|
|
flex: 1
|
|
},
|
|
content: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: CONNECTION_BANNER_HEIGHT,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: Module712.space.PX_8,
|
|
paddingHorizontal: Module712.space.PX_12
|
|
},
|
|
leadingSlot: {
|
|
width: 16,
|
|
height: 16,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
spinner: {
|
|
transform: [{
|
|
scale: 0.8
|
|
}]
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function ConnectionBannerTsx1(finished){const{shouldShowBanner,runOnJS,setRenderState}=this.__closure;if(finished===true&&!shouldShowBanner){runOnJS(setRenderState)(null);}}"
|
|
};
|
|
__initData2 = {
|
|
code: "function ConnectionBannerTsx2(){const{progress,CONNECTION_BANNER_HEIGHT}=this.__closure;return{transform:[{translateY:(1-progress.get())*CONNECTION_BANNER_HEIGHT}],opacity:progress.get()};}"
|
|
};
|
|
export default function ConnectionBanner() {
|
|
let ref;
|
|
const config = ConnectionIndicatorExperiment.useConfig({
|
|
location: "ConnectionBanner"
|
|
});
|
|
const { timeoutMs, hidden } = config;
|
|
ref = void 0;
|
|
const stateFromStores = useStateFromStores([ConnectivityIndicatorStateStore], () => ConnectivityIndicatorStateStore.getState());
|
|
ref = useRef(null);
|
|
useEffect(() => {
|
|
L10: {
|
|
const current = ref.current;
|
|
ref.current = stateFromStores;
|
|
if (current != null) {
|
|
if (current !== ConnectivityIndicatorState.HIDDEN && current !== ConnectivityIndicatorState.BACK_ONLINE) {
|
|
break L10;
|
|
}
|
|
if (stateFromStores !== ConnectivityIndicatorState.HIDDEN && stateFromStores !== ConnectivityIndicatorState.BACK_ONLINE) {
|
|
AnalyticsUtils.track(AnalyticEvents.CONNECTION_INDICATOR_SHOWN, {
|
|
connection_indicator_type: hidden ? "hidden" : stateFromStores === ConnectivityIndicatorState.NO_CONNECTION ? "offline" : "connecting"
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, [stateFromStores, hidden]);
|
|
return timeoutMs == null ? null : hidden ? null : <ConnectionBannerInner />;
|
|
};
|