stream-chat-react-native-core/lib/module/components/KeyboardCompatibleView/KeyboardCompatibleView.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.dismissKeyboard = exports.KeyboardCompatibleView = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _KeyboardContext = require("../../contexts/keyboardContext/KeyboardContext");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx";
var _excluded = ["behavior", "children", "contentContainerStyle", "enabled", "style"];
var dismissKeyboard = () => {
  _reactNative.Keyboard.dismiss();
};
exports.dismissKeyboard = dismissKeyboard;
var cachedIsEdgeToEdge;
var getIsEdgeToEdge = () => {
  if (cachedIsEdgeToEdge === undefined) {
    cachedIsEdgeToEdge = false;
    if (_reactNative.Platform.OS === 'android') {
      try {
        var _deviceInfo$getConsta;
        var deviceInfo = _reactNative.TurboModuleRegistry.get('DeviceInfo');
        cachedIsEdgeToEdge = (_deviceInfo$getConsta = deviceInfo == null || deviceInfo.getConstants == null ? void 0 : deviceInfo.getConstants().isEdgeToEdge) != null ? _deviceInfo$getConsta : false;
      } catch (_unused) {
        cachedIsEdgeToEdge = false;
      }
    }
  }
  return cachedIsEdgeToEdge;
};
class KeyboardCompatibleView extends _react.default.Component {
  static defaultProps = {
    behavior: 'padding',
    enabled: true,
    keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 86.5 : -300
  };
  _frame = null;
  _keyboardEvent = null;
  _subscriptions = [];
  _appStateSubscription = null;
  _initialFrameHeight = 0;
  _bottom = 0;
  constructor(props) {
    var _ref;
    super(props);
    this.state = {
      appState: (_ref = _reactNative.AppState.currentState) != null ? _ref : 'unknown',
      bottom: 0,
      isKeyboardOpen: false
    };
    this.viewRef = _react.default.createRef();
  }
  _relativeKeyboardHeight(keyboardFrame) {
    var _this = this;
    return (0, _asyncToGenerator2.default)(function* () {
      var _this$props$keyboardV;
      var frame = _this._frame;
      if (!frame || !keyboardFrame) {
        return 0;
      }
      if (_reactNative.Platform.OS === 'ios' && keyboardFrame.screenY === 0 && (yield _reactNative.AccessibilityInfo.prefersCrossFadeTransitions())) {
        return 0;
      }
      var keyboardY = keyboardFrame.screenY - ((_this$props$keyboardV = _this.props.keyboardVerticalOffset) != null ? _this$props$keyboardV : 0);
      if (_reactNative.Platform.OS === 'android') {
        var systemBarsInset = _reactNative.Dimensions.get('screen').height - _reactNative.Dimensions.get('window').height;
        if (systemBarsInset > 0 && !getIsEdgeToEdge()) {
          return 0;
        }
      }
      if (_this.props.behavior === 'height') {
        return Math.max(_this.state.bottom + frame.y + frame.height - keyboardY, 0);
      }
      var relativeHeight = Math.max(frame.y + frame.height - keyboardY, 0);
      if (_reactNative.Platform.OS === 'android') {
        var _StatusBar$currentHei;
        var systemInsetFloor = (_StatusBar$currentHei = _reactNative.StatusBar.currentHeight) != null ? _StatusBar$currentHei : 0;
        if (relativeHeight <= systemInsetFloor) {
          return 0;
        }
      }
      return relativeHeight;
    })();
  }
  _onKeyboardChange = event => {
    this._keyboardEvent = event;
    this._updateBottomIfNecessary();
  };
  _onKeyboardHide = () => {
    this._keyboardEvent = null;
    this._updateBottomIfNecessary();
  };
  _onLayout = (() => {
    var _this2 = this;
    return function () {
      var _ref2 = (0, _asyncToGenerator2.default)(function* (event) {
        event.persist();
        var oldFrame = _this2._frame;
        _this2._frame = event.nativeEvent.layout;
        if (!_this2._initialFrameHeight) {
          _this2._initialFrameHeight = _this2._frame.height;
        }
        if (!oldFrame || oldFrame.height !== _this2._frame.height) {
          yield _this2._updateBottomIfNecessary();
        }
        if (_this2.props.onLayout) {
          _this2.props.onLayout(event);
        }
      });
      return function (_x) {
        return _ref2.apply(this, arguments);
      };
    }();
  })();
  _setBottom = value => {
    var _this$props$enabled;
    var enabled = (_this$props$enabled = this.props.enabled) != null ? _this$props$enabled : true;
    this._bottom = value;
    if (enabled) {
      this.setState({
        bottom: value
      });
    }
  };
  _updateBottomIfNecessary = (() => {
    var _this3 = this;
    return (0, _asyncToGenerator2.default)(function* () {
      if (_this3._keyboardEvent == null) {
        _this3._setBottom(0);
        return;
      }
      var endCoordinates = _this3._keyboardEvent.endCoordinates;
      var height = yield _this3._relativeKeyboardHeight(endCoordinates);
      if (_this3._bottom === height) {
        return;
      }
      _this3._setBottom(height);
    });
  })();
  _handleAppStateChange = nextAppState => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      this.setKeyboardListeners();
    }
    if (nextAppState.match(/inactive|background/)) {
      this.unsetKeyboardListeners();
    }
    this.setState({
      appState: nextAppState
    });
  };
  setKeyboardListeners = () => {
    if (_reactNative.Platform.OS === 'ios') {
      this._subscriptions = [_reactNative.Keyboard.addListener('keyboardWillHide', this._onKeyboardHide), _reactNative.Keyboard.addListener('keyboardWillShow', this._onKeyboardChange)];
    } else {
      this._subscriptions = [_reactNative.Keyboard.addListener('keyboardDidHide', this._onKeyboardHide), _reactNative.Keyboard.addListener('keyboardDidShow', this._onKeyboardChange)];
    }
    this._subscriptions.push(_reactNative.Keyboard.addListener('keyboardDidHide', () => {
      this.setState({
        isKeyboardOpen: false
      });
    }), _reactNative.Keyboard.addListener('keyboardDidShow', () => {
      this.setState({
        isKeyboardOpen: true
      });
    }));
  };
  unsetKeyboardListeners = () => {
    this._subscriptions = this._subscriptions.filter(subscription => {
      subscription.remove();
      return false;
    });
  };
  dismissKeyboard = () => {
    if (!this.state.isKeyboardOpen) {
      return;
    }
    return new Promise(resolve => {
      var subscription = _reactNative.Keyboard.addListener('keyboardDidHide', () => {
        resolve();
        subscription.remove();
      });
      _reactNative.Keyboard.dismiss();
    });
  };
  componentDidUpdate(_, prevState) {
    var _this$props$enabled2;
    var enabled = (_this$props$enabled2 = this.props.enabled) != null ? _this$props$enabled2 : true;
    if (enabled && this._bottom !== prevState.bottom) {
      this.setState({
        bottom: this._bottom
      });
    }
  }
  componentDidMount() {
    if (!_reactNative.Keyboard.isVisible()) {
      this._keyboardEvent = null;
      this._setBottom(0);
    }
    this._appStateSubscription = _reactNative.AppState.addEventListener('change', this._handleAppStateChange);
    this.setKeyboardListeners();
  }
  componentWillUnmount() {
    var _this$_appStateSubscr;
    if ((_this$_appStateSubscr = this._appStateSubscription) != null && _this$_appStateSubscr.remove) {
      var _this$_appStateSubscr2;
      (_this$_appStateSubscr2 = this._appStateSubscription) == null || _this$_appStateSubscr2.remove();
    } else if (_reactNative.AppState.removeEventListener) {
      _reactNative.AppState.removeEventListener('change', this._handleAppStateChange);
    }
    this.unsetKeyboardListeners();
  }
  keyboardContextValue = {
    dismissKeyboard: this.dismissKeyboard
  };
  render() {
    var _this$props = this.props,
      behavior = _this$props.behavior,
      children = _this$props.children,
      contentContainerStyle = _this$props.contentContainerStyle,
      enabled = _this$props.enabled,
      style = _this$props.style,
      props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    var bottomHeight = enabled ? this.state.bottom : 0;
    switch (behavior) {
      case 'height':
        var heightStyle;
        if (this._frame !== null && this.state.bottom > 0) {
          heightStyle = {
            flex: 0,
            height: this._initialFrameHeight - bottomHeight
          };
        }
        return (0, _jsxRuntime.jsx)(_KeyboardContext.KeyboardProvider, {
          value: this.keyboardContextValue,
          children: (0, _jsxRuntime.jsx)(_reactNative.View, {
            onLayout: this._onLayout,
            ref: this.viewRef,
            style: _reactNative.StyleSheet.compose(style, heightStyle),
            ...props,
            children: children
          })
        });
      case 'position':
        return (0, _jsxRuntime.jsx)(_KeyboardContext.KeyboardProvider, {
          value: this.keyboardContextValue,
          children: (0, _jsxRuntime.jsx)(_reactNative.View, {
            onLayout: this._onLayout,
            ref: this.viewRef,
            style: style,
            ...props,
            children: (0, _jsxRuntime.jsx)(_reactNative.View, {
              style: _reactNative.StyleSheet.compose(contentContainerStyle, {
                bottom: bottomHeight
              }),
              children: children
            })
          })
        });
      case 'padding':
        return (0, _jsxRuntime.jsx)(_KeyboardContext.KeyboardProvider, {
          value: this.keyboardContextValue,
          children: (0, _jsxRuntime.jsx)(_reactNative.View, {
            onLayout: this._onLayout,
            ref: this.viewRef,
            style: _reactNative.StyleSheet.compose(style, {
              paddingBottom: bottomHeight
            }),
            ...props,
            children: children
          })
        });
      default:
        return (0, _jsxRuntime.jsx)(_KeyboardContext.KeyboardProvider, {
          value: this.keyboardContextValue,
          children: (0, _jsxRuntime.jsx)(_reactNative.View, {
            onLayout: this._onLayout,
            ref: this.viewRef,
            style: style,
            ...props,
            children: children
          })
        });
    }
  }
}
exports.KeyboardCompatibleView = KeyboardCompatibleView;
//# sourceMappingURL=KeyboardCompatibleView.js.map