74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
// Metro module 9805 (f9806).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { SMALL_BUTTON_HEIGHT } from "../../../design/components/Button/native/ButtonConstants.native";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { isAndroid } from "../../../utils/PlatformUtils";
|
|
import { useVirtualCurrencyBalanceAnimationData } from "../hooks/native/useVirtualCurrencyBalanceAnimationData";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { OrbLottieAnimation } from "./OrbLottieAnimation";
|
|
import { BalanceCounter } from "./BalanceCounter";
|
|
import { EXPECTED_ORB_LOTTIE_ANIMATION_DURATION_MS } from "../shared/AnimationUtils";
|
|
let useStyles;
|
|
const lineHeight = isAndroid() ? 14 : void 0;
|
|
export function BalanceWidgetPill(props) {
|
|
let initialRenderedBalance = props.initialRenderedBalance;
|
|
if (initialRenderedBalance === void 0) {
|
|
initialRenderedBalance = null;
|
|
}
|
|
let balance = props.balance;
|
|
const busy = initialRenderedBalance === null && balance === null;
|
|
const virtualCurrencyBalanceAnimationData = useVirtualCurrencyBalanceAnimationData({
|
|
initialRenderedBalance,
|
|
balance
|
|
});
|
|
const { onValueChange, onValueReached, showInitialRenderedBalance, currentAnimationType, lottieRef } = virtualCurrencyBalanceAnimationData;
|
|
const styles = useStyles();
|
|
const accessibilityLabel = busy ? intl.string(t.y0WGqP) : intl.formatToPlainString(t.zPaLL9, {
|
|
balance
|
|
});
|
|
const r50 = [<View style={styles.orbsLottieContainer}>
|
|
<OrbLottieAnimation ref={lottieRef} animationType={currentAnimationType} />
|
|
</View>, ,];
|
|
if (showInitialRenderedBalance) {
|
|
balance = initialRenderedBalance;
|
|
}
|
|
r50[1] = <View style={styles.balanceCounterContainer}>
|
|
<BalanceCounter value={balance} onValueChange={onValueChange} onValueReached={onValueReached} targetTotalCounterTime={EXPECTED_ORB_LOTTIE_ANIMATION_DURATION_MS} style={styles.balanceText} />
|
|
</View>;
|
|
return <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityState={{
|
|
busy
|
|
}} accessible>{r50}</View>;
|
|
}
|
|
useStyles = createStyles({
|
|
container: {
|
|
minHeight: SMALL_BUTTON_HEIGHT,
|
|
borderRadius: Module712.radii.round,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
paddingHorizontal: Module712.space.PX_12,
|
|
paddingVertical: Module712.space.PX_4,
|
|
backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
|
|
gap: 4
|
|
},
|
|
orbsLottieContainer: {
|
|
position: "relative",
|
|
height: 18,
|
|
width: 18,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
balanceCounterContainer: {
|
|
justifyContent: "center",
|
|
alignItems: "flex-end"
|
|
},
|
|
balanceText: {
|
|
color: Module712.colors.CONTROL_OVERLAY_SECONDARY_TEXT_DEFAULT,
|
|
textAlign: "right",
|
|
lineHeight
|
|
}
|
|
});
|
|
BalanceWidgetPill.displayName = "BalanceWidgetPill";
|
|
export default BalanceWidgetPill;
|