91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
// Metro module 8738 (f8739).
|
|
import { useRef, useState, useCallback, useMemo, useEffect } from "react";
|
|
import { Pressable, View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useTheme from "../../../hooks/useTheme";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { useTooltip } from "../../../design/components/Tooltip/native/useTooltip.native";
|
|
import * as _shared from "../../../design/shared";
|
|
import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { useIsProfileFramesEarlyAccessPhase } from "../hooks/useCanPurchaseFrames";
|
|
import { LayerScope } from "../../../design/components/Layers/native/LayerScope.native";
|
|
let StaticBadge;
|
|
const hitSlop = {
|
|
top: 14,
|
|
bottom: 14,
|
|
left: 14,
|
|
right: 14
|
|
};
|
|
const useStyles = createStyles({
|
|
pillBase: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
borderRadius: Module712.radii.round,
|
|
paddingVertical: 2,
|
|
paddingHorizontal: Module712.space.PX_8
|
|
},
|
|
pillDark: {
|
|
backgroundColor: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_DEFAULT
|
|
},
|
|
pillLight: {
|
|
backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND
|
|
},
|
|
text: {
|
|
marginLeft: Module712.space.PX_8,
|
|
textTransform: "uppercase"
|
|
}
|
|
});
|
|
const BadgeWithTooltip = (props) => {
|
|
const tooltipPosition = props.tooltipPosition;
|
|
const theme = useTheme();
|
|
const styles = useStyles();
|
|
const ref = useRef(null);
|
|
const [state, setState] = useState(false);
|
|
const label = intl.string(t["L9B+ZZ"]);
|
|
const callback = useCallback(() => {
|
|
setState(false);
|
|
}, []);
|
|
useTooltip(ref, useMemo(() => ({
|
|
position: tooltipPosition,
|
|
label,
|
|
visible: state,
|
|
onPress: callback
|
|
}), [tooltipPosition, label, state, callback]));
|
|
useEffect(() => {
|
|
if (state) {
|
|
let c26278_0 = setTimeout(() => {
|
|
setState(false);
|
|
}, 3000);
|
|
return () => clearTimeout(c26278_0);
|
|
}
|
|
}, [state]);
|
|
const callback2 = useCallback(() => {
|
|
setState((prevState) => !prevState);
|
|
}, []);
|
|
const isThemeDark = _shared.isThemeDark(theme);
|
|
const r58 = isThemeDark ? styles.pillDark : styles.pillLight;
|
|
const color = isThemeDark ? "control-overlay-primary-text-default" : "text-overlay-light";
|
|
const accessibilityLabel = intl.string(t["1m6qcO"]);
|
|
return <Pressable ref={ref} onPress={callback2} hitSlop={hitSlop} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityHint={label} style={[styles.pillBase, r58]}>
|
|
<NitroWheelIcon size="xs" color={color} />
|
|
<Text variant="text-sm/bold" color={color} style={styles.text}>{accessibilityLabel}</Text>
|
|
</Pressable>;
|
|
};
|
|
StaticBadge = () => {
|
|
const theme = useTheme();
|
|
const styles = useStyles();
|
|
const isThemeDark = _shared.isThemeDark(theme);
|
|
const r11 = isThemeDark ? styles.pillDark : styles.pillLight;
|
|
const color = isThemeDark ? "control-overlay-primary-text-default" : "text-overlay-light";
|
|
const accessibilityLabel = intl.string(t["1m6qcO"]);
|
|
return <View accessibilityLabel={accessibilityLabel} style={[styles.pillBase, r11]}>
|
|
<NitroWheelIcon size="xs" color={color} />
|
|
<Text variant="text-sm/bold" color={color} style={styles.text}>{accessibilityLabel}</Text>
|
|
</View>;
|
|
};
|
|
export default ({ location: location2, tooltipPosition: tooltipPosition2 = "top", inheritLayerScope = false, disablePressable = false }) => useIsProfileFramesEarlyAccessPhase(location2) ? disablePressable ? <StaticBadge /> : inheritLayerScope ? <BadgeWithTooltip tooltipPosition={tooltipPosition2} /> : <LayerScope zIndex={3}>
|
|
<BadgeWithTooltip tooltipPosition={tooltipPosition2} />
|
|
</LayerScope> : null;
|