agora-appbuilder-core 4.1.10-beta.1 → 4.1.11

package/template/src/components/breakout-room/ui/BreakoutRoomActionMenu.tsx

@@ -1,136 +0,0 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the "Materials") are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.'s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-
-import React, {useState, useRef, useEffect} from 'react';
-import {View, useWindowDimensions} from 'react-native';
-import ActionMenu, {ActionMenuItem} from '../../../atoms/ActionMenu';
-import IconButton from '../../../atoms/IconButton';
-import {calculatePosition} from '../../../utils/common';
-import {useRoomInfo} from 'customization-api';
-
-interface RoomActionMenuProps {
-  onDeleteRoom: () => void;
-  onRenameRoom: () => void;
-}
-
-const BreakoutRoomActionMenu: React.FC<RoomActionMenuProps> = ({
-  onDeleteRoom,
-  onRenameRoom,
-}) => {
-  const [actionMenuVisible, setActionMenuVisible] = useState(false);
-  const [isPosCalculated, setIsPosCalculated] = useState(false);
-  const [modalPosition, setModalPosition] = useState({});
-  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  const moreIconRef = useRef(null);
-
-  const {
-    data: {isHost},
-  } = useRoomInfo();
-
-  // Build action menu items based on context
-  const actionMenuItems: ActionMenuItem[] = [];
-
-  //  ACTION - Only show for hosts
-  if (isHost) {
-    actionMenuItems.push({
-      order: 1,
-      icon: 'pencil-filled',
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.SECONDARY_ACTION_COLOR,
-      title: 'Rename Room',
-      onPress: () => {
-        onRenameRoom();
-        setActionMenuVisible(false);
-      },
-    });
-    actionMenuItems.push({
-      order: 2,
-      icon: 'delete',
-      iconColor: $config.SEMANTIC_ERROR,
-      textColor: $config.SEMANTIC_ERROR,
-      title: 'Delete Room',
-      onPress: () => {
-        onDeleteRoom();
-        setActionMenuVisible(false);
-      },
-    });
-  }
-
-  // Calculate position when menu becomes visible
-  useEffect(() => {
-    if (actionMenuVisible) {
-      moreIconRef?.current?.measure(
-        (
-          _fx: number,
-          _fy: number,
-          localWidth: number,
-          localHeight: number,
-          px: number,
-          py: number,
-        ) => {
-          const data = calculatePosition({
-            px,
-            py,
-            localWidth,
-            localHeight,
-            globalHeight,
-            globalWidth,
-          });
-          setModalPosition(data);
-          setIsPosCalculated(true);
-        },
-      );
-    }
-  }, [actionMenuVisible]);
-
-  // Don't render if no actions available
-  if (actionMenuItems.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <ActionMenu
-        from={'breakout-room-header-actions'}
-        actionMenuVisible={actionMenuVisible && isPosCalculated}
-        setActionMenuVisible={setActionMenuVisible}
-        modalPosition={modalPosition}
-        items={actionMenuItems}
-      />
-      <View
-        ref={moreIconRef}
-        collapsable={false}
-        style={{
-          width: 24,
-          height: 24,
-          alignSelf: 'center',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <IconButton
-          hoverEffect={false}
-          iconProps={{
-            iconType: 'plain',
-            name: 'more-menu',
-            iconSize: 20,
-            tintColor: $config.SECONDARY_ACTION_COLOR,
-          }}
-          onPress={() => {
-            setActionMenuVisible(true);
-          }}
-        />
-      </View>
-    </>
-  );
-};
-
-export default BreakoutRoomActionMenu;

package/template/src/components/breakout-room/ui/BreakoutRoomAnnouncementModal.tsx

@@ -1,135 +0,0 @@
-import React, {SetStateAction, Dispatch} from 'react';
-import {View, StyleSheet, TextInput} from 'react-native';
-import GenericModal from '../../common/GenericModal';
-import ThemeConfig from '../../../theme';
-import TertiaryButton from '../../../atoms/TertiaryButton';
-
-interface BreakoutRoomAnnouncementModalProps {
-  setModalOpen: Dispatch<SetStateAction<boolean>>;
-  onAnnouncement: (text: string) => void;
-}
-
-export default function BreakoutRoomAnnouncementModal(
-  props: BreakoutRoomAnnouncementModalProps,
-) {
-  const {setModalOpen, onAnnouncement} = props;
-  const [announcement, setAnnouncement] = React.useState('');
-
-  const disabled = announcement.trim() === '';
-
-  return (
-    <GenericModal
-      visible={true}
-      onRequestClose={() => setModalOpen(false)}
-      showCloseIcon={true}
-      title={'Announcement'}
-      cancelable={true}
-      contentContainerStyle={style.contentContainer}>
-      <View style={style.fullBody}>
-        <View style={style.mbody}>
-          <TextInput
-            id="annoucement-text"
-            style={style.inputBox}
-            value={announcement}
-            onChangeText={setAnnouncement}
-            placeholder="Make an announcement..."
-            placeholderTextColor={
-              $config.FONT_COLOR + ThemeConfig.EmphasisPlus.low
-            }
-            underlineColorAndroid="transparent"
-            numberOfLines={6}
-            multiline={true}
-          />
-        </View>
-        <View style={style.mfooter}>
-          <View>
-            <TertiaryButton
-              containerStyle={style.cancelBtn}
-              textStyle={style.actionBtnText}
-              text={'Cancel'}
-              onPress={() => {
-                setModalOpen(false);
-              }}
-            />
-          </View>
-          <View>
-            <TertiaryButton
-              containerStyle={disabled ? style.disabledSendBtn : style.sendBtn}
-              textStyle={style.actionBtnText}
-              text={'Send'}
-              disabled={disabled}
-              onPress={() => {
-                onAnnouncement(announcement);
-              }}
-            />
-          </View>
-        </View>
-      </View>
-    </GenericModal>
-  );
-}
-
-const style = StyleSheet.create({
-  contentContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    flexShrink: 0,
-    width: '100%',
-    maxWidth: 500,
-    height: 314,
-  },
-  fullBody: {
-    width: '100%',
-    height: '100%',
-    flex: 1,
-  },
-  mbody: {
-    padding: 12,
-    borderTopColor: $config.CARD_LAYER_3_COLOR,
-    borderTopWidth: 1,
-    borderBottomColor: $config.CARD_LAYER_3_COLOR,
-    borderBottomWidth: 1,
-  },
-  mfooter: {
-    padding: 12,
-    gap: 12,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-  inputBox: {
-    fontSize: ThemeConfig.FontSize.normal,
-    fontWeight: '400',
-    color: $config.FONT_COLOR,
-    padding: 20,
-    lineHeight: 20,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
-    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
-  },
-  actionBtnText: {
-    color: $config.SECONDARY_ACTION_COLOR,
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: 16,
-  },
-  cancelBtn: {
-    borderRadius: 4,
-    minWidth: 140,
-    borderColor: $config.SECONDARY_ACTION_COLOR,
-    backgroundColor: 'transparent',
-  },
-  sendBtn: {
-    borderRadius: 4,
-    minWidth: 140,
-    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-  },
-  disabledSendBtn: {
-    borderRadius: 4,
-    minWidth: 140,
-    backgroundColor: $config.SEMANTIC_NEUTRAL,
-  },
-});