Select Files Modal

Overview

The SelectFilesModal component provides a modal interface for selecting various file types such as images, documents, and polls. It integrates seamlessly with chatroom functionality and is designed for enhanced user interaction with customizable behavior for handling each file type.

Props

Property	Type	Description	Optional
handleGalleryProp	Function	Custom handler for selecting images or videos from the gallery.	✔️
handleDocumentProp	Function	Custom handler for selecting documents.	✔️
handleCameraProp	Function	Custom handler for capturing photos or videos using the camera.	✔️
handlePollProp	Function	Custom handler for navigating to the poll creation screen.	✔️
handleModalCloseProp	Function	Custom handler for closing the modal.	✔️

Features

1. File Selection Options:

   • Camera: Capture photos or videos directly.
   • Gallery: Select images or videos from the device's gallery.
   • Documents: Upload documents (if the chatroom type allows).
   • Polls: Navigate to the poll creation screen (if permitted by the chatroom).

2. Dynamic Behavior:

   • Adapts to the type of chatroom (e.g., DM, Open, Announcement).
   • Hides options based on chatroom type and user permissions.

3. Customizable Handlers:

   • Allows overriding default behavior for each file selection type.

4. User-Friendly Design:

   • Includes icons and text for clear identification of options.
   • Automatically closes the modal after a selection.

5. Context Integration:

   • Leverages the InputBoxContext for managing state and behavior.

Usage Example

To Customise Callbacks

Define a custom callbacks for gallery, document, camera and poll selection and pass it to the handleGalleryProp, handleDocumentProp, handleCameraProp, and handlePollProp of the <SelectFilesModal/> component.

import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  const handleGallery = () => {
    console.log("Gallery option selected.");
  };

  const handleDocument = () => {
    console.log("Document option selected.");
  };

  const handleCamera = () => {
    console.log("Camera option selected.");
  };

  const handlePoll = () => {
    console.log("Poll option selected.");
  };

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      {/* Add SelectFilesModal component like this*/}
      <SelectFilesModal
        handleGalleryProp={handleGallery}
        handleDocumentProp={handleDocument}
        handleCameraProp={handleCamera}
        handlePollProp={handlePoll}
      />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

Customise <SelectFilesModal /> UI Component

• Create a new component CustomSelectFilesModal, referencing the SelectFilesModal component.
• Perform your UI customizations in the new component.

import React from "react";
import { View } from "react-native";
import {
  AddFilesView,
  AddMoreFilesView,
  EditBox,
  InputBoxView,
  InputWrapper,
  InputWrapperLeftSection,
  LinkPreviewInputView,
  ReplyBoxView,
  SelectFilesModal,
  SendDMRequestModal,
  TextInputWrapper,
  useInputBoxContext,
  VoiceNoteRecordToast,
  UserTaggingList,
  RecordSendInputFabView,
} from "@likeminds.community/chat-rn-core";
import CustomSelectFilesModal from "<path_to_custom_select_files_modal_component>";

const CustomMessageInputBox = () => {
  const { hideDMSentAlert, message, DMSentAlertModalVisible, onSend } =
    useInputBoxContext();

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          <EditBox />

          <TextInputWrapper>
            <AddMoreFilesView />
            <InputBoxView />
            <AddFilesView />
          </TextInputWrapper>
        </InputWrapperLeftSection>

        <RecordSendInputFabView />
      </InputWrapper>

      {/* Add CustomSelectFilesModal component like this*/}
      <CustomSelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

• Use the CustomMessageInputBox component as a child of the MessageInput component in the relevant screens:
  • Chatroom Screen
  • File Upload Screen