agora-appbuilder-core 3.0.9 → 3.0.10

package/template/src/atoms/ActionMenu.tsx

@@ -0,0 +1,236 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,121 @@
+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>
+  );
+}