@wordpress/components/build/mobile/keyboard-avoiding-view/index.ios.js

UI components for WordPress.

"use strict";

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

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

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

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

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

var _reactNativeSafeArea = _interopRequireDefault(require("react-native-safe-area"));

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

var _useIsFloatingKeyboard = _interopRequireDefault(require("../utils/use-is-floating-keyboard"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const AnimatedKeyboardAvoidingView = _reactNative.Animated.createAnimatedComponent(_reactNative.KeyboardAvoidingView);

const MIN_HEIGHT = 44;

const KeyboardAvoidingView = _ref => {
  let {
    parentHeight,
    style,
    withAnimatedHeight = false,
    ...otherProps
  } = _ref;
  const [resizeObserver, sizes] = (0, _compose.useResizeObserver)();
  const [isKeyboardOpen, setIsKeyboardOpen] = (0, _element.useState)(false);
  const [safeAreaBottomInset, setSafeAreaBottomInset] = (0, _element.useState)(0);
  const {
    height = 0
  } = sizes || {};
  const floatingKeyboard = (0, _useIsFloatingKeyboard.default)();
  const animatedHeight = (0, _element.useRef)(new _reactNative.Animated.Value(MIN_HEIGHT)).current;

  const {
    height: fullHeight
  } = _reactNative.Dimensions.get('screen');

  const keyboardVerticalOffset = fullHeight - parentHeight;
  (0, _element.useEffect)(() => {
    _reactNativeSafeArea.default.getSafeAreaInsetsForRootView().then(_ref2 => {
      let {
        safeAreaInsets
      } = _ref2;
      setSafeAreaBottomInset(safeAreaInsets.bottom);
    });

    const safeAreaSubscription = _reactNativeSafeArea.default.addEventListener('safeAreaInsetsForRootViewDidChange', onSafeAreaInsetsUpdate);

    const keyboardShowSubscription = _reactNative.Keyboard.addListener('keyboardWillShow', onKeyboardWillShow);

    const keyboardHideSubscription = _reactNative.Keyboard.addListener('keyboardWillHide', onKeyboardWillHide);

    return () => {
      safeAreaSubscription.remove();
      keyboardShowSubscription.remove();
      keyboardHideSubscription.remove();
    }; // Disable reason: deferring this refactor to the native team.
    // see https://github.com/WordPress/gutenberg/pull/41166
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function onSafeAreaInsetsUpdate(_ref3) {
    let {
      safeAreaInsets
    } = _ref3;
    setSafeAreaBottomInset(safeAreaInsets.bottom);
  }

  function onKeyboardWillShow(_ref4) {
    let {
      endCoordinates
    } = _ref4;
    setIsKeyboardOpen(true);
    animatedHeight.setValue(endCoordinates.height + MIN_HEIGHT);
  }

  function onKeyboardWillHide(_ref5) {
    let {
      duration,
      startCoordinates
    } = _ref5;
    // The startCoordinates.height is set to wrong value when we use cmd + k for hide the keyboard (Have no idea why).
    // Because of that the `setIsKeyboardOpened` is not invoked and the state of keyboard is wrong.
    // The keyboardIsOpenBreakpoint use 100 as a fallback if the startCoordinates.height is too small (cmd + k case)
    const keyboardIsOpenBreakpoint = startCoordinates.height > 100 ? startCoordinates.height / 3 : 100;
    const animatedListenerId = animatedHeight.addListener(_ref6 => {
      let {
        value
      } = _ref6;

      if (value < keyboardIsOpenBreakpoint) {
        setIsKeyboardOpen(false);
      }
    });

    _reactNative.Animated.timing(animatedHeight, {
      toValue: MIN_HEIGHT,
      duration,
      useNativeDriver: false
    }).start(() => {
      animatedHeight.removeListener(animatedListenerId);
    });
  }

  return (0, _element.createElement)(AnimatedKeyboardAvoidingView, (0, _extends2.default)({}, otherProps, {
    enabled: !floatingKeyboard,
    behavior: "padding",
    keyboardVerticalOffset: keyboardVerticalOffset,
    style: withAnimatedHeight ? [style, {
      height: animatedHeight,
      marginBottom: isKeyboardOpen ? -safeAreaBottomInset : 0
    }] : style
  }), (0, _element.createElement)(_reactNative.View, {
    style: [{
      top: -height + MIN_HEIGHT
    }, _styles.default.animatedChildStyle, !withAnimatedHeight && _styles.default.defaultChildStyle]
  }, resizeObserver, otherProps.children));
};

exports.KeyboardAvoidingView = KeyboardAvoidingView;
var _default = KeyboardAvoidingView;
exports.default = _default;
//# sourceMappingURL=index.ios.js.map