agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/atoms/Popup.tsx

@@ -1,147 +0,0 @@
-import {
-  StyleSheet,
-  Text,
-  View,
-  Modal,
-  TouchableWithoutFeedback,
-  ModalProps,
-  ViewStyle,
-} from 'react-native';
-import React, {SetStateAction} from 'react';
-import IconButton from './IconButton';
-import ThemeConfig from '../theme';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {isMobileUA, useIsDesktop} from '../../src/utils/common';
-
-interface PopupProps extends ModalProps {
-  title?: string;
-  modalVisible: boolean;
-  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
-  showCloseIcon?: boolean;
-  children: React.ReactNode;
-  contentContainerStyle?: ViewStyle;
-  containerStyle?: ViewStyle;
-}
-const Popup = (props: PopupProps) => {
-  const {
-    title,
-    modalVisible,
-    setModalVisible,
-    children,
-    showCloseIcon,
-    ...otherProps
-  } = props;
-
-  const isDesktop = useIsDesktop()('popup');
-
-  return (
-    <Modal
-      animationType="none"
-      transparent={true}
-      visible={modalVisible}
-      onRequestClose={() => {
-        setModalVisible(false);
-      }}
-      {...otherProps}>
-      <View
-        style={[
-          styles.centeredView,
-          isDesktop && {alignItems: 'center'},
-          props?.containerStyle,
-        ]}>
-        <TouchableWithoutFeedback
-          onPress={() => {
-            setModalVisible(false);
-          }}>
-          <View style={styles.backDrop} />
-        </TouchableWithoutFeedback>
-
-        <View style={[styles.modalView, props?.contentContainerStyle]}>
-          {title || showCloseIcon ? (
-            <View style={styles.header}>
-              <Text style={styles.title}>{title}</Text>
-              {showCloseIcon ? (
-                <View>
-                  <IconButton
-                    hoverEffect={true}
-                    hoverEffectStyle={{
-                      backgroundColor: $config.ICON_BG_COLOR,
-                      borderRadius: 20,
-                    }}
-                    iconProps={{
-                      iconType: 'plain',
-                      iconContainerStyle: {
-                        padding: isMobileUA() ? 0 : 5,
-                      },
-                      name: 'close',
-                      tintColor: $config.SECONDARY_ACTION_COLOR,
-                    }}
-                    onPress={() => {
-                      setModalVisible(false);
-                    }}
-                  />
-                </View>
-              ) : (
-                <></>
-              )}
-            </View>
-          ) : (
-            <></>
-          )}
-          {children}
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-export default Popup;
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    position: 'relative',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-  },
-  modalView: {
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    borderRadius: ThemeConfig.BorderRadius.large,
-    padding: 32,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 5,
-    maxWidth: 650,
-  },
-  backDrop: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor:
-      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: 32,
-  },
-  title: {
-    color: $config.FONT_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontSize: 24,
-    lineHeight: 24,
-    fontWeight: '600',
-    flex: 0.9,
-  },
-});

package/template/src/atoms/RecordingInfo.tsx

@@ -1,49 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import React from 'react';
-import {isMobileUA} from '../utils/common';
-
-const RecordingInfo = ({recordingLabel = ''}) => {
-  return (
-    <View style={[styles.recordingView]}>
-      <View style={[styles.recordingStatus]} />
-      <Text style={styles.recordingText}>{recordingLabel}</Text>
-    </View>
-  );
-};
-
-export default RecordingInfo;
-
-const styles = StyleSheet.create({
-  recordingView: {
-    padding: 12,
-    paddingVertical: isMobileUA() ? 5 : 12,
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignContent: 'center',
-    justifyContent: 'center',
-    borderRadius: 24,
-    backgroundColor: $config.ICON_BG_COLOR,
-    marginLeft: 8,
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.1,
-    shadowRadius: 20,
-  },
-  recordingText: {
-    fontSize: 12,
-    lineHeight: 12,
-    fontWeight: '600',
-    fontFamily: 'Source Sans Pro',
-    color: $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['50%'],
-  },
-  recordingStatus: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: $config.SEMANTIC_ERROR,
-    marginRight: 8,
-  },
-});

package/template/src/atoms/Spacer.tsx

@@ -1,22 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-
-interface SpacerProps {
-  size: number | string;
-  horizontal?: boolean;
-}
-
-const Spacer = ({size, horizontal = false}: SpacerProps) => {
-  return (
-    <View
-      style={{
-        width: horizontal ? size : 'auto',
-        height: !horizontal ? size : 'auto',
-      }}
-    />
-  );
-};
-
-export default Spacer;
-
-const styles = StyleSheet.create({});

package/template/src/atoms/TertiaryButton.tsx

@@ -1,78 +0,0 @@
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  ViewStyle,
-  TextStyle,
-} from 'react-native';
-import React, {useState} from 'react';
-import ThemeConfig from '../theme';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {isWebInternal} from '../utils/common';
-
-interface ButtonProps extends TouchableOpacityProps {
-  setRef?: (ref: any) => void;
-  text?: string;
-  children?: React.ReactNode;
-  containerStyle?: ViewStyle;
-  textStyle?: TextStyle;
-}
-
-const TertiaryButton = (props: ButtonProps) => {
-  const {text, ...rest} = props;
-  const [isHovered, setIsHovered] = useState();
-  return (
-    <PlatformWrapper setIsHovered={setIsHovered}>
-      <TouchableOpacity
-        ref={(ref) => props?.setRef && props.setRef(ref)}
-        style={[
-          styles.container,
-          isHovered
-            ? {
-                backgroundColor:
-                  $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
-              }
-            : {},
-          props?.containerStyle,
-        ]}
-        {...rest}>
-        <Text style={[styles.text, props?.textStyle]}>{text}</Text>
-      </TouchableOpacity>
-    </PlatformWrapper>
-  );
-};
-const PlatformWrapper = ({children, setIsHovered}) => {
-  return isWebInternal() ? (
-    <div
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}>
-      {children}
-    </div>
-  ) : (
-    children
-  );
-};
-export default TertiaryButton;
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 12,
-    paddingVertical: 11,
-    borderWidth: 1,
-    borderColor: $config.SECONDARY_ACTION_COLOR,
-    borderRadius: ThemeConfig.BorderRadius.small,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    color: $config.SECONDARY_ACTION_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontSize: ThemeConfig.FontSize.small,
-    fontWeight: '600',
-  },
-});

package/template/src/atoms/Toggle.tsx

@@ -1,47 +0,0 @@
-import {StyleSheet, Text, View, Platform} from 'react-native';
-import React from 'react';
-import CustomSwitch from './CustomSwitch';
-
-interface SwitchProps {
-  isEnabled: boolean;
-  disabled?: boolean;
-  toggleSwitch: (isEnabled: boolean) => void;
-}
-
-const Toggle = (props: SwitchProps) => {
-  const {isEnabled, toggleSwitch, disabled = false} = props;
-  return (
-    <View>
-      <CustomSwitch
-        barHeight={20}
-        switchWidth={16}
-        switchHeight={16}
-        value={isEnabled}
-        onValueChange={toggleSwitch}
-        disabled={false}
-        backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
-        backgroundInactive={$config.SEMANTIC_NEUTRAL}
-        circleActiveColor={$config.CARD_LAYER_1_COLOR}
-        circleInActiveColor={$config.CARD_LAYER_1_COLOR}
-        // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)
-        changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
-        innerCircleStyle={{
-          borderWidth: 0,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }} // style for inner animated circle for what you (may) be rendering inside the circle
-        outerCircleStyle={{}} // style for outer animated circle
-        renderActiveText={false}
-        renderInActiveText={false}
-        switchLeftPx={3} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
-        switchRightPx={3} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
-        switchWidthMultiplier={2} // multiplied by the `circleSize` prop to calculate total width of the Switch
-        switchBorderRadius={30} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
-      />
-    </View>
-  );
-};
-
-export default Toggle;
-
-const styles = StyleSheet.create({});

package/template/src/atoms/Tooltip.native.tsx

@@ -1,65 +0,0 @@
-import RNTooltip from 'react-native-walkthrough-tooltip';
-import React, {useState} from 'react';
-import {Pressable, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
-import ThemeConfig from '../theme';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-
-interface TooltipProps {
-  activeBgStyle?: ViewStyle;
-  defaultBgStyle?: ViewStyle;
-  renderContent: (
-    isToolTipVisible: boolean,
-    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
-  ) => React.ReactNode;
-  toolTipMessage: string;
-  toolTipIcon?: React.ReactNode;
-  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
-}
-const Tooltip = (props: TooltipProps) => {
-  const [isToolTipVisible, setToolTipVisible] = useState(false);
-  const {placement = 'top'} = props;
-  return (
-    <RNTooltip
-      arrowSize={{width: 25, height: 15}}
-      contentStyle={{
-        borderRadius: 8,
-        padding: 12,
-        backgroundColor: $config.CARD_LAYER_3_COLOR,
-      }}
-      tooltipStyle={{
-        shadowColor: $config.HARD_CODED_BLACK_COLOR,
-        shadowOffset: {
-          height: 4,
-          width: 0,
-        },
-        shadowOpacity: 0.1,
-        elevation: 5,
-        shadowRadius: 2,
-      }}
-      backgroundColor={'transparent'}
-      isVisible={isToolTipVisible}
-      content={
-        <View style={{flex: 1, flexDirection: 'row'}}>
-          {props?.toolTipIcon ? props.toolTipIcon : <></>}
-          <Text
-            style={{
-              color: $config.FONT_COLOR,
-              fontFamily: ThemeConfig.FontFamily.sansPro,
-              fontSize: 16,
-              fontWeight: '400',
-            }}>
-            {props.toolTipMessage}
-          </Text>
-        </View>
-      }
-      placement={placement}
-      onClose={() => setToolTipVisible(false)}>
-      <Pressable
-        style={isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle}
-        onPress={() => setToolTipVisible(true)}>
-        {props.renderContent(isToolTipVisible, setToolTipVisible)}
-      </Pressable>
-    </RNTooltip>
-  );
-};
-export default Tooltip;

package/template/src/atoms/Tooltip.tsx

@@ -1,94 +0,0 @@
-import ReactTooltip from 'react-tooltip';
-import React, {useState} from 'react';
-import {Text, View, ViewStyle} from 'react-native';
-
-interface TooltipProps {
-  activeBgStyle?: ViewStyle;
-  defaultBgStyle?: ViewStyle;
-  renderContent: (
-    isToolTipVisible: boolean,
-    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
-  ) => React.ReactNode;
-  toolTipMessage: string;
-  toolTipIcon?: React.ReactNode;
-  isClickable?: boolean;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-  onPress?: () => void;
-}
-const Tooltip = (props: TooltipProps) => {
-  const [isToolTipVisible, setToolTipVisible] = useState(false);
-  const {isClickable = false, placement = 'top'} = props;
-  const css = `
-  .custom-tool-tip{
-    padding:12px;
-    border-radius: 8px;
-  }
-  .custom-tool-tip div{
-    font-family: "Source Sans Pro";
-    font-weight: 400;
-    font-size: 16px;
-  }
-  .__react_component_tooltip.show{
-    opacity:1;
-  }
-  .custom-tool-tip::after {
-    width: 20px !important;
-    height: 20px !important;
-    border-top-right-radius: 5px !important;
-    bottom: -10px !important;
-    margin-left: -10px !important;
-  }`;
-  const randomString = (
-    length = 5,
-    chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
-  ) => {
-    var result = '';
-    for (var i = length; i > 0; --i)
-      result += chars[Math.floor(Math.random() * chars.length)];
-    return result;
-  };
-
-  const toolTipId = randomString();
-
-  return (
-    <>
-      <div
-        style={{cursor: isClickable ? 'pointer' : 'auto'}}
-        data-tip
-        data-event={isClickable ? 'click focus' : 'mouseenter'}
-        data-event-off={isClickable ? '' : 'mouseleave'}
-        data-for={toolTipId}
-        onMouseEnter={() => setToolTipVisible(true)}
-        onMouseLeave={() => {
-          setToolTipVisible(false);
-        }}>
-        <View
-          style={
-            isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle
-          }>
-          {props.renderContent(isToolTipVisible, setToolTipVisible)}
-        </View>
-      </div>
-      <ReactTooltip
-        afterShow={() => {
-          isClickable && props?.onPress && props.onPress();
-        }}
-        globalEventOff="click"
-        id={toolTipId}
-        backgroundColor={$config.CARD_LAYER_3_COLOR}
-        className="custom-tool-tip"
-        place={'top'}
-        type="dark"
-        effect="solid">
-        <style type="text/css">{css}</style>
-        <View style={{flex: 1, flexDirection: 'row'}}>
-          {props?.toolTipIcon ? props.toolTipIcon : null}
-          <Text style={{color: $config.FONT_COLOR}}>
-            {props.toolTipMessage}
-          </Text>
-        </View>
-      </ReactTooltip>
-    </>
-  );
-};
-export default Tooltip;

package/template/src/atoms/UserAvatar.tsx

@@ -1,60 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-import ThemeConfig from '../theme';
-import {isWeb} from '../utils/common';
-
-function getInitials(name: string) {
-  if (name && name?.length) {
-    return name[0].toUpperCase();
-  }
-  return 'U';
-}
-
-const UserAvatar = ({name, containerStyle, textStyle}) => {
-  return (
-    <View
-      style={[
-        containerStyle,
-        {
-          alignSelf: 'center',
-          alignContent: 'center',
-          justifyContent: 'center',
-        },
-      ]}>
-      <PlatformWrapper>
-        <Text
-          style={[
-            textStyle,
-            {
-              fontFamily: ThemeConfig.FontFamily.sansPro,
-              alignSelf: 'center',
-              textAlign: 'center',
-            },
-          ]}>
-          {getInitials(name)}
-        </Text>
-      </PlatformWrapper>
-    </View>
-  );
-};
-
-const PlatformWrapper = ({children}) => {
-  return isWeb() ? (
-    <div
-      style={{
-        userSelect: 'none',
-        MozUserSelect: 'none',
-        WebkitUserSelect: 'none',
-        msUserSelect: 'none',
-        alignSelf: 'center',
-      }}>
-      {children}
-    </div>
-  ) : (
-    <>{children}</>
-  );
-};
-
-export default UserAvatar;
-
-const styles = StyleSheet.create({});

package/template/src/components/CommonStyles.ts

@@ -1,44 +0,0 @@
-import {StyleSheet} from 'react-native';
-import ThemeConfig from '../theme';
-const CommonStyles = StyleSheet.create({
-  sidePanelContainerWeb: {
-    flex: 1,
-    maxWidth: '20%',
-    minWidth: 338,
-    borderRadius: ThemeConfig.BorderRadius.small,
-    marginLeft: 12,
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    borderWidth: 1,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOpacity: 0.2,
-    shadowOffset: {width: 0, height: 0},
-    shadowRadius: 20,
-    overflow: 'hidden',
-  },
-  sidePanelContainerNative: {
-    zIndex: 5,
-    width: '100%',
-    height: '100%',
-  },
-  sidePanelContainerWebMinimzed: {
-    position: 'absolute',
-    zIndex: 5,
-    width: '96%',
-    height: '96%',
-    right: '2%',
-    left: '2%',
-    top: '2%',
-    bottom: '2%',
-    borderRadius: ThemeConfig.BorderRadius.small,
-    backgroundColor: $config.CARD_LAYER_1_COLOR,
-    borderColor: $config.CARD_LAYER_3_COLOR,
-    borderWidth: 1,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
-    shadowOpacity: 0.2,
-    shadowOffset: {width: 0, height: 0},
-    shadowRadius: 20,
-    overflow: 'hidden',
-  },
-});
-export default CommonStyles;

package/template/src/components/ToastComponent.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import Toast from '../../react-native-toast-message';
-import ToastConfig from '../subComponents/ToastConfig';
-
-const ToastComponent = () => {
-  return <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />;
-};
-export default ToastComponent;