Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions package/src/components/Channel/Channel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,9 @@ const debounceOptions = {
};

export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
Partial<Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset'>> &
Partial<
Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset' | 'disableAttachmentPicker'>
> &
Partial<
Pick<
AttachmentPickerProps,
Expand Down Expand Up @@ -556,6 +558,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
customMessageSwipeAction,
DateHeader = DateHeaderDefault,
deletedMessagesVisibilityType = 'always',
disableAttachmentPicker = !isImageMediaLibraryAvailable(),
disableKeyboardCompatibleView = false,
disableTypingIndicator,
dismissKeyboardOnMessageTouch = true,
Expand Down Expand Up @@ -1679,10 +1682,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
bottomInset,
bottomSheetRef,
closePicker: () => closePicker(bottomSheetRef),
disableAttachmentPicker,
openPicker: () => openPicker(bottomSheetRef),
topInset,
}),
[bottomInset, bottomSheetRef, closePicker, openPicker, topInset],
[bottomInset, bottomSheetRef, closePicker, openPicker, topInset, disableAttachmentPicker],
);

const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
Expand Down Expand Up @@ -1980,7 +1984,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
<MessageComposerProvider value={messageComposerContext}>
<MessageInputProvider value={inputMessageInputContext}>
<View style={{ height: '100%' }}>{children}</View>
{isImageMediaLibraryAvailable() && (
{!disableAttachmentPicker && (
<AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
)}
</MessageInputProvider>
Expand Down
31 changes: 19 additions & 12 deletions package/src/components/MessageInput/AttachButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,32 @@ import { Pressable } from 'react-native';

import { NativeAttachmentPicker } from './components/NativeAttachmentPicker';

import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
import {
AttachmentPickerContextValue,
useAttachmentPickerContext,
} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
import {
MessageInputContextValue,
useMessageInputContext,
} from '../../contexts/messageInputContext/MessageInputContext';
import { useTheme } from '../../contexts/themeContext/ThemeContext';
import { Attach } from '../../icons/Attach';

import { isImageMediaLibraryAvailable } from '../../native';

type AttachButtonPropsWithContext = Pick<
MessageInputContextValue,
'handleAttachButtonPress' | 'toggleAttachmentPicker'
> & {
disabled?: boolean;
/** Function that opens attachment options bottom sheet */
handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
selectedPicker?: 'images';
};
> &
Pick<AttachmentPickerContextValue, 'disableAttachmentPicker' | 'selectedPicker'> & {
disabled?: boolean;
/** Function that opens attachment options bottom sheet */
handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
};

const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
const [showAttachButtonPicker, setShowAttachButtonPicker] = useState<boolean>(false);
const [attachButtonLayoutRectangle, setAttachButtonLayoutRectangle] = useState<LayoutRectangle>();
const {
disableAttachmentPicker,
disabled = false,
handleAttachButtonPress,
handleOnPress,
Expand Down Expand Up @@ -73,7 +75,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
handleAttachButtonPress();
return;
}
if (isImageMediaLibraryAvailable()) {
if (!disableAttachmentPicker) {
toggleAttachmentPicker();
} else {
attachButtonHandler();
Expand Down Expand Up @@ -132,12 +134,17 @@ export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
* UI Component for attach button in MessageInput component.
*/
export const AttachButton = (props: AttachButtonProps) => {
const { selectedPicker } = useAttachmentPickerContext();
const { disableAttachmentPicker, selectedPicker } = useAttachmentPickerContext();
const { handleAttachButtonPress, toggleAttachmentPicker } = useMessageInputContext();

return (
<MemoizedAttachButton
{...{ handleAttachButtonPress, selectedPicker, toggleAttachmentPicker }}
{...{
disableAttachmentPicker,
handleAttachButtonPress,
selectedPicker,
toggleAttachmentPicker,
}}
{...props}
/>
);
Expand Down
15 changes: 7 additions & 8 deletions package/src/components/MessageInput/MessageInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,7 @@ import {
} from '../../contexts/translationContext/TranslationContext';

import { useStateStore } from '../../hooks/useStateStore';
import {
isAudioRecorderAvailable,
isImageMediaLibraryAvailable,
NativeHandlers,
} from '../../native';
import { isAudioRecorderAvailable, NativeHandlers } from '../../native';
import { AIStates, useAIState } from '../AITypingIndicatorView';
import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
import { CreatePoll } from '../Poll/CreatePollContent';
Expand Down Expand Up @@ -112,7 +108,7 @@ const styles = StyleSheet.create({

type MessageInputPropsWithContext = Pick<
AttachmentPickerContextValue,
'bottomInset' | 'selectedPicker'
'bottomInset' | 'disableAttachmentPicker' | 'selectedPicker'
> &
Pick<ChatContextValue, 'isOnline'> &
Pick<ChannelContextValue, 'channel' | 'members' | 'threadList' | 'watchers'> &
Expand Down Expand Up @@ -207,6 +203,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
cooldownEndsAt,
CooldownTimer,
CreatePollContent,
disableAttachmentPicker,
editing,
Input,
inputBoxRef,
Expand Down Expand Up @@ -564,7 +561,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
<View style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}>
<AutoCompleteSuggestionList />
</View>
{isImageMediaLibraryAvailable() && selectedPicker ? (
{!disableAttachmentPicker && selectedPicker ? (
<View
style={[
{
Expand Down Expand Up @@ -784,7 +781,8 @@ export const MessageInput = (props: MessageInputProps) => {
uploadNewFile,
VideoRecorderSelectorIcon,
} = useMessageInputContext();
const { bottomInset, bottomSheetRef, selectedPicker } = useAttachmentPickerContext();
const { bottomInset, bottomSheetRef, disableAttachmentPicker, selectedPicker } =
useAttachmentPickerContext();
const messageComposer = useMessageComposer();
const editing = !!messageComposer.editedMessage;
const { clearEditingState } = useMessageComposerAPIContext();
Expand Down Expand Up @@ -835,6 +833,7 @@ export const MessageInput = (props: MessageInputProps) => {
CooldownTimer,
CreatePollContent,
CreatePollIcon,
disableAttachmentPicker,
editing,
FileSelectorIcon,
ImageSelectorIcon,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export type AttachmentPickerContextValue = {
topInset: number;

selectedPicker?: 'images';
disableAttachmentPicker?: boolean;
};

export const AttachmentPickerContext = React.createContext(
Expand Down