Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 3x 20x 3x 51x 49x 49x 49x 1x | import NiceModal from "@ebay/nice-modal-react";
import GiveDraggableModal from "@shared/GiveDraggableModal/GiveDraggableModal";
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import ConversationProvider, {
useConversationContext,
} from "./ConversationProvider";
import HeaderLeftSection from "./components/HeaderLeftSection";
import ConversationTabs from "./components/ConversationTabs";
import { GiveConversationProps } from "./types";
import BodySelector from "./sections/BodySelector";
import FooterSelector from "./sections/FooterSelector";
import { GiveConversationSections } from "./constants";
import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { useAppTheme } from "@theme/v2/Provider";
import { CONVERSATION_MODAL } from "modals/modal_names";
const GiveConversation = NiceModal.create((props: GiveConversationProps) => {
return (
<ConversationProvider {...props}>
<DraggableModalWrapper />
</ConversationProvider>
);
});
const DraggableModalWrapper = () => {
const { open } = useNiceModal();
const { searchState, setSearchState, sectionInView } =
useConversationContext();
const { palette } = useAppTheme();
return (
<GiveDraggableModal
open={open}
handleClose={() => {
NiceModal.remove(CONVERSATION_MODAL);
}}
LeftHeaderSection={HeaderLeftSection}
StickySection={ConversationTabs}
Body={BodySelector}
FooterComponent={FooterSelector}
customHeaderRightIcons={[
{
Icons: MagnifyingGlassIcon,
handleClick: () => {
setSearchState((prev) => ({
searchValue: "",
isOpened: !prev.isOpened,
}));
},
sx: {
backgroundColor: searchState?.isOpened
? palette?.primitive?.transparent?.["darken-5"]
: "transparent",
},
dataTestId: "give-conversation-search-button",
},
]}
// TODO: check for more scalable solution
showFooterBorder={sectionInView !== GiveConversationSections.MESSAGE_LIST}
/>
);
};
export default GiveConversation;
|