amis-rpc-design/node_modules/react-native-screens/lib/module/native-stack/views/HeaderConfig.js

125 lines
5.6 KiB
JavaScript
Raw Normal View History

2023-10-07 19:42:30 +08:00
import { useTheme } from '@react-navigation/native';
import * as React from 'react';
import { Platform } from 'react-native';
import { ScreenStackHeaderBackButtonImage, ScreenStackHeaderCenterView, ScreenStackHeaderConfig, ScreenStackHeaderLeftView, ScreenStackHeaderRightView, ScreenStackHeaderSearchBarView, SearchBar, isSearchBarAvailableForCurrentPlatform, executeNativeBackPress } from 'react-native-screens';
import { useBackPressSubscription } from '../utils/useBackPressSubscription';
import { processFonts } from './FontProcessor';
export default function HeaderConfig(_ref) {
let {
backButtonImage,
backButtonInCustomView,
direction,
disableBackButtonMenu,
headerBackTitle,
headerBackTitleStyle = {},
headerBackTitleVisible = true,
headerCenter,
headerHideBackButton,
headerHideShadow,
headerLargeStyle = {},
headerLargeTitle,
headerLargeTitleHideShadow,
headerLargeTitleStyle = {},
headerLeft,
headerRight,
headerShown,
headerStyle = {},
headerTintColor,
headerTitle,
headerTitleStyle = {},
headerTopInsetEnabled = true,
headerTranslucent,
route,
searchBar,
title
} = _ref;
const {
colors
} = useTheme();
const tintColor = headerTintColor !== null && headerTintColor !== void 0 ? headerTintColor : colors.primary;
// We need to use back press subscription here to override back button behavior on JS side.
// Because screens are usually used with react-navigation and this library overrides back button
// we need to handle it first in case when search bar is open
const {
handleAttached,
handleDetached,
clearSubscription,
createSubscription
} = useBackPressSubscription({
onBackPress: executeNativeBackPress,
isDisabled: !searchBar || !!searchBar.disableBackButtonOverride
});
const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] = processFonts([headerBackTitleStyle.fontFamily, headerLargeTitleStyle.fontFamily, headerTitleStyle.fontFamily]);
// We want to clear clearSubscription only when components unmounts or search bar changes
// eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(() => clearSubscription, [searchBar]);
const processedSearchBarOptions = React.useMemo(() => {
if (Platform.OS === 'android' && searchBar && !searchBar.disableBackButtonOverride) {
const onFocus = function () {
var _searchBar$onFocus;
createSubscription();
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
(_searchBar$onFocus = searchBar.onFocus) === null || _searchBar$onFocus === void 0 ? void 0 : _searchBar$onFocus.call(searchBar, ...args);
};
const onClose = function () {
var _searchBar$onClose;
clearSubscription();
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
(_searchBar$onClose = searchBar.onClose) === null || _searchBar$onClose === void 0 ? void 0 : _searchBar$onClose.call(searchBar, ...args);
};
return {
...searchBar,
onFocus,
onClose
};
}
return searchBar;
}, [searchBar, createSubscription, clearSubscription]);
return /*#__PURE__*/React.createElement(ScreenStackHeaderConfig, {
backButtonInCustomView: backButtonInCustomView,
backgroundColor: headerStyle.backgroundColor ? headerStyle.backgroundColor : colors.card,
backTitle: headerBackTitle,
backTitleFontFamily: backTitleFontFamily,
backTitleFontSize: headerBackTitleStyle.fontSize,
backTitleVisible: headerBackTitleVisible,
blurEffect: headerStyle.blurEffect,
color: tintColor,
direction: direction,
disableBackButtonMenu: disableBackButtonMenu,
hidden: headerShown === false,
hideBackButton: headerHideBackButton,
hideShadow: headerHideShadow,
largeTitle: headerLargeTitle,
largeTitleBackgroundColor: headerLargeStyle.backgroundColor,
largeTitleColor: headerLargeTitleStyle.color,
largeTitleFontFamily: largeTitleFontFamily,
largeTitleFontSize: headerLargeTitleStyle.fontSize,
largeTitleFontWeight: headerLargeTitleStyle.fontWeight,
largeTitleHideShadow: headerLargeTitleHideShadow,
title: headerTitle !== undefined ? headerTitle : title !== undefined ? title : route.name,
titleColor: headerTitleStyle.color !== undefined ? headerTitleStyle.color : headerTintColor !== undefined ? headerTintColor : colors.text,
titleFontFamily: titleFontFamily,
titleFontSize: headerTitleStyle.fontSize,
titleFontWeight: headerTitleStyle.fontWeight,
topInsetEnabled: headerTopInsetEnabled,
translucent: headerTranslucent === true,
onAttached: handleAttached,
onDetached: handleDetached
}, headerRight !== undefined ? /*#__PURE__*/React.createElement(ScreenStackHeaderRightView, null, headerRight({
tintColor
})) : null, backButtonImage !== undefined ? /*#__PURE__*/React.createElement(ScreenStackHeaderBackButtonImage, {
key: "backImage",
source: backButtonImage
}) : null, headerLeft !== undefined ? /*#__PURE__*/React.createElement(ScreenStackHeaderLeftView, null, headerLeft({
tintColor
})) : null, headerCenter !== undefined ? /*#__PURE__*/React.createElement(ScreenStackHeaderCenterView, null, headerCenter({
tintColor
})) : null, isSearchBarAvailableForCurrentPlatform && processedSearchBarOptions !== undefined ? /*#__PURE__*/React.createElement(ScreenStackHeaderSearchBarView, null, /*#__PURE__*/React.createElement(SearchBar, processedSearchBarOptions)) : null);
}
//# sourceMappingURL=HeaderConfig.js.map