232 lines
7.7 KiB
TypeScript
232 lines
7.7 KiB
TypeScript
// Metro module 10538 (f10539).
|
|
import { useCallback, forwardRef, useState, useRef, useEffect, useMemo, useImperativeHandle } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import FormRow from "../../../../design/void/Form/native/FormRow";
|
|
import * as _native from "../../../../design/void/native";
|
|
import { Icon } from "../../../../design/void/native";
|
|
import { FormLabel, FormDivider } from "../../../../design/void/Form/native/index";
|
|
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import Module12 from "../../../../_bundle/Module12";
|
|
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
|
|
import * as _Module4160 from "../../../../_bundle/Module4160";
|
|
import { Gesture, GestureDetector } from "../../../../_bundle/Module5273";
|
|
let useStyles, __initData, __initData2, __initData3, __initData4;
|
|
const PopoutMenuRow = function PopoutMenuRow(props) {
|
|
const { icon, text, onClick, onClose } = props;
|
|
const styles = useStyles();
|
|
return <FormRow leading={icon != null ? <Icon source={icon} /> : null} label={<FormLabel style={styles.popoutMenuRowLabel} text={text} />} style={styles.popoutMenuRow} onPress={useCallback(() => {
|
|
if (onClick != null) {
|
|
onClick();
|
|
}
|
|
if (onClose != null) {
|
|
onClose();
|
|
}
|
|
}, [onClick, onClose])} />;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
position: "absolute",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
popoutMenuRow: {
|
|
flex: 1
|
|
},
|
|
popoutMenuRowLabel: {
|
|
width: "100%"
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function PopoutMenuTsx1(){const{withTiming,animateIn,STANDARD_EASING,ANIMATION_DURATION,runOnJS,handleClose,EXTRA_PADDING}=this.__closure;return{opacity:withTiming(animateIn?1:0,{easing:STANDARD_EASING,duration:ANIMATION_DURATION},'respect-motion-settings',function(finished){if(finished){runOnJS(handleClose)();}}),transform:[{translateY:withTiming(animateIn?-EXTRA_PADDING:0,{easing:STANDARD_EASING,duration:ANIMATION_DURATION})}]};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function PopoutMenuTsx2(finished){const{runOnJS,handleClose}=this.__closure;if(finished){runOnJS(handleClose)();}}"
|
|
};
|
|
__initData3 = {
|
|
code: "function PopoutMenuTsx3(){const{runOnJS,handleLongPress}=this.__closure;runOnJS(handleLongPress)();}"
|
|
};
|
|
__initData4 = {
|
|
code: "function PopoutMenuTsx4(){const{runOnJS,_setClose}=this.__closure;runOnJS(_setClose)(true);}"
|
|
};
|
|
const r48 = forwardRef(function PopoutMenu(props, a1) {
|
|
let memo, c18118_17, callback, callback2, callback3;
|
|
const { disabled, title, trigger, rows, style, onOpen, onClose: onClose2 } = props;
|
|
memo = void 0;
|
|
c18118_17 = void 0;
|
|
callback = void 0;
|
|
callback2 = void 0;
|
|
callback3 = void 0;
|
|
const styles = useStyles();
|
|
const windowDimensions_native = useWindowDimensions_native();
|
|
const { width, height } = windowDimensions_native;
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const [state5, setState] = useState(0);
|
|
const [state, setState2] = useState(false);
|
|
const [state2, setState3] = useState(false);
|
|
const ref = useRef(null);
|
|
const ref2 = useRef(null);
|
|
const [state3, setState4] = useState({
|
|
top: 0,
|
|
left: 0,
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
const [state4, setState5] = useState({
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
useEffect(() => {
|
|
let r3 = state2;
|
|
if (state2) {
|
|
r3 = ref?.current != null;
|
|
}
|
|
if (r3) {
|
|
if (ref != null) {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.measureInWindow((a0, a1, a2, a3) => {
|
|
setState4({
|
|
top: Math.max(a1, 0),
|
|
left: a0,
|
|
width: a2,
|
|
height: a3
|
|
});
|
|
});
|
|
}
|
|
}
|
|
setTimeout(() => {
|
|
if (ref2 != null) {
|
|
const current = ref2.current;
|
|
if (current != null) {
|
|
current.measureInWindow((a0, a1, a2, a3) => {
|
|
setState5({
|
|
width: a2,
|
|
height: a3
|
|
});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, [state2]);
|
|
const memo2 = useMemo(() => {
|
|
let top = -state4.height;
|
|
if (state3.top + state3.height + state4.height + 8 + bottom < height) {
|
|
top = state3.height + 16;
|
|
}
|
|
return {
|
|
top,
|
|
left: state3.left + state4.width + 8 > width ? state3.width - state4.width : 0
|
|
};
|
|
}, [state4, bottom, height, width, state3]);
|
|
const { top, left } = memo2;
|
|
useImperativeHandle(a1, () => ({
|
|
close: () => {
|
|
setState2(true);
|
|
}
|
|
}), [setState2]);
|
|
memo = useMemo(() => Module12.debounce((a0) => {
|
|
setState(a0);
|
|
}, 16), [setState]);
|
|
const animateIn = state5 > 0 && !state;
|
|
c18118_17 = animateIn;
|
|
callback = useCallback(() => {
|
|
if (state) {
|
|
onClose2();
|
|
setState3(false);
|
|
}
|
|
}, [state, onClose2]);
|
|
const te = function te() {
|
|
const r1 = c18118_17 ? 1 : 0;
|
|
const r8 = {
|
|
easing: _native.STANDARD_EASING,
|
|
duration: 250
|
|
};
|
|
const r23 = function n(a0) {
|
|
if (a0) {
|
|
_ReanimatedRexport.runOnJS(callback)();
|
|
}
|
|
};
|
|
r23.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
handleClose: callback
|
|
};
|
|
r23.__workletHash = 7805688342878;
|
|
r23.__initData = __initData2;
|
|
return {
|
|
opacity: _timing.withTiming(r1, r8, "respect-motion-settings", r23),
|
|
transform: [{
|
|
translateY: _timing.withTiming(c18118_17 ? -8 : 0, {
|
|
easing: _native.STANDARD_EASING,
|
|
duration: 250
|
|
})
|
|
}]
|
|
};
|
|
};
|
|
te.__closure = {
|
|
withTiming: _timing.withTiming,
|
|
animateIn,
|
|
STANDARD_EASING: _native.STANDARD_EASING,
|
|
ANIMATION_DURATION: 250,
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
handleClose: callback,
|
|
EXTRA_PADDING: 8
|
|
};
|
|
te.__workletHash = 2727321893876;
|
|
te.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(te);
|
|
callback2 = useCallback(() => setState2(true), []);
|
|
callback3 = useCallback(() => {
|
|
setState2(false);
|
|
_Module4160.trigger("impactHeavy");
|
|
setState3(true);
|
|
onOpen();
|
|
}, [onOpen]);
|
|
const memo3 = useMemo(() => {
|
|
const r4 = Gesture.LongPress();
|
|
const t = function t() {
|
|
_ReanimatedRexport.runOnJS(setState2)(true);
|
|
};
|
|
t.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
_setClose: setState2
|
|
};
|
|
t.__workletHash = 15929711498886;
|
|
t.__initData = __initData4;
|
|
const r19 = r4.onBegin(t);
|
|
const r21 = function n() {
|
|
_ReanimatedRexport.runOnJS(callback3)();
|
|
};
|
|
r21.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
handleLongPress: callback3
|
|
};
|
|
r21.__workletHash = 1649917173815;
|
|
r21.__initData = __initData3;
|
|
return r19.onStart(r21);
|
|
}, [callback3]);
|
|
let r116 = trigger;
|
|
if (!disabled) {
|
|
const r128 = [<GestureDetector gesture={memo3}>
|
|
<View ref={ref}>{trigger}</View>
|
|
</GestureDetector>, state2 ? <ReanimatedRexport.View ref={ref2} style={[styles.container, style, {
|
|
left,
|
|
top
|
|
}, animatedStyle]} onLayout={(event) => {
|
|
memo(event.nativeEvent.layout.height);
|
|
}}>
|
|
{title != null ? <PopoutMenuRow text={title} /> : null}
|
|
{title != null ? <FormDivider /> : null}
|
|
{rows.map((row, index) => <PopoutMenuRow key={index} {...row} onClose={callback2} />)}
|
|
</ReanimatedRexport.View> : null];
|
|
r116 = <>{r128}</>;
|
|
}
|
|
return r116;
|
|
});
|
|
export default r48;
|