333 lines
12 KiB
TypeScript
333 lines
12 KiB
TypeScript
// Metro module 4601 (f4602).
|
|
import { createContext, forwardRef, useContext, useRef, useState, useCallback, isValidElement } from "react";
|
|
import { Text, View, Platform } from "react-native";
|
|
import { createStyles } from "../../Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import ReanimatedRexport, { useSharedValue, useWorkletCallback, useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
|
|
import Icon from "../../../void/Icon/native/Icon";
|
|
import * as _spring from "../../../animation/reanimated/spring/spring";
|
|
import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
|
|
import { LARGE_BUTTON_HEIGHT, MINIMUM_HIT_AREA, SMALL_BUTTON_HEIGHT, MEDIUM_BUTTON_HEIGHT, DEFAULT_BUTTON_SIZE, BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER, getButtonDefaultTextVariant } from "./ButtonConstants.native";
|
|
import { useIconSizeStyles, useButtonTextColorStyles } from "./ButtonHooks.native";
|
|
import MobileVisualRefreshExperiment from "../../../../modules/themes/experiments/MobileVisualRefreshExperiment";
|
|
import { TextStyleSheet } from "../../Text/native/Text";
|
|
import { AccessibilityPreferencesContext } from "../../../../_bundle/Module3908";
|
|
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../../../modules/haptics/HapticUtils.native";
|
|
import { BaseButton } from "./BaseButton.native";
|
|
import { getNodeText } from "../../../utils/native";
|
|
import { ButtonPill } from "./ButtonPill.native";
|
|
let useStyles, useStyles2, useStyles3, AnimatedComponent, context, __initData, __initData2, __initData3, useStyles4, c2803_19, getTextPlatformLineHeight, BaseTextButtonIcon;
|
|
const CollapsingText = function CollapsingText(props) {
|
|
let sharedValue2, collapseText;
|
|
let sharedValue3, collapseText2, textCollapsed;
|
|
const { children, collapseText: collapseText3 } = props;
|
|
const styles2 = useStyles2();
|
|
const sharedValue = useSharedValue(0);
|
|
const r20 = function({ nativeEvent }) {
|
|
if (sharedValue.get() === 0) {
|
|
sharedValue.set(nativeEvent.layout.width);
|
|
}
|
|
};
|
|
r20.__closure = {
|
|
containerWidth: sharedValue
|
|
};
|
|
r20.__workletHash = 5541458715155;
|
|
r20.__initData = __initData;
|
|
const workletCallback = useWorkletCallback(r20, [sharedValue]);
|
|
sharedValue2 = sharedValue;
|
|
collapseText = collapseText3;
|
|
const r30 = function() {
|
|
let r23;
|
|
if (sharedValue2.get() === 0) {
|
|
r23 = {};
|
|
} else {
|
|
const r16 = collapseText.get();
|
|
let r0 = 1;
|
|
r23 = {
|
|
width: _spring.withSpring(r16 !== 1 ? sharedValue2.get() : 0, _springPresets.SUBTLE_SPRING, "animate-always"),
|
|
opacity: null
|
|
};
|
|
if (collapseText.get() === 1) {
|
|
r0 = 0;
|
|
}
|
|
r23.opacity = _spring.withSpring(r0, _springPresets.SUBTLE_SPRING, "animate-always");
|
|
}
|
|
return r23;
|
|
};
|
|
r30.__closure = {
|
|
containerWidth: sharedValue,
|
|
withSpring: _spring.withSpring,
|
|
collapsed: collapseText,
|
|
SUBTLE_SPRING: _springPresets.SUBTLE_SPRING
|
|
};
|
|
r30.__workletHash = 493185281611;
|
|
r30.__initData = __initData2;
|
|
const animatedStyle = useAnimatedStyle(r30);
|
|
sharedValue3 = sharedValue;
|
|
collapseText2 = collapseText;
|
|
textCollapsed = void 0;
|
|
textCollapsed = useStyles2().textCollapsed;
|
|
const r45 = function() {
|
|
return collapseText2.get() === 0 ? {} : {
|
|
...textCollapsed,
|
|
width: sharedValue3.get()
|
|
};
|
|
};
|
|
r45.__closure = {
|
|
collapsed: collapseText,
|
|
textCollapsed,
|
|
containerWidth: sharedValue
|
|
};
|
|
r45.__workletHash = 5824483783888;
|
|
r45.__initData = __initData3;
|
|
return <ReanimatedRexport.View style={[styles2.container, animatedStyle]} onLayout={workletCallback}>
|
|
<ReanimatedRexport.View style={useAnimatedStyle(r45)}>{children}</ReanimatedRexport.View>
|
|
</ReanimatedRexport.View>;
|
|
};
|
|
BaseTextButtonIcon = function BaseTextButtonIcon(props) {
|
|
const { icon, size, iconPosition, iconOpticalOffsetMargin } = props;
|
|
return <AnimatedComponent source={icon} style={[props.style, useIconSizeStyles(size), useStyles4(iconPosition, iconOpticalOffsetMargin).offset]} />;
|
|
};
|
|
Platform;
|
|
useStyles = createStyles((a0, a1) => ({
|
|
grow: {
|
|
flexGrow: 1,
|
|
alignSelf: "stretch"
|
|
},
|
|
shrink: {
|
|
flexShrink: 1
|
|
},
|
|
buttonText: {
|
|
flexShrink: 1,
|
|
flexGrow: 0,
|
|
lineHeight: a1 != null ? ({
|
|
sm: a1,
|
|
md: a1 + 0.5,
|
|
lg: a1 + 1.9
|
|
})[a0] : void 0
|
|
},
|
|
icon: {
|
|
flexShrink: 0,
|
|
flexGrow: 0
|
|
},
|
|
iconLeft: {
|
|
paddingLeft: 4
|
|
},
|
|
iconRight: {
|
|
paddingRight: 4
|
|
},
|
|
expressiveButtonContainer: {
|
|
position: "relative"
|
|
}
|
|
}));
|
|
useStyles2 = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
position: "relative"
|
|
},
|
|
textCollapsed: {
|
|
position: "absolute",
|
|
left: 0
|
|
}
|
|
});
|
|
useStyles3 = createStyles({
|
|
entityWrapper: {
|
|
borderWidth: 1,
|
|
borderRadius: Module712.radii.round,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
overflow: "hidden"
|
|
}
|
|
});
|
|
AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Icon);
|
|
context = createContext("md");
|
|
__initData = {
|
|
code: "function BaseTextButtonNativeTsx1({nativeEvent:nativeEvent}){const{containerWidth}=this.__closure;if(containerWidth.get()!==0)return;const{width:width}=nativeEvent.layout;containerWidth.set(width);}"
|
|
};
|
|
__initData2 = {
|
|
code: "function BaseTextButtonNativeTsx2(){const{containerWidth,withSpring,collapsed,SUBTLE_SPRING}=this.__closure;if(containerWidth.get()===0)return{};return{width:withSpring(collapsed.get()===1?0:containerWidth.get(),SUBTLE_SPRING,'animate-always'),opacity:withSpring(collapsed.get()===1?0:1,SUBTLE_SPRING,'animate-always')};}"
|
|
};
|
|
__initData3 = {
|
|
code: "function BaseTextButtonNativeTsx3(){const{collapsed,textCollapsed,containerWidth}=this.__closure;if(collapsed.get()===0)return{};return{...textCollapsed,width:containerWidth.get()};}"
|
|
};
|
|
useStyles4 = createStyles((a0, a1) => {
|
|
if (a1 === 0) {
|
|
return {
|
|
offset: {}
|
|
};
|
|
}
|
|
if (a0 === "start") {
|
|
return {
|
|
offset: {
|
|
marginLeft: a1
|
|
}
|
|
};
|
|
}
|
|
if (a0 === "end") {
|
|
return {
|
|
offset: {
|
|
marginRight: a1
|
|
}
|
|
};
|
|
}
|
|
return {
|
|
offset: {}
|
|
};
|
|
});
|
|
LARGE_BUTTON_HEIGHT;
|
|
const top = Math.max((MINIMUM_HIT_AREA - SMALL_BUTTON_HEIGHT) / 2, 0);
|
|
LARGE_BUTTON_HEIGHT;
|
|
const top2 = Math.max((MINIMUM_HIT_AREA - MEDIUM_BUTTON_HEIGHT) / 2, 0);
|
|
const top3 = Math.max((MINIMUM_HIT_AREA - LARGE_BUTTON_HEIGHT) / 2, 0);
|
|
c2803_19 = {
|
|
sm: {
|
|
top,
|
|
left: void 0,
|
|
right: void 0,
|
|
bottom: top
|
|
},
|
|
md: {
|
|
top: top2,
|
|
left: void 0,
|
|
right: void 0,
|
|
bottom: top2
|
|
},
|
|
lg: {
|
|
top: top3,
|
|
left: void 0,
|
|
right: void 0,
|
|
bottom: top3
|
|
}
|
|
};
|
|
getTextPlatformLineHeight = (a0, a1) => {};
|
|
const r125 = {
|
|
...forwardRef(function(a0, a1) {
|
|
const { style, pillStyle, text } = a0;
|
|
let textElement = a0.textElement;
|
|
const { size = DEFAULT_BUTTON_SIZE, loading, icon, iconPosition: iconPosition2 = "start", iconOpticalOffsetMargin: iconOpticalOffsetMargin2 = 0, grow } = a0;
|
|
let r34 = grow !== void 0 && grow;
|
|
const shrink = a0.shrink;
|
|
let r33 = shrink !== void 0 && shrink;
|
|
const { collapseText: collapseText3, accessibilityRole: accessibilityRole2 = "button" } = a0;
|
|
let accessibilityLabel = a0.accessibilityLabel;
|
|
const { maxFontSizeMultiplier = BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER, shiny: shiny2 = false, onPressIn, onPressOut, onLayout } = a0;
|
|
let r10 = MobileVisualRefreshExperiment("BaseTextButton");
|
|
const r40 = TextStyleSheet[a0.textVariant != null ? a0.textVariant : getButtonDefaultTextVariant(size)];
|
|
const styles = useStyles(size, r40.fontSize);
|
|
const hitSlop = c2803_19[size];
|
|
const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
|
|
let variant = a0.variant;
|
|
if (variant == null) {
|
|
variant = "primary";
|
|
}
|
|
if (r10) {
|
|
r10 = variant === "tertiary";
|
|
}
|
|
if (r10) {
|
|
variant = "secondary";
|
|
}
|
|
const sharedValue4 = useSharedValue(0);
|
|
const r88 = variant.startsWith("expressive");
|
|
let c14344_4 = r88;
|
|
const ref = useRef(null);
|
|
const ref2 = useRef({
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
const [state, setState] = useState({
|
|
pressed: false,
|
|
posx: 0,
|
|
posy: 0
|
|
});
|
|
const callback = useCallback((a0) => {
|
|
if (onLayout != null) {
|
|
onLayout(a0);
|
|
}
|
|
if (c14344_4) {
|
|
const layout = a0.nativeEvent.layout;
|
|
ref2.current = {
|
|
width: layout.width,
|
|
height: layout.height
|
|
};
|
|
}
|
|
}, [onLayout, r88]);
|
|
const callback2 = useCallback((a0) => {
|
|
if (onPressIn != null) {
|
|
onPressIn(a0);
|
|
}
|
|
if (c14344_4) {
|
|
if (enabled) {
|
|
const current2 = ref.current;
|
|
if (current2 != null) {
|
|
current2.play();
|
|
}
|
|
} else {
|
|
const nativeEvent = a0.nativeEvent;
|
|
const { locationX, locationY } = nativeEvent;
|
|
const current = ref2.current;
|
|
setState({
|
|
pressed: true,
|
|
posx: locationX - current.width / 2,
|
|
posy: locationY - current.height / 2
|
|
});
|
|
}
|
|
triggerHapticFeedback(HapticFeedbackTypes.IMPACT_HEAVY);
|
|
}
|
|
}, [r88, onPressIn, enabled]);
|
|
const callback3 = useCallback((a0) => {
|
|
if (onPressOut != null) {
|
|
onPressOut(a0);
|
|
}
|
|
if (c14344_4) {
|
|
setState((prevState) => ({
|
|
...prevState,
|
|
pressed: false
|
|
}));
|
|
triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
|
|
}
|
|
}, [r88, onPressOut]);
|
|
const styles2 = useButtonTextColorStyles(variant);
|
|
const variant2 = variant;
|
|
const r115 = icon == null ? {} : iconPosition2 === "start" ? styles.iconLeft : styles.iconRight;
|
|
const r118 = icon != null ? isValidElement(icon) ? icon : <BaseTextButtonIcon icon={icon} size={size} style={[styles.icon, {
|
|
tintColor: styles2.color
|
|
}]} iconOpticalOffsetMargin={iconOpticalOffsetMargin2} iconPosition={iconPosition2} /> : <BaseTextButtonIcon icon={icon} size={size} style={[styles.icon, {
|
|
tintColor: styles2.color
|
|
}]} iconOpticalOffsetMargin={iconOpticalOffsetMargin2} iconPosition={iconPosition2} />;
|
|
if (textElement == null) {
|
|
textElement = <Text maxFontSizeMultiplier={maxFontSizeMultiplier} numberOfLines={1} style={[styles.buttonText, r40, styles2, r115]}>{text}</Text>;
|
|
}
|
|
if (r34) {
|
|
r34 = styles.grow;
|
|
}
|
|
const style2 = [r34, , , ,];
|
|
if (r33) {
|
|
r33 = styles.shrink;
|
|
}
|
|
style2[1] = r33;
|
|
style2[2] = style;
|
|
style2[3] = r88 && styles.expressiveButtonContainer;
|
|
const pointerEvents = r88 ? "box-only" : a0.pointerEvents;
|
|
if (accessibilityLabel == null) {
|
|
accessibilityLabel = getNodeText(text);
|
|
}
|
|
return <BaseButton ref={a1} {...a0} onPressIn={callback2} onPressOut={callback3} onLayout={callback} style={style2} pointerEvents={pointerEvents} pressed={sharedValue4} accessibilityRole={accessibilityRole2} accessibilityLabel={accessibilityLabel} hitSlop={hitSlop}>
|
|
<ButtonPill variant={variant2} size={size} loading={loading} pressed={sharedValue4} style={pillStyle} shiny={shiny2} expressiveRiveRef={r88 ? ref : void 0} expressivePressState={r88 ? state : void 0}>
|
|
<context.Provider value={size}>
|
|
{icon != null && iconPosition2 === "start" && r118}
|
|
{collapseText3 !== void 0 ? <CollapsingText collapseText={collapseText3}>{textElement}</CollapsingText> : textElement}
|
|
{icon != null && iconPosition2 === "end" && r118}
|
|
</context.Provider>
|
|
</ButtonPill>
|
|
</BaseButton>;
|
|
}),
|
|
Icon: function TextButtonIcon(props) {
|
|
const { source, variant = "icon", disableColor = true } = props;
|
|
const context2 = useContext(context);
|
|
const styles3 = useStyles3();
|
|
const r22 = <AnimatedComponent source={source} disableColor={disableColor} style={useIconSizeStyles(context2)} />;
|
|
return variant === "entity" ? <View style={styles3.entityWrapper}>{r22}</View> : r22;
|
|
}
|
|
};
|
|
export { r125 as BaseTextButton };
|