104 lines
4.3 KiB
TypeScript
104 lines
4.3 KiB
TypeScript
// Metro module 12267 (f12268).
|
|
import { forwardRef, useCallback } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import { createStyles } from "../../Styles/native/createStyles";
|
|
import * as _ButtonConstants_native from "./ButtonConstants.native";
|
|
import { SMALL_BUTTON_PADDING, MEDIUM_BUTTON_PADDING, getButtonBorderRadius, BUTTON_BORDER_WIDTH } from "./ButtonConstants.native";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { useIconSizeStyles } from "./ButtonHooks.native";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
|
|
import * as _spring from "../../../animation/reanimated/spring/spring";
|
|
import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
|
|
import { BaseButton } from "./BaseButton.native";
|
|
import { BaseIconButton } from "./BaseIconButton.native";
|
|
import { Text } from "../../Text/native/Text";
|
|
let __initData;
|
|
const useStyles = createStyles((a0, a1, a2) => {
|
|
let LARGE_BUTTON_PADDING = _ButtonConstants_native.LARGE_BUTTON_PADDING;
|
|
if (a0 === "sm") {
|
|
LARGE_BUTTON_PADDING = SMALL_BUTTON_PADDING;
|
|
} else if (a0 === "md") {
|
|
LARGE_BUTTON_PADDING = MEDIUM_BUTTON_PADDING;
|
|
}
|
|
const minHeight = a1 + 2 * LARGE_BUTTON_PADDING;
|
|
const buttonBorderRadius = getButtonBorderRadius(a0);
|
|
return {
|
|
labelPressable: {
|
|
paddingBottom: Module712.space.PX_4,
|
|
gap: Module712.space.PX_8,
|
|
alignItems: "center",
|
|
alignSelf: "center",
|
|
flexGrow: a2 ? 1 : 0
|
|
},
|
|
pill: {
|
|
paddingHorizontal: 0,
|
|
paddingVertical: 0,
|
|
minHeight,
|
|
minWidth: minHeight,
|
|
borderRadius: buttonBorderRadius,
|
|
borderWidth: 0,
|
|
outlineWidth: BUTTON_BORDER_WIDTH,
|
|
outlineColor: Module712.colors.CONTROL_SECONDARY_BORDER_DEFAULT,
|
|
outlineStyle: "solid"
|
|
},
|
|
imageWrapper: {
|
|
width: minHeight,
|
|
height: minHeight,
|
|
position: "relative"
|
|
},
|
|
image: {
|
|
width: minHeight,
|
|
height: minHeight
|
|
},
|
|
imageDim: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: Module712.colors.REDESIGN_IMAGE_BUTTON_PRESSED_BACKGROUND,
|
|
borderRadius: buttonBorderRadius
|
|
}
|
|
};
|
|
});
|
|
__initData = {
|
|
code: "function ImageButtonNativeTsx1(){const{withSpring,pressed,ON_PRESS_SPRING}=this.__closure;return{opacity:withSpring(pressed.get()===1?1:0,ON_PRESS_SPRING,'animate-always')};}"
|
|
};
|
|
const r31 = forwardRef(function({ size = "lg", label, grow, image, accessibilityLabel, maxFontSizeMultiplier, onPressIn, onPressOut, ...props }, a1) {
|
|
const styles = useStyles(size, useIconSizeStyles(size, true, maxFontSizeMultiplier).width, grow);
|
|
const sharedValue = useSharedValue(0);
|
|
const callback = useCallback((a0) => {
|
|
sharedValue.set(1);
|
|
if (onPressIn != null) {
|
|
onPressIn(a0);
|
|
}
|
|
}, [sharedValue, onPressIn]);
|
|
const callback2 = useCallback((a0) => {
|
|
sharedValue.set(0);
|
|
if (onPressOut != null) {
|
|
onPressOut(a0);
|
|
}
|
|
}, [sharedValue, onPressOut]);
|
|
const B = function B() {
|
|
return {
|
|
opacity: _spring.withSpring(sharedValue.get() === 1 ? 1 : 0, _springPresets.ON_PRESS_SPRING, "animate-always")
|
|
};
|
|
};
|
|
B.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
pressed: sharedValue,
|
|
ON_PRESS_SPRING: _springPresets.ON_PRESS_SPRING
|
|
};
|
|
B.__workletHash = 17257158773379;
|
|
B.__initData = __initData;
|
|
const icon = <View style={styles.imageWrapper}>
|
|
<Image2 source={image} style={styles.image} />
|
|
<ReanimatedRexport.View style={[styles.imageDim, useAnimatedStyle(B)]} />
|
|
</View>;
|
|
return label != null ? <BaseButton style={styles.labelPressable} {...props} variant="none" accessibilityLabel={accessibilityLabel}>
|
|
<BaseIconButton ref={a1} {...props} icon={icon} accessibilityRole="none" accessibilityLabel="" size="lg" pillStyle={styles.pill} variant="secondary" onPressIn={callback} onPressOut={callback2} maxFontSizeMultiplier={maxFontSizeMultiplier} />
|
|
<Text variant="text-xs/medium" color="interactive-text-default" maxFontSizeMultiplier={maxFontSizeMultiplier}>{label}</Text>
|
|
</BaseButton> : <BaseIconButton ref={a1} {...props} size={size} icon={icon} accessibilityLabel={accessibilityLabel} pillStyle={styles.pill} variant="secondary" onPressIn={callback} onPressOut={callback2} />;
|
|
});
|
|
export { r31 as ImageButton };
|