agora-appbuilder-core 4.0.13 → 4.0.15

package/template/src/subComponents/ChatInput.native.tsx

@@ -1,269 +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, {useContext, useEffect, useRef} from 'react';
-import {
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  Image,
-  Text,
-  TextInput,
-} from 'react-native';
-import {useString} from '../utils/useString';
-import {ChatEmojiPicker, ChatEmojiButton} from './chat/ChatEmoji';
-
-import {
-  ChatType,
-  UploadStatus,
-  useChatUIControls,
-  MIN_HEIGHT,
-  MAX_HEIGHT,
-  LINE_HEIGHT,
-  MAX_TEXT_MESSAGE_SIZE,
-} from '../components/chat-ui/useChatUIControls';
-import {useContent, useRoomInfo, useUserName} from 'customization-api';
-import ImageIcon from '../atoms/ImageIcon';
-import ThemeConfig from '../theme';
-import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
-import {
-  groupChatMeetingInputPlaceHolderText,
-  groupChatLiveInputPlaceHolderText,
-  privateChatInputPlaceHolderText,
-  chatSendErrorTextSizeToastHeading,
-  chatSendErrorTextSizeToastSubHeading,
-} from '../language/default-labels/videoCallScreenLabels';
-import ChatSendButton from './chat/ChatSendButton';
-import {ChatAttachmentButton} from './chat/ChatAttachment';
-import {useChatConfigure} from '../components/chat/chatConfigure';
-import {
-  ChatMessageType,
-  SDKChatType,
-} from '../components/chat-messages/useChatMessages';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import ChatUploadStatus from './chat/ChatUploadStatus';
-import {isAndroid} from '../utils/common';
-import Toast from '../../react-native-toast-message';
-
-export interface ChatSendButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-const ChatPanel = () => {
-  return (
-    <View style={style.chatPanelContainer}>
-      <View style={style.chatPanel}>
-        <ChatAttachmentButton />
-        {/* <ChatEmojiButton /> */}
-      </View>
-      <ChatSendButton />
-    </View>
-  );
-};
-
-export interface ChatTextInputProps {
-  render?: (
-    message: string,
-    onChangeText: (text: string) => void,
-    onSubmitEditing: () => void,
-    chatMessageInputPlaceholder: string,
-  ) => JSX.Element;
-}
-export const ChatTextInput = (props: ChatTextInputProps) => {
-  const {
-    privateChatUser,
-    message,
-    setMessage,
-    chatType,
-    inputActive,
-    uploadStatus,
-    inputHeight,
-    setInputHeight,
-  } = useChatUIControls();
-
-  const {defaultContent} = useContent();
-  const {sendChatSDKMessage} = useChatConfigure();
-  const {data} = useRoomInfo();
-  const [name] = useUserName();
-  const groupChatInputPlaceHolder = $config.EVENT_MODE
-    ? useString(groupChatLiveInputPlaceHolderText)
-    : useString(groupChatMeetingInputPlaceHolderText);
-  const privateChatInputPlaceHolder = useString(
-    privateChatInputPlaceHolderText,
-  );
-
-  // React.useEffect(() => {
-  //   if (message.length === 0) {
-  //     setInputHeight(MIN_HEIGHT);
-  //   }
-  // }, [message]);
-
-  const isUploadStatusShown =
-    uploadStatus === UploadStatus.IN_PROGRESS ||
-    uploadStatus === UploadStatus.FAILURE;
-
-  const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
-  const errorSubHeadingSize = useString(chatSendErrorTextSizeToastSubHeading);
-
-  const handleContentSizeChange = ({
-    nativeEvent: {
-      contentSize: {width, height},
-    },
-  }) => {
-    const lines = Math.floor(height / LINE_HEIGHT);
-    const newHeight = lines < 5 ? LINE_HEIGHT * lines + 24 + 2 : MAX_HEIGHT; // Assuming lineHeight is LINE_HEIGHT
-    message.length && setInputHeight(newHeight);
-  };
-
-  const chatMessageInputPlaceholder =
-    chatType === ChatType.Private
-      ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
-      : groupChatInputPlaceHolder(name);
-  const onChangeText = (text: string) => setMessage(text);
-  const onSubmitEditing = () => {
-    if (message.length === 0) return;
-
-    if (message.length >= MAX_TEXT_MESSAGE_SIZE * 1024) {
-      Toast.show({
-        leadingIconName: 'alert',
-        type: 'error',
-        text1: toastHeadingSize,
-        text2: errorSubHeadingSize(MAX_TEXT_MESSAGE_SIZE.toString()),
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
-      });
-      return;
-    }
-
-    const groupID = data.chat.group_id;
-    const option = {
-      chatType: privateChatUser
-        ? SDKChatType.SINGLE_CHAT
-        : SDKChatType.GROUP_CHAT,
-      type: ChatMessageType.TXT,
-      from: data.uid.toString(),
-      to: privateChatUser ? privateChatUser.toString() : groupID,
-      msg: message,
-    };
-    sendChatSDKMessage(option);
-    setInputHeight(MIN_HEIGHT);
-    setMessage('');
-  };
-  const {setInputActive} = useChatUIControls();
-
-  const TextInputComponent = isAndroid() ? TextInput : BottomSheetTextInput;
-
-  return props?.render ? (
-    props.render(
-      message,
-      onChangeText,
-      onSubmitEditing,
-      chatMessageInputPlaceholder,
-    )
-  ) : (
-    <TextInputComponent
-      onFocus={() => setInputActive(true)}
-      onBlur={() => setInputActive(false)}
-      value={message}
-      onChangeText={onChangeText}
-      multiline={true}
-      textAlignVertical="top"
-      style={{
-        color: $config.FONT_COLOR,
-        textAlign: 'left',
-        width: '100%',
-        alignSelf: 'center',
-        fontFamily: ThemeConfig.FontFamily.sansPro,
-        fontWeight: '400',
-        height: inputHeight,
-        paddingRight: 0,
-        paddingLeft: 12,
-        paddingTop: 12,
-        paddingBottom: 12,
-        fontSize: ThemeConfig.FontSize.small,
-        lineHeight: LINE_HEIGHT,
-        borderWidth: 1,
-        borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['8%'],
-        backgroundColor: $config.CARD_LAYER_2_COLOR,
-        borderRadius: 8,
-        borderTopRightRadius: isUploadStatusShown ? 0 : 8,
-        borderTopLeftRadius: isUploadStatusShown ? 0 : 8,
-        maxHeight: MAX_HEIGHT,
-        overflow: 'scroll',
-      }}
-      blurOnSubmit={false}
-      onSubmitEditing={onSubmitEditing}
-      placeholder={chatMessageInputPlaceholder}
-      placeholderTextColor={
-        $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
-      }
-      autoCorrect={false}
-      onContentSizeChange={handleContentSizeChange}
-    />
-  );
-};
-
-/**
- * Input component for the Chat interface
- */
-const ChatInput = () => {
-  const {inputActive, showEmojiPicker} = useChatUIControls();
-  return (
-    <View
-      style={[
-        style.inputContainer,
-        showEmojiPicker
-          ? {backgroundColor: 'transparent'}
-          : {backgroundColor: $config.CARD_LAYER_1_COLOR},
-        // inputActive ? style.inputActiveView : {},
-      ]}>
-      {showEmojiPicker && <ChatEmojiPicker />}
-      <View style={style.inputView}>
-        <ChatUploadStatus />
-        <ChatTextInput />
-        <ChatPanel />
-      </View>
-    </View>
-  );
-};
-
-const style = StyleSheet.create({
-  inputActiveView: {
-    borderTopWidth: 1,
-    borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-  },
-  inputContainer: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-
-  inputView: {
-    flexDirection: 'column',
-    borderTopWidth: 1,
-    borderTopColor: 'transparent',
-    paddingHorizontal: 12,
-    paddingBottom: 8,
-  },
-
-  chatPanelContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    height: 36,
-    paddingTop: 4,
-  },
-  chatPanel: {
-    flexDirection: 'row',
-  },
-});
-export default ChatInput;

package/template/src/subComponents/chat/ChatActionMenu.tsx

@@ -1,224 +0,0 @@
-import {StyleSheet, Text, useWindowDimensions, View} from 'react-native';
-import React from 'react';
-import {calculatePosition, isMobileUA, trimText} from '../../utils/common';
-import IconButton from '../../atoms/IconButton';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import ActionMenu, {ActionMenuItem} from '../../../src/atoms/ActionMenu';
-import {useRoomInfo} from '../../components/room-info/useRoomInfo';
-import {useChatConfigure} from '../../components/chat/chatConfigure';
-import Clipboard from '../../subComponents/Clipboard';
-import {useString} from '../../utils/useString';
-import {
-  chatActionMenuCopyLinkText,
-  chatActionMenuDownloadText,
-  chatActionMenuDeleteText,
-  chatMessageDeleteConfirmBtnText,
-  chatPublicMessageDeletePopupText,
-  chatPrivateMessageDeletePopupText,
-} from '../../language/default-labels/videoCallScreenLabels';
-import {
-  SDKChatType,
-  useChatMessages,
-} from '../../components/chat-messages/useChatMessages';
-import InlinePopup from '../../../src/atoms/InlinePopup';
-import {cancelText} from '../../language/default-labels/commonLabels';
-import {useContent} from 'customization-api';
-
-interface MoreMenuProps {
-  setActionMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-interface CaptionsActionMenuProps {
-  actionMenuVisible: boolean;
-  setActionMenuVisible: (actionMenuVisible: boolean) => void;
-  btnRef: React.RefObject<View>;
-  fileName: string;
-  fileUrl: string;
-  msgId: string;
-  privateChatUser: number;
-  isLocal: boolean;
-}
-
-export const ChatActionMenu = (props: CaptionsActionMenuProps) => {
-  const {
-    actionMenuVisible,
-    setActionMenuVisible,
-    btnRef,
-    fileName,
-    fileUrl,
-    msgId,
-    privateChatUser,
-    isLocal,
-  } = props;
-
-  const actionMenuitems: ActionMenuItem[] = [];
-  const [modalPosition, setModalPosition] = React.useState({});
-  const [isPosCalculated, setIsPosCalculated] = React.useState(false);
-  const [showDeleteMessageModal, setShowDeleteMessageModal] =
-    React.useState(false);
-  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  const {downloadAttachment, deleteAttachment} = useChatConfigure();
-  const {removeMessageFromPrivateStore, removeMessageFromStore} =
-    useChatMessages();
-  const {defaultContent} = useContent();
-
-  const {
-    data: {isHost, chat},
-  } = useRoomInfo();
-
-  const groupID = chat.group_id;
-  const chatType = privateChatUser
-    ? SDKChatType.SINGLE_CHAT
-    : SDKChatType.GROUP_CHAT;
-  const recallFromUser = privateChatUser ? privateChatUser : groupID;
-  const cancelTxt = useString(cancelText)();
-  const cancelLabel =
-    cancelTxt.charAt(0).toUpperCase() + cancelTxt.slice(1).toLowerCase();
-  const confirmLabel = useString(chatMessageDeleteConfirmBtnText)();
-  let message = '';
-  if (chatType === SDKChatType.GROUP_CHAT) {
-    message = useString(chatPublicMessageDeletePopupText)();
-  }
-  if (chatType === SDKChatType.SINGLE_CHAT) {
-    message = useString(chatPrivateMessageDeletePopupText)(
-      trimText(defaultContent[recallFromUser]?.name),
-    );
-  }
-
-  actionMenuitems.push({
-    icon: 'download',
-    iconColor: $config.SECONDARY_ACTION_COLOR,
-    textColor: $config.FONT_COLOR,
-    title: useString(chatActionMenuDownloadText)(),
-    callback: () => {
-      downloadAttachment(fileName, fileUrl);
-      setActionMenuVisible(false);
-    },
-  });
-
-  actionMenuitems.push({
-    icon: 'clipboard',
-    iconColor: $config.SECONDARY_ACTION_COLOR,
-    textColor: $config.FONT_COLOR,
-    title: useString(chatActionMenuCopyLinkText)(),
-    callback: () => {
-      Clipboard.setString(fileUrl);
-      setActionMenuVisible(false);
-    },
-  });
-  actionMenuitems.push({
-    icon: 'delete',
-    iconColor: $config.SEMANTIC_ERROR,
-    textColor: $config.SEMANTIC_ERROR,
-    iconSize: 24,
-    title: useString(chatActionMenuDeleteText)(),
-    callback: () => {
-      if (isLocal) {
-        // confirm dialog : user is deleting for all
-        setShowDeleteMessageModal(true);
-        //deleteAttachment(msgId, recallFromUser.toString(), chatType);
-      } else {
-        if (chatType === SDKChatType.SINGLE_CHAT) {
-          removeMessageFromPrivateStore(msgId, isLocal);
-        }
-        if (chatType === SDKChatType.GROUP_CHAT) {
-          removeMessageFromStore(msgId, isLocal);
-        }
-      }
-      setActionMenuVisible(false);
-    },
-  });
-
-  React.useEffect(() => {
-    if (actionMenuVisible) {
-      //getting btnRef x,y
-      btnRef?.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]);
-  return (
-    <>
-      {isLocal ? (
-        <InlinePopup
-          actionMenuVisible={showDeleteMessageModal}
-          setActionMenuVisible={setShowDeleteMessageModal}
-          modalPosition={modalPosition}
-          message={message}
-          cancelLabel={cancelLabel}
-          cancelLabelStyle={{color: $config.SECONDARY_ACTION_COLOR}}
-          confirmLabel={confirmLabel}
-          confirmLabelStyle={{color: $config.SEMANTIC_ERROR}}
-          onConfirmClick={() => {
-            deleteAttachment(msgId, recallFromUser.toString(), chatType);
-            if (chatType === SDKChatType.SINGLE_CHAT) {
-              removeMessageFromPrivateStore(msgId, isLocal);
-            }
-            if (chatType === SDKChatType.GROUP_CHAT) {
-              removeMessageFromStore(msgId, isLocal);
-            }
-            setShowDeleteMessageModal(false);
-          }}
-        />
-      ) : (
-        <></>
-      )}
-      <ActionMenu
-        from={'chat'}
-        actionMenuVisible={actionMenuVisible && isPosCalculated}
-        setActionMenuVisible={setActionMenuVisible}
-        modalPosition={modalPosition}
-        items={actionMenuitems}
-      />
-    </>
-  );
-};
-
-export const MoreMenu = React.forwardRef<View, MoreMenuProps>((props, ref) => {
-  const {setActionMenuVisible} = props;
-  const isMobile = isMobileUA();
-  return (
-    <View ref={ref} collapsable={false}>
-      <IconButton
-        hoverEffect={true}
-        hoverEffectStyle={{
-          backgroundColor:
-            $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['25%'],
-          borderRadius: 18,
-        }}
-        iconProps={{
-          iconType: 'plain',
-          name: 'more-menu',
-          iconSize: 18,
-          tintColor: $config.SECONDARY_ACTION_COLOR,
-          iconContainerStyle: {
-            padding: 4,
-            borderRadius: 18,
-          },
-        }}
-        onPress={() => {
-          setActionMenuVisible(true);
-        }}
-      />
-    </View>
-  );
-});
-
-const styles = StyleSheet.create({});