Skip to content

Commit 700fa62

Browse files
isekovanicisekovanic
committed
fix: move shared values in context
1 parent a0c130a commit 700fa62

File tree

5 files changed

+184
-172
lines changed

5 files changed

+184
-172
lines changed

‎package/src/components/MessageInput/MessageInput.tsx‎

Lines changed: 144 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,11 @@ import { type MessageComposerState, type TextComposerState, type UserResponse }
1919
import { InputButtons } from './components/InputButtons';
2020
import { LinkPreviewList } from './components/LinkPreviewList';
2121
import { OutputButtons } from './components/OutputButtons';
22+
import { MicPositionProvider } from './contexts/MicPositionContext';
2223

2324
import { useHasLinkPreviews } from './hooks/useLinkPreviews';
2425

25-
import {
26-
ChatContextValue,
27-
useAttachmentManagerState,
28-
useChatContext,
29-
useOwnCapabilitiesContext,
30-
} from '../../contexts';
26+
import { ChatContextValue, useChatContext, useOwnCapabilitiesContext } from '../../contexts';
3127
import {
3228
AttachmentPickerContextValue,
3329
useAttachmentPickerContext,
@@ -363,150 +359,154 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
363359

364360
const BOTTOM_OFFSET = isKeyboardVisible ? 16 : bottom ? bottom : 16;
365361

362+
const micPositionContextValue = useMemo(
363+
() => ({ micPositionX, micPositionY }),
364+
[micPositionX, micPositionY],
365+
);
366+
366367
return (
367-
<>
368-
<Animated.View
369-
layout={LinearTransition.duration(200)}
370-
onLayout={({
371-
nativeEvent: {
372-
layout: { height: newHeight },
373-
},
374-
}) =>
375-
messageInputHeightStore.setHeight(
376-
messageInputFloating ? newHeight + BOTTOM_OFFSET : newHeight,
377-
)
378-
} // BOTTOM OFFSET is the position of the input from the bottom of the screen
379-
style={
380-
messageInputFloating
381-
? [styles.wrapper, styles.floatingWrapper, { bottom: BOTTOM_OFFSET }, floatingWrapper]
382-
: [
383-
styles.wrapper,
384-
{
385-
borderTopWidth: 1,
386-
backgroundColor: semantics.composerBg,
387-
borderColor: semantics.borderCoreDefault,
388-
paddingBottom: BOTTOM_OFFSET,
389-
},
390-
wrapper,
391-
]
392-
}
393-
>
394-
{Input ? (
395-
<Input additionalTextInputProps={additionalTextInputProps} getUsers={getUsers} />
396-
) : (
397-
<View style={[styles.container, container]}>
398-
<MessageComposerLeadingView />
399-
<Animated.View
400-
layout={LinearTransition.duration(200)}
401-
style={[
402-
styles.inputBoxWrapper,
403-
messageInputFloating ? [styles.shadow, inputFloatingContainer] : null,
404-
inputBoxWrapper,
405-
isFocused ? focusedInputBoxContainer : null,
406-
]}
407-
>
408-
<View style={[styles.inputBoxContainer, inputBoxContainer]}>
409-
{recordingStatus === 'stopped' ? (
410-
<AudioRecordingPreview />
411-
) : micLocked ? (
412-
<AudioRecordingInProgress />
413-
) : null}
414-
415-
<MessageInputHeaderView />
416-
417-
<Animated.View
418-
style={[styles.inputContainer, inputContainer]}
419-
layout={LinearTransition.duration(200)}
420-
>
421-
{!isRecordingStateIdle ? (
422-
<AudioRecorder slideToCancelStyle={slideToCancelAnimatedStyle} />
423-
) : (
424-
<>
425-
<MessageInputLeadingView />
426-
427-
<AutoCompleteInput
428-
TextInputComponent={TextInputComponent}
429-
{...additionalTextInputProps}
430-
/>
431-
</>
432-
)}
433-
434-
<MessageInputTrailingView
435-
micPositionX={micPositionX}
436-
micPositionY={micPositionY}
437-
/>
438-
</Animated.View>
439-
</View>
440-
</Animated.View>
441-
</View>
442-
)}
443-
<ShowThreadMessageInChannelButton threadList={threadList} />
444-
</Animated.View>
445-
446-
{!isRecordingStateIdle ? (
447-
<View
448-
style={[
449-
styles.audioLockIndicatorWrapper,
450-
{
451-
bottom: messageInputFloating ? 0 : 16,
368+
<MicPositionProvider value={micPositionContextValue}>
369+
<>
370+
<Animated.View
371+
layout={LinearTransition.duration(200)}
372+
onLayout={({
373+
nativeEvent: {
374+
layout: { height: newHeight },
452375
},
453-
]}
376+
}) =>
377+
messageInputHeightStore.setHeight(
378+
messageInputFloating ? newHeight + BOTTOM_OFFSET : newHeight,
379+
)
380+
} // BOTTOM OFFSET is the position of the input from the bottom of the screen
381+
style={
382+
messageInputFloating
383+
? [styles.wrapper, styles.floatingWrapper, { bottom: BOTTOM_OFFSET }, floatingWrapper]
384+
: [
385+
styles.wrapper,
386+
{
387+
borderTopWidth: 1,
388+
backgroundColor: semantics.composerBg,
389+
borderColor: semantics.borderCoreDefault,
390+
paddingBottom: BOTTOM_OFFSET,
391+
},
392+
wrapper,
393+
]
394+
}
454395
>
455-
<AudioRecordingLockIndicator
456-
messageInputHeight={height}
457-
micLocked={micLocked}
458-
style={lockIndicatorAnimatedStyle}
459-
/>
460-
</View>
461-
) : (
462-
<MessageComposerTrailingView />
463-
)}
464-
465-
<Animated.View
466-
entering={FadeIn.duration(200)}
467-
exiting={FadeOut.duration(200)}
468-
layout={LinearTransition.duration(200)}
469-
style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
470-
>
471-
<AutoCompleteSuggestionList />
472-
</Animated.View>
473-
{!disableAttachmentPicker && selectedPicker ? (
396+
{Input ? (
397+
<Input additionalTextInputProps={additionalTextInputProps} getUsers={getUsers} />
398+
) : (
399+
<View style={[styles.container, container]}>
400+
<MessageComposerLeadingView />
401+
<Animated.View
402+
layout={LinearTransition.duration(200)}
403+
style={[
404+
styles.inputBoxWrapper,
405+
messageInputFloating ? [styles.shadow, inputFloatingContainer] : null,
406+
inputBoxWrapper,
407+
isFocused ? focusedInputBoxContainer : null,
408+
]}
409+
>
410+
<View style={[styles.inputBoxContainer, inputBoxContainer]}>
411+
{recordingStatus === 'stopped' ? (
412+
<AudioRecordingPreview />
413+
) : micLocked ? (
414+
<AudioRecordingInProgress />
415+
) : null}
416+
417+
<MessageInputHeaderView />
418+
419+
<Animated.View
420+
style={[styles.inputContainer, inputContainer]}
421+
layout={LinearTransition.duration(200)}
422+
>
423+
{!isRecordingStateIdle ? (
424+
<AudioRecorder slideToCancelStyle={slideToCancelAnimatedStyle} />
425+
) : (
426+
<>
427+
<MessageInputLeadingView />
428+
429+
<AutoCompleteInput
430+
TextInputComponent={TextInputComponent}
431+
{...additionalTextInputProps}
432+
/>
433+
</>
434+
)}
435+
436+
<MessageInputTrailingView />
437+
</Animated.View>
438+
</View>
439+
</Animated.View>
440+
</View>
441+
)}
442+
<ShowThreadMessageInChannelButton threadList={threadList} />
443+
</Animated.View>
444+
445+
{!isRecordingStateIdle ? (
446+
<View
447+
style={[
448+
styles.audioLockIndicatorWrapper,
449+
{
450+
bottom: messageInputFloating ? 0 : 16,
451+
},
452+
]}
453+
>
454+
<AudioRecordingLockIndicator
455+
messageInputHeight={height}
456+
micLocked={micLocked}
457+
style={lockIndicatorAnimatedStyle}
458+
/>
459+
</View>
460+
) : (
461+
<MessageComposerTrailingView />
462+
)}
463+
474464
<Animated.View
475465
entering={FadeIn.duration(200)}
476466
exiting={FadeOut.duration(200)}
477-
style={[
478-
{
479-
backgroundColor: semantics.composerBg,
480-
height:
481-
attachmentPickerBottomSheetHeight + attachmentSelectionBarHeight - bottomInset,
482-
},
483-
attachmentSelectionBar,
484-
]}
467+
layout={LinearTransition.duration(200)}
468+
style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
485469
>
486-
<AttachmentPickerSelectionBar />
470+
<AutoCompleteSuggestionList />
487471
</Animated.View>
488-
) : null}
489-
490-
{showPollCreationDialog ? (
491-
<View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
492-
<Modal
493-
animationType='slide'
494-
onRequestClose={closePollCreationDialog}
495-
visible={showPollCreationDialog}
472+
{!disableAttachmentPicker && selectedPicker ? (
473+
<Animated.View
474+
entering={FadeIn.duration(200)}
475+
exiting={FadeOut.duration(200)}
476+
style={[
477+
{
478+
backgroundColor: semantics.composerBg,
479+
height:
480+
attachmentPickerBottomSheetHeight + attachmentSelectionBarHeight - bottomInset,
481+
},
482+
attachmentSelectionBar,
483+
]}
496484
>
497-
<GestureHandlerRootView style={{ flex: 1 }}>
498-
<SafeAreaViewWrapper style={{ flex: 1 }}>
499-
<CreatePoll
500-
closePollCreationDialog={closePollCreationDialog}
501-
CreatePollContent={CreatePollContent}
502-
sendMessage={sendMessage}
503-
/>
504-
</SafeAreaViewWrapper>
505-
</GestureHandlerRootView>
506-
</Modal>
507-
</View>
508-
) : null}
509-
</>
485+
<AttachmentPickerSelectionBar />
486+
</Animated.View>
487+
) : null}
488+
489+
{showPollCreationDialog ? (
490+
<View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
491+
<Modal
492+
animationType='slide'
493+
onRequestClose={closePollCreationDialog}
494+
visible={showPollCreationDialog}
495+
>
496+
<GestureHandlerRootView style={{ flex: 1 }}>
497+
<SafeAreaViewWrapper style={{ flex: 1 }}>
498+
<CreatePoll
499+
closePollCreationDialog={closePollCreationDialog}
500+
CreatePollContent={CreatePollContent}
501+
sendMessage={sendMessage}
502+
/>
503+
</SafeAreaViewWrapper>
504+
</GestureHandlerRootView>
505+
</Modal>
506+
</View>
507+
) : null}
508+
</>
509+
</MicPositionProvider>
510510
);
511511
};
512512

@@ -572,9 +572,6 @@ export const MessageInputHeaderView = () => {
572572
const messageComposer = useMessageComposer();
573573
const editing = !!messageComposer.editedMessage;
574574
const { clearEditingState } = useMessageComposerAPIContext();
575-
const onDismissEditMessage = () => {
576-
clearEditingState();
577-
};
578575
const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
579576
const hasLinkPreviews = useHasLinkPreviews();
580577
const { audioRecorderManager, AttachmentUploadPreviewList } = useMessageInputContext();
@@ -603,7 +600,7 @@ export const MessageInputHeaderView = () => {
603600
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
604601
<Reply
605602
mode='edit'
606-
onDismiss={onDismissEditMessage}
603+
onDismiss={clearEditingState}
607604
quotedMessage={messageComposer.editedMessage}
608605
/>
609606
</Animated.View>
@@ -642,13 +639,7 @@ export const MessageInputLeadingView = () => {
642639
* @param prevProps
643640
*/
644641

645-
export const MessageInputTrailingView = ({
646-
micPositionX,
647-
micPositionY,
648-
}: {
649-
micPositionX: Animated.SharedValue<number>;
650-
micPositionY: Animated.SharedValue<number>;
651-
}) => {
642+
export const MessageInputTrailingView = () => {
652643
const styles = useStyles();
653644
const {
654645
theme: {
@@ -662,7 +653,7 @@ export const MessageInputTrailingView = ({
662653
);
663654
return (recordingStatus === 'idle' || recordingStatus === 'recording') && !micLocked ? (
664655
<View style={[styles.outputButtonsContainer, outputButtonsContainer]}>
665-
<OutputButtons micPositionX={micPositionX} micPositionY={micPositionY} />
656+
<OutputButtons />
666657
</View>
667658
) : null;
668659
};
@@ -680,7 +671,6 @@ const areEqual = (
680671
channel: prevChannel,
681672
closePollCreationDialog: prevClosePollCreationDialog,
682673
editing: prevEditing,
683-
hasAttachments: prevHasAttachments,
684674
isKeyboardVisible: prevIsKeyboardVisible,
685675
isOnline: prevIsOnline,
686676
openPollCreationDialog: prevOpenPollCreationDialog,

0 commit comments

Comments
 (0)