feat: [Composer] Change the send button and plus sign to mutually exc…

…lusive display
alibaba · Dec 15, 2020 · de48814 · de48814
1 parent c8ee147
commit de48814
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 36 deletions.
diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { useState, useRef, useEffect, useImperativeHandle } from 'react';
 import clsx from 'clsx';
-import { IconButton, IconButtonProps } from '../IconButton';
+import { IconButtonProps } from '../IconButton';
 import { Input } from '../Input';
 import { Recorder, RecorderProps } from '../Recorder';
 import { Toolbar } from '../Toolbar';
@@ -234,14 +234,16 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
     return <ClickOutside onClick={handleAccessoryBlur}>{accessory}</ClickOutside>;
   }
 
-  const inputTypeIcon = inputType === 'text' ? 'mic' : 'keyboard';
+  const isInputText = inputType === 'text';
+  const inputTypeIcon = isInputText ? 'mic' : 'keyboard';
   const hasToolbar = toolbar.length > 0;
 
-  const renderInput = () => (
-    <div className={clsx({ 'S--invisible': inputType !== 'text' })}>
+  const renderInput = (minRows: number) => (
+    <div className={clsx({ 'S--invisible': !isInputText })}>
       <Input
         className="Composer-input"
         value={text}
+        minRows={minRows}
         rows={1}
         autoSize
         ref={inputRef}
@@ -253,12 +255,6 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
         onChange={handleTextChange}
         onPaste={onImageSend ? handlePaste : undefined}
       />
-      <IconButton
-        className="Composer-sendBtn"
-        icon="paper-plane"
-        onMouseDown={handleSendBtnClick}
-        aria-label="发送"
-      />
       {handlePaste && (
         <SendConfirm file={pastedImage!} onCancel={handleImageCancel} onSend={handleImageSend} />
       )}
@@ -288,7 +284,15 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
             {accessoryContent}
           </Popover>
         )}
-        <div className="Composer-inputWrap">{renderInput()}</div>
+        <div className="Composer-inputWrap">{renderInput(3)}</div>
+        <Action
+          className="Composer-sendBtn"
+          icon="paper-plane"
+          color="primary"
+          disabled={!text}
+          onMouseDown={handleSendBtnClick}
+          aria-label="发送"
+        />
       </div>
     );
   }
@@ -302,15 +306,24 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
             data-icon={inputTypeIcon}
             icon={inputTypeIcon}
             onClick={handleInputTypeChange}
-            aria-label={inputType === 'text' ? '切换到语音输入' : '切换到键盘输入'}
+            aria-label={isInputText ? '切换到语音输入' : '切换到键盘输入'}
           />
         )}
         <div className="Composer-inputWrap">
-          {renderInput()}
-          {inputType === 'voice' && <Recorder {...recorder} />}
+          {renderInput(1)}
+          {!isInputText && <Recorder {...recorder} />}
         </div>
-        {rightAction && <Action {...rightAction} />}
-        {hasToolbar && (
+        {text && (
+          <Action
+            className="Composer-sendBtn"
+            icon="paper-plane"
+            color="primary"
+            onMouseDown={handleSendBtnClick}
+            aria-label="发送"
+          />
+        )}
+        {!text && rightAction && <Action {...rightAction} />}
+        {!text && hasToolbar && (
           <Action
             className={clsx('Composer-toggleBtn', {
               active: isAccessoryOpen,

diff --git a/src/components/Composer/style.less b/src/components/Composer/style.less
@@ -14,11 +14,17 @@
     border-radius: 50%;
     font-size: 26px;
   }
-  .IconBtn,
-  .IconBtn:hover,
-  .IconBtn:active {
-    background: var(--white);
-    color: var(--brand-1);
+  .IconBtn:not(:disabled) {
+    &,
+    &:hover,
+    &:active {
+      background: var(--white);
+      color: var(--brand-1);
+    }
+  }
+  .Btn--primary:not(:disabled) {
+    background: var(--brand-1);
+    color: var(--white);
   }
 }
 
@@ -53,17 +59,6 @@
   }
 }
 
-.Composer-sendBtn {
-  position: absolute;
-  right: 7px;
-  bottom: 7px;
-  padding: 2px;
-  background: var(--brand-1);
-  color: var(--white);
-  font-size: 20px;
-  transition: 0.3s;
-}
-
 .Composer-toolbar {
   margin-right: 20px;
   padding: 8px 0;
@@ -102,9 +97,7 @@
       border-color: var(--brand-1);
     }
   }
-  .Composer-sendBtn {
-    right: 8px;
-    bottom: 8px;
-    font-size: 24px;
+  .Composer-actions {
+    padding: 4px 0;
   }
 }