agora-appbuilder-core 2.2.0 → 2.3.0-beta.0

package/template/package.json

@@ -6,15 +6,21 @@
   "scripts": {
     "android": "react-native run-android",
     "android:build": "npm run android:build:unix",
-    "android:build:unix": "cd android && ./gradlew assembleRelease",
-    "android:build:windows": "cd android && gradlew.bat assembleRelease",
+    "android:build:unix": "cross-env TARGET=android gulp androidUnix",
+    "android:build:windows": "cross-env TARGET=android gulp androidWin",
     "ios": "cd ios && ls | grep .xcworkspace | xargs open",
     "ios:build": "cd ios && ls | grep .xcworkspace | xargs open",
     "start": "react-native start",
     "web": "cross-env TARGET=web NODE_ENV=development webpack-dev-server --hot --open --config webpack.web.config.js",
+    "ts": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.ts.config.js",
     "web:build": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.web.config.js",
-    "electron:start": "cross-env NODE_ENV=development gulp development",
-    "electron:build": "cross-env NODE_ENV=production gulp build",
+    "web-sdk": "cross-env TARGET=wsdk NODE_ENV=development gulp webSdk",
+    "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
+    "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
+    "react-sdk:build": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdk",
+    "react-sdk-esbuild": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdkEsbuild",
+    "electron:start": "cross-env NODE_ENV=development gulp electron_development",
+    "electron:build": "cross-env NODE_ENV=production gulp electron_build",
     "windows": "cross-env TARGET=windows npm run electron:start",
     "windows:build": "cross-env TARGET=windows npm run electron:build",
     "mac": "cross-env TARGET=mac npm run electron:start",
@@ -58,6 +64,7 @@
     "nosleep.js": "0.12.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-is": "18.0.0",
     "react-native": "0.63.3",
     "react-native-agora": "3.4.2",
     "react-native-hyperlink": "0.0.19",
@@ -78,20 +85,23 @@
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "7.14.0",
     "@bam.tech/react-native-make": "3.0.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.3.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
     "@react-native-community/eslint-config": "1.1.0",
     "@types/jest": "25.2.3",
+    "@types/react-is": "17.0.3",
     "@types/react-native": "0.67.6",
     "@types/react-native-keep-awake": "2.0.2",
     "@types/react-router-dom": "5.1.7",
     "@types/react-router-native": "5.1.0",
     "@types/react-test-renderer": "16.9.5",
     "@types/webpack-dev-server": "3.11.4",
+    "@types/webpack-env": "^1.16.4",
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
-    "babel-jest": "25.5.1",
-    "babel-loader": "8.2.2",
-    "babel-plugin-transform-define": "2.0.0",
+    "babel-jest": "27.5.1",
+    "babel-loader": "8.2.4",
+    "babel-plugin-module-resolver": "4.1.0",
+    "babel-plugin-transform-define": "2.0.1",
     "cross-env": "7.0.3",
     "del": "5.1.0",
     "electron": "16.0.1",
@@ -100,18 +110,24 @@
     "eslint": "6.8.0",
     "file-loader": "6.2.0",
     "gulp": "4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-header": "^2.0.9",
+    "gulp-replace": "^1.1.3",
     "html-webpack-plugin": "4.5.2",
+    "ignore-loader": "^0.1.2",
     "jest": "25.5.4",
     "metro-react-native-babel-preset": "0.59.0",
     "prettier": "2.3.1",
     "react-devtools-electron": "4.7.0",
-    "react-refresh": "0.8.3",
+    "react-refresh": "0.12.0",
     "react-test-renderer": "16.13.1",
+    "ts-loader": "^8.3.0",
     "typescript": "3.9.9",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.2",
+    "webpack": "5.72.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "4.8.1",
     "webpack-merge": "5.8.0",
+    "webpack-node-externals": "3.0.0",
     "yargs": "15.4.1"
   },
   "jest": {

package/template/react-native-toast-message/src/index.js

@@ -343,13 +343,8 @@ class Toast extends Component {
   }
 
   getBaseStyle(position = 'bottom', keyboardHeight) {
-    const {
-      topOffset,
-      bottomOffset,
-      keyboardOffset,
-      height,
-      animation
-    } = this.state;
+    const { topOffset, bottomOffset, keyboardOffset, height, animation } =
+      this.state;
     const offset = position === 'bottom' ? bottomOffset : topOffset;
 
     // +5 px to completely hide the toast under StatusBar (on Android)
@@ -358,14 +353,14 @@ class Toast extends Component {
 
     const translateY = animation.interpolate({
       inputRange: [0, 1, 2],
-      outputRange
+      outputRange: [0, 1, 0]
     });
 
     return [
       styles.base,
       styles[position],
       {
-        transform: [{ translateY }]
+        opacity: translateY
       }
     ];
   }
@@ -383,7 +378,11 @@ class Toast extends Component {
       <Animated.View
         testID='animatedView'
         onLayout={this.onLayout}
-        style={[baseStyle, style, {zIndex: 100}]} //added zindex
+        style={[
+          baseStyle,
+          style,
+          { zIndex: 100, display: this.state.isVisible || this.state.inProgress ? 'flex' : 'none' }
+        ]} //added zindex
         {...this.panResponder.panHandlers}>
         {this.renderContent(this.props)}
       </Animated.View>

package/template/react-native-toast-message/src/index.wsdk.js

@@ -0,0 +1,419 @@
+import React, { Component } from 'react';
+import { Animated, PanResponder, Keyboard } from 'react-native';
+import PropTypes from 'prop-types';
+
+import SuccessToast from './components/success';
+import ErrorToast from './components/error';
+import InfoToast from './components/info';
+import { complement } from './utils/arr';
+import { includeKeys } from './utils/obj';
+import { stylePropType } from './utils/prop-types';
+import { isIOS } from './utils/platform';
+import styles from './styles';
+
+const FRICTION = 8;
+
+const defaultComponentsConfig = {
+  // eslint-disable-next-line react/prop-types
+  success: ({ hide, ...rest }) => (
+    <SuccessToast {...rest} onTrailingIconPress={hide} />
+  ),
+  // eslint-disable-next-line react/prop-types
+  error: ({ hide, ...rest }) => (
+    <ErrorToast {...rest} onTrailingIconPress={hide} />
+  ),
+  // eslint-disable-next-line react/prop-types
+  info: ({ hide, ...rest }) => (
+    <InfoToast {...rest} onTrailingIconPress={hide} />
+  )
+};
+
+function shouldSetPanResponder(gesture) {
+  const { dx, dy } = gesture;
+  // Fixes onPress handler https://github.com/calintamas/react-native-toast-message/issues/113
+  return Math.abs(dx) > 2 || Math.abs(dy) > 2;
+}
+
+const getInitialState = ({
+  topOffset,
+  bottomOffset,
+  keyboardOffset,
+  visibilityTime,
+  height,
+  autoHide,
+  position,
+  type
+}) => ({
+  // layout
+  topOffset,
+  bottomOffset,
+  keyboardOffset,
+  height,
+  position,
+  type,
+
+  // timing (in ms)
+  visibilityTime,
+  autoHide,
+
+  // content
+  text1: undefined,
+  text2: undefined,
+
+  onPress: undefined,
+  onShow: undefined,
+  onHide: undefined
+});
+
+class Toast extends Component {
+  static _ref = null;
+
+  static setRef(ref = {}) {
+    Toast._ref = ref;
+  }
+
+  static getRef() {
+    return Toast._ref;
+  }
+
+  static clearRef() {
+    Toast._ref = null;
+  }
+
+  static show(options = {}) {
+    Toast._ref.show(options);
+  }
+
+  static hide() {
+    Toast._ref.hide();
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._setState = this._setState.bind(this);
+    this._animateMovement = this._animateMovement.bind(this);
+    this._animateRelease = this._animateRelease.bind(this);
+    this.startTimer = this.startTimer.bind(this);
+    this.animate = this.animate.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.onLayout = this.onLayout.bind(this);
+
+    this.state = {
+      ...getInitialState(props),
+
+      inProgress: false,
+      isVisible: false,
+      animation: new Animated.Value(0),
+      keyboardHeight: 0,
+      keyboardVisible: false,
+
+      customProps: {}
+    };
+
+    this.panResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: (event, gesture) =>
+        shouldSetPanResponder(gesture),
+      onMoveShouldSetPanResponderCapture: (event, gesture) =>
+        shouldSetPanResponder(gesture),
+      onPanResponderMove: (event, gesture) => {
+        this._animateMovement(gesture);
+      },
+      onPanResponderRelease: (event, gesture) => {
+        this._animateRelease(gesture);
+      }
+    });
+  }
+
+  componentDidMount() {
+    const noop = {
+      remove: () => {}
+    };
+    this.keyboardDidShowListener = isIOS
+      ? Keyboard.addListener('keyboardDidShow', this.keyboardDidShow)
+      : noop;
+    this.keyboardDidHideListner = isIOS
+      ? Keyboard.addListener('keyboardDidHide', this.keyboardDidHide)
+      : noop;
+  }
+
+  componentWillUnmount() {
+    this.keyboardDidShowListener.remove();
+    this.keyboardDidHideListner.remove();
+    clearTimeout(this.timer);
+  }
+
+  keyboardDidShow = (e) => {
+    const { isVisible, position } = this.state;
+    this.setState({
+      keyboardHeight: e.endCoordinates.height,
+      keyboardVisible: true
+    });
+
+    if (isVisible && position === 'bottom') {
+      this.animate({ toValue: 2 });
+    }
+  };
+
+  keyboardDidHide = () => {
+    const { isVisible, position } = this.state;
+    this.setState({
+      keyboardVisible: false
+    });
+    if (isVisible && position === 'bottom') {
+      this.animate({ toValue: 1 });
+    }
+  };
+
+  _setState(reducer) {
+    return new Promise((resolve) => this.setState(reducer, () => resolve()));
+  }
+
+  _animateMovement(gesture) {
+    const { position, animation, keyboardVisible } = this.state;
+    const { dy } = gesture;
+    let value = 1 + dy / 100;
+    const start = keyboardVisible && position === 'bottom' ? 2 : 1;
+
+    if (position === 'bottom') {
+      value = start - dy / 100;
+    }
+
+    if (value <= start) {
+      animation.setValue(value);
+    }
+  }
+
+  _animateRelease(gesture) {
+    const { position, animation, keyboardVisible } = this.state;
+    const { dy, vy } = gesture;
+
+    const isBottom = position === 'bottom';
+    let value = 1 + dy / 100;
+
+    if (isBottom) {
+      value = 1 - dy / 100;
+    }
+
+    const treshold = 0.65;
+    if (value <= treshold || Math.abs(vy) >= treshold) {
+      this.hide({
+        speed: Math.abs(vy) * 3
+      });
+    } else {
+      Animated.spring(animation, {
+        toValue: keyboardVisible && isBottom ? 2 : 1,
+        velocity: vy,
+        useNativeDriver: true
+      }).start();
+    }
+  }
+
+  async show(options = {}) {
+    const { inProgress, isVisible } = this.state;
+    if (inProgress || isVisible) {
+      await this.hide();
+    }
+
+    await this._setState((prevState) => ({
+      ...prevState,
+      ...getInitialState(this.props), // Reset layout
+      /*
+          Preserve the previously computed height (via onLayout).
+          If the height of the component corresponding to this `show` call is different,
+          onLayout will be called again and `height` state will adjust.
+
+          This fixes an issue where a succession of calls to components with custom heights (custom Toast types)
+          fails to hide them completely due to always resetting to the default component height
+      */
+      height: prevState.height,
+      inProgress: true,
+      ...options,
+      ...(options?.props ? { customProps: options.props } : { customProps: {} })
+    }));
+    await this.animateShow();
+    await this._setState((prevState) => ({
+      ...prevState,
+      isVisible: true,
+      inProgress: false
+    }));
+    this.clearTimer();
+
+    const { autoHide, onShow } = this.state;
+
+    if (autoHide) {
+      this.startTimer();
+    }
+
+    if (onShow) {
+      onShow();
+    }
+  }
+
+  async hide({ speed } = {}) {
+    await this._setState((prevState) => ({
+      ...prevState,
+      inProgress: true
+    }));
+    await this.animateHide({
+      speed
+    });
+    this.clearTimer();
+    await this._setState((prevState) => ({
+      ...prevState,
+      isVisible: false,
+      inProgress: false
+    }));
+
+    const { onHide } = this.state;
+    if (onHide) {
+      onHide();
+    }
+  }
+
+  animateShow = () => {
+    const { keyboardVisible, position } = this.state;
+    const toValue = keyboardVisible && position === 'bottom' ? 2 : 1;
+    return this.animate({ toValue });
+  };
+
+  animateHide({ speed } = {}) {
+    return this.animate({ toValue: 0, speed });
+  }
+
+  animate({ toValue, speed = 0 }) {
+    const { animation } = this.state;
+    return new Promise((resolve) => {
+      const config = {
+        toValue,
+        useNativeDriver: true,
+        ...(speed > 0 ? { speed } : { friction: FRICTION })
+      };
+      Animated.spring(animation, config).start(() => resolve());
+    });
+  }
+
+  startTimer() {
+    const { visibilityTime } = this.state;
+    this.timer = setTimeout(() => this.hide(), visibilityTime);
+  }
+
+  clearTimer() {
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
+
+  renderContent({ config }) {
+    const componentsConfig = {
+      ...defaultComponentsConfig,
+      ...config
+    };
+
+    const { type, customProps } = this.state;
+    const toastComponent = componentsConfig[type];
+
+    if (!toastComponent) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `Type '${type}' does not exist. Make sure to add it to your 'config'. You can read the documentation here: https://github.com/calintamas/react-native-toast-message/blob/master/README.md`
+      );
+      return null;
+    }
+
+    return toastComponent({
+      ...includeKeys({
+        obj: this.state,
+        keys: [
+          'position',
+          'type',
+          'inProgress',
+          'isVisible',
+          'text1',
+          'text2',
+          'hide',
+          'show',
+          'onPress'
+        ]
+      }),
+      props: { ...customProps },
+      hide: this.hide,
+      show: this.show
+    });
+  }
+
+  getBaseStyle(position = 'bottom', keyboardHeight) {
+    const { topOffset, bottomOffset, keyboardOffset, height, animation } =
+      this.state;
+    const offset = position === 'bottom' ? bottomOffset : topOffset;
+
+    // +5 px to completely hide the toast under StatusBar (on Android)
+    const range = [height + 5, -offset, -(keyboardOffset + keyboardHeight)];
+    const outputRange = position === 'bottom' ? range : complement(range);
+
+    const translateY = animation.interpolate({
+      inputRange: [0, 1, 2],
+      outputRange: [0, 1, 0]
+    });
+
+    return [
+      styles.base,
+      styles[position],
+      {
+        opacity: translateY
+      }
+    ];
+  }
+
+  onLayout(e) {
+    this.setState({ height: e.nativeEvent.layout.height });
+  }
+
+  render() {
+    const { style } = this.props;
+    const { position, keyboardHeight } = this.state;
+    const baseStyle = this.getBaseStyle(position, keyboardHeight);
+
+    return (
+      <Animated.View
+        testID='animatedView'
+        onLayout={this.onLayout}
+        style={[
+          baseStyle,
+          style,
+          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none', backgroundColor:'red' }
+        ]} //added zindex
+        {...this.panResponder.panHandlers}>
+        {this.renderContent(this.props)}
+      </Animated.View>
+    );
+  }
+}
+
+Toast.propTypes = {
+  config: PropTypes.objectOf(PropTypes.func),
+  style: stylePropType,
+  topOffset: PropTypes.number,
+  bottomOffset: PropTypes.number,
+  keyboardOffset: PropTypes.number,
+  visibilityTime: PropTypes.number,
+  autoHide: PropTypes.bool,
+  height: PropTypes.number,
+  position: PropTypes.oneOf(['top', 'bottom']),
+  type: PropTypes.string
+};
+
+Toast.defaultProps = {
+  config: {},
+  style: undefined,
+  topOffset: 30,
+  bottomOffset: 40,
+  keyboardOffset: 15,
+  visibilityTime: 4000,
+  autoHide: true,
+  height: 60,
+  position: 'top',
+  type: 'success'
+};
+
+export default Toast;