agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -1,215 +0,0 @@
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  Modal,
-  TouchableWithoutFeedback,
-} from 'react-native';
-import React, {useCallback, useRef, useState} from 'react';
-import BottomSheet, {
-  BottomSheetModal,
-  BottomSheetModalProvider,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
-import KeyboardManager from 'react-native-keyboard-manager';
-
-import Chat from '../../components/Chat';
-import ParticipantView from '../../components/ParticipantsView';
-import SettingsView from '../../components/SettingsView';
-import ActionSheetContent from './ActionSheetContent';
-import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useSidePanel} from '../../utils/useSidePanel';
-import {isIOS} from '../../utils/common';
-import ActionSheetHandle from './ActionSheetHandle';
-import Spacer from '../../atoms/Spacer';
-
-//topbar btn template is used to show icons without label text (as in desktop : bottomBar)
-
-const ActionSheet = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const {sidePanel, setSidePanel} = useSidePanel();
-  const bottomSheetRef = useRef<BottomSheetModal>(null);
-  const chatSheetRef = useRef<BottomSheetModal>(null);
-  const participantsSheetRef = useRef<BottomSheetModal>(null);
-  const settingsSheetRef = useRef<BottomSheetModal>(null);
-
-  // callbacks
-  const handleSheetChanges = useCallback((index: number) => {
-    bottomSheetRef.current?.snapToIndex(index);
-    index === 0 ? setIsExpanded(false) : setIsExpanded(true);
-  }, []);
-
-  React.useEffect(() => {
-    bottomSheetRef?.current.present();
-  }, []);
-
-  // updating on sidepanel changes
-  React.useEffect(() => {
-    switch (sidePanel) {
-      case SidePanelType.Participants: {
-        participantsSheetRef?.current.present();
-        break;
-      }
-      case SidePanelType.Chat: {
-        chatSheetRef?.current.present();
-        break;
-      }
-      case SidePanelType.Settings: {
-        settingsSheetRef?.current.present();
-        break;
-      }
-      case SidePanelType.None: {
-        chatSheetRef?.current.close();
-        participantsSheetRef?.current.close();
-        settingsSheetRef?.current.close();
-        handleSheetChanges(0);
-      }
-      default:
-        bottomSheetRef?.current.present();
-    }
-  }, [sidePanel]);
-
-  React.useEffect(() => {
-    if (isIOS()) {
-      KeyboardManager.setEnable(false);
-      return () => KeyboardManager.setEnable(true);
-    }
-  }, []);
-
-  function onDismiss() {
-    setSidePanel(SidePanelType.None);
-  }
-
-  return (
-    <BottomSheetModalProvider>
-      {isExpanded && (
-        <TouchableWithoutFeedback onPress={() => handleSheetChanges(0)}>
-          <View style={[styles.backDrop]} />
-        </TouchableWithoutFeedback>
-      )}
-      {/* Controls  Action Sheet*/}
-      <BottomSheetModal
-        snapPoints={[100, 350]}
-        ref={bottomSheetRef}
-        onChange={handleSheetChanges}
-        enablePanDownToClose={false}
-        style={styles.container}
-        backgroundStyle={styles.backgroundStyle}
-        stackBehavior="push"
-        handleComponent={() => (
-          <>
-            <ActionSheetHandle sidePanel={SidePanelType.None} />
-            <Spacer size={12} />
-          </>
-        )}
-        handleIndicatorStyle={styles.handleIndicatorStyle}>
-        <BottomSheetView>
-          <ActionSheetContent
-            handleSheetChanges={handleSheetChanges}
-            isExpanded={isExpanded}
-          />
-        </BottomSheetView>
-      </BottomSheetModal>
-
-      {/* Chat Action Sheet */}
-      <BottomSheetModal
-        snapPoints={['100%']}
-        name="ChatSheet"
-        onDismiss={onDismiss}
-        ref={chatSheetRef}
-        style={styles.container}
-        backgroundStyle={styles.backgroundStyle}
-        handleIndicatorStyle={styles.handleIndicatorStyle}
-        enableContentPanningGesture={false}
-        handleComponent={() => (
-          <ActionSheetHandle sidePanel={SidePanelType.Chat} />
-        )}
-        keyboardBehavior="extend"
-        stackBehavior="push">
-        <BottomSheetView>
-          <Chat showHeader={false} />
-        </BottomSheetView>
-      </BottomSheetModal>
-
-      {/* Participants Action Sheet */}
-      <BottomSheetModal
-        snapPoints={['100%']}
-        ref={participantsSheetRef}
-        onDismiss={onDismiss}
-        name="ParticipantsSheet"
-        style={styles.container}
-        backgroundStyle={styles.backgroundStyle}
-        handleIndicatorStyle={styles.handleIndicatorStyle}
-        enableContentPanningGesture={false}
-        handleComponent={() => (
-          <ActionSheetHandle sidePanel={SidePanelType.Participants} />
-        )}
-        stackBehavior="push">
-        <BottomSheetView>
-          <ParticipantView showHeader={false} />
-        </BottomSheetView>
-      </BottomSheetModal>
-
-      {/* Settings Action Sheet  */}
-      <BottomSheetModal
-        snapPoints={['100%']}
-        ref={settingsSheetRef}
-        name="SettingsSheet"
-        onDismiss={onDismiss}
-        style={styles.container}
-        backgroundStyle={styles.backgroundStyle}
-        handleIndicatorStyle={styles.handleIndicatorStyle}
-        enableContentPanningGesture={false}
-        handleComponent={() => (
-          <ActionSheetHandle sidePanel={SidePanelType.Settings} />
-        )}
-        stackBehavior="push">
-        <BottomSheetView>
-          <SettingsView showHeader={false} />
-        </BottomSheetView>
-      </BottomSheetModal>
-    </BottomSheetModalProvider>
-  );
-};
-
-export default ActionSheet;
-
-const styles = StyleSheet.create({
-  content: {
-    paddingHorizontal: 20,
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 24,
-    paddingHorizontal: 16,
-    borderColor: '#EDF0F1',
-    flexWrap: 'wrap',
-  },
-
-  container: {
-    shadowColor: '#000000',
-    shadowOffset: {width: 0, height: -4},
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-  },
-  backgroundStyle: {
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-  },
-
-  handleIndicatorStyle: {
-    // backgroundColor: $config.SEMANTIC_NEUTRAL,
-    // width: 40,
-    // height: 4,
-  },
-  backDrop: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    opacity: 0.5,
-  },
-});

package/template/src/pages/video-call/ActionSheet.tsx

@@ -1,226 +0,0 @@
-import {StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native';
-import React, {useRef, useCallback, useLayoutEffect, useEffect} from 'react';
-import {BottomSheet, BottomSheetRef} from 'react-spring-bottom-sheet';
-import './ActionSheetStyles.css';
-import ActionSheetContent from './ActionSheetContent';
-import {SpringEvent} from 'react-spring-bottom-sheet/dist/types';
-import Chat from '../../components/Chat';
-import ParticipantView from '../../components/ParticipantsView';
-import SettingsView from '../../components/SettingsView';
-
-import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useSidePanel} from '../../utils/useSidePanel';
-import ToastComponent from '../../components/ToastComponent';
-import {isMobileUA} from '../../utils/common';
-import {useToast} from '../../components/useToast';
-import ActionSheetHandle from './ActionSheetHandle';
-import Spacer from '../../atoms/Spacer';
-
-const ActionSheet = () => {
-  const {setActionSheetVisible} = useToast();
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const [isChatOpen, setIsChatOpen] = React.useState(false);
-  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
-  const [isParticipantsOpen, setIsParticipantsOpen] = React.useState(false);
-  const bottomSheetRef = useRef<BottomSheetRef>(null);
-  const chatSheetRef = useRef<BottomSheetRef>(null);
-  const participantsSheetRef = useRef<BottomSheetRef>(null);
-  const settingsSheetRef = useRef<BottomSheetRef>(null);
-  const ToastComponentRender =
-    isMobileUA() && (isChatOpen || isSettingsOpen || isParticipantsOpen) ? (
-      <ToastComponent />
-    ) : (
-      <></>
-    );
-  const {sidePanel, setSidePanel} = useSidePanel();
-  const [showOverlay, setShowOverlay] = React.useState(false);
-  const handleSheetChanges = useCallback((index: number) => {
-    bottomSheetRef.current?.snapTo(({snapPoints}) => snapPoints[index]);
-    index === 0 ? setIsExpanded(false) : setIsExpanded(true);
-  }, []);
-
-  const root = document.documentElement;
-
-  useEffect(() => {
-    root.style.setProperty('--sheet-background', $config.CARD_LAYER_1_COLOR);
-    root.style.setProperty('--handle-background', $config.SEMANTIC_NEUTRAL);
-  }, []);
-
-  useEffect(() => {
-    if (isChatOpen || isSettingsOpen || isParticipantsOpen) {
-      setActionSheetVisible(true);
-    } else {
-      setActionSheetVisible(false);
-    }
-  }, [isChatOpen, isSettingsOpen, isParticipantsOpen]);
-
-  // updating on sidepanel changes
-  useEffect(() => {
-    switch (sidePanel) {
-      case SidePanelType.Participants: {
-        setIsParticipantsOpen(true);
-        break;
-      }
-      case SidePanelType.Chat: {
-        setIsChatOpen(true);
-        break;
-      }
-      case SidePanelType.Settings: {
-        setIsSettingsOpen(true);
-        break;
-      }
-      case SidePanelType.None: {
-        setIsChatOpen(false);
-        setIsParticipantsOpen(false);
-        setIsSettingsOpen(false);
-        handleSheetChanges(0);
-      }
-      default:
-    }
-  }, [sidePanel]);
-
-  function onDismiss() {
-    setSidePanel(SidePanelType.None);
-  }
-
-  const handleSpringStart = (event: SpringEvent) => {
-    if (event.type == 'SNAP') {
-      setShowOverlay(true); // as soon drag start show overlay
-    }
-  };
-  const handleSpringEnd = (event: SpringEvent) => {
-    if (event.type == 'SNAP') {
-      const isMinmized = bottomSheetRef.current.height === 100;
-      isMinmized && setShowOverlay(false);
-      if (event.source === 'dragging') {
-        if (isMinmized) {
-          setIsExpanded(false);
-        } else {
-          setIsExpanded(true);
-        }
-      }
-    }
-  };
-
-  const updateActionSheet = (
-    screenName: 'chat' | 'participants' | 'settings',
-  ) => {
-    switch (screenName) {
-      case 'chat':
-        setIsChatOpen(true);
-        break;
-      case 'participants':
-        setIsParticipantsOpen(true);
-        break;
-      case 'settings':
-        console.warn('settings selected');
-        setIsSettingsOpen(true);
-        break;
-      default:
-    }
-  };
-  return (
-    <>
-      {showOverlay && (
-        <TouchableWithoutFeedback
-          onPress={() => {
-            handleSheetChanges(0);
-          }}>
-          <View style={[styles.backDrop]} />
-        </TouchableWithoutFeedback>
-      )}
-      <View>
-        {/* Controls Action Sheet */}
-
-        <BottomSheet
-          scrollLocking={false}
-          ref={bottomSheetRef}
-          open={true}
-          onSpringStart={handleSpringStart}
-          onSpringEnd={handleSpringEnd}
-          // skipInitialTransition={true}
-          expandOnContentDrag={true}
-          snapPoints={({maxHeight}) => [100, 350]}
-          defaultSnap={({lastSnap, snapPoints}) =>
-            lastSnap ?? Math.min(...snapPoints)
-          }
-          header={
-            <>
-              <ActionSheetHandle sidePanel={SidePanelType.None} />
-              <Spacer size={12} />
-            </>
-          }
-          blocking={false}>
-          <ActionSheetContent
-            handleSheetChanges={handleSheetChanges}
-            isExpanded={isExpanded}
-          />
-        </BottomSheet>
-        {/* Chat  Action Sheet */}
-        <BottomSheet
-          sibling={ToastComponentRender}
-          ref={chatSheetRef}
-          onDismiss={onDismiss}
-          scrollLocking={false}
-          open={isChatOpen}
-          blocking={false}
-          expandOnContentDrag={false}
-          snapPoints={({maxHeight}) => [1 * maxHeight]}
-          header={<ActionSheetHandle sidePanel={SidePanelType.Chat} />}
-          defaultSnap={({lastSnap, snapPoints}) => snapPoints[0]}>
-          <Chat showHeader={false} />
-        </BottomSheet>
-        {/* Participants Action Sheet */}
-        <BottomSheet
-          sibling={ToastComponentRender}
-          ref={participantsSheetRef}
-          onDismiss={onDismiss}
-          open={isParticipantsOpen}
-          expandOnContentDrag={false}
-          snapPoints={({maxHeight}) => [1 * maxHeight]}
-          defaultSnap={({lastSnap, snapPoints}) => snapPoints[0]}
-          scrollLocking={false}
-          header={<ActionSheetHandle sidePanel={SidePanelType.Participants} />}
-          blocking={false}>
-          <ParticipantView showHeader={false} />
-        </BottomSheet>
-        {/* Settings  Action Sheet */}
-        <BottomSheet
-          sibling={ToastComponentRender}
-          ref={settingsSheetRef}
-          onDismiss={onDismiss}
-          open={isSettingsOpen}
-          expandOnContentDrag={false}
-          snapPoints={({maxHeight}) => [1 * maxHeight]}
-          defaultSnap={({lastSnap, snapPoints}) => snapPoints[0]}
-          header={<ActionSheetHandle sidePanel={SidePanelType.Settings} />}
-          blocking={false}>
-          <SettingsView showHeader={false} />
-        </BottomSheet>
-      </View>
-    </>
-  );
-};
-
-export default ActionSheet;
-
-const styles = StyleSheet.create({
-  container: {
-    borderWidth: 1,
-    borderColor: 'red',
-  },
-  content: {
-    borderWidth: 1,
-    borderColor: 'yellow',
-    flex: 1,
-  },
-  backDrop: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    opacity: 0.5,
-  },
-});