@nghinv/react-native-app-tour/lib/module/MenuButton.js

React Native app tour Library

/**
 * Created by nghinv on Thu Jun 24 2021
 * Copyright (c) 2021 nghinv@lumi.biz
 */
import React, { useContext, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import equals from 'react-fast-compare';
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
import { AppTourContext } from './AppTourContext';
import ButtonText from './ButtonText';
import { useEvent } from './hook';
MenuButton.defaultProps = {};
const OrderState = {
  start: 0,
  continue: 1,
  end: 2
};

function MenuButton(props) {
  var _options$buttonTitle$, _options$buttonTitle, _options$buttonTitleC, _options$buttonTitle$2, _options$buttonTitle2, _options$buttonTitleC2, _options$buttonTitle$3, _options$buttonTitle3, _options$buttonTitleC3, _options$buttonTitle$4, _options$buttonTitle4, _options$buttonTitleC4, _options$buttonTitle$5, _options$buttonTitle5, _options$buttonTitleC5, _options$buttonTitle$6, _options$buttonTitle6, _options$buttonTitleC6, _options$buttonTitle$7, _options$buttonTitle7, _options$buttonTitleC7;

  const {
    currentStep,
    onStop
  } = props;
  const {
    nodes,
    scenes,
    sceneIndex,
    options
  } = useContext(AppTourContext);
  const {
    emitEvent
  } = useEvent();
  const [orderState, setOrderState] = useState(OrderState.start);
  const [enableNext, setEnableNext] = useState(true);
  const [enablePrev, setEnablePrev] = useState(true);
  useAnimatedReaction(() => {
    return currentStep.value;
  }, value => {
    const scene = scenes[sceneIndex];
    const sceneLength = scene.length;
    const sceneStep = scene[value];

    if (sceneStep.pressToNext) {
      enableNext && runOnJS(setEnableNext)(false);
    } else if (sceneStep.nextDisable && enableNext) {
      runOnJS(setEnableNext)(false);
    } else if (!sceneStep.nextDisable && !enableNext) {
      runOnJS(setEnableNext)(true);
    }

    if (sceneStep.prevDisable && enablePrev) {
      runOnJS(setEnablePrev)(false);
    }

    if (!sceneStep.prevDisable && !enablePrev) {
      runOnJS(setEnablePrev)(true);
    }

    if (value === sceneLength - 1) {
      if (orderState !== OrderState.end) {
        runOnJS(setOrderState)(OrderState.end);
      }
    } else if (value === 0) {
      if (orderState !== OrderState.start) {
        runOnJS(setOrderState)(OrderState.start);
      }
    } else if (value > 0 && value < sceneLength) {
      if (orderState !== OrderState.continue) {
        runOnJS(setOrderState)(OrderState.continue);
      }
    }
  });

  const onSkip = () => {
    onStop();
    const scene = scenes[sceneIndex][currentStep.value];
    emitEvent('AppTourEvent', {
      name: 'onSkip',
      step: currentStep.value,
      node: nodes.value.find(n => n.id === scene.id),
      scene
    });
  };

  const onNextStep = () => {
    const nextValue = currentStep.value + 1;
    const sceneLength = scenes[sceneIndex].length;

    if (nextValue <= sceneLength - 1) {
      const scene = scenes[sceneIndex][nextValue];
      currentStep.value = nextValue;
      emitEvent('AppTourEvent', {
        name: 'onNext',
        step: nextValue,
        node: nodes.value.find(n => n.id === scene.id),
        scene
      });
    } else {
      onStop();
    }
  };

  const onPrevious = () => {
    const preValue = currentStep.value - 1;

    if (preValue >= 0) {
      currentStep.value = preValue;
      const scene = scenes[sceneIndex][preValue];
      emitEvent('AppTourEvent', {
        name: 'onPrevious',
        step: preValue,
        node: nodes.value.find(n => n.id === scene.id),
        scene
      });
    } else {
      onStop();
    }
  };

  const onFinish = () => {
    onStop();
    const scene = scenes[sceneIndex][currentStep.value];
    emitEvent('AppTourEvent', {
      name: 'onFinish',
      step: currentStep.value,
      node: nodes.value.find(n => n.id === scene.id),
      scene
    });
  };

  return /*#__PURE__*/React.createElement(View, {
    style: styles.viewButton
  }, orderState === OrderState.start && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonText, {
    title: (_options$buttonTitle$ = options === null || options === void 0 ? void 0 : (_options$buttonTitle = options.buttonTitle) === null || _options$buttonTitle === void 0 ? void 0 : _options$buttonTitle.skip) !== null && _options$buttonTitle$ !== void 0 ? _options$buttonTitle$ : 'Skip',
    titleColor: options === null || options === void 0 ? void 0 : (_options$buttonTitleC = options.buttonTitleColor) === null || _options$buttonTitleC === void 0 ? void 0 : _options$buttonTitleC.skip,
    onPress: onSkip
  }), enableNext && /*#__PURE__*/React.createElement(ButtonText, {
    title: (_options$buttonTitle$2 = options === null || options === void 0 ? void 0 : (_options$buttonTitle2 = options.buttonTitle) === null || _options$buttonTitle2 === void 0 ? void 0 : _options$buttonTitle2.next) !== null && _options$buttonTitle$2 !== void 0 ? _options$buttonTitle$2 : 'Next',
    titleColor: options === null || options === void 0 ? void 0 : (_options$buttonTitleC2 = options.buttonTitleColor) === null || _options$buttonTitleC2 === void 0 ? void 0 : _options$buttonTitleC2.next,
    onPress: onNextStep
  })), orderState === OrderState.continue && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonText, {
    title: (_options$buttonTitle$3 = options === null || options === void 0 ? void 0 : (_options$buttonTitle3 = options.buttonTitle) === null || _options$buttonTitle3 === void 0 ? void 0 : _options$buttonTitle3.skip) !== null && _options$buttonTitle$3 !== void 0 ? _options$buttonTitle$3 : 'Skip',
    titleColor: options === null || options === void 0 ? void 0 : (_options$buttonTitleC3 = options.buttonTitleColor) === null || _options$buttonTitleC3 === void 0 ? void 0 : _options$buttonTitleC3.skip,
    onPress: onSkip
  }), enablePrev && /*#__PURE__*/React.createElement(ButtonText, {
    title: (_options$buttonTitle$4 = options === null || options === void 0 ? void 0 : (_options$buttonTitle4 = options.buttonTitle) === null || _options$buttonTitle4 === void 0 ? void 0 : _options$buttonTitle4.prev) !== null && _options$buttonTitle$4 !== void 0 ? _options$buttonTitle$4 : 'Previous',
    titleColor: options === null || options === void 0 ? void 0 : (_options$buttonTitleC4 = options.buttonTitleColor) === null || _options$buttonTitleC4 === void 0 ? void 0 : _options$buttonTitleC4.prev,
    onPress: onPrevious
  }), enableNext && /*#__PURE__*/React.createElement(ButtonText, {
    title: (_options$buttonTitle$5 = options === null || options === void 0 ? void 0 : (_options$buttonTitle5 = options.buttonTitle) === null || _options$buttonTitle5 === void 0 ? void 0 : _options$buttonTitle5.next) !== null && _options$buttonTitle$5 !== void 0 ? _options$buttonTitle$5 : 'Next',
    titleColor: options === null || options === void 0 ? void 0 : (_options$buttonTitleC5 = options.buttonTitleColor) === null || _options$buttonTitleC5 === void 0 ? void 0 : _options$buttonTitleC5.next,
    onPress: onNextStep
  })), orderState === OrderState.end && /*#__PURE__*/React.createElement(React.Fragment, null, enablePrev && /*#__PURE__*/React.createElement(ButtonText, {
    title: (_options$buttonTitle$6 = options === null || options === void 0 ? void 0 : (_options$buttonTitle6 = options.buttonTitle) === null || _options$buttonTitle6 === void 0 ? void 0 : _options$buttonTitle6.prev) !== null && _options$buttonTitle$6 !== void 0 ? _options$buttonTitle$6 : 'Previous',
    titleColor: options === null || options === void 0 ? void 0 : (_options$buttonTitleC6 = options.buttonTitleColor) === null || _options$buttonTitleC6 === void 0 ? void 0 : _options$buttonTitleC6.prev,
    onPress: onPrevious
  }), /*#__PURE__*/React.createElement(ButtonText, {
    title: (_options$buttonTitle$7 = options === null || options === void 0 ? void 0 : (_options$buttonTitle7 = options.buttonTitle) === null || _options$buttonTitle7 === void 0 ? void 0 : _options$buttonTitle7.finish) !== null && _options$buttonTitle$7 !== void 0 ? _options$buttonTitle$7 : 'Finish',
    titleColor: options === null || options === void 0 ? void 0 : (_options$buttonTitleC7 = options.buttonTitleColor) === null || _options$buttonTitleC7 === void 0 ? void 0 : _options$buttonTitleC7.finish,
    onPress: onFinish
  })));
}

const styles = StyleSheet.create({
  viewButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingRight: 8,
    paddingLeft: 24,
    zIndex: 1
  }
});
export default /*#__PURE__*/React.memo(MenuButton, equals);
//# sourceMappingURL=MenuButton.js.map