125 lines
5.6 KiB
JavaScript
125 lines
5.6 KiB
JavaScript
|
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
|