yeet

modules/media_keyboard/native/components/MediaKeyboardBottomSheetActions.tsx

@@ -0,0 +1,115 @@
+// Metro module 9681 (f9682).
+import * as Module19 from "react";
+import { useMemo, useCallback } from "react";
+import { StyleSheet, View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { isIOS } from "../../../../utils/PlatformUtils";
+import { useGradientValue, GradientPercentage } from "../../../client_themes/native/ClientThemesUtils";
+import Module689 from "../../../../_bundle/Module689";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
+import Module4611 from "../../../../_bundle/Module4611";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles((marginBottom, a1, a2, a3) => {
+  const wrap = {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    top: void 0
+  };
+  if (isIOS()) {
+    marginBottom = Module712.space.PX_24;
+  }
+  return {
+    wrap,
+    container: {
+      paddingVertical: Module712.space.PX_8,
+      marginHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_MARGIN_HORIZONTAL,
+      marginBottom,
+      borderRadius: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BORDER_RADIUS,
+      backgroundColor: a2 == null ? a1 : a2,
+      paddingHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_PADDING_HORIZONTAL,
+      borderWidth: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BORDER_WIDTH,
+      ...Module712.shadows.SHADOW_HIGH,
+      ...a3 ? {
+        borderColor: Module712.colors.BORDER_MUTED
+      } : {
+        borderTopColor: Module712.colors.BORDER_MUTED
+      }
+    },
+    buttonsContainer: {
+      gap: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_GAP,
+      alignItems: "stretch",
+      flexDirection: "row",
+      marginHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BUTTONS_MARGIN_HORIZONTAL
+    },
+    button: {
+      flexBasis: 64,
+      minHeight: 48,
+      flexGrow: 1,
+      justifyContent: "center",
+      flexDirection: "column",
+      alignItems: "center",
+      padding: Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_PADDING,
+      borderRadius: Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_BORDER_RADIUS,
+      gap: 4
+    },
+    gradient: {
+      ...StyleSheet.absoluteFillObject,
+      color: Module712.colors.BACKGROUND_BASE_LOW
+    }
+  };
+});
+const r30 = Module19.memo(function MediaKeyboardBottomSheetActions(props) {
+  const { onHeightChange, overflowButtons } = props;
+  const gradientValue = useGradientValue(GradientPercentage.END);
+  const r14 = gradientValue != null ? Module689(gradientValue).alpha(0.95).hex() : null;
+  let r50 = Module689(useToken(Module712.colors.CARD_BACKGROUND_DEFAULT)).alpha(0.95).hex();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const enabled = useMobileVisualRefreshConfig({
+    location: "MediaKeyboardBottomSheetActions"
+  }).enabled;
+  const token4 = useToken(Module712.colors.MOBILE_FLOATINGBAR_BACKGROUND_HIGHER);
+  if (enabled) {
+    r50 = token4;
+  }
+  const styles = useStyles(bottom, r50, r14, enabled);
+  const token = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_ICON_COLOR_ACTIVE);
+  const token2 = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_TEXT_COLOR_ACTIVE);
+  const token3 = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_TEXT_VARIANT);
+  const memo = useMemo(() => ({
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 0,
+      y: 1
+    },
+    colors: [Module689(styles.gradient.color).alpha(0).hex(), Module689(styles.gradient.color).alpha(1).hex()]
+  }), [styles.gradient.color]);
+  return <View style={styles.wrap} pointerEvents="box-none" onLayout={useCallback((a0) => {
+    onHeightChange(a0.nativeEvent.layout.height);
+  }, [onHeightChange])}>
+    <Module4611 style={styles.gradient} {...memo} pointerEvents="none" />
+    <View style={styles.container}>
+      <View style={styles.buttonsContainer}>
+        {overflowButtons.map((overflowButton, index) => {
+          const { IconComponent, disabled } = overflowButton;
+          let color = "text-muted";
+          const r25 = [<IconComponent size="md" color={disabled ? "text-muted" : token} />, ,];
+          if (!overflowButton.disabled) {
+            color = token2;
+          }
+          r25[1] = <Text lineClamp={1} variant={token3} color={color}>{overflowButton.text}</Text>;
+          return <PressableOpacity key={index} accessibilityRole="button" accessibilityLabel={overflowButton.text} accessibilityState={{
+            disabled: overflowButton.disabled
+          }} disabled={overflowButton.disabled} style={styles.button} onPress={overflowButton.onPress}>{r25}</PressableOpacity>;
+        })}
+      </View>
+    </View>
+  </View>;
+});
+export default r30;