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

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;

package/template/src/App.tsx

@@ -13,84 +13,116 @@ import React, {useState} from 'react';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';
 import Create from './pages/Create';
-import Authenticate from './pages/Authenticate';
-import {Router, Route, Switch, Redirect} from './components/Router';
+import {Route, Switch, Redirect} from './components/Router';
 import PrivateRoute from './components/PrivateRoute';
 import OAuth from './components/OAuth';
-import Navigation from './components/Navigation';
 import StoreToken from './components/StoreToken';
-import {StorageProvider} from './components/StorageContext';
-import GraphQLProvider from './components/GraphQLProvider';
-// import JoinPhrase from './components/JoinPhrase';
-import {SessionProvider} from './components/SessionContext';
-import {ImageBackground, Platform, SafeAreaView, StatusBar} from 'react-native';
-import ColorConfigure from './components/ColorConfigure';
-import Toast from '../react-native-toast-message';
-import ToastConfig from './subComponents/toastConfig';
-import shouldAuthenticate from './utils/shouldAuthenticate';
+import {shouldAuthenticate, isIOS} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
-
-
-if (Platform.OS === 'ios') {
+// commented for v1 release
+//import {useFpe, CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'fpe-api';
+import AppWrapper from './AppWrapper';
+import {
+  MeetingInfoContextInterface,
+  MeetingInfoDefaultValue,
+  MeetingInfoProvider,
+} from './components/meeting-info/useMeetingInfo';
+import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
+import {ShareLinkProvider} from './components/useShareLink';
+if (isIOS) {
   KeyboardManager.setEnable(true);
   KeyboardManager.setEnableAutoToolbar(false);
   KeyboardManager.setShouldShowToolbarPlaceholder(false);
   KeyboardManager.setShouldResignOnTouchOutside(true);
 }
 
+//Extending the UI Kit Type defintion to add custom attribute to render interface
+declare module 'agora-rn-uikit' {
+  interface DefaultRenderInterface {
+    name: string;
+    screenUid: number;
+    offline: boolean;
+  }
+  interface RtcPropsInterface {
+    screenShareUid: number;
+    screenShareToken?: string;
+  }
+}
+
 const App: React.FC = () => {
-  const [phrase, onChangePhrase] = useState('');
+  //commented for v1 release
+  //const CustomRoutes = useFpe((data) => data?.customRoutes);
+  // const RenderCustomRoutes = () => {
+  //   try {
+  //     return (
+  //       CustomRoutes &&
+  //       Array.isArray(CustomRoutes) &&
+  //       CustomRoutes.length &&
+  //       CustomRoutes?.map((item: CustomRoutesInterface, i: number) => {
+  //         let RouteComponent = item?.isPrivateRoute ? PrivateRoute : Route;
+  //         return (
+  //           <RouteComponent
+  //             path={CUSTOM_ROUTES_PREFIX + item.path}
+  //             exact={item.exact}
+  //             key={i}
+  //             failureRedirectTo={
+  //               item.failureRedirectTo ? item.failureRedirectTo : '/'
+  //             }
+  //             {...item.routeProps}>
+  //             <item.component {...item.componentProps} />
+  //           </RouteComponent>
+  //         );
+  //       })
+  //     );
+  //   } catch (error) {
+  //     console.error('Error on rendering the custom routes');
+  //     return null;
+  //   }
+  // };
+  const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
+    MeetingInfoDefaultValue,
+  );
 
   return (
-    <ImageBackground
-      source={{uri: $config.BG}}
-      style={{flex: 1}}
-      resizeMode={'cover'}>
-      <SafeAreaView style={{flex: 1}}>
-        <StatusBar hidden={true} />
-        <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
-        <StorageProvider>
-          <GraphQLProvider>
-            <Router>
-              <SessionProvider>
-                <ColorConfigure>
-                  <Navigation />
-                  <Switch>
-                    <Route exact path={'/'}>
-                      <Redirect to={'/create'} />
-                    </Route>
-                    <Route exact path={'/authenticate'}>
-                      {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
-                    </Route>
-                    <Route path={'/auth-token/:token'}>
-                      <StoreToken />
-                    </Route>
-                    <Route exact path={'/join'}>
-                      <Join phrase={phrase} onChangePhrase={onChangePhrase} />
-                    </Route>
-                    {shouldAuthenticate ? (
-                      <PrivateRoute
-                        path={'/create'}
-                        failureRedirectTo={'/authenticate'}>
-                        <Create />
-                      </PrivateRoute>
-                    ) : (
-                      <Route path={'/create'}>
-                        <Create />
-                      </Route>
-                    )}
-                    <Route path={'/:phrase'}>
-                      <VideoCall />
-                    </Route>
-                  </Switch>
-                </ColorConfigure>
-              </SessionProvider>
-            </Router>
-          </GraphQLProvider>
-        </StorageProvider>
-      </SafeAreaView>
-    </ImageBackground>
+    <AppWrapper>
+      <SetMeetingInfoProvider value={{setMeetingInfo}}>
+        <MeetingInfoProvider value={{...meetingInfo}}>
+          <ShareLinkProvider>
+            <Switch>
+              {/* commented for v1 release */}
+              {/* {RenderCustomRoutes()} */}
+              <Route exact path={'/'}>
+                <Redirect to={'/create'} />
+              </Route>
+              <Route exact path={'/authenticate'}>
+                {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
+              </Route>
+              <Route path={'/auth-token/:token'}>
+                <StoreToken />
+              </Route>
+              <Route exact path={'/join'}>
+                <Join />
+              </Route>
+              {shouldAuthenticate ? (
+                <PrivateRoute
+                  path={'/create'}
+                  failureRedirectTo={'/authenticate'}>
+                  <Create />
+                </PrivateRoute>
+              ) : (
+                <Route path={'/create'}>
+                  <Create />
+                </Route>
+              )}
+              <Route path={'/:phrase'}>
+                <VideoCall />
+              </Route>
+            </Switch>
+          </ShareLinkProvider>
+        </MeetingInfoProvider>
+      </SetMeetingInfoProvider>
+    </AppWrapper>
   );
-  // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}
 };
+
 export default App;