agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/src/subComponents/ChatInput.tsx

@@ -9,16 +9,21 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {View, TouchableOpacity, StyleSheet, Image} from 'react-native';
 import ColorContext from '../components/ColorContext';
 import TextInput from '../atoms/TextInput';
-import icons from '../assets/icons';
 import {useString} from '../utils/useString';
 import {useChatMessages} from '../components/chat-messages/useChatMessages';
-import {isValidReactComponent} from '../utils/common';
+import {isValidReactComponent, isWebInternal} from '../utils/common';
 import {useCustomization} from 'customization-implementation';
-import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../components/chat-ui/useChatUIControls';
+import {useContent, useUserName} from 'customization-api';
+import ImageIcon from '../atoms/ImageIcon';
+import ThemeConfig from '../theme';
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -26,10 +31,11 @@ export interface ChatSendButtonProps {
 
 export const ChatSendButton = (props: ChatSendButtonProps) => {
   const {
-    selectedChatUserId: selectedUserId,
+    privateChatUser: selectedUserId,
     message,
     setMessage,
-  } = useChatUIControl();
+    inputActive,
+  } = useChatUIControls();
   const {sendChatMessage} = useChatMessages();
   const onPress = () => {
     if (!selectedUserId) {
@@ -43,13 +49,15 @@ export const ChatSendButton = (props: ChatSendButtonProps) => {
   return props?.render ? (
     props.render(onPress)
   ) : (
-    <TouchableOpacity style={style.chatInputButton} onPress={onPress}>
-      <Image
-        source={{
-          uri: icons.send,
-        }}
-        style={style.chatInputButtonIcon}
-        resizeMode={'contain'}
+    <TouchableOpacity style={[style.chatInputButton]} onPress={onPress}>
+      <ImageIcon
+        iconType="plain"
+        tintColor={
+          inputActive
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_NEUTRAL
+        }
+        name={'send'}
       />
     </TouchableOpacity>
   );
@@ -63,27 +71,39 @@ export interface ChatTextInputProps {
   ) => JSX.Element;
 }
 export const ChatTextInput = (props: ChatTextInputProps) => {
-  const {
-    selectedChatUserId: selectedUserId,
-    message,
-    setMessage,
-  } = useChatUIControl();
+  let chatInputRef = useRef(null);
+  const {privateChatUser, message, setMessage, inputActive, chatType} =
+    useChatUIControls();
   const {sendChatMessage} = useChatMessages();
+  const {defaultContent} = useContent();
   //commented for v1 release
   // const chatMessageInputPlaceholder = useString(
   //   'chatMessageInputPlaceholder',
   // )();
-  const chatMessageInputPlaceholder = 'Type your message..';
+  const [name] = useUserName();
+  const chatMessageInputPlaceholder =
+    chatType === ChatType.Private
+      ? `Private Message to ${defaultContent[privateChatUser].name}`
+      : `Chat publicly as ${name}...`;
   const onChangeText = (text: string) => setMessage(text);
   const onSubmitEditing = () => {
-    if (!selectedUserId) {
+    if (!privateChatUser) {
       sendChatMessage(message);
       setMessage('');
     } else {
-      sendChatMessage(message, selectedUserId);
+      sendChatMessage(message, privateChatUser);
       setMessage('');
     }
   };
+  const {setInputActive} = useChatUIControls();
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (isWebInternal()) {
+        chatInputRef?.current?.focus();
+      }
+    });
+  }, []);
 
   return props?.render ? (
     props.render(
@@ -94,23 +114,31 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     )
   ) : (
     <TextInput
+      setRef={(ref) => (chatInputRef.current = ref)}
+      onFocus={() => setInputActive(true)}
+      onBlur={() => setInputActive(false)}
       value={message}
       onChangeText={onChangeText}
       style={{
-        borderRadius: 10,
-        backgroundColor: $config.PRIMARY_FONT_COLOR + '10',
-        borderWidth: 1,
-        color: $config.PRIMARY_FONT_COLOR,
+        minHeight: 56,
+        borderRadius: 0,
+        borderBottomLeftRadius: 12,
+        borderWidth: 0,
+        color: $config.FONT_COLOR,
         textAlign: 'left',
-        height: 40,
-        paddingVertical: 10,
+        paddingVertical: 21,
+        paddingLeft: 20,
         flex: 1,
         alignSelf: 'center',
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        fontWeight: '400',
       }}
       blurOnSubmit={false}
       onSubmitEditing={onSubmitEditing}
       placeholder={chatMessageInputPlaceholder}
-      placeholderTextColor={$config.PRIMARY_FONT_COLOR}
+      placeholderTextColor={
+        $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+      }
       autoCorrect={false}
     />
   );
@@ -119,104 +147,33 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
 /**
  * Input component for the Chat interface
  */
-const ChatInput = (props: {
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
-}) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {ChatInputComponent, ChatSendButtonComponent} = useCustomization(
-    (data) => {
-      let components: {
-        ChatInputComponent: React.ComponentType<ChatTextInputProps>;
-        ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
-      } = {
-        ChatInputComponent: ChatTextInput,
-        ChatSendButtonComponent: ChatSendButton,
-      };
-      if (
-        data?.components?.videoCall &&
-        typeof data?.components?.videoCall === 'object'
-      ) {
-        if (
-          data?.components?.videoCall?.chat &&
-          typeof data?.components?.videoCall?.chat === 'object'
-        ) {
-          if (
-            data?.components?.videoCall?.chat?.chatInput &&
-            typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
-            isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
-          ) {
-            components.ChatInputComponent =
-              data?.components?.videoCall?.chat?.chatInput;
-          }
-          if (
-            data?.components?.videoCall?.chat?.chatSendButton &&
-            typeof data?.components?.videoCall?.chat?.chatSendButton !==
-              'object' &&
-            isValidReactComponent(
-              data?.components?.videoCall?.chat?.chatSendButton,
-            )
-          ) {
-            components.ChatSendButtonComponent =
-              data?.components?.videoCall?.chat?.chatSendButton;
-          }
-        }
-      } else {
-        if (props?.chatInput && isValidReactComponent(props.chatInput)) {
-          components.ChatInputComponent = props.chatInput;
-        }
-        if (
-          props?.chatSendButton &&
-          isValidReactComponent(props.chatSendButton)
-        ) {
-          components.ChatSendButtonComponent = props.chatSendButton;
-        }
-      }
-      return components;
-    },
-  );
-
+export const ChatInput = () => {
+  const {inputActive} = useChatUIControls();
   return (
-    <View style={[style.inputView, {borderColor: primaryColor, height: 40}]}>
-      <ChatInputComponent />
-      <ChatSendButtonComponent />
+    <View style={[style.inputView, inputActive ? style.inputActiveView : {}]}>
+      <ChatTextInput />
+      <ChatSendButton />
     </View>
   );
 };
 
 const style = StyleSheet.create({
-  inputView: {
-    width: '95%',
-    flexDirection: 'row',
-    marginHorizontal: 10,
-    paddingVertical: 15,
+  inputActiveView: {
+    borderTopWidth: 1,
+    borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
   },
-  chatInput: {
+  inputView: {
     flex: 1,
-    width: '100%',
-    backgroundColor: $config.PRIMARY_FONT_COLOR,
-    color: $config.PRIMARY_FONT_COLOR,
+    flexDirection: 'row',
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    borderTopWidth: 1,
+    borderTopColor: 'transparent',
   },
   chatInputButton: {
-    width: 30,
-    marginRight: 0,
-    height: 30,
-    borderRadius: 30,
-    alignSelf: 'center',
-    marginHorizontal: 10,
-    backgroundColor: $config.PRIMARY_COLOR,
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  chatInputButtonIcon: {
-    width: '80%',
-    height: '80%',
+    flex: 0.1,
+    borderBottomRightRadius: 12,
     alignSelf: 'center',
-    transform: [
-      {
-        translateX: -2,
-      },
-    ],
+    marginRight: 16,
   },
 });
 export default ChatInput;

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

@@ -11,6 +11,7 @@
 */
 import React, {useContext} from 'react';
 import CheckBox from '@react-native-community/checkbox';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 /**
  * A checkbox component for mobile
@@ -24,12 +25,22 @@ const Checkbox = (props: any) => {
       onValueChange={setUrlCheckbox}
       disabled={props?.disabled}
       tintColors={{
-        true: props?.disabled ? 'grey' : $config.PRIMARY_COLOR,
-        false: props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80,
+        true: props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR,
+        false: props?.disabled
+          ? 'grey'
+          : $config.FONT_COLOR + hexadecimalTransparency['80%'],
       }}
-      tintColor={props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80}
-      onCheckColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
-      onTintColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
+      tintColor={
+        props?.disabled
+          ? 'grey'
+          : $config.FONT_COLOR + hexadecimalTransparency['80%']
+      }
+      onCheckColor={
+        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+      }
+      onTintColor={
+        props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+      }
     />
   );
 };

package/template/src/subComponents/Checkbox.tsx

@@ -26,8 +26,8 @@ const Checkbox = (props: any) => {
       value={urlCheckbox}
       onValueChange={setUrlCheckbox}
       //@ts-ignore Color prop exists on react-native-web but it not present in @react-native-community/checkbox
-      color={primaryColor}
-      style={styles.check}
+      color={props.color ?? primaryColor}
+      style={{...styles.check, ...props.style}}
     />
   );
 };

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -10,80 +10,58 @@
 *********************************************
 */
 import React, {useEffect} from 'react';
-import {StyleSheet} from 'react-native';
 import {useParams} from '../components/Router';
-import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
-import {useString} from '../utils/useString';
 import useGetMeetingPhrase from '../utils/useGetMeetingPhrase';
-import {
-  SHARE_LINK_CONTENT_TYPE,
-  useShareLink,
-} from '../components/useShareLink';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
-import Styles from '../components/styles';
+import TertiaryButton from '../atoms/TertiaryButton';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useVideoCall} from '../components/useVideoCall';
 
 export interface CopyJoinInfoProps {
-  showText?: boolean;
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  showLabel?: boolean;
+  showTeritaryButton?: boolean;
+  render?: (onPress: () => void) => JSX.Element;
+  isOnActionSheet?: boolean;
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
-  const {phrase} = useParams<{phrase: string}>();
-  const getMeeting = useGetMeetingPhrase();
-  const {copyShareLinkToClipboard} = useShareLink();
+  const {
+    showLabel = $config.ICON_TEXT || false,
+    showTeritaryButton = false,
+    isOnActionSheet = false,
+  } = props;
   //commented for v1 release
   //const copyMeetingInviteButton = useString('copyMeetingInviteButton')();
-  const copyMeetingInviteButton = 'Copy Meeting Invite';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
-  useEffect(() => {
-    getMeeting(phrase);
-  }, [phrase]);
+  const copyMeetingInviteButton = 'Invite';
+  const {setShowInvitePopup} = useVideoCall();
 
-  const onPress = () =>
-    copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
-  let btnTemplateProps: BtnTemplateInterface = {
+  const onPress = () => {
+    setShowInvitePopup(true);
+  };
+  let iconButtonProps: IconButtonProps = {
     onPress: onPress,
-    name: 'clipboard',
+    iconProps: {
+      name: 'share',
+      tintColor: $config.SECONDARY_ACTION_COLOR,
+    },
+    btnTextProps: {
+      textColor: $config.FONT_COLOR,
+      text: showLabel ? copyMeetingInviteButton : '',
+    },
   };
-  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-    btnTemplateProps.btnText = copyMeetingInviteButton;
-    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-  } else {
-    btnTemplateProps.color = $config.PRIMARY_FONT_COLOR;
-    btnTemplateProps.style = style.backButton;
-    btnTemplateProps.btnText = props.showText ? copyMeetingInviteButton : '';
-  }
+
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
-    props.render(onPress, buttonTemplateName)
+    props.render(onPress)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <>
+      {showTeritaryButton ? (
+        <TertiaryButton text="Invite" onPress={onPress} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
+    </>
   );
 };
 
-const style = StyleSheet.create({
-  backButton: {
-    // marginLeft: 5,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignSelf: 'center',
-    width: 28,
-    height: 20,
-  },
-  backIcon: {
-    width: 28,
-    height: 20,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-});
-
 export default CopyJoinInfo;

package/template/src/subComponents/EndcallPopup.tsx

@@ -0,0 +1,107 @@
+import React, {SetStateAction, useContext} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../atoms/Spacer';
+import Popup from '../atoms/Popup';
+import TertiaryButton from '../atoms/TertiaryButton';
+import PrimaryButton from '../atoms/PrimaryButton';
+import ThemeConfig from '../theme';
+import {useIsDesktop} from '../utils/common';
+
+interface EndcallPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  endCall: () => void;
+}
+const EndcallPopup = (props: EndcallPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const leaveMeetingLabelHeading = 'Leave Room?';
+  const leaveMeetingLabelSubHeading =
+    'Are you sure you want to leave this room?';
+
+  const stayBtnLabel = 'CANCEL';
+  const leaveBtnLabel = 'LEAVE';
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{leaveMeetingLabelHeading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{leaveMeetingLabelSubHeading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            text={stayBtnLabel}
+            textStyle={styles.btnText}
+            onPress={() => props.setModalVisible(false)}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 1}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            text={leaveBtnLabel}
+            textStyle={styles.btnText}
+            onPress={props.endCall}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default EndcallPopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  contentContainer: {
+    padding: 24,
+    minWidth: 342,
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+  },
+});