102 lines
3.8 KiB
TypeScript
102 lines
3.8 KiB
TypeScript
// Metro module 4610 (f4611).
|
|
import { useContext, useState } from "react";
|
|
import { useButtonTextColorStyles } from "./ButtonHooks.native";
|
|
import Module689 from "../../../../_bundle/Module689";
|
|
import { AccessibilityPreferencesContext } from "../../../shared";
|
|
import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
|
|
import * as _timing from "../../../animation/reanimated/timing/timing";
|
|
import { createStyles } from "../../Styles/native/createStyles";
|
|
let __initData;
|
|
const useShineEffectStyles = function useShineEffectStyles(state, variant) {
|
|
const backgroundColor = Module689(useButtonTextColorStyles(variant).color).alpha(0.1).hex();
|
|
const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
|
|
const r32 = function() {
|
|
let r40;
|
|
if (state == null) {
|
|
r40 = {
|
|
transform: [{
|
|
translateX: -120
|
|
}]
|
|
};
|
|
} else {
|
|
const r4 = {
|
|
transform: null
|
|
};
|
|
const r6 = {
|
|
translateX: null
|
|
};
|
|
if (enabled) {
|
|
r6.translateX = (state - 56) / 2;
|
|
r4.transform = [r6];
|
|
r40 = r4;
|
|
} else {
|
|
r6.translateX = _ReanimatedRexport.withRepeat(_ReanimatedRexport.withSequence(_timing.withTiming(-120, {
|
|
duration: 0
|
|
}, "animate-always"), _ReanimatedRexport.withDelay(750, _timing.withTiming(state + 120, {
|
|
duration: 2000
|
|
}, "animate-always"))), -1);
|
|
r4.transform = [r6];
|
|
r40 = r4;
|
|
}
|
|
}
|
|
return r40;
|
|
};
|
|
r32.__closure = {
|
|
width: state,
|
|
SHINE_OFFSCREEN_OFFSET: 120,
|
|
useReducedMotion: enabled,
|
|
SHINE_WIDTH: 56,
|
|
withRepeat: _ReanimatedRexport.withRepeat,
|
|
withSequence: _ReanimatedRexport.withSequence,
|
|
withTiming: _timing.withTiming,
|
|
withDelay: _ReanimatedRexport.withDelay,
|
|
SHINE_INITIAL_ANIMATION_DELAY: 750,
|
|
SHINE_ANIMATION_DURATION: 2000
|
|
};
|
|
r32.__workletHash = 15814138938406;
|
|
r32.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(r32);
|
|
return {
|
|
shineStyles: createStyles({
|
|
shineContainer: {
|
|
width: "100%",
|
|
height: "200%",
|
|
position: "absolute",
|
|
overflow: "hidden"
|
|
},
|
|
shine: {
|
|
width: 56,
|
|
height: "500%",
|
|
transform: [{
|
|
rotate: "30deg"
|
|
}],
|
|
backgroundColor,
|
|
top: "-100%",
|
|
alignItems: "center"
|
|
},
|
|
shineInner: {
|
|
width: 16,
|
|
height: "100%",
|
|
backgroundColor
|
|
}
|
|
})(),
|
|
shineAnimatedStyle: animatedStyle
|
|
};
|
|
};
|
|
__initData = {
|
|
code: "function ButtonShineNativeTsx1(){const{width,SHINE_OFFSCREEN_OFFSET,useReducedMotion,SHINE_WIDTH,withRepeat,withSequence,withTiming,withDelay,SHINE_INITIAL_ANIMATION_DELAY,SHINE_ANIMATION_DURATION}=this.__closure;if(width==null){return{transform:[{translateX:-SHINE_OFFSCREEN_OFFSET}]};}if(useReducedMotion){const centerOffset=(width-SHINE_WIDTH)/2;return{transform:[{translateX:centerOffset}]};}return{transform:[{translateX:withRepeat(withSequence(withTiming(-SHINE_OFFSCREEN_OFFSET,{duration:0},'animate-always'),withDelay(SHINE_INITIAL_ANIMATION_DELAY,withTiming(width+SHINE_OFFSCREEN_OFFSET,{duration:SHINE_ANIMATION_DURATION},'animate-always'))),-1)}]};}"
|
|
};
|
|
export { useShineEffectStyles };
|
|
export function ButtonShine(props) {
|
|
const variant = props.variant;
|
|
const [state, setState] = useState(null);
|
|
const styles = useShineEffectStyles(state, variant);
|
|
const shineStyles = styles.shineStyles;
|
|
return <ReanimatedRexport.View onLayout={(event) => setState(event.nativeEvent.layout.width)} style={[shineStyles.shineContainer, styles.shineAnimatedStyle]}>
|
|
<ReanimatedRexport.View style={shineStyles.shine}>
|
|
<ReanimatedRexport.View style={shineStyles.shineInner} />
|
|
</ReanimatedRexport.View>
|
|
</ReanimatedRexport.View>;
|
|
}
|