fix: Tab key wraps automatically & styles adjustment

open-mmlab · May 14, 2024 · 3b22374 · 3b22374
1 parent 2b3ca11
commit 3b22374
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 21 deletions.
diff --git a/packages/lb-components/src/components/audioAnnotate/textInput/index.module.scss b/packages/lb-components/src/components/audioAnnotate/textInput/index.module.scss
@@ -23,6 +23,18 @@
   @include fontStyle;
   font-size: 14px;
 
+  .labelText{
+    display: flex;
+    overflow: hidden;
+    width: 60%;
+    align-items: center;
+
+    .titleText{
+      max-width: calc(100% - 20px);
+      overflow: hidden;
+    }
+  }
+
   .required::before {
     display: inline-block;
     margin-right: 4px;
@@ -35,6 +47,7 @@
   .extra {
     float: right;
     margin-right: 5px;
+    width: 40%;
   }
 }
 
@@ -182,6 +195,7 @@
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
+      overflow: hidden;
     }
     .text {
       color: #333;
@@ -200,7 +214,10 @@
 
 .attribute {
   height: 22px;
-  padding: 2px 8px;
+  padding: 0px 8px;
+  width: max-content;
+  max-width: 100%;
+  margin-left: auto;
 }
 
 .clearIcon {
@@ -209,13 +226,13 @@
   height: 14px;
   margin-left: 4px;
   vertical-align: text-top;
-  //background-image: url(~@/assets/tool_Icon/icon_clearSmall.svg);
+  background-image: url(~@/assets/tool_Icon/icon_clearSmall.svg);
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
 
   &:not(.disabled):hover {
-    //background-image: url(~@/assets/tool_Icon/icon_clearSmall_a.svg);
+    background-image: url(~@/assets/tool_Icon/icon_clearSmall_a.svg);
   }
 
   &.disabled {

diff --git a/packages/lb-components/src/components/audioAnnotate/textInput/index.tsx b/packages/lb-components/src/components/audioAnnotate/textInput/index.tsx
@@ -17,6 +17,7 @@ import AudioContext, { DEFAULT_CLIP_TEXT_CONFIG_ITEM, useAudioClipStore } from '
 import styles from './index.module.scss';
 import { IInputList } from '@/types/main';
 import { useTranslation } from 'react-i18next';
+import LongText from '@/components/longText';
 // import { AlgorithmButtonForText } from '../icons/algorithmButton';
 
 const EKeyCode = cKeyCode.default;
@@ -212,16 +213,22 @@ export const SingleTextInput = (props: any) => {
   return (
     <div className={styles.textField}>
       <div className={styles.label}>
-        <span className={classnames({ [styles.required]: config.required })}>{config.label}</span>
-        <ClearIcon
-          onClick={() => {
-            if (!disabled) {
-              updateTextWithKey('');
-            }
-          }}
-          title=''
-          disabled={disabled}
-        />
+        <div className={styles.labelText}>
+          <span
+            className={classnames({ [styles.titleText]: true, [styles.required]: config.required })}
+          >
+            <LongText text={config.label} openByText={true} isToolTips={true} />
+          </span>
+          <ClearIcon
+            onClick={() => {
+              if (!disabled) {
+                updateTextWithKey('');
+              }
+            }}
+            title=''
+            disabled={disabled}
+          />
+        </div>
 
         {/* {!algorithmDisabled && ( */}
         {/*  <AlgorithmButtonForText */}
@@ -305,7 +312,7 @@ const TextInput = (props: IProps) => {
 
   const switchToNextTextarea = (currentIndex: number) => {
     const configListLength = textConfigurable ? configList.length : 0;
-    const regionsLength = clipTextConfigurable ? regionsList.length : 0;
+    const regionsLength = clipTextConfigurable ? regionsList.length * clipTextList.length : 0;
     const allTextareaLength = configListLength + regionsLength;
     const nextIndex = (currentIndex + 1) % allTextareaLength;
     textareaFocus(nextIndex);
@@ -314,7 +321,9 @@ const TextInput = (props: IProps) => {
   const tabToFirstTextarea = (e: KeyboardEvent) => {
     if (e.keyCode === EKeyCode.Tab) {
       e.preventDefault();
-      if (configList.length > 0) {
+      const canChangeFocuByTab =
+        configList.length > 0 || (clipTextConfigurable && clipTextList.length > 0);
+      if (canChangeFocuByTab) {
         textareaFocus(0);
       }
     }
@@ -449,7 +458,7 @@ const TextInput = (props: IProps) => {
               maxLength,
             };
             // 处理按tab无法正常切换问题
-            const regionIndex = _configList.length + index;
+            const regionIndex = (textConfigurable ? _configList.length : 0) + index;
 
             const attributeColor = getAttributeColor(attribute, clipAttributeList);
 
@@ -461,7 +470,11 @@ const TextInput = (props: IProps) => {
               num: 1,
             });
             const errorText = required && text.length < 1 ? errorTips : undefined;
-
+            const attributeText =
+              getAttributeShowText(attribute, [
+                { value: '', key: t('NoAttribute') },
+                ...clipAttributeList,
+              ]) ?? '';
             return (
               <SingleTextInput
                 config={config}
@@ -491,10 +504,7 @@ const TextInput = (props: IProps) => {
                 extra={
                   clipAttributeConfigurable ? (
                     <div style={textStyle} className={styles.attribute}>
-                      {getAttributeShowText(attribute, [
-                        { value: '', key: t('NoAttribute') },
-                        ...clipAttributeList,
-                      ])}
+                      <LongText text={attributeText} openByText={true} isToolTips={true} />
                     </div>
                   ) : null
                 }