Attachment Modal: Support scheduling (#1740)

src/components/middle/composer/AttachmentModal.scss

@@ -128,4 +128,19 @@
       border-radius: var(--border-radius-default);
     }
   }
+
+  &--send-wrapper {
+    position: relative;
+  }
+
+  .CustomSendMenu {
+    bottom: auto;
+
+    .is-pointer-env & > .backdrop {
+      width: 100%;
+      top: -2.25rem;
+      bottom: auto;
+      height: 2.75rem;
+    }
+  }
 }

src/components/middle/composer/AttachmentModal.tsx

@@ -17,6 +17,7 @@ import useMentionTooltip from './hooks/useMentionTooltip';
 import useEmojiTooltip from './hooks/useEmojiTooltip';
 import useLang from '../../../hooks/useLang';
 import useFlag from '../../../hooks/useFlag';
+import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
 import { useStateRef } from '../../../hooks/useStateRef';
 
 import Button from '../../ui/Button';
@@ -25,6 +26,7 @@ import File from '../../common/File';
 import MessageInput from './MessageInput';
 import MentionTooltip from './MentionTooltip';
 import EmojiTooltip from './EmojiTooltip.async';
+import CustomSendMenu from './CustomSendMenu.async';
 
 import './AttachmentModal.scss';
 
@@ -33,7 +35,9 @@ export type OwnProps = {
   threadId: number;
   attachments: ApiAttachment[];
   caption: string;
+  canShowCustomSendMenu?: boolean;
   isReady?: boolean;
+  isChatWithSelf?: boolean;
   currentUserId?: string;
   groupChatMembers?: ApiChatMember[];
   recentEmojis: string[];
@@ -44,6 +48,8 @@ export type OwnProps = {
   onSend: () => void;
   onFileAppend: (files: File[], isQuick: boolean) => void;
   onClear: () => void;
+  onSilentSend: () => void;
+  openCalendar: () => void;
 };
 
 const DROP_LEAVE_TIMEOUT_MS = 150;
@@ -53,7 +59,9 @@ const AttachmentModal: FC<OwnProps> = ({
   threadId,
   attachments,
   caption,
+  canShowCustomSendMenu,
   isReady,
+  isChatWithSelf,
   currentUserId,
   groupChatMembers,
   recentEmojis,
@@ -64,8 +72,12 @@ const AttachmentModal: FC<OwnProps> = ({
   onSend,
   onFileAppend,
   onClear,
+  onSilentSend,
+  openCalendar,
 }) => {
   const captionRef = useStateRef(caption);
+  // eslint-disable-next-line no-null/no-null
+  const mainButtonRef = useStateRef<HTMLButtonElement | null>(null);
   const hideTimeoutRef = useRef<number>();
   const prevAttachments = usePrevious(attachments);
   const renderingAttachments = attachments.length ? attachments : prevAttachments;
@@ -100,6 +112,13 @@ const AttachmentModal: FC<OwnProps> = ({
 
   useEffect(() => (isOpen ? captureEscKeyListener(onClear) : undefined), [isOpen, onClear]);
 
+  const {
+    isContextMenuOpen: isCustomSendMenuOpen,
+    handleContextMenu,
+    handleContextMenuClose,
+    handleContextMenuHide,
+  } = useContextMenuHandlers(mainButtonRef, !canShowCustomSendMenu || !isOpen);
+
   const sendAttachments = useCallback(() => {
     if (isOpen) {
       onSend();
@@ -183,14 +202,28 @@ const AttachmentModal: FC<OwnProps> = ({
           <i className="icon-close" />
         </Button>
         <div className="modal-title">{title}</div>
-        <Button
-          color="primary"
-          size="smaller"
-          className="modal-action-button"
-          onClick={sendAttachments}
-        >
-          {lang('Send')}
-        </Button>
+        <div className="AttachmentModal--send-wrapper">
+          <Button
+            ref={mainButtonRef}
+            color="primary"
+            size="smaller"
+            className="modal-action-button"
+            onClick={sendAttachments}
+            onContextMenu={canShowCustomSendMenu ? handleContextMenu : undefined}
+          >
+            {lang('Send')}
+          </Button>
+          {canShowCustomSendMenu && (
+            <CustomSendMenu
+              isOpen={isCustomSendMenuOpen}
+              isOpenToBottom
+              onSilentSend={!isChatWithSelf ? onSilentSend : undefined}
+              onScheduleSend={openCalendar}
+              onClose={handleContextMenuClose}
+              onCloseAnimationEnd={handleContextMenuHide}
+            />
+          )}
+        </div>
       </div>
     );
   }

src/components/middle/composer/Composer.tsx

@@ -849,16 +849,20 @@ const Composer: FC<OwnProps & StateProps> = ({
       <AttachmentModal
         chatId={chatId}
         threadId={threadId}
+        canShowCustomSendMenu={canShowCustomSendMenu}
         attachments={attachments}
         caption={attachments.length ? html : ''}
         groupChatMembers={groupChatMembers}
         currentUserId={currentUserId}
         recentEmojis={recentEmojis}
         isReady={isReady}
+        isChatWithSelf={isChatWithSelf}
         onCaptionUpdate={setHtml}
         baseEmojiKeywords={baseEmojiKeywords}
         emojiKeywords={emojiKeywords}
         addRecentEmoji={addRecentEmoji}
+        onSilentSend={handleSilentSend}
+        openCalendar={openCalendar}
         onSend={shouldSchedule ? openCalendar : handleSend}
         onFileAppend={handleAppendFiles}
         onClear={handleClearAttachment}

src/components/middle/composer/CustomSendMenu.tsx

@@ -11,6 +11,7 @@ import './CustomSendMenu.scss';
 
 export type OwnProps = {
   isOpen: boolean;
+  isOpenToBottom?: boolean;
   onSilentSend?: NoneToVoidFunction;
   onScheduleSend?: NoneToVoidFunction;
   onClose: NoneToVoidFunction;
@@ -18,7 +19,7 @@ export type OwnProps = {
 };
 
 const CustomSendMenu: FC<OwnProps> = ({
-  isOpen, onSilentSend, onScheduleSend, onClose, onCloseAnimationEnd,
+  isOpen, isOpenToBottom = false, onSilentSend, onScheduleSend, onClose, onCloseAnimationEnd,
 }) => {
   const [handleMouseEnter, handleMouseLeave] = useMouseInside(isOpen, onClose);
 
@@ -29,7 +30,7 @@ const CustomSendMenu: FC<OwnProps> = ({
       isOpen={isOpen}
       autoClose
       positionX="right"
-      positionY="bottom"
+      positionY={isOpenToBottom ? 'top' : 'bottom'}
       className="CustomSendMenu"
       onClose={onClose}
       onCloseAnimationEnd={onCloseAnimationEnd}

src/components/ui/Menu.scss

@@ -43,10 +43,6 @@
       transition: opacity 0.15s !important;
     }
 
-    body.has-open-dialog & {
-      transition: none !important;
-    }
-
     --offset-y: calc(100% + 0.5rem);
     --offset-x: 0;
 
@@ -71,6 +67,10 @@
     }
   }
 
+  body.has-open-dialog &:not(.CustomSendMenu) .bubble {
+    transition: none !important;
+  }
+
   .footer {
     padding: 0.5rem 0;
     background: var(--color-chat-hover);