yeet

design/components/Button/native/ImageButton.native.tsx

@@ -0,0 +1,103 @@
+// 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 };