agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/atoms/CircularProgress.tsx

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

@@ -1,88 +0,0 @@
-/* 
-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

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