stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
313 lines • 12.4 kB
JavaScript
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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
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"];
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
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 = _reactNative.TurboModuleRegistry.get('DeviceInfo');
cachedIsEdgeToEdge = deviceInfo?.getConstants?.().isEdgeToEdge ?? false;
} catch {
cachedIsEdgeToEdge = false;
}
}
}
return cachedIsEdgeToEdge;
};
var KeyboardCompatibleView = exports.KeyboardCompatibleView = function (_React$Component) {
function KeyboardCompatibleView(props) {
var _this;
(0, _classCallCheck2.default)(this, KeyboardCompatibleView);
_this = _callSuper(this, KeyboardCompatibleView, [props]);
_this._frame = null;
_this._keyboardEvent = null;
_this._subscriptions = [];
_this._appStateSubscription = null;
_this._initialFrameHeight = 0;
_this._bottom = 0;
_this._onKeyboardChange = event => {
_this._keyboardEvent = event;
_this._updateBottomIfNecessary();
};
_this._onKeyboardHide = () => {
_this._keyboardEvent = null;
_this._updateBottomIfNecessary();
};
_this._onLayout = function () {
var _ref = (0, _asyncToGenerator2.default)(function* (event) {
event.persist();
var oldFrame = _this._frame;
_this._frame = event.nativeEvent.layout;
if (!_this._initialFrameHeight) {
_this._initialFrameHeight = _this._frame.height;
}
if (!oldFrame || oldFrame.height !== _this._frame.height) {
yield _this._updateBottomIfNecessary();
}
if (_this.props.onLayout) {
_this.props.onLayout(event);
}
});
return function (_x) {
return _ref.apply(this, arguments);
};
}();
_this._setBottom = value => {
var enabled = _this.props.enabled ?? true;
_this._bottom = value;
if (enabled) {
_this.setState({
bottom: value
});
}
};
_this._updateBottomIfNecessary = (0, _asyncToGenerator2.default)(function* () {
if (_this._keyboardEvent == null) {
_this._setBottom(0);
return;
}
var _this$_keyboardEvent = _this._keyboardEvent,
duration = _this$_keyboardEvent.duration,
easing = _this$_keyboardEvent.easing,
endCoordinates = _this$_keyboardEvent.endCoordinates;
var height = yield _this._relativeKeyboardHeight(endCoordinates);
if (_this._bottom === height) {
return;
}
_this._setBottom(height);
var enabled = _this.props.enabled ?? true;
if (enabled && duration && easing) {
_reactNative.LayoutAnimation.configureNext({
duration: duration > 10 ? duration : 10,
update: {
duration: duration > 10 ? duration : 10,
type: _reactNative.LayoutAnimation.Types[easing] || 'keyboard'
}
});
}
});
_this._handleAppStateChange = nextAppState => {
if (_this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
_this.setKeyboardListeners();
}
if (nextAppState.match(/inactive|background/)) {
_this.unsetKeyboardListeners();
}
_this.setState({
appState: nextAppState
});
};
_this.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
});
}));
};
_this.unsetKeyboardListeners = () => {
_this._subscriptions = _this._subscriptions.filter(subscription => {
subscription.remove();
return false;
});
};
_this.dismissKeyboard = () => {
if (!_this.state.isKeyboardOpen) {
return;
}
return new Promise(resolve => {
var subscription = _reactNative.Keyboard.addListener('keyboardDidHide', () => {
resolve();
subscription.remove();
});
_reactNative.Keyboard.dismiss();
});
};
_this.keyboardContextValue = {
dismissKeyboard: _this.dismissKeyboard
};
_this.state = {
appState: _reactNative.AppState.currentState,
bottom: 0,
isKeyboardOpen: false
};
_this.viewRef = _react.default.createRef();
return _this;
}
(0, _inherits2.default)(KeyboardCompatibleView, _React$Component);
return (0, _createClass2.default)(KeyboardCompatibleView, [{
key: "_relativeKeyboardHeight",
value: function () {
var _relativeKeyboardHeight2 = (0, _asyncToGenerator2.default)(function* (keyboardFrame) {
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.keyboardVerticalOffset ?? 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 systemInsetFloor = _reactNative.StatusBar.currentHeight ?? 0;
if (relativeHeight <= systemInsetFloor) {
return 0;
}
}
return relativeHeight;
});
function _relativeKeyboardHeight(_x2) {
return _relativeKeyboardHeight2.apply(this, arguments);
}
return _relativeKeyboardHeight;
}()
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_, prevState) {
var enabled = this.props.enabled ?? true;
if (enabled && this._bottom !== prevState.bottom) {
this.setState({
bottom: this._bottom
});
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
if (!_reactNative.Keyboard.isVisible()) {
this._keyboardEvent = null;
this._setBottom(0);
}
this._appStateSubscription = _reactNative.AppState.addEventListener('change', this._handleAppStateChange);
this.setKeyboardListeners();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this._appStateSubscription?.remove) {
this._appStateSubscription?.remove();
} else if (_reactNative.AppState.removeEventListener) {
_reactNative.AppState.removeEventListener('change', this._handleAppStateChange);
}
this.unsetKeyboardListeners();
}
}, {
key: "render",
value: function 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
})
});
}
}
}]);
}(_react.default.Component);
KeyboardCompatibleView.defaultProps = {
behavior: 'padding',
enabled: true,
keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 86.5 : -300
};
//# sourceMappingURL=KeyboardCompatibleView.js.map