This repository has been archived on 2022-03-12. You can view files and clone it, but cannot push or open issues or pull requests.
reValuate/node_modules/react-native-screens/lib/module/createNativeStackNavigator.js

304 lines
10 KiB
JavaScript
Raw Permalink Normal View History

2021-04-02 02:24:13 +03:00
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
import { Screen, ScreenStack, ScreenStackHeaderBackButtonImage, ScreenStackHeaderCenterView, ScreenStackHeaderConfig, ScreenStackHeaderLeftView, ScreenStackHeaderRightView } from 'react-native-screens';
import { createNavigator, SceneView, StackActions, StackRouter } from 'react-navigation';
import { HeaderBackButton } from 'react-navigation-stack';
function renderComponentOrThunk(componentOrThunk, props) {
if (typeof componentOrThunk === 'function') {
return componentOrThunk(props);
}
return componentOrThunk;
}
const REMOVE_ACTION = 'NativeStackNavigator/REMOVE';
class StackView extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "_removeScene", route => {
this.props.navigation.dispatch({
type: REMOVE_ACTION,
immediate: true,
key: route.key
});
});
_defineProperty(this, "_onAppear", (route, descriptor) => {
descriptor.options && descriptor.options.onAppear && descriptor.options.onAppear();
this.props.navigation.dispatch(StackActions.completeTransition({
toChildKey: route.key,
key: this.props.navigation.state.key
}));
});
_defineProperty(this, "_onFinishTransitioning", () => {
const {
routes
} = this.props.navigation.state;
const lastRoute = (routes === null || routes === void 0 ? void 0 : routes.length) && routes[routes.length - 1];
if (lastRoute) {
this.props.navigation.dispatch(StackActions.completeTransition({
toChildKey: lastRoute.key,
key: this.props.navigation.state.key
}));
}
});
_defineProperty(this, "_renderHeaderConfig", (index, route, descriptor) => {
const {
navigationConfig
} = this.props;
const {
options
} = descriptor;
const {
headerMode
} = navigationConfig;
const {
backButtonInCustomView,
direction,
headerBackTitle,
headerBackTitleStyle,
headerBackTitleVisible,
headerHideBackButton,
headerLargeTitleStyle,
headerStyle,
headerTintColor,
headerTitleStyle,
headerTopInsetEnabled = true,
hideShadow,
largeTitle,
statusBarAnimation,
statusBarHidden,
statusBarStyle,
title,
translucent
} = options;
const scene = {
index,
key: route.key,
route,
descriptor
};
const headerOptions = {
backButtonInCustomView,
backTitle: headerBackTitleVisible === false ? '' : headerBackTitle,
backTitleFontFamily: headerBackTitleStyle && headerBackTitleStyle.fontFamily,
backTitleFontSize: headerBackTitleStyle && headerBackTitleStyle.fontSize,
color: headerTintColor,
direction,
topInsetEnabled: headerTopInsetEnabled,
hideBackButton: headerHideBackButton,
hideShadow,
largeTitle,
largeTitleBackgroundColor: headerLargeTitleStyle && headerLargeTitleStyle.backgroundColor,
largeTitleColor: headerLargeTitleStyle && headerLargeTitleStyle.color,
largeTitleFontFamily: headerLargeTitleStyle && headerLargeTitleStyle.fontFamily,
largeTitleFontSize: headerLargeTitleStyle && headerLargeTitleStyle.fontSize,
statusBarAnimation,
statusBarHidden,
statusBarStyle,
title,
titleColor: headerTitleStyle && headerTitleStyle.color || headerTintColor,
titleFontFamily: headerTitleStyle && headerTitleStyle.fontFamily,
titleFontSize: headerTitleStyle && headerTitleStyle.fontSize,
translucent: translucent === undefined ? false : translucent
};
const hasHeader = headerMode !== 'none' && options.header !== null;
if (!hasHeader) {
return /*#__PURE__*/React.createElement(ScreenStackHeaderConfig, _extends({}, headerOptions, {
hidden: true
}));
}
if (headerStyle !== undefined) {
headerOptions.backgroundColor = headerStyle.backgroundColor;
headerOptions.blurEffect = headerStyle.blurEffect;
}
const children = [];
if (options.backButtonImage) {
children.push( /*#__PURE__*/React.createElement(ScreenStackHeaderBackButtonImage, {
key: "backImage",
source: options.backButtonImage
}));
}
if (options.headerLeft !== undefined) {
children.push( /*#__PURE__*/React.createElement(ScreenStackHeaderLeftView, {
key: "left"
}, renderComponentOrThunk(options.headerLeft, {
scene
})));
} else if (options.headerBackImage !== undefined) {
const goBack = () => {
// Go back on next tick because button ripple effect needs to happen on Android
requestAnimationFrame(() => {
descriptor.navigation.goBack(descriptor.key);
});
};
children.push( /*#__PURE__*/React.createElement(ScreenStackHeaderLeftView, {
key: "left"
}, /*#__PURE__*/React.createElement(HeaderBackButton, {
onPress: goBack,
pressColorAndroid: options.headerPressColorAndroid,
tintColor: options.headerTintColor,
backImage: options.headerBackImage,
title: options.backButtonTitle,
truncatedTitle: options.truncatedBackButtonTitle,
backTitleVisible: this.props.backTitleVisible,
titleStyle: options.headerBackTitleStyle,
layoutPreset: this.props.layoutPreset,
scene: scene
})));
}
if (options.headerTitle) {
if (title === undefined && typeof options.headerTitle === 'string') {
headerOptions.title = options.headerTitle;
} else {
children.push( /*#__PURE__*/React.createElement(ScreenStackHeaderCenterView, {
key: "center"
}, renderComponentOrThunk(options.headerTitle, {
scene
})));
}
}
if (options.headerRight) {
children.push( /*#__PURE__*/React.createElement(ScreenStackHeaderRightView, {
key: "right"
}, renderComponentOrThunk(options.headerRight, {
scene
})));
}
if (children.length > 0) {
headerOptions.children = children;
}
return /*#__PURE__*/React.createElement(ScreenStackHeaderConfig, headerOptions);
});
_defineProperty(this, "_renderScene", (index, route, descriptor) => {
const {
navigation,
getComponent,
options
} = descriptor;
const {
mode,
transparentCard
} = this.props.navigationConfig;
const SceneComponent = getComponent();
let stackPresentation = 'push';
if (mode === 'modal' || mode === 'containedModal') {
stackPresentation = mode;
if (transparentCard || options.cardTransparent) {
stackPresentation = mode === 'containedModal' ? 'containedTransparentModal' : 'transparentModal';
}
}
let stackAnimation = options.stackAnimation;
if (options.animationEnabled === false) {
stackAnimation = 'none';
}
const {
screenProps
} = this.props;
return /*#__PURE__*/React.createElement(Screen, {
key: "screen_".concat(route.key),
style: [StyleSheet.absoluteFill, options.cardStyle],
stackAnimation: stackAnimation,
stackPresentation: stackPresentation,
replaceAnimation: options.replaceAnimation === undefined ? 'pop' : options.replaceAnimation,
pointerEvents: index === this.props.navigation.state.routes.length - 1 ? 'auto' : 'none',
gestureEnabled: Platform.OS === 'android' ? false : options.gestureEnabled === undefined ? true : options.gestureEnabled,
onAppear: () => this._onAppear(route, descriptor),
onDismissed: () => this._removeScene(route)
}, this._renderHeaderConfig(index, route, descriptor), /*#__PURE__*/React.createElement(SceneView, {
screenProps: screenProps,
navigation: navigation,
component: SceneComponent
}));
});
}
render() {
const {
navigation,
descriptors
} = this.props;
return /*#__PURE__*/React.createElement(ScreenStack, {
style: styles.scenes,
onFinishTransitioning: this._onFinishTransitioning
}, navigation.state.routes.map((route, i) => this._renderScene(i, route, descriptors[route.key])));
}
}
const styles = StyleSheet.create({
scenes: {
flex: 1
}
});
function createStackNavigator(routeConfigMap, stackConfig = {}) {
const router = StackRouter(routeConfigMap, stackConfig); // belowe we override getStateForAction method in order to add handling for
// a custom native stack navigation action. The action REMOVE that we want to
// add works in a similar way to POP, but it does not remove all the routes
// that sit on top of the removed route. For example if we have three routes
// [a,b,c] and call POP on b, then both b and c will go away. In case we
// call REMOVE on b, only b will be removed from the stack and the resulting
// state will be [a, c]
const superGetStateForAction = router.getStateForAction;
router.getStateForAction = (action, state) => {
if (action.type === REMOVE_ACTION) {
const {
key,
immediate
} = action;
let backRouteIndex = state.index;
if (key) {
const backRoute = state.routes.find(route => route.key === key);
backRouteIndex = state.routes.indexOf(backRoute);
}
if (backRouteIndex > 0) {
const newRoutes = [...state.routes];
newRoutes.splice(backRouteIndex, 1);
return { ...state,
routes: newRoutes,
index: newRoutes.length - 1,
isTransitioning: immediate !== true
};
}
}
return superGetStateForAction(action, state);
}; // Create a navigator with StackView as the view
return createNavigator(StackView, router, stackConfig);
}
export default createStackNavigator;
//# sourceMappingURL=createNativeStackNavigator.js.map