@wordpress/components
Version:
UI components for WordPress.
116 lines (112 loc) • 4.34 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.KeyboardAvoidingView = void 0;
var _reactNative = require("react-native");
var _reactNativeSafeArea = _interopRequireDefault(require("react-native-safe-area"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _useIsFloatingKeyboard = _interopRequireDefault(require("../utils/use-is-floating-keyboard"));
var _styles = _interopRequireDefault(require("./styles.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const AnimatedKeyboardAvoidingView = _reactNative.Animated.createAnimatedComponent(_reactNative.KeyboardAvoidingView);
const MIN_HEIGHT = 44;
const KeyboardAvoidingView = ({
parentHeight,
style,
withAnimatedHeight = false,
...otherProps
}) => {
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(({
safeAreaInsets
}) => {
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();
};
// See https://github.com/WordPress/gutenberg/pull/41166
}, []);
function onSafeAreaInsetsUpdate({
safeAreaInsets
}) {
setSafeAreaBottomInset(safeAreaInsets.bottom);
}
function onKeyboardWillShow({
endCoordinates
}) {
setIsKeyboardOpen(true);
animatedHeight.setValue(endCoordinates.height + MIN_HEIGHT);
}
function onKeyboardWillHide({
duration,
startCoordinates
}) {
// 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(({
value
}) => {
if (value < keyboardIsOpenBreakpoint) {
setIsKeyboardOpen(false);
}
});
_reactNative.Animated.timing(animatedHeight, {
toValue: MIN_HEIGHT,
duration,
useNativeDriver: false
}).start(() => {
animatedHeight.removeListener(animatedListenerId);
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedKeyboardAvoidingView, {
...otherProps,
enabled: !floatingKeyboard,
behavior: "padding",
keyboardVerticalOffset: keyboardVerticalOffset,
style: withAnimatedHeight ? [style, {
height: animatedHeight,
marginBottom: isKeyboardOpen ? -safeAreaBottomInset : 0
}] : style,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [{
top: -height + MIN_HEIGHT
}, _styles.default.animatedChildStyle, !withAnimatedHeight && _styles.default.defaultChildStyle],
children: [resizeObserver, otherProps.children]
})
});
};
exports.KeyboardAvoidingView = KeyboardAvoidingView;
var _default = exports.default = KeyboardAvoidingView;
//# sourceMappingURL=index.ios.js.map