UNPKG

create-expo-cljs-app

Version:

Create a react native application with Expo and Shadow-CLJS!

118 lines (111 loc) 5.3 kB
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({ 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 }) { 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 React.useEffect(() => clearSubscription, [searchBar]); const processedSearchBarOptions = React.useMemo(() => { if (Platform.OS === 'android' && searchBar && !searchBar.disableBackButtonOverride) { const onFocus = (...args) => { var _searchBar$onFocus; createSubscription(); (_searchBar$onFocus = searchBar.onFocus) === null || _searchBar$onFocus === void 0 ? void 0 : _searchBar$onFocus.call(searchBar, ...args); }; const onClose = (...args) => { var _searchBar$onClose; clearSubscription(); (_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: headerBackTitleVisible ? headerBackTitle : ' ', backTitleFontFamily: backTitleFontFamily, backTitleFontSize: headerBackTitleStyle.fontSize, 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