agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/atoms/ActionMenu.tsx

@@ -1,236 +0,0 @@
-import {
-  Modal,
-  StyleSheet,
-  Text,
-  ModalProps,
-  TouchableWithoutFeedback,
-  View,
-  Image,
-  TouchableOpacity,
-  ViewStyle,
-} from 'react-native';
-import React, {SetStateAction, useState} from 'react';
-
-import ImageIcon from '../atoms/ImageIcon';
-import {IconsInterface} from '../atoms/CustomIcon';
-import ThemeConfig from '../theme';
-import {isWebInternal} from '../utils/common';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-
-export interface ActionMenuItem {
-  isBase64Icon?: boolean;
-  icon: keyof IconsInterface;
-  onHoverIcon?: keyof IconsInterface;
-  iconColor: string;
-  textColor: string;
-  title: string;
-  callback: () => void;
-  onHoverCallback?: (isHovered: boolean) => void;
-  onHoverContent?: JSX.Element;
-  disabled?: boolean;
-}
-export interface ActionMenuProps {
-  from: string;
-  actionMenuVisible: boolean;
-  setActionMenuVisible: React.Dispatch<SetStateAction<boolean>>;
-  modalPosition?: {
-    top?: number;
-    right?: number;
-    left?: number;
-    bottom?: number;
-  };
-  items: ActionMenuItem[];
-  hoverMode?: boolean;
-  onHover?: (hover: boolean) => void;
-  containerStyle?: ViewStyle;
-}
-
-const ActionMenu = (props: ActionMenuProps) => {
-  const {
-    actionMenuVisible,
-    setActionMenuVisible,
-    modalPosition,
-    items,
-    hoverMode = false,
-  } = props;
-
-  const renderItems = () => {
-    return items?.map(
-      (
-        {
-          icon,
-          onHoverIcon,
-          isBase64Icon = false,
-          title,
-          callback,
-          iconColor,
-          textColor,
-          disabled = false,
-          onHoverCallback = undefined,
-          onHoverContent = undefined,
-        },
-        index,
-      ) => (
-        <PlatformWrapper key={props.from + '_' + title + index}>
-          {(isHovered: boolean) => (
-            <>
-              {/* {onHoverCallback && onHoverCallback(isHovered)} */}
-              {isHovered ? onHoverContent ? onHoverContent : <></> : <></>}
-              <TouchableOpacity
-                disabled={disabled}
-                style={[
-                  styles.row,
-                  isHovered && !disabled
-                    ? //first item should have border-radius on top left and top right
-                      index === 0
-                      ? styles.rowHoveredFirstChild
-                      : //last item should have border-radius on bottom left and top right
-                      items?.length - 1 === index
-                      ? styles.rowHoveredLastChild
-                      : //middle items don't need any border-radius
-                        styles.rowHoveredMiddleItems
-                    : {},
-                  disabled ? {opacity: 0.4} : {},
-                  items?.length - 1 === index
-                    ? {borderBottomColor: 'transparent'}
-                    : {},
-                ]}
-                onPress={callback}
-                key={icon + index}>
-                <View style={styles.iconContainer}>
-                  <ImageIcon
-                    base64={isBase64Icon}
-                    iconType="plain"
-                    iconSize={20}
-                    name={
-                      isHovered && onHoverIcon && !disabled ? onHoverIcon : icon
-                    }
-                    tintColor={iconColor}
-                  />
-                </View>
-                <Text
-                  style={[styles.text, textColor ? {color: textColor} : {}]}>
-                  {title}
-                </Text>
-              </TouchableOpacity>
-            </>
-          )}
-        </PlatformWrapper>
-      ),
-    );
-  };
-
-  return (
-    <View>
-      {hoverMode ? (
-        actionMenuVisible && (
-          <View
-            style={[styles.modalView, props?.containerStyle, modalPosition]}>
-            <div
-              onMouseEnter={() => props?.onHover && props.onHover(true)}
-              onMouseLeave={() => props?.onHover && props.onHover(false)}>
-              {renderItems()}
-            </div>
-          </View>
-        )
-      ) : (
-        <Modal
-          testID="action-menu"
-          animationType="none"
-          transparent={true}
-          visible={actionMenuVisible}>
-          <TouchableWithoutFeedback
-            onPress={() => {
-              setActionMenuVisible(false);
-            }}>
-            <View style={styles.backDrop} />
-          </TouchableWithoutFeedback>
-          <View
-            style={[styles.modalView, props?.containerStyle, modalPosition]}>
-            {renderItems()}
-          </View>
-        </Modal>
-      )}
-    </View>
-  );
-};
-
-const PlatformWrapper = ({children}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  return isWebInternal() ? (
-    <div
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}>
-      {children(isHovered)}
-    </div>
-  ) : (
-    <>{children(false)}</>
-  );
-};
-
-export default ActionMenu;
-
-const styles = StyleSheet.create({
-  modalView: {
-    //don't added overflow: hidden, bottombar minimized version layout popup will be shown in the overflow
-    position: 'absolute',
-    width: 230,
-    backgroundColor: $config.CARD_LAYER_4_COLOR,
-    borderRadius: 4,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    zIndex: 1,
-    elevation: 1,
-  },
-  rowHoveredMiddleItems: {
-    backgroundColor:
-      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
-  },
-  rowHoveredFirstChild: {
-    backgroundColor:
-      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
-    borderTopLeftRadius: 4,
-    borderTopRightRadius: 4,
-  },
-  rowHoveredLastChild: {
-    backgroundColor:
-      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
-    borderBottomLeftRadius: 4,
-    borderBottomRightRadius: 4,
-  },
-  row: {
-    borderBottomWidth: 1,
-    borderBottomColor: $config.CARD_LAYER_3_COLOR,
-    flexDirection: 'row',
-  },
-  iconContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 8,
-    marginVertical: 12,
-    marginLeft: 12,
-  },
-  text: {
-    paddingVertical: 14,
-    color: $config.SECONDARY_ACTION_COLOR,
-    fontSize: ThemeConfig.FontSize.normal,
-    fontWeight: '400',
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-  },
-  backDrop: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-});

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

@@ -1,71 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-import Animated, {
-  interpolate,
-  withDelay,
-  withTiming,
-  withRepeat,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-
-interface AnimatedActiveSpeakerProps {
-  isSpeaking: boolean;
-}
-
-const Line = ({delay, styleProp, isSpeaking}) => {
-  const bar = useSharedValue(0);
-  const style = useAnimatedStyle(() => {
-    return {
-      height: interpolate(bar.value, [0, 1], [6, 12]),
-      //   transform: [
-      //     {
-      //       scale: interpolate(bar.value, [0, 1], [0.7, 1.2]),
-
-      //     },
-      //   ],
-    };
-  });
-  React.useEffect(() => {
-    bar.value = withDelay(
-      delay,
-      withRepeat(withTiming(1, {duration: 1200}), -1),
-    );
-  }, []);
-  return (
-    <Animated.View style={[styles.line, styleProp, isSpeaking && style]} />
-  );
-};
-
-const AnimatedActiveSpeaker = ({isSpeaking}: AnimatedActiveSpeakerProps) => {
-  return (
-    <View style={styles.container}>
-      <Line
-        delay={0}
-        styleProp={{height: 6, marginRight: 2.5}}
-        isSpeaking={isSpeaking}
-      />
-      <Line
-        delay={400}
-        styleProp={{height: 12, marginRight: 2.5}}
-        isSpeaking={isSpeaking}
-      />
-      <Line delay={800} styleProp={{height: 6}} isSpeaking={isSpeaking} />
-    </View>
-  );
-};
-
-export default AnimatedActiveSpeaker;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  line: {
-    width: 2.5,
-    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-    borderRadius: 25,
-  },
-});

package/template/src/atoms/AnimatedActiveSpeaker.tsx

@@ -1,84 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-
-interface AnimatedActiveSpeakerProps {
-  isSpeaking: boolean;
-}
-const AnimatedActiveSpeaker = ({isSpeaking}: AnimatedActiveSpeakerProps) => {
-  const css = `
-    .container-sk {
-    flex: 1;
-    display:flex;
-    flex-direction: row;
-    align-items: center
-    }
-    .line {
-        width: 2.5px;
-        background-color: ${$config.PRIMARY_ACTION_BRAND_COLOR};
-        border-radius: 25px;
-        height:6px;
-        animation: wave 1s ease-in-out  infinite normal;
-        animation-play-state: ${isSpeaking ? 'running' : 'paused'}
-
-    }
-    @keyframes wave{
-
-        0%{
-         
-            height:6px
-        }
-      
-        50%{
-         
-            height:12px
-        }
-      
-        100%{
-    
-            height:6px
-        }
-      
-      }
-      .line:nth-child(2){
-        animation-delay: .2s;
-      }
-      
-      .line:nth-child(3){
-        animation-delay: .5s;
-      }
-    #line1 {
-        margin-right:2.5px
-    }
-    #line2 {
-        margin-right:2.5px;
-        height:12px
-    }
-
-    `;
-  return (
-    <>
-      <style type="text/css">{css}</style>
-      <div className="container-sk">
-        <div className="line" id="line1" />
-        <div className="line" id="line2" />
-        <div className="line" id="line3" />
-      </div>
-    </>
-  );
-};
-
-export default AnimatedActiveSpeaker;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  line: {
-    width: 2.5,
-    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-    borderRadius: 25,
-  },
-});

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

@@ -1,68 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-import Animated, {
-  interpolate,
-  withDelay,
-  withTiming,
-  withRepeat,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-
-const Ring = ({delay}) => {
-  const ring = useSharedValue(0);
-  const style = useAnimatedStyle(() => {
-    return {
-      opacity: 0.8 - ring.value,
-      transform: [
-        {
-          scale: interpolate(ring.value, [0, 1], [0, 4]),
-        },
-      ],
-    };
-  });
-  React.useEffect(() => {
-    ring.value = withDelay(
-      delay,
-      withRepeat(withTiming(1, {duration: 4000}), -1),
-    );
-  }, []);
-
-  return <Animated.View style={[styles.ring, style]} />;
-};
-
-const AnimatedRings = ({isActiveSpeaker, children, isMobileView}) => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}>
-      {isActiveSpeaker ? (
-        <>
-          <Ring delay={0} />
-          <Ring delay={1000} />
-          <Ring delay={2000} />
-          <Ring delay={3000} />
-        </>
-      ) : (
-        <></>
-      )}
-      {children}
-    </View>
-  );
-};
-
-export default AnimatedRings;
-
-const styles = StyleSheet.create({
-  ring: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
-    borderWidth: 3,
-    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-    position: 'absolute',
-  },
-});

package/template/src/atoms/AnimatedRings.tsx

@@ -1,70 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import React from 'react';
-
-const Ring = ({isMobileView}) => {
-  const css = `.ring {
-    width: ${isMobileView ? '60px' : '100px'};
-    height: ${isMobileView ? '60px' : '100px'};
-    border-radius: 50%;
-    position: absolute;
-    background-color: transparent;
-    border: 3px ${$config.PRIMARY_ACTION_BRAND_COLOR} solid;
-    -webkit-animation-name: ani; 
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-duration: 3s;
-    -webkit-animation-direction: normal;
-   
-}
-
-@-webkit-keyframes ani {
-    0% {-webkit-transform: scale(0.5); opacity: 0} 
-    1% {-webkit-transform: scale(0.5); opacity: 1} 
-    95% {-webkit-transform: scale(1.5); opacity: .5;}
-    100% {-webkit-transform: scale(1.5); opacity: 0;}
-}
-#r2 { -webkit-animation-delay: -1s;}
-#r3 { -webkit-animation-delay: -2s;}
-`;
-  return (
-    <div>
-      <style type="text/css">{css}</style>
-      <div id="r1" className="ring"></div>
-      <div id="r2" className="ring"></div>
-      <div id="r3" className="ring"></div>
-    </div>
-  );
-};
-
-const AnimatedRings = ({isActiveSpeaker, children, isMobileView}) => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignSelf: 'center',
-        justifyContent: 'center',
-      }}>
-      {isActiveSpeaker ? (
-        <View style={{position: 'relative', left: -2, top: -2}}>
-          <Ring isMobileView={isMobileView} />
-        </View>
-      ) : (
-        <></>
-      )}
-      {children}
-    </View>
-  );
-};
-
-export default AnimatedRings;
-
-const styles = StyleSheet.create({
-  container: {
-    width: 140,
-    height: 140,
-    borderRadius: 80,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-});

package/template/src/atoms/Card.tsx

@@ -1,61 +0,0 @@
-import {StyleSheet, View, ViewStyle} from 'react-native';
-import React from 'react';
-import {isMobileUA, useResponsive} from '../utils/common';
-import ThemeConfig from '../theme';
-
-interface CardProps {
-  style?: ViewStyle;
-  children?: React.ReactNode;
-}
-
-const Card = (props: CardProps) => {
-  const {style, children, ...rest} = props;
-  const styles = useStyles();
-  return (
-    <View
-      style={[
-        styles.root,
-        isMobileUA() ? styles.mobile : styles.desktop,
-        style,
-      ]}
-      {...rest}>
-      {children}
-    </View>
-  );
-};
-
-export default Card;
-
-const useStyles = () => {
-  const getResponsiveValue = useResponsive();
-  return StyleSheet.create({
-    root: {
-      flex: 1,
-      backgroundColor: $config.CARD_LAYER_1_COLOR,
-      elevation: 5,
-      maxWidth: 676,
-      width: '100%',
-      overflow: 'hidden',
-    },
-    mobile: {
-      paddingHorizontal: 16,
-      paddingTop: 20,
-      paddingBottom: 40,
-      justifyContent: 'space-between',
-    },
-    desktop: {
-      justifyContent: 'center',
-      alignSelf: 'center',
-      borderWidth: 1,
-      paddingHorizontal: getResponsiveValue(60),
-      paddingVertical: getResponsiveValue(60),
-      borderRadius: ThemeConfig.BorderRadius.extraLarge,
-      borderColor: $config.CARD_LAYER_3_COLOR,
-      shadowColor: $config.HARD_CODED_BLACK_COLOR,
-      shadowOffset: {width: 0, height: 4},
-      shadowOpacity: 0.1,
-      shadowRadius: 20,
-      margin: getResponsiveValue(40),
-    },
-  });
-};

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

@@ -1,121 +0,0 @@
-import React from 'react';
-import {TextInput, StyleSheet, Animated, Easing, View} from 'react-native';
-import Svg, {Circle, G} from 'react-native-svg';
-import ThemeConfig from '../theme';
-
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-const AnimatedInput = Animated.createAnimatedComponent(TextInput);
-
-interface CircleProgressProps {
-  onComplete?: () => void;
-  timer?: number; // in seconds
-}
-
-export default function CircularProgress(props: CircleProgressProps) {
-  const {onComplete = () => {}, timer = 60} = props;
-  const percentage = 100, // progress completion percentage
-    radius = 30,
-    strokeWidth = 5,
-    color = $config.FONT_COLOR,
-    delay = 0,
-    max = 100;
-  const duration = timer * 1000;
-
-  const animatedvalue = React.useRef(new Animated.Value(100)).current;
-  const circleRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const halfCircle = radius + strokeWidth;
-  const circleCircumference = 2 * Math.PI * radius;
-
-  const animation = (toValue) => {
-    return Animated.timing(animatedvalue, {
-      toValue: toValue,
-      duration,
-      delay,
-      useNativeDriver: true,
-      easing: Easing.linear,
-    }).start(() => {
-      onComplete();
-    });
-  };
-
-  //to animate
-  React.useEffect(() => {
-    animation(0);
-    animatedvalue.addListener((v) => {
-      if (circleRef?.current) {
-        const maxPercentage = (100 * v.value) / max;
-        const strokeDashoffset =
-          circleCircumference - (circleCircumference * maxPercentage) / 100;
-        circleRef.current.setNativeProps({
-          strokeDashoffset,
-        });
-      }
-
-      // for text
-      if (inputRef?.current) {
-        const value = Math.round((v.value / 100) * timer);
-        inputRef.current.setNativeProps({
-          text: `${value}`,
-        });
-      }
-    });
-    return () => {
-      animatedvalue.removeAllListeners();
-    };
-  }, [max, percentage]);
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'space-evenly',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-      }}>
-      <Svg
-        height={radius * 2}
-        width={radius * 2}
-        viewBox={`0 0 ${halfCircle * 2} ${halfCircle * 2}`}>
-        <G rotation="-90" origin={`${halfCircle}, ${halfCircle} `}>
-          <AnimatedCircle
-            cx="50%"
-            cy="50%"
-            r={radius}
-            fill="transparent"
-            stroke={color}
-            strokeWidth={strokeWidth}
-            strokeOpacity={0.2}
-          />
-          <AnimatedCircle
-            ref={circleRef}
-            cx="50%"
-            cy="50%"
-            r={radius}
-            fill="transparent"
-            stroke={color}
-            strokeWidth={strokeWidth}
-            strokeDasharray={circleCircumference}
-            strokeDashoffset={circleCircumference} // 0 or cicleCircumferen
-            strokeLinecap="round"
-          />
-        </G>
-      </Svg>
-      <AnimatedInput
-        ref={inputRef}
-        underlineColorAndroid="transparent"
-        editable={false}
-        style={[
-          StyleSheet.absoluteFillObject,
-          {
-            fontFamily: ThemeConfig.FontFamily.sansPro,
-            fontWeight: '700',
-            fontSize: 16,
-            textAlign: 'center',
-            color: $config.FONT_COLOR,
-          },
-        ]}
-      />
-    </View>
-  );
-}