@wordpress/components
Version:
UI components for WordPress.
125 lines (121 loc) • 4.24 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _native = require("@react-navigation/native");
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _bottomSheetNavigationContext = require("./bottom-sheet-navigation-context");
var _bottomSheetContext = require("../bottom-sheet-context");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BottomSheetNavigationScreen = ({
children,
fullScreen,
isScrollable,
isNested,
name
}) => {
const navigation = (0, _native.useNavigation)();
const maxHeight = (0, _element.useRef)(0);
const isFocused = (0, _native.useIsFocused)();
const {
onHandleHardwareButtonPress,
shouldEnableBottomSheetMaxHeight,
setIsFullScreen,
listProps,
safeAreaBottomInset
} = (0, _element.useContext)(_bottomSheetContext.BottomSheetContext);
const {
height: windowHeight
} = (0, _reactNative.useWindowDimensions)();
const {
setHeight
} = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
(0, _native.useFocusEffect)((0, _element.useCallback)(() => {
onHandleHardwareButtonPress(() => {
if (navigation.canGoBack()) {
shouldEnableBottomSheetMaxHeight(true);
navigation.goBack();
return true;
}
onHandleHardwareButtonPress(null);
return false;
});
/**
* TODO: onHandleHardwareButtonPress stores a single value, which means
* future invocations from sibling screens can replace the callback for
* the currently active screen. Currently, the empty dependency array
* passed to useCallback here is what prevents erroneous callback
* replacements, but leveraging memoization to achieve this is brittle and
* explicitly discouraged in the React documentation.
* https://react.dev/reference/react/useMemo
*
* Ideally, we refactor onHandleHardwareButtonPress to manage multiple
* callbacks triggered based upon which screen is currently active.
*
* Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
*
* Also see https://github.com/WordPress/gutenberg/pull/41166.
*/
}, []));
(0, _native.useFocusEffect)((0, _element.useCallback)(() => {
if (fullScreen) {
setHeight(windowHeight);
setIsFullScreen(true);
} else if (maxHeight.current !== 0) {
setIsFullScreen(false);
setHeight(maxHeight.current);
}
return () => {};
}, [fullScreen, setHeight, setIsFullScreen, windowHeight]));
const onLayout = ({
nativeEvent
}) => {
if (fullScreen) {
return;
}
const {
height
} = nativeEvent.layout;
if (maxHeight.current !== height && isFocused) {
maxHeight.current = height;
setHeight(height);
}
};
return (0, _element.useMemo)(() => {
return isScrollable || isNested ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
onLayout: onLayout,
testID: `navigation-screen-${name}`,
children: children
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
...listProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableHighlight, {
accessible: false,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
onLayout: onLayout,
testID: `navigation-screen-${name}`,
children: [children, !isNested && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
height: safeAreaBottomInset || _styles.default.scrollableContent.paddingBottom
}
})]
})
})
});
// See https://github.com/WordPress/gutenberg/pull/41166
}, [children, isFocused, safeAreaBottomInset, listProps, name, isScrollable, isNested, onLayout]);
};
var _default = exports.default = BottomSheetNavigationScreen;
//# sourceMappingURL=navigation-screen.native.js.map