feat(component): search input support text wrap (#169)

Author: mortalYoung

src/components/search/input.tsx

@@ -27,6 +27,10 @@ export interface IBaseInputProps {
     onToolbarClick?: (addon) => void;
 }
 
+/**
+ * Mock an Input by textarea
+ * 'Cause we have to achieve text wrap and input cannot achieve it
+ */
 function Input(props: IBaseInputProps) {
     const {
         className,
@@ -38,11 +42,11 @@ function Input(props: IBaseInputProps) {
     } = props;
 
     const [focusStatus, setFocus] = React.useState(false);
-    const inputRef = React.useRef<HTMLInputElement>(null);
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
     const onToolbarClick = (e, item) => {
         // toolbar click can trigger input focus
-        inputRef.current?.focus();
+        textareaRef.current?.focus();
         props.onToolbarClick?.(item);
     };
 
@@ -67,18 +71,46 @@ function Input(props: IBaseInputProps) {
         setFocus(false);
     };
 
+    const handleInputChange = (e) => {
+        if (textareaRef.current) {
+            // base height
+            textareaRef.current.style.height = '24px';
+            const curretnScollerHeight = textareaRef.current.scrollHeight;
+            // count the lines
+            const lines = curretnScollerHeight / 24;
+            const maxLines = 5;
+            if (lines > maxLines) {
+                textareaRef.current.style.height = `${24 * maxLines}px`;
+            } else {
+                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+            }
+        }
+        onChange?.(e.target.value || '');
+    };
+
+    const handleInputKeyPress = (e) => {
+        // detect Enter press
+        if (e.keyCode === 13) {
+            onChange?.(e.target.value || '');
+            e.preventDefault();
+        }
+    };
+
     return (
         <div className={className}>
-            <input
-                ref={inputRef}
+            <textarea
+                ref={textareaRef}
+                spellCheck={false}
+                autoCorrect="off"
+                autoCapitalize="off"
                 className={classNames(getInfoClassName(info?.type || ''))}
                 value={value || ''}
                 placeholder={placeholder}
+                title={placeholder}
+                onKeyDown={handleInputKeyPress}
                 onFocus={handleInputFocus}
                 onBlur={handleInputBlur}
-                onChange={(e) => {
-                    onChange?.(e.target.value || '');
-                }}
+                onChange={handleInputChange}
             />
             {info && focusStatus && (
                 <div

src/components/search/style.scss

@@ -13,7 +13,7 @@
             box-sizing: border-box;
             color: inherit;
             cursor: pointer;
-            height: 100%;
+            height: calc(100% - 3px);
             transition: background 0.3s;
 
             &.codicon {
@@ -27,22 +27,36 @@
         }
     }
 
-    input {
+    textarea {
+        background: var(--input-background);
         border: 1px solid transparent;
         box-sizing: border-box;
+        color: var(--input-foreground);
+        font-family: inherit;
         font-size: inherit;
-        height: 23px;
-        padding: 3px;
-        padding-right: 4px;
-        text-indent: 4px;
+        height: 24px;
+        line-height: 18px;
+        outline: none;
+        padding: 3px 62px 3px 4px;
+        resize: none;
         width: 100%;
 
-        &:focus,
-        &:active {
-            outline: none;
+        &:focus {
+            border-color: var(--focusBorder);
+        }
+
+        // TODO: better to mock a scoll bar
+        // invisible scroll bar
+        &::-webkit-scrollbar {
+            opacity: 0;
         }
     }
 
+    .scrollbar-invisible {
+        position: absolute;
+        right: 0;
+    }
+
     &__toolbar {
         height: 100%;
         position: absolute;