index.js

/* eslint-disable no-extra-boolean-cast */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Navigator } from 'react-native-deprecated-custom-components';
import { View, StyleSheet, UIManager, BackHandler, Platform, AppState } from 'react-native';
import TYSdk from '../../../TYNativeApi';
import MaskView from '../../modal/portalOut';
import FullView from '../full-view';
import Notification from '../../notification';
import TYNativeModules, { getRssi } from '../api';
import AnimatedModal from '../detect-net-modal';
import Strings from '../../../i18n/strings';

const TYEvent = TYSdk.event;
const TYMobile = TYSdk.mobile;

const SceneConfigs = {
  ...Navigator.SceneConfigs.HorizontalSwipeJump,
  gestures: {
    pop: {
      ...Navigator.SceneConfigs.FloatFromRight.gestures.pop,
    },
  },
};

const moreIcon =
  'M353.152 237.76a52.736 52.736 0 0 0 1.28 75.776l210.432 196.352-204.16 202.944a52.928 52.928 0 0 0-0.64 74.496 51.712 51.712 0 0 0 73.6 0.512l230.144-229.568a64 64 0 0 0-0.256-90.88l-232.96-229.888a54.912 54.912 0 0 0-77.44 0.256z';

const Res = require('../../res/wifi.png');

let _navigator;

BackHandler.addEventListener('hardwareBackPress', () => {
  if (_navigator && _navigator.getCurrentRoutes().length > 1) {
    _navigator.pop();
    return true;
  }
  return false;
});

export default class NavigatorLayout extends Component {
  static propTypes = {
    devInfo: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);

    this._sceneConfigs = this.__sceneConfigs.bind(this);
    this._renderScene = this.__renderScene.bind(this);
    this._onDidFocus = this.__onDidFocus.bind(this);
    this._onWillFocus = this.__onWillFocus.bind(this);
    this._onBack = this.onBack.bind(this);

    this.state = {
      modalVisible: false,
    };

    if (UIManager.setLayoutAnimationEnabledExperimental) {
      UIManager.setLayoutAnimationEnabledExperimental(true);
    }
  }

  componentDidMount() {
    const { devInfo = {} } = this.props;
    const { hideSignalPop: hideSignalPopProps = false } = this.opts;

    const hideSignalPop =
      devInfo &&
      devInfo.panelConfig &&
      devInfo.panelConfig.fun &&
      devInfo.panelConfig.fun.hideSignalPop;

    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', this._onBack);
    }

    if (hideSignalPop || hideSignalPopProps) return;

    TYNativeModules.receiverMqttData(23);
    TYNativeModules.sendMqttData(22);

    TYSdk.DeviceEventEmitter.addListener('receiveMqttData', this._handleMqttSignal);
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    const { hideSignalPop: hideSignalPopProps = false } = this.opts;

    const hideSignalPop =
      devInfo &&
      devInfo.panelConfig &&
      devInfo.panelConfig.fun &&
      devInfo.panelConfig.fun.hideSignalPop;

    if (Platform.OS === 'android') {
      BackHandler.removeEventListener('hardwareBackPress', this._onBack);
    }

    if (hideSignalPop || hideSignalPopProps) return;

    Notification.hide();
    this.timer && clearTimeout(this.timer);
    TYSdk.DeviceEventEmitter.removeListener('receiveMqttData', this._handleMqttSignal);
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  // 可重写此方法实现具体页面渲染
  renderScene(route, navigator) {
    const Element = route.element || View;
    return <Element navigator={navigator} {...route} />;
  }

  __sceneConfigs(route, routeStack) {
    return route.sceneConfigs ? route.sceneConfigs : SceneConfigs;
  }

  __renderScene(route, navigator) {
    _navigator = navigator;
    TYSdk.applyNavigator(navigator);
    // this.props.dispatch({ type: '_NAVIGATOR_', navigator });
    // }
    // eslint-disable-next-line
    // console.log(this.state, '=======navigator-layout __renderScene');
    // route.initialized = this.state.initialized;
    return this.dispatchRoute(route, navigator);
  }

  __onDidFocus(route) {
    TYEvent.fire('NAVIGATOR_ON_DID_FOCUS', route);
  }

  __onWillFocus(route) {
    TYEvent.fire('NAVIGATOR_ON_WILL_FOCUS', route);
  }

  onBack() {
    if (_navigator && _navigator.getCurrentRoutes().length > 1) {
      _navigator.pop();
      return true;
    }
    return false;
  }

  hookRoute(route) {
    return {};
  }

  _handleAppStateChange = nextAppState => {
    if (nextAppState === 'background') {
      Notification.hide();
    }
  };

  _handleMqttSignal = ({ data = {}, protocol } = {}) => {
    if (!data) return;
    if (protocol === 23) {
      const { data: result } = data;
      const { signal } = result;
      getRssi().then(res => {
        if (!res) {
          return;
        }
        const { value: rssi } = res;
        if (signal < rssi && AppState.currentState === 'active') {
          this.timer && clearTimeout(this.timer);

          Notification.show({
            message: Strings.getLang('location'),
            backIcon: moreIcon,
            onClose: this._handleToDetail,
            onPress: this._handleToDetail,
            enableImage: true,
            backIconSize: 20,
            backIconCenter: true,
            imageSource: Res,
          });
          this.timer = setTimeout(() => {
            Notification.hide();
          }, 3000);
        }
      });
    }
  };

  _handleToDetail = () => {
    this.setState({
      modalVisible: true,
    });
  };
  dispatchRoute(route, navigator) {
    let contentLayout = null;
    const opts = this.hookRoute(route);
    this.opts = opts;
    const { enablePopGesture = true } = opts;
    if ((!!opts.gesture || opts.id === 'main') && enablePopGesture) {
      TYMobile.enablePopGesture();
    } else {
      TYMobile.disablePopGesture();
    }

    contentLayout = this.renderScene(route, navigator);
    if (!!opts.hideFullView || route.initialized) {
      contentLayout = this.renderScene(route, navigator);
      if (!!opts.hideFullView) return contentLayout;
    }
    const { devInfo } = this.props;
    const title = opts.title ? opts.title : devInfo.name;

    let showOfflineView =
      opts.showOfflineView !== undefined
        ? opts.showOfflineView
        : !devInfo.appOnline || !devInfo.deviceOnline;
    if (Object.keys(devInfo).length <= 1) {
      showOfflineView = false;
    }
    if (!!opts.FullView) {
      const CustomFullView = opts.FullView;
      return (
        <CustomFullView
          ref={ref => {
            if (ref) this.fullViewRef = ref;
          }}
          title={title}
          onBack={this._onBack}
          appOnline={devInfo.appOnline}
          deviceOnline={devInfo.deviceOnline}
          renderStatusBar={opts.renderStatusBar}
          renderTopBar={opts.renderTopBar}
          hideTopbar={!!opts.hideTopbar}
          showOfflineView={showOfflineView}
          devInfo={devInfo}
        >
          {contentLayout}
        </CustomFullView>
      );
    }

    return (
      <FullView
        ref={ref => {
          if (ref) this.fullViewRef = ref;
        }}
        title={title}
        style={[styles.container, opts.style]}
        background={opts.background}
        topbarStyle={[styles.topbarStyle, opts.topbarStyle]}
        topbarTextStyle={opts.topbarTextStyle}
        appOnline={devInfo.appOnline}
        deviceOnline={devInfo.deviceOnline}
        capability={devInfo.capability}
        onBack={this._onBack}
        showMenu={route.id === 'main'}
        isBleOfflineOverlay={opts.isBleOfflineOverlay}
        renderStatusBar={opts.renderStatusBar}
        renderTopBar={opts.renderTopBar}
        hideTopbar={!!opts.hideTopbar}
        showOfflineView={showOfflineView}
        backgroundStyle={opts.backgroundStyle}
        devInfo={devInfo}
      >
        {contentLayout}
      </FullView>
    );
  }

  _onDidFocus(route) {
    TYEvent.fire('NAVIGATOR_ON_DID_FOCUS', route);
  }

  render() {
    const { modalVisible } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <Navigator
          initialRoute={{ id: 'main', initialRoute: true }}
          configureScene={this._sceneConfigs}
          renderScene={this._renderScene}
          onDidFocus={this._onDidFocus}
          onWillFocus={this._onWillFocus}
        />
        {modalVisible && <AnimatedModal onClose={() => this.setState({ modalVisible: false })} />}
        <MaskView />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },

  topbarStyle: {},
});