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

package/template/src/atoms/CircularProgress.tsx

@@ -0,0 +1,102 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import ThemeConfig from '../theme';
+
+interface CircleProgressProps {
+  onComplete?: () => void;
+  timer?: number; // in seconds
+}
+
+const CircularProgress = (props: CircleProgressProps) => {
+  const {onComplete = () => {}, timer = 60} = props;
+  const [seconds, setSeconds] = useState(timer);
+  const [strokeDashoffset, setStrokeDashoffset] = useState(0);
+  const circleRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  let timeInterval;
+  React.useEffect(() => {
+    timeInterval = setInterval(() => {
+      setSeconds((seconds) => seconds - 1);
+    }, 1000);
+    return () => {
+      clearInterval(timeInterval); //when user exits, clear this interval.
+    };
+  }, []);
+
+  useEffect(() => {
+    const maxPercentage = (100 * seconds) / timer;
+    const strokeDashoffset =
+      circleCircumference - (circleCircumference * maxPercentage) / 100;
+    console.log('seonds', seconds);
+    setStrokeDashoffset(strokeDashoffset);
+    if (seconds <= 0) {
+      clearInterval(timeInterval);
+      onComplete();
+    }
+  }, [seconds]);
+
+  //configs
+  const radius = 30,
+    strokeWidth = 5,
+    color = $config.FONT_COLOR;
+  const halfCircle = radius + strokeWidth;
+  const circleCircumference = 2 * Math.PI * radius;
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+      }}>
+      <svg
+        height={radius * 2}
+        width={radius * 2}
+        viewBox={`0 0 ${halfCircle * 2} ${halfCircle * 2}`}>
+        <g transform={`rotate(-90,${halfCircle},${halfCircle}) `}>
+          <circle
+            cx="50%"
+            cy="50%"
+            r={radius}
+            fill="transparent"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeOpacity={0.2}
+          />
+          <circle
+            ref={circleRef}
+            cx="50%"
+            cy="50%"
+            r={radius}
+            fill="transparent"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeDasharray={circleCircumference}
+            strokeDashoffset={strokeDashoffset} // 0 or cicleCircumferen
+            strokeLinecap="round"
+          />
+        </g>
+      </svg>
+      <Text
+        style={[
+          {
+            fontFamily: ThemeConfig.FontFamily.sansPro,
+            fontWeight: '700',
+            fontSize: 16,
+            textAlign: 'center',
+            color: $config.FONT_COLOR,
+            alignSelf: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+          },
+        ]}>
+        {seconds}
+      </Text>
+    </View>
+  );
+};
+
+export default CircularProgress;
+
+const styles = StyleSheet.create({});

package/template/src/atoms/CustomIcon.tsx

@@ -0,0 +1,88 @@
+/* 
+Steps to add/remove icons:
+1. Open Icomoon : https://icomoon.io/app/#/select
+2. Upload the current selection.js from ./src/assets/selection.json  
+3. Add / Remove SVG'd from the set
+4. Generate a new Font File
+5. Download Zip folder , replace iconmoon.ttf file in ./src/assets/font/iconmoon.ttf with downloded
+6. Replace selection.json and font-styles.css content 
+7. Run npx react-native link react-native-vector-icons to copy in the android/app/src/main/assets/fonts directory and in Info.plist (for Android and iOS respectively).
+*/
+
+import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
+import icoMoonConfig from '../assets/selection.json';
+export default createIconSetFromIcoMoon(icoMoonConfig);
+
+export interface IconsInterface {
+  'video-plus': string;
+  'video-on': string;
+  'video-off': string;
+  'mic-on': string;
+  'mic-off': string;
+  'no-cam': string;
+  'no-mic': string;
+  clipboard: string;
+  tick: string;
+  'tick-fill': string;
+  'arrow-down': string;
+  'arrow-up': string;
+  'screen-share': string;
+  'stop-screen-share': string;
+  recording: string;
+  'stop-recording': string;
+  'end-call': string;
+  'raise-hand': string;
+  'lower-hand': string;
+  close: string;
+  'back-btn': string;
+  participants: string;
+  chat: string;
+  settings: string;
+  'more-menu': string;
+  share: string;
+  'switch-camera': string;
+  remove: string;
+  info: string;
+  send: string;
+  'downside-triangle': string;
+  profile: string;
+  'link-share': string;
+  'list-view': string;
+  expand: string;
+  collapse: string;
+  'active-speaker': string;
+  'connection-unsupported': string;
+  'connection-bad': string;
+  'connection-good': string;
+  'connection-loading': string;
+  'connection-very-bad': string;
+  'connection-unpublished': string;
+  'remove-meeting': string;
+  'pencil-outlined': string;
+  'pencil-filled': string;
+  alert: string;
+  speaker: string;
+  person: string;
+  pinned: string;
+  grid: string;
+  people: string;
+  'chat-nav': string;
+  'chat-filled': string;
+  'chat-outlined': string;
+  'demote-filled': string;
+  'demote-outlined': string;
+  'promote-filled': string;
+  'promote-outlined': string;
+  'pin-filled': string;
+  'pin-outlined': string;
+  'unpin-filled': string;
+  'unpin-outlined': string;
+  'mic-on-filled': string;
+  'mic-on-outlined': string;
+  'mic-off-filled': string;
+  'mic-off-outlined': string;
+  'video-on-filled': string;
+  'video-on-outlined': string;
+  'video-off-filled': string;
+  'video-off-outlined': string;
+}

package/template/src/atoms/CustomSwitch.tsx

@@ -0,0 +1,287 @@
+//@ts-nocheck
+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  TouchableOpacity,
+  ViewPropTypes,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+export default class Switch extends Component {
+  static propTypes = {
+    onValueChange: PropTypes.func,
+    disabled: PropTypes.bool,
+    activeText: PropTypes.string,
+    inActiveText: PropTypes.string,
+    backgroundActive: PropTypes.string,
+    backgroundInactive: PropTypes.string,
+    value: PropTypes.bool,
+    circleActiveColor: PropTypes.string,
+    circleInActiveColor: PropTypes.string,
+    circleBorderActiveColor: PropTypes.string,
+    circleBorderInactiveColor: PropTypes.string,
+    activeTextStyle: PropTypes.object,
+    inactiveTextStyle: PropTypes.object,
+    containerStyle: PropTypes.object,
+    barHeight: PropTypes.number,
+    circleBorderWidth: PropTypes.number,
+    innerCircleStyle: PropTypes.object,
+    renderInsideCircle: PropTypes.func,
+    changeValueImmediately: PropTypes.bool,
+    outerCircleStyle: PropTypes.object,
+    renderActiveText: PropTypes.bool,
+    renderInActiveText: PropTypes.bool,
+    switchWidth: PropTypes.number,
+    switchHeight: PropTypes.number,
+    switchLeftPx: PropTypes.number,
+    switchRightPx: PropTypes.number,
+    switchWidthMultiplier: PropTypes.number,
+    switchBorderRadius: PropTypes.number,
+  };
+
+  static defaultProps = {
+    value: false,
+    onValueChange: () => null,
+    renderInsideCircle: () => null,
+    disabled: false,
+    activeText: 'On',
+    inActiveText: 'Off',
+    backgroundActive: 'green',
+    backgroundInactive: 'gray',
+    circleActiveColor: 'white',
+    circleInActiveColor: 'white',
+    circleBorderActiveColor: 'rgb(100, 100, 100)',
+    circleBorderInactiveColor: 'rgb(80, 80, 80)',
+    switchWidth: 30,
+    switchHeight: 30,
+    switchBorderRadius: 100,
+    barHeight: null,
+    circleBorderWidth: 1,
+    changeValueImmediately: true,
+    innerCircleStyle: {alignItems: 'center', justifyContent: 'center'},
+    outerCircleStyle: {},
+    renderActiveText: true,
+    renderInActiveText: true,
+    switchLeftPx: 4,
+    switchRightPx: 4,
+    switchWidthMultiplier: 2,
+    testID: null,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      value: props.value,
+      transformSwitch: new Animated.Value(
+        props.value
+          ? props.switchWidth / props.switchLeftPx
+          : -props.switchWidth / props.switchRightPx,
+      ),
+      backgroundColor: new Animated.Value(props.value ? 75 : -75),
+      circleColor: new Animated.Value(props.value ? 75 : -75),
+      circleBorderColor: new Animated.Value(props.value ? 75 : -75),
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {value, disabled} = this.props;
+    if (prevProps.value === value) {
+      return;
+    }
+    if (prevProps.disabled && disabled === prevProps.disabled) {
+      return;
+    }
+
+    this.animateSwitch(value, () => this.setState({value}));
+  }
+
+  handleSwitch = () => {
+    const {value} = this.state;
+    const {
+      onValueChange,
+      disabled,
+      changeValueImmediately,
+      value: propValue,
+    } = this.props;
+    if (disabled) {
+      return;
+    }
+    if (this.props.value === this.state.value) {
+      onValueChange(!this.state.value);
+      return;
+    }
+
+    if (changeValueImmediately) {
+      this.animateSwitch(!propValue);
+      onValueChange(!propValue);
+    } else {
+      this.animateSwitch(!value, () =>
+        this.setState({value: !value}, () => onValueChange(this.state.value)),
+      );
+    }
+  };
+
+  animateSwitch = (value, cb = () => {}) => {
+    Animated.parallel([
+      Animated.spring(this.state.transformSwitch, {
+        toValue: value
+          ? this.props.switchWidth / this.props.switchLeftPx
+          : -this.props.switchWidth / this.props.switchRightPx,
+        useNativeDriver: false,
+      }),
+      Animated.timing(this.state.backgroundColor, {
+        toValue: value ? 75 : -75,
+        duration: 200,
+        useNativeDriver: false,
+      }),
+      Animated.timing(this.state.circleColor, {
+        toValue: value ? 75 : -75,
+        duration: 200,
+        useNativeDriver: false,
+      }),
+      Animated.timing(this.state.circleBorderColor, {
+        toValue: value ? 75 : -75,
+        duration: 200,
+        useNativeDriver: false,
+      }),
+    ]).start(cb);
+  };
+
+  render() {
+    const {transformSwitch, backgroundColor, circleColor, circleBorderColor} =
+      this.state;
+
+    const {
+      backgroundActive,
+      backgroundInactive,
+      circleActiveColor,
+      circleInActiveColor,
+      activeText,
+      inActiveText,
+      switchWidth,
+      switchHeight,
+      containerStyle,
+      activeTextStyle,
+      inactiveTextStyle,
+      barHeight,
+      circleBorderInactiveColor,
+      circleBorderActiveColor,
+      circleBorderWidth,
+      innerCircleStyle,
+      outerCircleStyle,
+      renderActiveText,
+      renderInActiveText,
+      renderInsideCircle,
+      switchWidthMultiplier,
+      switchBorderRadius,
+      value,
+      ...restProps
+    } = this.props;
+
+    const interpolatedColorAnimation = backgroundColor.interpolate({
+      inputRange: [-75, 75],
+      outputRange: [backgroundInactive, backgroundActive],
+    });
+
+    const interpolatedCircleColor = circleColor.interpolate({
+      inputRange: [-75, 75],
+      outputRange: [circleInActiveColor, circleActiveColor],
+    });
+
+    const interpolatedCircleBorderColor = circleBorderColor.interpolate({
+      inputRange: [-75, 75],
+      outputRange: [circleBorderInactiveColor, circleBorderActiveColor],
+    });
+
+    return (
+      <TouchableOpacity onPress={this.handleSwitch} {...restProps}>
+        <Animated.View
+          style={[
+            styles.container,
+            containerStyle,
+            {
+              backgroundColor: interpolatedColorAnimation,
+              width: switchWidth * switchWidthMultiplier,
+              height: barHeight || switchHeight,
+              borderRadius: switchBorderRadius,
+            },
+          ]}>
+          <Animated.View
+            style={[
+              styles.animatedContainer,
+              {
+                left: transformSwitch,
+                width: switchWidth * switchWidthMultiplier,
+              },
+              outerCircleStyle,
+            ]}>
+            {value && renderActiveText && (
+              <Text style={[styles.text, styles.paddingRight, activeTextStyle]}>
+                {activeText}
+              </Text>
+            )}
+
+            <Animated.View
+              style={[
+                styles.circle,
+                {
+                  borderWidth: circleBorderWidth,
+                  borderColor: interpolatedCircleBorderColor,
+                  backgroundColor: interpolatedCircleColor,
+                  width: switchWidth,
+                  height: switchHeight,
+                  borderRadius: switchBorderRadius / 2,
+                },
+                innerCircleStyle,
+              ]}>
+              {renderInsideCircle()}
+            </Animated.View>
+            {!value && renderInActiveText && (
+              <Text
+                style={[styles.text, styles.paddingLeft, inactiveTextStyle]}>
+                {inActiveText}
+              </Text>
+            )}
+          </Animated.View>
+        </Animated.View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 71,
+    height: 30,
+    borderRadius: 30,
+    backgroundColor: 'black',
+  },
+  animatedContainer: {
+    flex: 1,
+    width: 78,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circle: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: 'white',
+  },
+  text: {
+    color: 'white',
+    backgroundColor: 'transparent',
+  },
+  paddingRight: {
+    paddingRight: 5,
+  },
+  paddingLeft: {
+    paddingLeft: 5,
+  },
+});