@nghinv/react-native-app-tour
Version:
React Native app tour Library
200 lines (172 loc) • 10.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
var _reactNativeReanimated = require("react-native-reanimated");
var _AppTourContext = require("./AppTourContext");
var _ButtonText = _interopRequireDefault(require("./ButtonText"));
var _hook = require("./hook");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* Created by nghinv on Thu Jun 24 2021
* Copyright (c) 2021 nghinv@lumi.biz
*/
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
} = (0, _react.useContext)(_AppTourContext.AppTourContext);
const {
emitEvent
} = (0, _hook.useEvent)();
const [orderState, setOrderState] = (0, _react.useState)(OrderState.start);
const [enableNext, setEnableNext] = (0, _react.useState)(true);
const [enablePrev, setEnablePrev] = (0, _react.useState)(true);
(0, _reactNativeReanimated.useAnimatedReaction)(() => {
return currentStep.value;
}, value => {
const scene = scenes[sceneIndex];
const sceneLength = scene.length;
const sceneStep = scene[value];
if (sceneStep.pressToNext) {
enableNext && (0, _reactNativeReanimated.runOnJS)(setEnableNext)(false);
} else if (sceneStep.nextDisable && enableNext) {
(0, _reactNativeReanimated.runOnJS)(setEnableNext)(false);
} else if (!sceneStep.nextDisable && !enableNext) {
(0, _reactNativeReanimated.runOnJS)(setEnableNext)(true);
}
if (sceneStep.prevDisable && enablePrev) {
(0, _reactNativeReanimated.runOnJS)(setEnablePrev)(false);
}
if (!sceneStep.prevDisable && !enablePrev) {
(0, _reactNativeReanimated.runOnJS)(setEnablePrev)(true);
}
if (value === sceneLength - 1) {
if (orderState !== OrderState.end) {
(0, _reactNativeReanimated.runOnJS)(setOrderState)(OrderState.end);
}
} else if (value === 0) {
if (orderState !== OrderState.start) {
(0, _reactNativeReanimated.runOnJS)(setOrderState)(OrderState.start);
}
} else if (value > 0 && value < sceneLength) {
if (orderState !== OrderState.continue) {
(0, _reactNativeReanimated.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.default.createElement(_reactNative.View, {
style: styles.viewButton
}, orderState === OrderState.start && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ButtonText.default, {
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.default.createElement(_ButtonText.default, {
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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ButtonText.default, {
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.default.createElement(_ButtonText.default, {
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.default.createElement(_ButtonText.default, {
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.default.createElement(_react.default.Fragment, null, enablePrev && /*#__PURE__*/_react.default.createElement(_ButtonText.default, {
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.default.createElement(_ButtonText.default, {
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 = _reactNative.StyleSheet.create({
viewButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
paddingRight: 8,
paddingLeft: 24,
zIndex: 1
}
});
var _default = /*#__PURE__*/_react.default.memo(MenuButton, _reactFastCompare.default);
exports.default = _default;
//# sourceMappingURL=MenuButton.js.map