242 lines
10 KiB
TypeScript
242 lines
10 KiB
TypeScript
// Metro module 4609 (f4610).
|
|
import { useRef, useState, useEffect, useContext } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
import { Fragment } from "react/jsx-runtime";
|
|
import { DEFAULT_BUTTON_SIZE, getButtonPadding, SMALL_BUTTON_HEIGHT, SMALL_BUTTON_ICON_SIZE, MEDIUM_BUTTON_HEIGHT, MEDIUM_BUTTON_ICON_SIZE, LARGE_BUTTON_HEIGHT, LARGE_BUTTON_ICON_SIZE, SMALL_BUTTON_HORIZONTAL_PADDING, MEDIUM_BUTTON_HORIZONTAL_PADDING, LARGE_BUTTON_HORIZONTAL_PADDING, getButtonBorderRadius, BUTTON_BORDER_WIDTH } from "./ButtonConstants.native";
|
|
import { createStyles } from "../../Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { useButtonPillStyles, useGradientPillStyles } from "./ButtonHooks.native";
|
|
import { useThemeContext, ExpressiveButtonRive } from "../../../../_bundle/Module3901";
|
|
import { useToken } from "../../../tokens/native/useToken";
|
|
import { ButtonShine } from "./ButtonShine.native";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
|
|
import { isThemeLight } from "../../../shared";
|
|
import { Ellipsis } from "./ButtonEllipsis.native";
|
|
import { AccessibilityPreferencesContext } from "../../../../_bundle/Module3908";
|
|
import * as _spring from "../../../animation/reanimated/spring/spring";
|
|
import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
|
|
let FADE_DELAY, buttonPadding, buttonPadding2, buttonPadding3, useStyles, BasicButtonPill, LoadingButtonPill, __initData, __initData2, useLoadingStyles;
|
|
const PillWrapper = function PillWrapper(props) {
|
|
let props2;
|
|
const { children, variant, style, pressed, shiny = false, expressiveRiveRef, expressivePressState, size } = props;
|
|
const styles = useButtonPillStyles(variant, pressed);
|
|
const styles2 = useGradientPillStyles(variant);
|
|
const theme = useThemeContext().theme;
|
|
const styles3 = useStyles(variant, size);
|
|
let colors = [useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT), useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT_2), useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PINK_FOR_GRADIENT)];
|
|
const r66 = [Module712.unsafe_rawColors.PREMIUM_TIER_0_PURPLE_FOR_GRADIENTS, Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2, Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS];
|
|
const r10 = shiny ? <ButtonShine variant={variant} /> : null;
|
|
if (variant !== "experimental_premium-primary" && variant !== "experimental_premium-basic") {
|
|
props2 = {
|
|
children: [variant === "expressive" && <View style={[StyleSheet.absoluteFill, styles3.expressivePill]}>
|
|
<ExpressiveButtonRive withReducedMotion="short-loop" ref={expressiveRiveRef} fit="layout" artboard={isThemeLight(theme) ? "Mobile Expressive Button Lightmode" : "Mobile Expressive Button Dark Mode"} dataBinding={{
|
|
buttonColor: styles3.expressiveRiveFill.color,
|
|
cornerRadius: styles3.expressivePill.borderRadius,
|
|
...expressivePressState
|
|
}} />
|
|
</View>, <ReanimatedRexport.View style={[style, styles]}>
|
|
{children}
|
|
{r10}
|
|
</ReanimatedRexport.View>]
|
|
};
|
|
} else {
|
|
if (variant === "experimental_premium-basic") {
|
|
colors = r66;
|
|
}
|
|
props2 = {
|
|
children: [<Module4611 start={{
|
|
x: 0,
|
|
y: 0
|
|
}} end={{
|
|
x: 1,
|
|
y: 0
|
|
}} style={[style, styles2, StyleSheet.absoluteFill]} colors={colors} />, <ReanimatedRexport.View style={[style, styles]}>
|
|
{children}
|
|
{r10}
|
|
</ReanimatedRexport.View>]
|
|
};
|
|
}
|
|
return <Fragment {...props2} />;
|
|
};
|
|
BasicButtonPill = function BasicButtonPill(props) {
|
|
const { children, style, pressed, variant = "primary", size = DEFAULT_BUTTON_SIZE, shiny = false, expressiveRiveRef, expressivePressState } = props;
|
|
const styles = useStyles(variant, size);
|
|
return <PillWrapper variant={variant} size={size} style={[styles.pill, style]} pressed={pressed} shiny={shiny} expressiveRiveRef={expressiveRiveRef} expressivePressState={expressivePressState}>
|
|
<View style={styles.childContainer}>{children}</View>
|
|
</PillWrapper>;
|
|
};
|
|
LoadingButtonPill = function LoadingButtonPill(props) {
|
|
const { children, style, pressed, variant = "primary", size = DEFAULT_BUTTON_SIZE, loading = false } = props;
|
|
let c14356_0 = loading;
|
|
let loaderSize = props.loaderSize;
|
|
const { expressiveRiveRef, expressivePressState } = props;
|
|
const styles = useStyles(variant, size);
|
|
const ref = useRef(null);
|
|
let [state, setState] = useState(loading);
|
|
useEffect(() => {
|
|
if (ref.current != null) {
|
|
clearTimeout(ref.current);
|
|
}
|
|
if (c14356_0) {
|
|
setState(true);
|
|
} else {
|
|
ref.current = setTimeout(() => {
|
|
setState(false);
|
|
}, 500);
|
|
}
|
|
}, [loading]);
|
|
const [r20, r39] = useLoadingStyles(loading, size);
|
|
const r54 = [<ReanimatedRexport.View style={[styles.childContainer, r20]}>{children}</ReanimatedRexport.View>, ,];
|
|
if (state) {
|
|
if (loaderSize == null) {
|
|
loaderSize = size;
|
|
}
|
|
state = <Ellipsis variant={variant} size={loaderSize} />;
|
|
}
|
|
r54[1] = <ReanimatedRexport.View style={[styles.ellipsis, r39]}>{state}</ReanimatedRexport.View>;
|
|
return <PillWrapper variant={variant} size={size} style={[styles.pill, style]} pressed={pressed} expressiveRiveRef={expressiveRiveRef} expressivePressState={expressivePressState}>{r54}</PillWrapper>;
|
|
};
|
|
useLoadingStyles = function useLoadingStyles(a0, size) {
|
|
const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
|
|
const offsetY = size === "lg" ? 18 : 12;
|
|
let c14357_2 = offsetY;
|
|
const r24 = function() {
|
|
let r29;
|
|
const opacity = _spring.withSpring(a0 ? 0 : 1, _springPresets.SUBTLE_SPRING, "animate-always");
|
|
const r19 = {
|
|
opacity: null,
|
|
transform: null
|
|
};
|
|
if (enabled) {
|
|
r19.opacity = a0 ? opacity : _ReanimatedRexport.withDelay(FADE_DELAY, opacity);
|
|
r19.transform = [{
|
|
translateY: 0
|
|
}];
|
|
r29 = r19;
|
|
} else {
|
|
r19.opacity = opacity;
|
|
r19.transform = [{
|
|
translateY: _spring.withSpring(a0 ? -1 * c14357_2 : 0, _springPresets.SUBTLE_SPRING)
|
|
}];
|
|
r29 = r19;
|
|
}
|
|
return r29;
|
|
};
|
|
r24.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
loading: a0,
|
|
SUBTLE_SPRING: _springPresets.SUBTLE_SPRING,
|
|
useReducedMotion: enabled,
|
|
withDelay: _ReanimatedRexport.withDelay,
|
|
FADE_DELAY,
|
|
offsetY
|
|
};
|
|
r24.__workletHash = 9388603334085;
|
|
r24.__initData = __initData;
|
|
const r35 = [useAnimatedStyle(r24), ,];
|
|
const l = function l() {
|
|
let r29;
|
|
const opacity = _spring.withSpring(a0 ? 1 : 0, _springPresets.SUBTLE_SPRING, "animate-always");
|
|
const r20 = {
|
|
opacity: null,
|
|
transform: null
|
|
};
|
|
if (enabled) {
|
|
r20.opacity = a0 ? _ReanimatedRexport.withDelay(FADE_DELAY, opacity) : opacity;
|
|
r20.transform = [{
|
|
translateY: 0
|
|
}];
|
|
r29 = r20;
|
|
} else {
|
|
r20.opacity = opacity;
|
|
r20.transform = [{
|
|
translateY: _spring.withSpring(a0 ? 0 : c14357_2, _springPresets.SUBTLE_SPRING)
|
|
}];
|
|
r29 = r20;
|
|
}
|
|
return r29;
|
|
};
|
|
l.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
loading: a0,
|
|
SUBTLE_SPRING: _springPresets.SUBTLE_SPRING,
|
|
useReducedMotion: enabled,
|
|
withDelay: _ReanimatedRexport.withDelay,
|
|
FADE_DELAY,
|
|
offsetY
|
|
};
|
|
l.__workletHash = 8255420825872;
|
|
l.__initData = __initData2;
|
|
r35[1] = useAnimatedStyle(l);
|
|
return r35;
|
|
};
|
|
FADE_DELAY = 300;
|
|
buttonPadding = getButtonPadding(SMALL_BUTTON_HEIGHT, SMALL_BUTTON_ICON_SIZE);
|
|
buttonPadding2 = getButtonPadding(MEDIUM_BUTTON_HEIGHT, MEDIUM_BUTTON_ICON_SIZE);
|
|
buttonPadding3 = getButtonPadding(LARGE_BUTTON_HEIGHT, LARGE_BUTTON_ICON_SIZE);
|
|
useStyles = createStyles((a0, a1) => {
|
|
const r6 = a1 === "sm" ? {
|
|
minHeight: SMALL_BUTTON_HEIGHT,
|
|
minWidth: SMALL_BUTTON_HEIGHT,
|
|
paddingHorizontal: SMALL_BUTTON_HORIZONTAL_PADDING,
|
|
paddingVertical: buttonPadding
|
|
} : a1 === "md" ? {
|
|
minHeight: MEDIUM_BUTTON_HEIGHT,
|
|
minWidth: MEDIUM_BUTTON_HEIGHT,
|
|
paddingHorizontal: MEDIUM_BUTTON_HORIZONTAL_PADDING,
|
|
paddingVertical: buttonPadding2
|
|
} : a1 === "lg" ? {
|
|
minHeight: LARGE_BUTTON_HEIGHT,
|
|
minWidth: LARGE_BUTTON_HEIGHT,
|
|
paddingHorizontal: LARGE_BUTTON_HORIZONTAL_PADDING,
|
|
paddingVertical: buttonPadding3
|
|
} : {};
|
|
const buttonBorderRadius = getButtonBorderRadius(a1);
|
|
return {
|
|
pill: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
overflow: "hidden",
|
|
borderWidth: BUTTON_BORDER_WIDTH,
|
|
borderRadius: buttonBorderRadius,
|
|
...r6
|
|
},
|
|
expressivePill: {
|
|
overflow: "hidden",
|
|
borderRadius: buttonBorderRadius
|
|
},
|
|
expressiveRiveFill: {
|
|
color: Module712.colors.CONTROL_EXPRESSIVE_BACKGROUND_DEFAULT
|
|
},
|
|
childContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexGrow: 1,
|
|
maxWidth: "100%"
|
|
},
|
|
ellipsis: {
|
|
position: "absolute",
|
|
height: "100%",
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}
|
|
};
|
|
});
|
|
__initData = {
|
|
code: "function ButtonPillNativeTsx1(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?0:1,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?opacityTransition:withDelay(FADE_DELAY,opacityTransition),transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?-1*offsetY:0,SUBTLE_SPRING)}]};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function ButtonPillNativeTsx2(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?1:0,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?withDelay(FADE_DELAY,opacityTransition):opacityTransition,transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?0:offsetY,SUBTLE_SPRING)}]};}"
|
|
};
|
|
export function ButtonPill(props) {
|
|
return props.loading == null ? <BasicButtonPill {...props} /> : <LoadingButtonPill {...props} />;
|
|
}
|
|
export { BasicButtonPill };
|
|
export { LoadingButtonPill };
|
|
export { useLoadingStyles };
|