@wordpress/components/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _native = require("@react-navigation/native");

var _reactNative = require("react-native");

var _lodash = require("lodash");

var _components = require("@wordpress/components");

var _bottomSheetNavigationContext = require("./bottom-sheet-navigation-context");

var _styles = _interopRequireDefault(require("./styles.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const BottomSheetNavigationScreen = ({
  children,
  fullScreen,
  isScrollable,
  isNested
}) => {
  const navigation = (0, _native.useNavigation)();
  const heightRef = (0, _element.useRef)({
    maxHeight: 0
  });
  const isFocused = (0, _native.useIsFocused)();
  const {
    onHandleHardwareButtonPress,
    shouldEnableBottomSheetMaxHeight,
    setIsFullScreen,
    listProps,
    safeAreaBottomInset
  } = (0, _element.useContext)(_components.BottomSheetContext);
  const {
    setHeight
  } = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
  const setHeightDebounce = (0, _element.useCallback)((0, _lodash.debounce)(setHeight, 10), [setHeight]);
  (0, _native.useFocusEffect)((0, _element.useCallback)(() => {
    onHandleHardwareButtonPress(() => {
      if (navigation.canGoBack()) {
        shouldEnableBottomSheetMaxHeight(true);
        navigation.goBack();
        return true;
      }

      onHandleHardwareButtonPress(null);
      return false;
    });

    if (fullScreen) {
      setHeight('100%');
      setIsFullScreen(true);
    } else if (heightRef.current.maxHeight !== 0) {
      setIsFullScreen(false);
      setHeight(heightRef.current.maxHeight);
    }

    return () => {};
  }, []));

  const onLayout = ({
    nativeEvent
  }) => {
    if (fullScreen) {
      return;
    }

    const {
      height
    } = nativeEvent.layout;

    if (heightRef.current.maxHeight !== height && isFocused) {
      heightRef.current.maxHeight = height;
      setHeightDebounce(height);
    }
  };

  return (0, _element.useMemo)(() => {
    return isScrollable || isNested ? (0, _element.createElement)(_reactNative.View, {
      onLayout: onLayout
    }, children) : (0, _element.createElement)(_reactNative.ScrollView, listProps, (0, _element.createElement)(_reactNative.TouchableHighlight, {
      accessible: false
    }, (0, _element.createElement)(_reactNative.View, {
      onLayout: onLayout
    }, children, !isNested && (0, _element.createElement)(_reactNative.View, {
      style: {
        height: safeAreaBottomInset || _styles.default.scrollableContent.paddingBottom
      }
    }))));
  }, [children, isFocused, safeAreaBottomInset, listProps]);
};

var _default = BottomSheetNavigationScreen;
exports.default = _default;
//# sourceMappingURL=navigation-screen.native.js.map