stream-chat-react-native-core
Version:
The official React Native and Expo components for Stream Chat, a service for building chat applications
474 lines • 22.6 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MessageComposer = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _MicPositionContext = require("./contexts/MicPositionContext");
var _audioRecorderSelectors = require("./utils/audioRecorderSelectors");
var _a11y = require("../../a11y");
var _contexts = require("../../contexts");
var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _MessageComposerAPIContext = require("../../contexts/messageComposerContext/MessageComposerAPIContext");
var _useMessageComposer = require("../../contexts/messageInputContext/hooks/useMessageComposer");
var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _useAttachmentPickerState = require("../../hooks/useAttachmentPickerState");
var _useKeyboardVisibility = require("../../hooks/useKeyboardVisibility");
var _useStateStore3 = require("../../hooks/useStateStore");
var _theme = require("../../theme");
var _transitions = require("../../utils/animations/transitions");
var _PollModal = require("../Poll/components/PollModal");
var _CreatePollContent = require("../Poll/CreatePollContent");
var _PortalWhileClosingView = require("../UIComponents/PortalWhileClosingView");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/MessageComposer.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var useStyles = () => {
var _useTheme = (0, _ThemeContext.useTheme)(),
semantics = _useTheme.theme.semantics;
return (0, _react.useMemo)(() => {
return _reactNative.StyleSheet.create({
autocompleteInputContainer: {
flex: 1,
flexShrink: 1,
minWidth: 0
},
container: {
alignItems: 'center',
flexDirection: 'row',
gap: _theme.primitives.spacingXs,
justifyContent: 'space-between'
},
contentContainer: {
gap: _theme.primitives.spacingXxs,
overflow: 'hidden',
paddingHorizontal: _theme.primitives.spacingXs
},
floatingWrapper: {
left: 0,
position: 'absolute',
right: 0
},
giphyContainer: {
padding: _theme.primitives.spacingXs
},
inputBoxContainer: {
flex: 1
},
inputBoxWrapper: {
borderRadius: 24,
borderWidth: 1,
flex: 1,
flexDirection: 'row',
backgroundColor: semantics.backgroundCoreElevation1,
borderColor: semantics.borderCoreDefault
},
inputButtonsContainer: {
alignSelf: 'flex-end'
},
inputContainer: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between'
},
micButtonContainer: {},
outputButtonsContainer: {
alignSelf: 'flex-end',
padding: _theme.primitives.spacingXs
},
shadow: {
elevation: 6,
shadowColor: 'hsla(0, 0%, 0%, 0.24)',
shadowOffset: {
height: 4,
width: 0
},
shadowOpacity: 0.24,
shadowRadius: 12
},
suggestionsListContainer: {
backgroundColor: 'transparent',
position: 'absolute',
width: '100%'
},
wrapper: {
paddingHorizontal: _theme.primitives.spacingMd,
paddingTop: _theme.primitives.spacingMd
},
audioLockIndicatorWrapper: {
position: 'absolute',
right: _theme.primitives.spacingMd,
padding: 4
}
});
}, [semantics]);
};
var messageInputHeightStoreSelector = state => ({
height: state.height
});
var MessageComposerWithContext = props => {
var additionalTextInputProps = props.additionalTextInputProps,
asyncMessagesLockDistance = props.asyncMessagesLockDistance,
asyncMessagesSlideToCancelDistance = props.asyncMessagesSlideToCancelDistance,
closeAttachmentPicker = props.closeAttachmentPicker,
closePollCreationDialog = props.closePollCreationDialog,
createPollOptionGap = props.createPollOptionGap,
messageInputFloating = props.messageInputFloating,
messageInputHeightStore = props.messageInputHeightStore,
inputBoxRef = props.inputBoxRef,
isKeyboardVisible = props.isKeyboardVisible,
members = props.members,
sendMessage = props.sendMessage,
showPollCreationDialog = props.showPollCreationDialog,
TextInputComponent = props.TextInputComponent,
watchers = props.watchers,
micLocked = props.micLocked,
isRecordingStateIdle = props.isRecordingStateIdle,
recordingStatus = props.recordingStatus;
var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
AudioRecorder = _useComponentsContext.AudioRecorder,
AudioRecordingInProgress = _useComponentsContext.AudioRecordingInProgress,
AudioRecordingLockIndicator = _useComponentsContext.AudioRecordingLockIndicator,
AudioRecordingPreview = _useComponentsContext.AudioRecordingPreview,
Input = _useComponentsContext.Input,
InputView = _useComponentsContext.InputView,
MessageComposerLeadingView = _useComponentsContext.MessageComposerLeadingView,
MessageComposerTrailingView = _useComponentsContext.MessageComposerTrailingView,
MessageInputHeaderView = _useComponentsContext.MessageInputHeaderView,
MessageInputTrailingView = _useComponentsContext.MessageInputTrailingView;
var styles = useStyles();
var _useAttachmentPickerS = (0, _useAttachmentPickerState.useAttachmentPickerState)(),
selectedPicker = _useAttachmentPickerS.selectedPicker;
var _useAttachmentPickerC = (0, _contexts.useAttachmentPickerContext)(),
attachmentPickerBottomSheetHeight = _useAttachmentPickerC.attachmentPickerBottomSheetHeight,
bottomInset = _useAttachmentPickerC.bottomInset;
var messageComposer = (0, _useMessageComposer.useMessageComposer)();
var _useStateStore = (0, _useStateStore3.useStateStore)(messageInputHeightStore.store, messageInputHeightStoreSelector),
height = _useStateStore.height;
var _useTheme2 = (0, _ThemeContext.useTheme)(),
_useTheme2$theme = _useTheme2.theme,
semantics = _useTheme2$theme.semantics,
_useTheme2$theme$mess = _useTheme2$theme.messageComposer,
container = _useTheme2$theme$mess.container,
floatingWrapper = _useTheme2$theme$mess.floatingWrapper,
focusedInputBoxContainer = _useTheme2$theme$mess.focusedInputBoxContainer,
inputBoxContainer = _useTheme2$theme$mess.inputBoxContainer,
inputBoxWrapper = _useTheme2$theme$mess.inputBoxWrapper,
inputContainer = _useTheme2$theme$mess.inputContainer,
inputFloatingContainer = _useTheme2$theme$mess.inputFloatingContainer,
wrapper = _useTheme2$theme$mess.wrapper;
(0, _react.useEffect)(() => () => {
closeAttachmentPicker();
}, [closeAttachmentPicker]);
(0, _react.useEffect)(() => {
var threadId = messageComposer.threadId;
if (!threadId) return;
messageComposer.getDraft();
}, [messageComposer]);
var getMembers = () => {
var result = [];
if (members && Object.values(members).length) {
Object.values(members).forEach(member => {
if (member.user) {
result.push(member.user);
}
});
}
return result;
};
var getUsers = () => {
var users = [...getMembers(), ...getWatchers()];
var uniqueUsers = {};
for (var user of users) {
if (user && !uniqueUsers[user.id]) {
uniqueUsers[user.id] = user;
}
}
var usersArray = Object.values(uniqueUsers);
return usersArray;
};
var getWatchers = () => {
var result = [];
if (watchers && Object.values(watchers).length) {
result.push(...Object.values(watchers));
}
return result;
};
(0, _a11y.useScreenReaderMountFocus)(inputBoxRef);
var isFocused = inputBoxRef.current?.isFocused();
var micPositionX = (0, _reactNativeReanimated.useSharedValue)(0);
var micPositionY = (0, _reactNativeReanimated.useSharedValue)(0);
var X_AXIS_POSITION = -asyncMessagesSlideToCancelDistance;
var Y_AXIS_POSITION = -asyncMessagesLockDistance;
var lockIndicatorAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateY: (0, _reactNativeReanimated.interpolate)(micPositionY.value, [0, Y_AXIS_POSITION], [0, Y_AXIS_POSITION], _reactNativeReanimated.Extrapolation.CLAMP)
}]
}));
var slideToCancelAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
opacity: (0, _reactNativeReanimated.interpolate)(micPositionX.value, [0, X_AXIS_POSITION], [1, 0], _reactNativeReanimated.Extrapolation.CLAMP)
}));
var _useSafeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)(),
bottom = _useSafeAreaInsets.bottom;
var BOTTOM_OFFSET = isKeyboardVisible || selectedPicker ? 16 : bottom ? bottom : 16;
var micPositionContextValue = (0, _react.useMemo)(() => ({
micPositionX,
micPositionY
}), [micPositionX, micPositionY]);
return (0, _jsxRuntime.jsxs)(_MicPositionContext.MicPositionProvider, {
value: micPositionContextValue,
children: [messageInputFloating ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
paddingBottom: selectedPicker && !isKeyboardVisible ? attachmentPickerBottomSheetHeight - bottomInset : 0
}
}) : null, (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: messageInputFloating ? [styles.floatingWrapper, {
bottom: selectedPicker && !isKeyboardVisible ? attachmentPickerBottomSheetHeight - bottomInset + BOTTOM_OFFSET : BOTTOM_OFFSET
}, floatingWrapper] : null,
layout: _transitions.transitions.layout200,
children: (0, _jsxRuntime.jsx)(_PortalWhileClosingView.PortalWhileClosingView, {
portalHostName: "overlay-composer",
portalName: "message-composer",
children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
onLayout: ({
nativeEvent: {
layout: {
height: newHeight
}
}
}) => {
messageInputHeightStore.setHeight(newHeight - (selectedPicker && !isKeyboardVisible ? attachmentPickerBottomSheetHeight - bottomInset : 0));
},
style: messageInputFloating ? [styles.wrapper] : [styles.wrapper, {
borderTopWidth: 1,
backgroundColor: semantics.backgroundCoreElevation1,
borderTopColor: semantics.borderCoreSubtle,
paddingBottom: selectedPicker && !isKeyboardVisible ? attachmentPickerBottomSheetHeight - bottomInset + BOTTOM_OFFSET : BOTTOM_OFFSET
}, wrapper],
children: [Input ? (0, _jsxRuntime.jsx)(Input, {
additionalTextInputProps: additionalTextInputProps,
getUsers: getUsers
}) : (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.container, container],
children: [(0, _jsxRuntime.jsx)(MessageComposerLeadingView, {}), (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
layout: _transitions.transitions.layout200,
style: [styles.inputBoxWrapper, messageInputFloating ? [styles.shadow, inputFloatingContainer] : null, inputBoxWrapper, isFocused ? focusedInputBoxContainer : null],
children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.inputBoxContainer, inputBoxContainer],
children: [recordingStatus === 'stopped' ? (0, _jsxRuntime.jsx)(AudioRecordingPreview, {}) : micLocked ? (0, _jsxRuntime.jsx)(AudioRecordingInProgress, {}) : null, (0, _jsxRuntime.jsx)(MessageInputHeaderView, {}), (0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
style: [styles.inputContainer, inputContainer],
layout: _transitions.transitions.layout200,
children: [!isRecordingStateIdle ? (0, _jsxRuntime.jsx)(AudioRecorder, {
slideToCancelStyle: slideToCancelAnimatedStyle
}) : (0, _jsxRuntime.jsx)(InputView, {
TextInputComponent: TextInputComponent,
...additionalTextInputProps
}), (0, _jsxRuntime.jsx)(MessageInputTrailingView, {})]
})]
})
}), (0, _jsxRuntime.jsx)(MessageComposerTrailingView, {})]
}), !isRecordingStateIdle ? (0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.audioLockIndicatorWrapper, {
bottom: messageInputFloating ? 0 : 16
}],
children: (0, _jsxRuntime.jsx)(AudioRecordingLockIndicator, {
messageInputHeight: height,
micLocked: micLocked,
style: lockIndicatorAnimatedStyle
})
}) : null]
})
})
}), showPollCreationDialog ? (0, _jsxRuntime.jsx)(_PollModal.PollModal, {
onRequestClose: closePollCreationDialog,
visible: showPollCreationDialog,
children: (0, _jsxRuntime.jsx)(_CreatePollContent.CreatePoll, {
closePollCreationDialog: closePollCreationDialog,
createPollOptionGap: createPollOptionGap,
sendMessage: sendMessage
})
}) : null]
});
};
var areEqual = (prevProps, nextProps) => {
var prevAdditionalTextInputProps = prevProps.additionalTextInputProps,
prevAsyncMessagesLockDistance = prevProps.asyncMessagesLockDistance,
prevAsyncMessagesMinimumPressDuration = prevProps.asyncMessagesMinimumPressDuration,
prevAsyncMessagesSlideToCancelDistance = prevProps.asyncMessagesSlideToCancelDistance,
prevAudioRecordingSendOnComplete = prevProps.audioRecordingSendOnComplete,
prevAsyncMessagesEnabled = prevProps.audioRecordingEnabled,
prevChannel = prevProps.channel,
prevClosePollCreationDialog = prevProps.closePollCreationDialog,
prevCreatePollOptionGap = prevProps.createPollOptionGap,
prevEditing = prevProps.editing,
prevIsKeyboardVisible = prevProps.isKeyboardVisible,
prevIsOnline = prevProps.isOnline,
prevOpenPollCreationDialog = prevProps.openPollCreationDialog,
prevShowPollCreationDialog = prevProps.showPollCreationDialog,
prevT = prevProps.t,
prevMicLocked = prevProps.micLocked,
prevIsRecordingStateIdle = prevProps.isRecordingStateIdle,
prevRecordingStatus = prevProps.recordingStatus;
var nextAdditionalTextInputProps = nextProps.additionalTextInputProps,
nextAsyncMessagesLockDistance = nextProps.asyncMessagesLockDistance,
nextAsyncMessagesMinimumPressDuration = nextProps.asyncMessagesMinimumPressDuration,
nextAsyncMessagesSlideToCancelDistance = nextProps.asyncMessagesSlideToCancelDistance,
nextAudioRecordingSendOnComplete = nextProps.audioRecordingSendOnComplete,
nextAsyncMessagesEnabled = nextProps.audioRecordingEnabled,
nextChannel = nextProps.channel,
nextClosePollCreationDialog = nextProps.closePollCreationDialog,
nextCreatePollOptionGap = nextProps.createPollOptionGap,
nextEditing = nextProps.editing,
nextIsKeyboardVisible = nextProps.isKeyboardVisible,
nextIsOnline = nextProps.isOnline,
nextOpenPollCreationDialog = nextProps.openPollCreationDialog,
nextShowPollCreationDialog = nextProps.showPollCreationDialog,
nextT = nextProps.t,
nextMicLocked = nextProps.micLocked,
nextIsRecordingStateIdle = nextProps.isRecordingStateIdle,
nextRecordingStatus = nextProps.recordingStatus;
var tEqual = prevT === nextT;
if (!tEqual) {
return false;
}
var pollCreationInputPropsEqual = prevOpenPollCreationDialog === nextOpenPollCreationDialog && prevClosePollCreationDialog === nextClosePollCreationDialog && prevCreatePollOptionGap === nextCreatePollOptionGap && prevShowPollCreationDialog === nextShowPollCreationDialog;
if (!pollCreationInputPropsEqual) {
return false;
}
var additionalTextInputPropsEven = prevAdditionalTextInputProps === nextAdditionalTextInputProps;
if (!additionalTextInputPropsEven) {
return false;
}
var asyncMessagesEnabledEqual = prevAsyncMessagesEnabled === nextAsyncMessagesEnabled;
if (!asyncMessagesEnabledEqual) {
return false;
}
var channelEqual = prevChannel.cid === nextChannel.cid;
if (!channelEqual) {
return false;
}
var asyncMessagesLockDistanceEqual = prevAsyncMessagesLockDistance === nextAsyncMessagesLockDistance;
if (!asyncMessagesLockDistanceEqual) {
return false;
}
var asyncMessagesMinimumPressDurationEqual = prevAsyncMessagesMinimumPressDuration === nextAsyncMessagesMinimumPressDuration;
if (!asyncMessagesMinimumPressDurationEqual) {
return false;
}
var asyncMessagesSlideToCancelDistanceEqual = prevAsyncMessagesSlideToCancelDistance === nextAsyncMessagesSlideToCancelDistance;
if (!asyncMessagesSlideToCancelDistanceEqual) {
return false;
}
var audioRecordingSendOnCompleteEqual = prevAudioRecordingSendOnComplete === nextAudioRecordingSendOnComplete;
if (!audioRecordingSendOnCompleteEqual) {
return false;
}
var editingEqual = !!prevEditing === !!nextEditing;
if (!editingEqual) {
return false;
}
var isKeyboardVisibleEqual = prevIsKeyboardVisible === nextIsKeyboardVisible;
if (!isKeyboardVisibleEqual) {
return false;
}
var isOnlineEqual = prevIsOnline === nextIsOnline;
if (!isOnlineEqual) {
return false;
}
var micLockedEqual = prevMicLocked === nextMicLocked;
if (!micLockedEqual) {
return false;
}
var isRecordingStateIdleEqual = prevIsRecordingStateIdle === nextIsRecordingStateIdle;
if (!isRecordingStateIdleEqual) {
return false;
}
var recordingStatusEqual = prevRecordingStatus === nextRecordingStatus;
if (!recordingStatusEqual) {
return false;
}
return true;
};
var MemoizedMessageComposer = _react.default.memo(MessageComposerWithContext, areEqual);
var MessageComposer = props => {
var _useChatContext = (0, _contexts.useChatContext)(),
isOnline = _useChatContext.isOnline;
var ownCapabilities = (0, _contexts.useOwnCapabilitiesContext)();
var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
channel = _useChannelContext.channel,
members = _useChannelContext.members,
watchers = _useChannelContext.watchers;
var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
audioRecorderManager = _useMessageInputConte.audioRecorderManager,
additionalTextInputProps = _useMessageInputConte.additionalTextInputProps,
audioRecordingSendOnComplete = _useMessageInputConte.audioRecordingSendOnComplete,
asyncMessagesLockDistance = _useMessageInputConte.asyncMessagesLockDistance,
asyncMessagesMinimumPressDuration = _useMessageInputConte.asyncMessagesMinimumPressDuration,
asyncMessagesSlideToCancelDistance = _useMessageInputConte.asyncMessagesSlideToCancelDistance,
audioRecordingEnabled = _useMessageInputConte.audioRecordingEnabled,
closeAttachmentPicker = _useMessageInputConte.closeAttachmentPicker,
closePollCreationDialog = _useMessageInputConte.closePollCreationDialog,
compressImageQuality = _useMessageInputConte.compressImageQuality,
inputBoxRef = _useMessageInputConte.inputBoxRef,
messageInputFloating = _useMessageInputConte.messageInputFloating,
messageInputHeightStore = _useMessageInputConte.messageInputHeightStore,
openPollCreationDialog = _useMessageInputConte.openPollCreationDialog,
sendMessage = _useMessageInputConte.sendMessage,
showPollCreationDialog = _useMessageInputConte.showPollCreationDialog,
uploadNewFile = _useMessageInputConte.uploadNewFile;
var _useComponentsContext2 = (0, _ComponentsContext.useComponentsContext)(),
SendMessageDisallowedIndicator = _useComponentsContext2.SendMessageDisallowedIndicator;
var messageComposer = (0, _useMessageComposer.useMessageComposer)();
var editing = !!messageComposer.editedMessage;
var _useMessageComposerAP = (0, _MessageComposerAPIContext.useMessageComposerAPIContext)(),
clearEditingState = _useMessageComposerAP.clearEditingState;
var isKeyboardVisible = (0, _useKeyboardVisibility.useKeyboardVisibility)();
var _useStateStore2 = (0, _useStateStore3.useStateStore)(audioRecorderManager.state, _audioRecorderSelectors.audioRecorderSelector),
micLocked = _useStateStore2.micLocked,
isRecordingStateIdle = _useStateStore2.isRecordingStateIdle,
recordingStatus = _useStateStore2.recordingStatus;
var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
t = _useTranslationContex.t;
if (!ownCapabilities.sendMessage && !editing && SendMessageDisallowedIndicator) {
return (0, _jsxRuntime.jsx)(SendMessageDisallowedIndicator, {});
}
return (0, _jsxRuntime.jsx)(MemoizedMessageComposer, {
audioRecorderManager,
isRecordingStateIdle,
recordingStatus,
micLocked,
additionalTextInputProps,
audioRecordingSendOnComplete,
asyncMessagesLockDistance,
asyncMessagesMinimumPressDuration,
asyncMessagesSlideToCancelDistance,
audioRecordingEnabled,
channel,
clearEditingState,
closeAttachmentPicker,
closePollCreationDialog,
compressImageQuality,
editing,
inputBoxRef,
isKeyboardVisible,
isOnline,
members,
messageInputFloating,
messageInputHeightStore,
openPollCreationDialog,
sendMessage,
showPollCreationDialog,
t,
uploadNewFile,
watchers,
...props
});
};
exports.MessageComposer = MessageComposer;
MessageComposer.displayName = 'MessageComposer{messageComposer}';
//# sourceMappingURL=MessageComposer.js.map