panelBase.tsx (2611552040b28f3a16705c8e457b074825a18b48) panelBase.tsx (428a07232c590a64f321e5de380e0b764e4a2b5e)
1import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
2import {
3 BackHandler,
4 DeviceEventEmitter,
5 KeyboardAvoidingView,
6 NativeEventSubscription,
7 Pressable,
8 StyleSheet,

--- 17 unchanged lines hidden (view full) ---

26const ANIMATION_DURATION = 250;
27
28const timingConfig = {
29 duration: ANIMATION_DURATION,
30 easing: ANIMATION_EASING,
31};
32
33interface IPanelBaseProps {
1import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
2import {
3 BackHandler,
4 DeviceEventEmitter,
5 KeyboardAvoidingView,
6 NativeEventSubscription,
7 Pressable,
8 StyleSheet,

--- 17 unchanged lines hidden (view full) ---

26const ANIMATION_DURATION = 250;
27
28const timingConfig = {
29 duration: ANIMATION_DURATION,
30 easing: ANIMATION_EASING,
31};
32
33interface IPanelBaseProps {
34 keyboardAvoidBehavior?: 'height' | 'padding' | 'position';
34 keyboardAvoidBehavior?: 'height' | 'padding' | 'position' | 'none';
35 height?: number;
36 renderBody: (loading: boolean) => JSX.Element;
37}
38
39export default function (props: IPanelBaseProps) {
40 const {height = vh(60), renderBody, keyboardAvoidBehavior} = props;
41 const snapPoint = useSharedValue(0);
42

--- 99 unchanged lines hidden (view full) ---

142 }
143 if (prevResult && result < prevResult && result === 0) {
144 runOnJS(unmountPanel)();
145 }
146 },
147 [],
148 );
149
35 height?: number;
36 renderBody: (loading: boolean) => JSX.Element;
37}
38
39export default function (props: IPanelBaseProps) {
40 const {height = vh(60), renderBody, keyboardAvoidBehavior} = props;
41 const snapPoint = useSharedValue(0);
42

--- 99 unchanged lines hidden (view full) ---

142 }
143 if (prevResult && result < prevResult && result === 0) {
144 runOnJS(unmountPanel)();
145 }
146 },
147 [],
148 );
149
150 const panelBody = (
151 <Animated.View
152 style={[
153 style.wrapper,
154 {
155 backgroundColor: colors.primary,
156 height:
157 orientation === 'horizonal'
158 ? vh(100) - safeAreaInsets.top
159 : height,
160 },
161 panelAnimated,
162 ]}>
163 {renderBody(loading)}
164 </Animated.View>
165 );
166
150 return (
151 <>
152 <Pressable
153 style={style.maskWrapper}
154 onPress={() => {
155 snapPoint.value = withTiming(0, timingConfig);
156 }}>
157 <Animated.View
158 style={[style.maskWrapper, style.mask, maskAnimated]}
159 />
160 </Pressable>
167 return (
168 <>
169 <Pressable
170 style={style.maskWrapper}
171 onPress={() => {
172 snapPoint.value = withTiming(0, timingConfig);
173 }}>
174 <Animated.View
175 style={[style.maskWrapper, style.mask, maskAnimated]}
176 />
177 </Pressable>
161 <KeyboardAvoidingView
162 behavior={keyboardAvoidBehavior || 'position'}>
163 <Animated.View
164 style={[
165 style.wrapper,
166 {
167 backgroundColor: colors.primary,
168 height:
169 orientation === 'horizonal'
170 ? vh(100) - safeAreaInsets.top
171 : height,
172 },
173 panelAnimated,
174 ]}>
175 {renderBody(loading)}
176 </Animated.View>
177 </KeyboardAvoidingView>
178 {keyboardAvoidBehavior === 'none' ? (
179 panelBody
180 ) : (
181 <KeyboardAvoidingView
182 behavior={keyboardAvoidBehavior || 'position'}>
183 {panelBody}
184 </KeyboardAvoidingView>
185 )}
178 </>
179 );
180}
181
182const style = StyleSheet.create({
183 maskWrapper: {
184 position: 'absolute',
185 width: '100%',

--- 19 unchanged lines hidden --- 		186 </>
187 );
188}
189
190const style = StyleSheet.create({
191 maskWrapper: {
192 position: 'absolute',
193 width: '100%',

--- 19 unchanged lines hidden ---