agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/atoms/CustomIcon.tsx

@@ -0,0 +1,153 @@
+/* 
+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. [Deprecated RN >.69] 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).
+8. Run npx react-native-asset to add icons to android / ios
+*/
+
+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;
+  celebration: string;
+  'down-arrow': string;
+  'closed-caption': string;
+  globe: string;
+  'lang-select': string;
+  search: string;
+  captions: string;
+  'captions-off': string;
+  download: string;
+  'transcript-stop': string;
+  transcript: string;
+  'view-last': string;
+  'transcript-mode': string;
+  vb: string;
+  'vb-blur': string;
+  '': string;
+  done: string;
+  'done-fill': string;
+  blur: string;
+  add: string;
+  'upload-new': string;
+  'zoom-in': string;
+  'zoom-out': string;
+  undo: string;
+  redo: string;
+  light: string;
+  dark: string;
+  line: string;
+  square: string;
+  circle: string;
+  arrow: string;
+  gradient: string;
+  'area-selection': string;
+  'clear-all': string;
+  erasor: string;
+  highlight: string;
+  move: string;
+  pen: string;
+  selector: string;
+  shapes: string;
+  text: string;
+  'color-picker': string;
+  'fit-to-screen': string;
+  warning: string;
+  'view-only': string;
+  chat_send: string;
+  chat_send_fill: string;
+  chat_emoji: string;
+  chat_emoji_fill: string;
+  chat_attachment_pdf: string;
+  chat_attachment_doc: string;
+  chat_attachment_image: string;
+  chat_attachment_unknown: string;
+  chat_gif: string;
+  chat_gif_fill: string;
+  chat_attachment: string;
+  reply: string;
+  delete: string;
+  reply_all: string;
+  block_user: string;
+  'play-circle': string;
+  'copy-link': string;
+  'recording-status': string;
+  fullscreen: 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,
+  },
+});