agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/atoms/InlinePopup.tsx

@@ -0,0 +1,185 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  TouchableOpacity,
+  useWindowDimensions,
+  TextStyle,
+} from 'react-native';
+import React, {SetStateAction} from 'react';
+
+import {isMobileOrTablet} from 'customization-api';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import PlatformWrapper from '../../src/utils/PlatformWrapper';
+import Spacer from './Spacer';
+import ThemeConfig from '../../src/theme';
+
+interface InlinePopupProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
+  modalPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  onConfirmClick: () => void;
+  message: string;
+  cancelLabel: string;
+  confirmLabel: string;
+  cancelLabelStyle?: TextStyle;
+  confirmLabelStyle?: TextStyle;
+}
+
+const InlinePopup = (props: InlinePopupProps) => {
+  const {
+    actionMenuVisible,
+    setActionMenuVisible,
+    modalPosition,
+    message,
+    cancelLabel,
+    confirmLabel,
+    onConfirmClick,
+    cancelLabelStyle = {},
+    confirmLabelStyle = {},
+  } = props;
+  const {height} = useWindowDimensions();
+  return (
+    <View>
+      <Modal
+        testID="action-menu"
+        animationType="none"
+        transparent={true}
+        visible={actionMenuVisible}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            setActionMenuVisible(false);
+          }}>
+          <View
+            style={[
+              styles.backDrop,
+              isMobileOrTablet()
+                ? {
+                    backgroundColor:
+                      $config.HARD_CODED_BLACK_COLOR +
+                      hexadecimalTransparency['50%'],
+                  }
+                : {},
+            ]}
+          />
+        </TouchableWithoutFeedback>
+        <View
+          style={
+            isMobileOrTablet()
+              ? [styles.modalViewUA, {marginTop: height / 3}]
+              : [styles.modalView, modalPosition]
+          }>
+          <View style={styles.container}>
+            <Text style={styles.messageStyle}>{message}</Text>
+            <View style={styles.btnContainer}>
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={() => setActionMenuVisible(false)}>
+                      <Text style={[styles.btnText, cancelLabelStyle]}>
+                        {cancelLabel}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+              <Spacer size={8} horizontal={true} />
+              <PlatformWrapper>
+                {(isHovered: boolean) => {
+                  return (
+                    <TouchableOpacity
+                      style={isHovered ? styles.onHoverBtnStyle : {}}
+                      onPress={onConfirmClick}>
+                      <Text style={[styles.btnText, confirmLabelStyle]}>
+                        {confirmLabel}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                }}
+              </PlatformWrapper>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default InlinePopup;
+
+const styles = StyleSheet.create({
+  onHoverBtnStyle: {
+    backgroundColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: 8,
+  },
+  container: {
+    paddingHorizontal: 12,
+    paddingTop: 24,
+    paddingBottom: 14,
+  },
+  messageStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.FONT_COLOR,
+    paddingBottom: 18,
+  },
+  btnText: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.normal,
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  modalView: {
+    position: 'absolute',
+    width: 290,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  modalViewUA: {
+    alignSelf: 'center',
+    maxWidth: '80%',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderRadius: 4,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    zIndex: 1,
+    elevation: 1,
+  },
+  backDrop: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/template/src/atoms/Input.tsx

@@ -0,0 +1,87 @@
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TextInputProps,
+  View,
+  Platform,
+  TextStyle,
+} from 'react-native';
+import React from 'react';
+import Spacer from './Spacer';
+import ThemeConfig from '../theme';
+
+interface InputProps extends TextInputProps {
+  helpText?: string;
+  label?: string;
+  labelStyle?: TextStyle;
+  autoFocus?: boolean;
+}
+const Input = (props: InputProps) => {
+  const {style, labelStyle, helpText, label, autoFocus, ...otherProps} = props;
+  const [isFocussed, setIsFocussed] = React.useState(() =>
+    autoFocus ? true : false,
+  );
+  return (
+    <>
+      {label ? (
+        <>
+          <Text style={[styles.label, labelStyle]}>{label}</Text>
+          <Spacer size={8} />
+        </>
+      ) : (
+        <></>
+      )}
+
+      <TextInput
+        style={[
+          styles.input,
+          style,
+          // {borderColor: isFocussed ? $config.FONT_COLOR : '#666666'},
+        ]}
+        placeholderTextColor={
+          $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+        }
+        autoCorrect={false}
+        // autoFocus
+        {...otherProps}
+        // onFocus={() => setIsFocussed(true)}
+        // onBlur={() => setIsFocussed(false)}
+      />
+      {/* {helpText && <Text style={styles.helpText}>{props.helpText}</Text>} */}
+    </>
+  );
+};
+
+export default Input;
+
+const styles = StyleSheet.create({
+  input: {
+    // height: 60, //causes text cut off in android
+    width: '100%',
+    borderWidth: 1,
+    paddingVertical: 21,
+    paddingHorizontal: 16,
+    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+    color: $config.FONT_COLOR,
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.medium,
+    borderRadius: ThemeConfig.BorderRadius.medium,
+    ...Platform.select({
+      web: {
+        outlineStyle: 'none',
+      },
+    }),
+  },
+  label: {
+    fontWeight: '600',
+    fontSize: ThemeConfig.FontSize.medium,
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+  helpText: {
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+});

package/template/src/atoms/InviteInfo.tsx

@@ -0,0 +1,166 @@
+import {StyleSheet, Text, View} from 'react-native';
+import isSDKCheck from '../utils/isSDK';
+import platform from '../subComponents/Platform';
+import {useRoomInfo} from '../components/room-info/useRoomInfo';
+import {
+  SHARE_LINK_CONTENT_TYPE,
+  useShareLink,
+} from '../components/useShareLink';
+import Spacer from './Spacer';
+
+import React from 'react';
+import IconButton from './IconButton';
+
+const InviteInfo = () => {
+  const meetingUrlText = 'Room Link';
+  const meetingIdText = 'Room ID';
+  const hostIdText = 'Host ID';
+  const attendeeUrlLabel = 'Attendee Link';
+  const attendeeIdLabel = 'Attendee ID';
+  const hostUrlLabel = 'Host Link';
+  const pstnLabel = 'PSTN';
+  const pstnNumberLabel = 'Number';
+  const pinLabel = 'Pin';
+  const urlWeb = {wordBreak: 'break-all'};
+
+  const {copyShareLinkToClipboard, getShareLink} = useShareLink();
+  const {
+    data: {isSeparateHostLink},
+  } = useRoomInfo();
+
+  const isSDK = isSDKCheck();
+  const isWeb = $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
+  const getAttendeeLabel = () => (isWeb ? attendeeUrlLabel : attendeeIdLabel);
+  const getHostLabel = () => {
+    if (isSeparateHostLink) {
+      if (isWeb) {
+        return hostUrlLabel;
+      }
+      return hostIdText;
+    } else {
+      if (isWeb) {
+        return meetingUrlText;
+      }
+      return meetingIdText;
+    }
+  };
+  return (
+    <>
+      {isSeparateHostLink ? (
+        <>
+          <Text style={style.urlTitle}>{getAttendeeLabel()}</Text>
+          <View style={style.urlContainer}>
+            <View style={{width: '90%'}}>
+              <View style={style.urlHolder}>
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
+                  {getShareLink(SHARE_LINK_CONTENT_TYPE.ATTENDEE)}
+                </Text>
+              </View>
+            </View>
+            <View
+              style={{
+                marginLeft: 'auto',
+                flexDirection: 'row',
+                alignSelf: 'center',
+              }}>
+              <IconButton
+                iconProps={{
+                  name: 'clipboard',
+                }}
+                onPress={() =>
+                  copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.ATTENDEE)
+                }
+              />
+              {/* </View> */}
+            </View>
+          </View>
+          <Text style={style.helpText}>
+            Copy the invite and share it with attendees you want to invite.
+          </Text>
+          <Spacer size={20} />
+        </>
+      ) : (
+        <></>
+      )}
+      <>
+        <Text style={style.urlTitle}>{getHostLabel()}</Text>
+        <View style={style.urlContainer}>
+          <View style={{width: '90%'}}>
+            <View style={style.urlHolder}>
+              <Text
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={[style.url, isWeb ? urlWeb : {opacity: 1}]}>
+                {getShareLink(SHARE_LINK_CONTENT_TYPE.HOST)}
+              </Text>
+            </View>
+          </View>
+
+          <View
+            style={{
+              marginLeft: 'auto',
+              flexDirection: 'row',
+              alignSelf: 'center',
+            }}>
+            <IconButton
+              iconProps={{
+                name: 'clipboard',
+                tintColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+              }}
+              onPress={() =>
+                copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.HOST)
+              }
+            />
+          </View>
+        </View>
+        <Text style={style.helpText}>
+          Copy the invite and share it with other co-hosts you want to invite
+        </Text>
+      </>
+    </>
+  );
+};
+
+export default InviteInfo;
+
+const style = StyleSheet.create({
+  urlContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#F2F2F2',
+    paddingVertical: 22,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  urlTitle: {
+    color: $config.FONT_COLOR,
+    fontSize: 18,
+    fontWeight: '600',
+    fontFamily: 'Source Sans Pro',
+    textAlign: 'left',
+    marginBottom: 8,
+  },
+  urlHolder: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 30,
+  },
+  helpText: {
+    color: '#CCCCCC',
+    marginTop: 10,
+    fontSize: 14,
+    fontWeight: '400',
+    fontFamily: 'Source Sans Pro',
+  },
+  url: {
+    color: $config.FONT_COLOR,
+    fontSize: 14,
+    fontWeight: '600',
+    fontFamily: 'Source Sans Pro',
+  },
+});

package/template/src/atoms/LinkButton.tsx

@@ -0,0 +1,29 @@
+import {StyleSheet, Text, TouchableOpacity, TextStyle} from 'react-native';
+import React from 'react';
+import ThemeConfig from '../theme';
+
+interface LinkButtonProps {
+  onPress: () => void;
+  text: string;
+  textStyle?: TextStyle;
+}
+
+const LinkButton = ({onPress, text, textStyle = {}}: LinkButtonProps) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Text style={[styles.text, textStyle]}> {text} </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default LinkButton;
+
+const styles = StyleSheet.create({
+  text: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.normal,
+    lineHeight: ThemeConfig.FontSize.normal,
+  },
+});

package/template/src/atoms/MeetingLink.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {
+  SHARE_LINK_CONTENT_TYPE,
+  useShareLink,
+} from '../components/useShareLink';
+import platform from '../subComponents/Platform';
+import Spacer from './Spacer';
+import isSDKCheck from '../utils/isSDK';
+import ClipboardIconButton from './ClipboardIconButton';
+import ThemeConfig, {FontSizes} from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+interface MeetingLinkStyleProps {
+  size?: keyof FontSizes;
+  linkFontSize?: keyof FontSizes;
+  variant?: 'primary' | 'secondary';
+}
+
+interface MeetingLinkProps {
+  label: string;
+  link: SHARE_LINK_CONTENT_TYPE | string;
+  linkToCopy?: SHARE_LINK_CONTENT_TYPE;
+  helperText?: string;
+  styleProps?: MeetingLinkStyleProps;
+  gutterBottom?: boolean;
+}
+const urlWeb = {wordBreak: 'break-all'};
+
+const MeetingLink = (props: MeetingLinkProps) => {
+  const {
+    label = '',
+    link,
+    helperText = '',
+    linkToCopy,
+    styleProps = {
+      size: 'medium',
+      variant: 'primary',
+    },
+    gutterBottom = false,
+  } = props;
+
+  const style = useStyles(styleProps);
+
+  const {getShareLink} = useShareLink();
+
+  const isSDK = isSDKCheck();
+  const isWebCheck =
+    $config.FRONTEND_ENDPOINT || (platform === 'web' && !isSDK);
+
+  return (
+    <>
+      {label ? <Text style={style.label}>{label}</Text> : <></>}
+      <Spacer size={5} />
+      <View style={style.linkContainer}>
+        <View style={style.linkTextBox}>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={[
+              style.linkText,
+              //@ts-ignore
+              isWebCheck ? urlWeb : {opacity: 1},
+            ]}>
+            {link}
+          </Text>
+        </View>
+        <ClipboardIconButton text={linkToCopy} variant="secondary" size={20} />
+      </View>
+      {helperText && (
+        <>
+          <Text style={style.linkHelperText}>{helperText}</Text>{' '}
+        </>
+      )}
+      {gutterBottom && <Spacer size={25} />}
+    </>
+  );
+};
+
+export default MeetingLink;
+
+const useStyles = (styleProps: MeetingLinkStyleProps) => {
+  let customStyles = {
+    label: {},
+    linkTextBox: {},
+    linkText: {},
+    linkContainer: {},
+  };
+  if (styleProps.size === 'tiny') {
+    customStyles.label = {
+      fontSize: ThemeConfig.FontSize.tiny,
+    };
+    customStyles.linkContainer = {
+      borderRadius: ThemeConfig.BorderRadius[styleProps.size],
+    };
+    customStyles.linkTextBox = {
+      paddingVertical: 18,
+    };
+    customStyles.linkText = {
+      fontSize: ThemeConfig.FontSize.small,
+    };
+  }
+  if (styleProps?.linkFontSize === 'tiny') {
+    customStyles.linkText = {
+      fontSize: ThemeConfig.FontSize.tiny,
+    };
+  }
+  if (styleProps.variant === 'secondary') {
+    customStyles.linkText = {
+      ...customStyles.linkText,
+      color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+    };
+  }
+  return StyleSheet.create({
+    linkContainer: {
+      flexDirection: 'row',
+    },
+    label: {
+      color: $config.FONT_COLOR,
+      fontSize: ThemeConfig.FontSize.medium,
+      fontWeight: '600',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'left',
+      marginBottom: 8,
+      ...customStyles.label,
+    },
+    linkTextBox: {
+      flex: 0.9,
+      width: 0,
+      backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+      borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+      borderWidth: 1,
+      borderTopLeftRadius: ThemeConfig.BorderRadius.medium,
+      borderBottomLeftRadius: ThemeConfig.BorderRadius.medium,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      paddingHorizontal: 20,
+      paddingVertical: 21,
+      ...customStyles.linkTextBox,
+    },
+    linkText: {
+      color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
+      fontSize: ThemeConfig.FontSize.small,
+      fontFamily: ThemeConfig.FontFamily.sansPro,
+      ...customStyles.linkText,
+    },
+    linkIcon: {
+      marginLeft: 'auto',
+      flexDirection: 'row',
+      alignSelf: 'center',
+    },
+    linkHelperText: {
+      color: '#CCCCCC',
+      marginTop: 10,
+      fontSize: 14,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+    },
+  });
+};

package/template/src/atoms/OutlineButton.tsx

@@ -0,0 +1,61 @@
+import {IconsInterface} from '../atoms/CustomIcon';
+import ImageIcon from './ImageIcon';
+import React from 'react';
+import {
+  ImageStyle,
+  TextStyle,
+  TouchableOpacity,
+  ViewStyle,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+interface OutlineButtonProps {
+  onPress: () => void;
+  text: string;
+  containerStyle?: ViewStyle;
+  iconName?: keyof IconsInterface;
+  iconStyle?: ImageStyle;
+  textStyle?: TextStyle;
+}
+
+const OutlineButton = (props: OutlineButtonProps) => {
+  return (
+    <TouchableOpacity
+      onPress={props.onPress}
+      style={[styles.containerStyle, props?.containerStyle]}>
+      {props?.iconName ? (
+        <View style={styles.iconStyleView}>
+          <ImageIcon iconSize={20} iconType="plain" name={props.iconName} />
+        </View>
+      ) : (
+        <></>
+      )}
+      <Text style={[styles.textStyle, props?.textStyle]}>{props.text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default OutlineButton;
+const styles = StyleSheet.create({
+  containerStyle: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 20,
+    borderWidth: 1,
+    borderColor: '#099DFD',
+    borderRadius: 4,
+  },
+  iconStyleView: {
+    margin: 8,
+    alignSelf: 'center',
+  },
+  textStyle: {
+    paddingVertical: 12,
+    paddingRight: 12,
+    color: '#099DFD',
+    textAlign: 'left',
+  },
+});