@nghinv/react-native-app-tour
Version:
React Native app tour Library
393 lines (376 loc) • 14 kB
JavaScript
/**
* Created by nghinv on Wed Jun 23 2021
* Copyright (c) 2021 nghinv@lumi.biz
*/
import React, { useContext } from 'react';
import { View, StyleSheet, useWindowDimensions, Platform, TouchableOpacity } from 'react-native';
import equals from 'react-fast-compare';
import { Svg, Defs, Rect, Circle, Mask } from 'react-native-svg';
import AnimateableText from 'react-native-animateable-text';
import { TapGestureHandler } from 'react-native-gesture-handler';
import Animated, { interpolate, interpolateColor, runOnJS, useAnimatedGestureHandler, useAnimatedProps, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import { AppTourContext } from './AppTourContext';
import { useEvent, useVectorLayout } from './hook';
import { getCurrentNode, withAnimation } from './math';
import MenuButton from './MenuButton';
const RectAnimated = Animated.createAnimatedComponent(Rect);
const CircleAnimated = Animated.createAnimatedComponent(Circle);
const IS_IOS = Platform.OS === 'ios';
function MashView(props) {
var _options$triangleHeig, _options$stepHeight, _options$pathAnimated, _options$backgroundCo, _options$borderRadius, _options$backgroundCo2, _options$stepBackgrou, _options$stepTitleCol;
const {
progress,
currentStep,
scene,
onStop
} = props;
const {
nodes,
options
} = useContext(AppTourContext);
const {
emitEvent
} = useEvent();
const defaultTarget = useVectorLayout();
const dimension = useWindowDimensions();
const contentHeight = useSharedValue(0);
const contentWidth = useSharedValue(0);
const activeNode = useSharedValue(0);
const TriangleHeight = (_options$triangleHeig = options === null || options === void 0 ? void 0 : options.triangleHeight) !== null && _options$triangleHeig !== void 0 ? _options$triangleHeig : 8;
const StepHeight = (_options$stepHeight = options === null || options === void 0 ? void 0 : options.stepHeight) !== null && _options$stepHeight !== void 0 ? _options$stepHeight : 20;
const pathAnimated = (_options$pathAnimated = options === null || options === void 0 ? void 0 : options.pathAnimated) !== null && _options$pathAnimated !== void 0 ? _options$pathAnimated : IS_IOS;
const onNextStep = () => {
const nextValue = currentStep.value + 1;
const sceneLength = scene.length;
if (nextValue <= sceneLength - 1) {
const currentScene = scene[nextValue];
currentStep.value = nextValue;
emitEvent('AppTourEvent', {
name: 'onNext',
step: nextValue,
node: nodes.value.find(n => n.id === currentScene.id),
scene: currentScene
});
} else {
onStop();
}
};
const onPressNode = () => {
const currentScene = scene[currentStep.value];
const node = nodes.value.find(n => n.id === currentScene.id);
if (currentScene.enablePressNode) {
var _node$onPress;
node === null || node === void 0 ? void 0 : (_node$onPress = node.onPress) === null || _node$onPress === void 0 ? void 0 : _node$onPress.call(node);
}
if (currentScene.pressToNext) {
emitEvent('AppTourEvent', {
name: 'onPressNode',
step: currentStep.value,
node,
scene: currentScene
});
if (currentScene.nextDelay) {
setTimeout(() => {
onNextStep();
}, currentScene.nextDelay);
} else {
onNextStep();
}
}
};
const onGestureEventNode = useAnimatedGestureHandler({
onActive: () => {
runOnJS(onPressNode)();
},
onStart: () => {
const currentScene = scene[currentStep.value];
if (currentScene.enablePressNode) {
activeNode.value = withAnimation(1);
}
},
onFinish: () => {
const currentScene = scene[currentStep.value];
if (currentScene.enablePressNode) {
activeNode.value = withAnimation(0);
}
}
});
const onContentLayout = event => {
contentHeight.value = event.nativeEvent.layout.height;
contentWidth.value = event.nativeEvent.layout.width;
};
const animatedPropsBackdrop = useAnimatedProps(() => {
var _options$backdropOpac;
return {
fill: interpolateColor(progress.value, [0, 1], ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${(_options$backdropOpac = options === null || options === void 0 ? void 0 : options.backdropOpacity) !== null && _options$backdropOpac !== void 0 ? _options$backdropOpac : 0.8})`])
};
});
const animatedPropsMaskCircle = useAnimatedProps(() => {
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
target,
maskType
} = node;
return {
cx: withAnimation(target.x.value + target.width.value / 2, pathAnimated),
cy: withAnimation(target.y.value + target.height.value / 2, pathAnimated),
r: maskType === 'circle' ? withAnimation(Math.max(target.width.value, target.height.value) / 2, pathAnimated) : 0
};
});
const animatedPropsMaskRect = useAnimatedProps(() => {
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
target,
maskType
} = node;
return {
x: withAnimation(target.x.value, pathAnimated),
y: withAnimation(target.y.value, pathAnimated),
width: maskType !== 'circle' ? withAnimation(target.width.value, pathAnimated) : 0,
height: maskType !== 'circle' ? withAnimation(target.height.value, pathAnimated) : 0
};
});
const childrenStyle = useAnimatedStyle(() => {
var _options$colorNodeOnP;
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
target
} = node;
return {
width: target.width.value,
height: target.height.value,
borderRadius: target.height.value,
backgroundColor: interpolateColor(activeNode.value, [0, 1], ['transparent', (_options$colorNodeOnP = options === null || options === void 0 ? void 0 : options.colorNodeOnPress) !== null && _options$colorNodeOnP !== void 0 ? _options$colorNodeOnP : 'rgba(255, 255, 255, 0.8)']),
transform: [{
translateX: target.x.value
}, {
translateY: target.y.value
}, {
scale: interpolate(activeNode.value, [0, 1], [1, 1.2])
}]
};
});
const contentStyle = useAnimatedStyle(() => {
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
target
} = node;
const isTargetTopScreen = target.y.value + target.height.value < dimension.height / 2;
const translateY = isTargetTopScreen ? withAnimation(target.y.value + target.height.value + TriangleHeight) : withAnimation(target.y.value - contentHeight.value - TriangleHeight);
const isOverScreen = contentWidth.value + target.x.value > dimension.width - 32;
const delta = (dimension.width - contentWidth.value) / 2;
const translateX = isOverScreen ? withAnimation(Math.max(0, delta)) : withAnimation(target.x.value);
return {
opacity: interpolate(progress.value, [0, 0.9, 1], [0, 0, 1]),
transform: [{
translateX
}, {
translateY
}, {
scale: interpolate(progress.value, [0, 1], [0.6, 1])
}]
};
});
const triangleStyle = useAnimatedStyle(() => {
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
target,
maskType
} = node;
const isTargetTopScreen = target.y.value + target.height.value < dimension.height / 2;
const isOverScreen = contentWidth.value + target.x.value > dimension.width - 32;
const delta = (dimension.width - contentWidth.value) / 2;
const originTranslateX = isOverScreen ? Math.max(0, delta) : target.x.value;
const translateY = isTargetTopScreen ? -TriangleHeight : contentHeight.value;
const translateX = maskType === 'circle' ? withAnimation(target.x.value + target.width.value / 2 - originTranslateX - TriangleHeight) : withAnimation(target.x.value - originTranslateX + 12);
return {
transform: [{
translateY
}, {
translateX
}, {
rotate: isTargetTopScreen ? '0deg' : '180deg'
}]
};
});
const stepStyle = useAnimatedStyle(() => {
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
target
} = node;
const translateX = target.x.value < 32 ? target.x.value + target.width.value - StepHeight / 2 : target.x.value - StepHeight / 2;
const translateY = target.y.value - StepHeight / 2;
return {
transform: [{
translateX
}, {
translateY
}]
};
});
const animatedPropsStep = useAnimatedProps(() => {
return {
text: `${currentStep.value + 1}`
};
});
const animatedPropsTitle = useAnimatedProps(() => {
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
title
} = node;
return {
text: title
};
});
const animatedPropsDescribe = useAnimatedProps(() => {
const {
node
} = getCurrentNode(nodes, scene, currentStep, defaultTarget);
const {
describe
} = node;
return {
text: describe
};
});
return /*#__PURE__*/React.createElement(View, {
pointerEvents: "box-none",
style: styles.container
}, /*#__PURE__*/React.createElement(Svg, {
height: "100%",
width: "100%"
}, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(Mask, {
id: "mask",
x: "0",
y: "0",
height: "100%",
width: "100%"
}, /*#__PURE__*/React.createElement(Rect, {
height: "100%",
width: "100%",
fill: "#fff"
}), /*#__PURE__*/React.createElement(CircleAnimated, {
animatedProps: animatedPropsMaskCircle,
fill: "black"
}), /*#__PURE__*/React.createElement(RectAnimated, {
animatedProps: animatedPropsMaskRect,
fill: "black"
}))), /*#__PURE__*/React.createElement(RectAnimated, {
animatedProps: animatedPropsBackdrop,
height: "100%",
width: "100%",
mask: "url(#mask)",
"fill-opacity": "0"
})), /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.content, {
backgroundColor: (_options$backgroundCo = options === null || options === void 0 ? void 0 : options.backgroundColor) !== null && _options$backgroundCo !== void 0 ? _options$backgroundCo : 'white',
borderRadius: (_options$borderRadius = options === null || options === void 0 ? void 0 : options.borderRadius) !== null && _options$borderRadius !== void 0 ? _options$borderRadius : 5
}, contentStyle],
onLayout: onContentLayout
}, /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.triangle, {
borderBottomColor: (_options$backgroundCo2 = options === null || options === void 0 ? void 0 : options.backgroundColor) !== null && _options$backgroundCo2 !== void 0 ? _options$backgroundCo2 : 'white',
borderLeftWidth: TriangleHeight,
borderRightWidth: TriangleHeight,
borderBottomWidth: TriangleHeight
}, triangleStyle]
}), /*#__PURE__*/React.createElement(View, {
style: styles.viewTitle
}, (options === null || options === void 0 ? void 0 : options.titleShow) !== false && /*#__PURE__*/React.createElement(AnimateableText, {
style: [styles.txtTitle, options === null || options === void 0 ? void 0 : options.titleStyle],
animatedProps: animatedPropsTitle
}), /*#__PURE__*/React.createElement(AnimateableText, {
style: [styles.txtDescribe, options === null || options === void 0 ? void 0 : options.describeStyle],
animatedProps: animatedPropsDescribe
})), /*#__PURE__*/React.createElement(MenuButton, {
currentStep: currentStep,
onStop: onStop
})), (options === null || options === void 0 ? void 0 : options.stepShow) !== false && /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.stepView, {
backgroundColor: (_options$stepBackgrou = options === null || options === void 0 ? void 0 : options.stepBackgroundColor) !== null && _options$stepBackgrou !== void 0 ? _options$stepBackgrou : 'green',
height: StepHeight,
minWidth: StepHeight,
borderRadius: StepHeight / 2
}, stepStyle]
}, /*#__PURE__*/React.createElement(AnimateableText, {
style: [styles.txtStep, {
color: (_options$stepTitleCol = options === null || options === void 0 ? void 0 : options.stepTitleColor) !== null && _options$stepTitleCol !== void 0 ? _options$stepTitleCol : 'white'
}],
animatedProps: animatedPropsStep
})), /*#__PURE__*/React.createElement(TapGestureHandler, {
onGestureEvent: onGestureEventNode,
enabled: !(options !== null && options !== void 0 && options.nativeModal)
}, /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.children, childrenStyle]
}, (options === null || options === void 0 ? void 0 : options.nativeModal) && /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: onPressNode,
style: styles.childrenButton
}))));
}
const styles = StyleSheet.create({
container: { ...StyleSheet.absoluteFillObject
},
children: {
position: 'absolute',
overflow: 'hidden'
},
stepView: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
borderColor: 'white',
paddingHorizontal: 4
},
triangle: {
position: 'absolute',
width: 0,
height: 0,
zIndex: 0,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderStyle: 'solid'
},
content: {
position: 'absolute',
minWidth: 180
},
viewTitle: {
paddingHorizontal: 16,
paddingTop: 12,
paddingBottom: 4,
zIndex: 1
},
txtTitle: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 2
},
txtDescribe: {
fontSize: 16
},
txtStep: {
fontSize: 10,
lineHeight: 12,
fontWeight: '500'
},
childrenButton: {
flex: 1
}
});
export default /*#__PURE__*/React.memo(MashView, equals);
//# sourceMappingURL=MashView.js.map