Skip to main content

Edit Box

Overview​

The EditBox component provides an interface for editing a message in a chat conversation. It allows users to view the message being edited and includes a close button to dismiss the edit box. The component integrates with the InputBoxContext for managing the editable state and message content, and uses Redux for dispatching actions related to the edited message.

LMFeedMediaPreviewScreen

UI Components​

The EditBox includes the following elements:

  • Edit Box: Displays the message being edited, utilizing the ReplyBox component.
  • Close Button: A clickable button to dismiss the edit box, either by executing a custom close callback or using the default behavior defined in the context.

Props​

PropertyTypeDescriptionOptional
handleEditBoxClosePropFunctionCustom callback function triggered when the close button is pressed. If not provided, the default behavior resets the edit state and clears the edited message.✔️

Features​

  1. Dynamic Edit Box:

    • Displays the message being edited, with additional context such as the chatroom name.

  2. Customizable Close Action:

    • Supports a custom callback for closing the edit box. If not provided, it defaults to resetting the edit state and clearing the message.

  3. State Management Integration:

    • Uses the InputBoxContext to manage the isEditable state, indicating whether the edit box is visible, and the editConversation state, which holds the message content being edited.
    • Utilizes Redux to dispatch actions (SET_EDIT_MESSAGE and SELECTED_MESSAGES) to update the edited message and clear any selected messages.

Usage Example​

To Customise Callbacks​

Define a custom method like handleEditBoxClose and pass it to the handleEditBoxCloseProp of the <EditBox/> 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();

  // Customize the edit box close behavior, else simply avoid passing it as a prop to the EditBox component
  const handleEditBoxClose = () => {
    console.log("Edit box closed");
  };

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          {/* Add EditBox component like this*/}
          <EditBox handleEditBoxCloseProp={handleEditBoxClose} />

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

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;

Customise <EditBox /> UI Component​

  • Create a new component CustomEditBox, referencing the EditBox 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 CustomEditBox from "<path_to_custom_edit_box_component>";

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

  return (
    <View>
      <VoiceNoteRecordToast />

      <InputWrapper>
        <InputWrapperLeftSection>
          <UserTaggingList />
          <ReplyBoxView />
          <LinkPreviewInputView />
          {/* Add CustomEditBox component like this*/}
          <CustomEditBox />

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

        <RecordSendInputFabView />
      </InputWrapper>

      <SelectFilesModal />
      <SendDMRequestModal
        hideDMSentAlert={hideDMSentAlert}
        DMSentAlertModalVisible={DMSentAlertModalVisible}
        onSend={onSend}
        message={message}
      />
    </View>
  );
};

export default CustomMessageInputBox;