@wordpress/components/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _stack = require("@react-navigation/stack");

var _compose = require("@wordpress/compose");

var _layoutAnimation = require("../../layout-animation");

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const AnimationSpec = {
  animation: 'timing',
  config: {
    duration: 200,
    easing: _reactNative.Easing.ease
  }
};

const fadeConfig = ({
  current
}) => {
  return {
    cardStyle: {
      opacity: current.progress
    }
  };
};

const options = {
  transitionSpec: {
    open: AnimationSpec,
    close: AnimationSpec
  },
  headerShown: false,
  gestureEnabled: false,
  cardStyleInterpolator: fadeConfig
};
const ANIMATION_DURATION = 190;

function BottomSheetNavigationContainer({
  children,
  animate,
  main,
  theme
}) {
  const Stack = (0, _element.useRef)((0, _stack.createStackNavigator)()).current;
  const context = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
  const [currentHeight, setCurrentHeight] = (0, _element.useState)(context.currentHeight || 1);
  const backgroundStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.background, _styles.default.backgroundDark);

  const _theme = theme || { ..._native.DefaultTheme,
    colors: { ..._native.DefaultTheme.colors,
      background: backgroundStyle.backgroundColor
    }
  };

  const setHeight = (0, _element.useCallback)(height => {
    // The screen is fullHeight or changing from fullScreen to the default mode
    if (typeof currentHeight === 'string' && typeof height !== 'string' || typeof height === 'string') {
      (0, _layoutAnimation.performLayoutAnimation)(ANIMATION_DURATION);
      setCurrentHeight(height);
      return;
    }

    if (height > 1) {
      if (currentHeight === 1) {
        setCurrentHeight(height);
      } else if (animate) {
        (0, _layoutAnimation.performLayoutAnimation)(ANIMATION_DURATION);
        setCurrentHeight(height);
      } else {
        setCurrentHeight(height);
      }
    }
  }, [currentHeight]);
  const screens = (0, _element.useMemo)(() => {
    return _element.Children.map(children, child => {
      let screen = child;
      const {
        name,
        ...otherProps
      } = child.props;

      if (!main) {
        screen = (0, _element.cloneElement)(child, { ...child.props,
          isNested: true
        });
      }

      return (0, _element.createElement)(Stack.Screen, (0, _extends2.default)({
        name: name
      }, otherProps, {
        children: () => screen
      }));
    });
  }, [children]);
  return (0, _element.useMemo)(() => {
    return (0, _element.createElement)(_reactNative.View, {
      style: {
        height: currentHeight
      }
    }, (0, _element.createElement)(_bottomSheetNavigationContext.BottomSheetNavigationProvider, {
      value: {
        setHeight,
        currentHeight
      }
    }, main ? (0, _element.createElement)(_native.NavigationContainer, {
      theme: _theme
    }, (0, _element.createElement)(Stack.Navigator, {
      screenOptions: options
    }, screens)) : (0, _element.createElement)(Stack.Navigator, {
      screenOptions: options
    }, screens)));
  }, [currentHeight, _theme]);
}

var _default = BottomSheetNavigationContainer;
exports.default = _default;
//# sourceMappingURL=navigation-container.native.js.map