90 lines
3.8 KiB
TypeScript
90 lines
3.8 KiB
TypeScript
// Metro module 10387 (f10388).
|
|
import { View } from "react-native";
|
|
import { PAN_INPUT_RANGE, extrapolateConfig } from "./InAppNotificationConstants";
|
|
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useInAppNotificationContext } from "./InAppNotificationContext";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import useMountEffect from "../../../_bundle/useMountEffect";
|
|
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
|
|
import Emoji from "../../emojis/native/Emoji";
|
|
import AvatarUtils from "../../../utils/AvatarUtils";
|
|
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginTop: Module712.space.PX_12
|
|
},
|
|
notificationRow: {
|
|
...Module712.shadows.SHADOW_HIGH,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: Module712.space.PX_8,
|
|
backgroundColor: Module712.colors.MOBILE_ALERT_BACKGROUND_DEFAULT,
|
|
paddingStart: Module712.space.PX_8,
|
|
paddingEnd: Module712.space.PX_12,
|
|
paddingVertical: Module712.space.PX_8,
|
|
borderRadius: Module712.radii.round,
|
|
overflow: "hidden"
|
|
},
|
|
textEmoji: {
|
|
fontSize: 20
|
|
},
|
|
imageEmoji: {
|
|
width: 20,
|
|
height: 20
|
|
}
|
|
});
|
|
const __initData = {
|
|
code: "function ConfirmationToastTsx1(){const{animatedValue,interpolate,notificationGestureY,PAN_INPUT_RANGE,extrapolateConfig}=this.__closure;const value=animatedValue.get();const scale=interpolate(value,[0,1],[0.8,1]);const enterTranslateY=interpolate(value,[0,1],[-20,0]);const gestureY=notificationGestureY.get();const dismissOpacity=interpolate(gestureY,PAN_INPUT_RANGE,[0,1,0],extrapolateConfig);return{transform:[{translateY:enterTranslateY+gestureY},{scale:scale}],opacity:value*dismissOpacity};}"
|
|
};
|
|
export function ConfirmationToast(props) {
|
|
const { message, reaction } = props;
|
|
const styles = useStyles();
|
|
const notificationGestureY = useInAppNotificationContext().notificationGestureY;
|
|
const sharedValue = useSharedValue(0);
|
|
useMountEffect(() => {
|
|
sharedValue.set(withTiming(1, {
|
|
duration: 200
|
|
}));
|
|
});
|
|
const A = function A() {
|
|
const r16 = sharedValue.get();
|
|
const scale = _ReanimatedRexport.interpolate(r16, [0, 1], [0.8, 1]);
|
|
const r24 = _ReanimatedRexport.interpolate(r16, [0, 1], [-20, 0]);
|
|
const r27 = notificationGestureY.get();
|
|
return {
|
|
transform: [{
|
|
translateY: r24 + r27
|
|
}, {
|
|
scale
|
|
}],
|
|
opacity: r16 * _ReanimatedRexport.interpolate(r27, PAN_INPUT_RANGE, [0, 1, 0], extrapolateConfig)
|
|
};
|
|
};
|
|
A.__closure = {
|
|
animatedValue: sharedValue,
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
notificationGestureY,
|
|
PAN_INPUT_RANGE,
|
|
extrapolateConfig
|
|
};
|
|
A.__workletHash = 4654280152495;
|
|
A.__initData = __initData;
|
|
return <ReanimatedRexport.View style={[styles.container, useAnimatedStyle(A)]}>
|
|
<View style={styles.notificationRow}>
|
|
{reaction != null ? <Emoji textEmojiStyle={styles.textEmoji} fastImageStyle={styles.imageEmoji} name={reaction.id == null ? reaction.surrogates : ""} src={reaction.id != null ? AvatarUtils.getEmojiURL({
|
|
id: reaction.id,
|
|
animated: reaction.animated,
|
|
size: EMOJI_URL_BASE_SIZE
|
|
}) : reaction.url} /> : <CircleCheckIcon size="md" color={Module712.colors.STATUS_POSITIVE} />}
|
|
<Text variant="text-sm/semibold" color="text-default">{message}</Text>
|
|
</View>
|
|
</ReanimatedRexport.View>;
|
|
}
|