shakebug-react-native 2.4.15 → 2.4.16

package/src/Componanats/ShakebugBottomSheet.js

@@ -0,0 +1,729 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Image,
+  StyleSheet,
+  Platform,
+  SafeAreaView,
+  Animated,
+  PanResponder,
+} from 'react-native';
+import { useTheme } from './Theme';
+import { getLocalizedString } from './localization';
+import { getBottomSpace, isIPhoneWithNotch } from './SafeAreaHelper';
+
+const ShakebugBottomSheet = ({
+  visible,
+  onClose,
+  onReportIssue,
+  onRecordIssue,
+  onChooseMedia,
+  themeColor = '#2E2E2E',
+  isShakeDisabled = false,
+  onDisableShake,
+  onEnableShake,
+  screenshot = null,
+}) => {
+  const resolvedColor = (themeColor && themeColor !== '#2E2E2E')
+    ? themeColor
+    : (global.ShakebugThemeColor || themeColor || '#2E2E2E');
+  const theme = useTheme(resolvedColor);
+  const bottomInset = getBottomSpace();
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(visible);
+
+  const translateY = useRef(new Animated.Value(500)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const confirmOpacity = useRef(new Animated.Value(0)).current;
+  const isClosingRef = useRef(false);
+
+  useEffect(() => {
+    if (visible) {
+      setIsModalVisible(true);
+      isClosingRef.current = false;
+      translateY.setValue(500);
+      backdropOpacity.setValue(0);
+
+      Animated.parallel([
+        Animated.timing(backdropOpacity, {
+          toValue: 1,
+          duration: 240,
+          useNativeDriver: true,
+        }),
+        Animated.spring(translateY, {
+          toValue: 0,
+          bounciness: 3,
+          speed: 13,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else if (isModalVisible && !isClosingRef.current) {
+      animateClose();
+    }
+  }, [visible]);
+
+  const animateClose = (callback) => {
+    if (isClosingRef.current) return;
+    isClosingRef.current = true;
+
+    Animated.parallel([
+      Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: 500,
+        duration: 220,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setIsModalVisible(false);
+      isClosingRef.current = false;
+      setShowConfirmModal(false);
+      if (typeof callback === 'function') {
+        callback();
+      } else if (typeof onClose === 'function') {
+        onClose();
+      }
+    });
+  };
+
+  // Drag-to-dismiss gesture on the bottom sheet
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (evt, gestureState) => {
+        if (showConfirmModal) return false;
+        // Respond to downward drag
+        return gestureState.dy > 6 && Math.abs(gestureState.dy) > Math.abs(gestureState.dx * 1.2);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+          const progress = Math.max(0, Math.min(1, 1 - gestureState.dy / 350));
+          backdropOpacity.setValue(progress);
+        } else {
+          translateY.setValue(gestureState.dy * 0.15);
+        }
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        // If dragged down past 70px or flicked down with velocity
+        if (gestureState.dy > 70 || (gestureState.dy > 25 && gestureState.vy > 0.3)) {
+          animateClose(onClose);
+        } else {
+          Animated.parallel([
+            Animated.spring(translateY, {
+              toValue: 0,
+              bounciness: 4,
+              speed: 14,
+              useNativeDriver: true,
+            }),
+            Animated.spring(backdropOpacity, {
+              toValue: 1,
+              bounciness: 4,
+              speed: 14,
+              useNativeDriver: true,
+            }),
+          ]).start();
+        }
+      },
+      onPanResponderTerminate: () => {
+        Animated.parallel([
+          Animated.spring(translateY, {
+            toValue: 0,
+            bounciness: 4,
+            speed: 14,
+            useNativeDriver: true,
+          }),
+          Animated.spring(backdropOpacity, {
+            toValue: 1,
+            bounciness: 4,
+            speed: 14,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      },
+    })
+  ).current;
+
+  // Drag-to-dismiss gesture on the bottom sheet
+
+  const openConfirmModal = () => {
+    setShowConfirmModal(true);
+    confirmOpacity.setValue(0);
+    Animated.timing(confirmOpacity, {
+      toValue: 1,
+      duration: 180,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const closeConfirmModal = (onDone) => {
+    Animated.timing(confirmOpacity, {
+      toValue: 0,
+      duration: 150,
+      useNativeDriver: true,
+    }).start(() => {
+      setShowConfirmModal(false);
+      if (onDone) onDone();
+    });
+  };
+
+  const handleToggleShakePress = () => {
+    if (isShakeDisabled) {
+      if (onEnableShake) {
+        onEnableShake();
+      }
+    } else {
+      openConfirmModal();
+    }
+  };
+
+  const handleConfirmDisable = () => {
+    closeConfirmModal(() => {
+      if (onDisableShake) {
+        onDisableShake();
+      }
+      animateClose(onClose);
+    });
+  };
+
+  const handleRequestClose = () => {
+    if (showConfirmModal) {
+      closeConfirmModal();
+    } else {
+      animateClose(onClose);
+    }
+  };
+
+  const handleAction = (actionFn) => {
+    animateClose(() => {
+      if (actionFn) actionFn();
+    });
+  };
+
+  if (!isModalVisible) return null;
+
+  return (
+    <Modal
+      transparent
+      visible={isModalVisible}
+      animationType="none"
+      onRequestClose={handleRequestClose}
+      statusBarTranslucent
+    >
+      <View style={styles.modalOverlay}>
+        {/* Subtle dark overlay over the live application screen */}
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.backdropFade,
+            { opacity: backdropOpacity },
+          ]}
+        />
+
+        {/* Tap outside to close (occupies full screen space above the bottom sheet) */}
+        <TouchableOpacity
+          activeOpacity={1}
+          style={styles.backdropTouchArea}
+          onPress={() => {
+            if (showConfirmModal) {
+              closeConfirmModal();
+            } else {
+              animateClose(onClose);
+            }
+          }}
+        />
+
+        {/* Animated sliding bottom sheet */}
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={[
+            styles.sheetContainer,
+            {
+              backgroundColor: theme.sheetBg,
+              transform: [{ translateY }],
+            },
+          ]}
+        >
+          <View style={{ width: '100%' }}>
+            {/* Top Grab Handle */}
+            <View style={styles.handleContainer}>
+              <View
+                style={[
+                  styles.handleBar,
+                  { backgroundColor: theme.sheetHandle },
+                ]}
+              />
+            </View>
+
+            {/* Header Row: Phone Shake Icon + Text Info */}
+            <View style={styles.headerRow}>
+              <View style={styles.phoneIconContainer}>
+                <Image
+                  source={require('../Assets/images/shake.png')}
+                  style={styles.shakeIcon}
+                  resizeMode="contain"
+                />
+              </View>
+
+              <View style={styles.headerTextCol}>
+                <Text style={[styles.shakeDetectedText, { color: resolvedColor }]}>
+                  {getLocalizedString('ShakeDetected')}
+                </Text>
+                <Text style={[styles.titleText, { color: theme.titleColor }]}>
+                  {getLocalizedString('SomethingNotWorking')}
+                </Text>
+                <Text style={[styles.subtitleText, { color: theme.textSecondary }]}>
+                  {getLocalizedString('SavedScreenshot')}
+                </Text>
+              </View>
+            </View>
+
+            {/* Button 1: Report an issue (Primary Solid) */}
+            <TouchableOpacity
+              style={[styles.primaryButton, { backgroundColor: theme.sheetPrimaryBtnBg }]}
+              activeOpacity={0.85}
+              onPress={() => handleAction(onReportIssue)}
+            >
+              <Text style={[styles.primaryButtonText, { color: theme.sheetPrimaryBtnText }]}>
+                {getLocalizedString('ReportAnIssue')}
+              </Text>
+            </TouchableOpacity>
+
+            {/* Button 2: Record the issue instead (Outline with red record dot) */}
+            <TouchableOpacity
+              style={[
+                styles.outlineButton,
+                {
+                  borderColor: theme.sheetButtonBorder,
+                  backgroundColor: theme.sheetButtonBg,
+                },
+              ]}
+              activeOpacity={0.8}
+              onPress={() => handleAction(onRecordIssue)}
+            >
+              <View style={styles.recordDotOuter}>
+                <View style={styles.recordDotInner} />
+              </View>
+              <Text style={[styles.outlineButtonText, { color: theme.textSecondary }]}>
+                {getLocalizedString('RecordIssueInstead')}
+              </Text>
+            </TouchableOpacity>
+
+            {/* Button 3: Choose media (Outline with media icon) */}
+            <TouchableOpacity
+              style={[
+                styles.outlineButton,
+                {
+                  borderColor: theme.sheetButtonBorder,
+                  backgroundColor: theme.sheetButtonBg,
+                },
+              ]}
+              activeOpacity={0.8}
+              onPress={() => handleAction(onChooseMedia)}
+            >
+              <View style={styles.mediaIconWrapper}>
+                {/* Back card */}
+                <View
+                  style={[
+                    styles.mediaBackCard,
+                    { borderColor: theme.isDark ? '#94a3b8' : '#475569' },
+                  ]}
+                />
+                {/* Front card */}
+                <View
+                  style={[
+                    styles.mediaFrontCard,
+                    {
+                      borderColor: theme.isDark ? '#cbd5e1' : '#334155',
+                      backgroundColor: theme.sheetButtonBg,
+                    },
+                  ]}
+                >
+                  <View
+                    style={[
+                      styles.mediaIconDot,
+                      { backgroundColor: theme.isDark ? '#cbd5e1' : '#334155' },
+                    ]}
+                  />
+                  <View
+                    style={[
+                      styles.mediaIconHill,
+                      { backgroundColor: theme.isDark ? '#cbd5e1' : '#334155' },
+                    ]}
+                  />
+                </View>
+              </View>
+              <Text style={[styles.outlineButtonText, { color: theme.textSecondary }]}>
+                {getLocalizedString('ChooseMedia')}
+              </Text>
+            </TouchableOpacity>
+
+            {/* Bottom Actions Row: Not now (left) & Turn off/on shake (right) */}
+            <View style={styles.bottomActionsRow}>
+              <TouchableOpacity
+                style={styles.bottomActionButton}
+                activeOpacity={0.6}
+                onPress={() => animateClose(onClose)}
+              >
+                <Text style={[styles.notNowText, { color: theme.isDark ? theme.textSecondary : '#64748b' }]}>
+                  {getLocalizedString('NotNow')}
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.bottomActionButton}
+                activeOpacity={0.6}
+                onPress={handleToggleShakePress}
+              >
+                <Text style={[styles.toggleShakeText, { color: theme.isDark ? theme.textSecondary : '#64748b' }]}>
+                  {isShakeDisabled
+                    ? getLocalizedString('TurnOnShake')
+                    : getLocalizedString('TurnOffShake')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+
+            {/* Bottom Safe Area Spacer */}
+            <View
+              style={{
+                height: Platform.OS === 'ios'
+                  ? (isIPhoneWithNotch() ? 34 : 16)
+                  : 24,
+                width: '100%',
+                backgroundColor: theme.sheetBg,
+              }}
+            />
+          </View>
+        </Animated.View>
+
+        {/* Custom Confirmation Modal for Disabling Shake */}
+        {showConfirmModal && (
+          <Animated.View style={[styles.confirmModalBackdrop, { opacity: confirmOpacity }]}>
+            <TouchableWithoutFeedback onPress={() => closeConfirmModal()}>
+              <View style={StyleSheet.absoluteFillObject} />
+            </TouchableWithoutFeedback>
+
+            <View
+              style={[
+                styles.confirmCard,
+                { backgroundColor: theme.confirmModalBg },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.confirmTitle,
+                  { color: theme.confirmModalText },
+                ]}
+              >
+                {getLocalizedString('DisableShakeConfirm')}
+              </Text>
+
+              <View style={styles.confirmButtonRow}>
+                <TouchableOpacity
+                  style={[
+                    styles.confirmButton,
+                    {
+                      backgroundColor: theme.confirmButtonBg,
+                      marginRight: 6,
+                    },
+                  ]}
+                  activeOpacity={0.7}
+                  onPress={() => closeConfirmModal()}
+                >
+                  <Text
+                    style={[
+                      styles.confirmCancelText,
+                      { color: theme.confirmCancelText },
+                    ]}
+                  >
+                    {getLocalizedString('Cancel')}
+                  </Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={[
+                    styles.confirmButton,
+                    {
+                      backgroundColor: theme.confirmButtonBg,
+                      marginLeft: 6,
+                    },
+                  ]}
+                  activeOpacity={0.7}
+                  onPress={handleConfirmDisable}
+                >
+                  <Text
+                    style={[
+                      styles.confirmDisableText,
+                      { color: theme.confirmDisableText },
+                    ]}
+                  >
+                    {getLocalizedString('Disable')}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </Animated.View>
+        )}
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'flex-end',
+    backgroundColor: 'transparent',
+    position: 'relative',
+  },
+  backdropFade: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+  },
+  backdropTouchArea: {
+    flex: 1,
+    width: '100%',
+  },
+  sheetContainer: {
+    width: '100%',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingHorizontal: 22,
+    paddingTop: 10,
+    paddingBottom: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.15,
+    shadowRadius: 10,
+    elevation: 16,
+  },
+  handleContainer: {
+    width: '100%',
+    paddingTop: 4,
+    paddingBottom: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  handleBar: {
+    width: 44,
+    height: 4,
+    borderRadius: 2,
+    alignSelf: 'center',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 22,
+  },
+  phoneIconContainer: {
+    width: 56,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  shakeIcon: {
+    width: 54,
+    height: 46,
+  },
+  headerTextCol: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  shakeDetectedText: {
+    fontSize: 13,
+    fontWeight: '700',
+    letterSpacing: 0.3,
+    marginBottom: 3,
+  },
+  titleText: {
+    fontSize: 21,
+    fontWeight: '800',
+    letterSpacing: -0.3,
+    marginBottom: 4,
+  },
+  subtitleText: {
+    fontSize: 13,
+    fontWeight: '400',
+    lineHeight: 18,
+  },
+  primaryButton: {
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  outlineButton: {
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  recordDotOuter: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: '#ef4444',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+  },
+  recordDotInner: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#ef4444',
+  },
+  mediaIconWrapper: {
+    width: 22,
+    height: 18,
+    marginRight: 8,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  mediaBackCard: {
+    position: 'absolute',
+    top: 0,
+    left: 2,
+    width: 16,
+    height: 14,
+    borderRadius: 3,
+    borderWidth: 1.5,
+  },
+  mediaFrontCard: {
+    position: 'absolute',
+    bottom: 0,
+    right: 1,
+    width: 17,
+    height: 14,
+    borderRadius: 3,
+    borderWidth: 1.5,
+    overflow: 'hidden',
+  },
+  mediaIconDot: {
+    position: 'absolute',
+    top: 2,
+    right: 2,
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+  },
+  mediaIconHill: {
+    position: 'absolute',
+    bottom: -3,
+    left: 1,
+    width: 9,
+    height: 9,
+    borderRadius: 4.5,
+  },
+  outlineButtonText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  bottomActionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 10,
+    marginBottom: 6,
+    paddingHorizontal: 4,
+  },
+  bottomActionButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+  },
+  notNowText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  toggleShakeText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  confirmModalBackdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 28,
+    zIndex: 99999,
+    elevation: 9999,
+  },
+  confirmCard: {
+    width: '100%',
+    maxWidth: 320,
+    borderRadius: 24,
+    paddingHorizontal: 24,
+    paddingTop: 24,
+    paddingBottom: 20,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 12,
+  },
+  confirmTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 22,
+    textAlign: 'center',
+    alignSelf: 'center',
+    marginBottom: 20,
+  },
+  confirmButtonRow: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  confirmButton: {
+    flex: 1,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  confirmCancelText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  confirmDisableText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+});
+
+export default ShakebugBottomSheet;