Fix: adjust jsonviewer search box popup positioning (#2738)

* fix: adjust search box popup positioning

* fix: optimize display styles

---------

Co-authored-by: 田丰 <[email protected]>

content/plus/jsonviewer/index-en-US.md

@@ -49,7 +49,7 @@ class SimpleJsonViewer extends React.Component {
     render() {
         return (
             <div style={{ marginBottom: 16 }}>
-                <JsonViewer height={100} width={400} value={data} />
+                <JsonViewer height={100} width={700} value={data} />
             </div>
         );
     }
@@ -74,13 +74,13 @@ class SimpleJsonViewerWithLineHeight extends React.Component {
         return (
             <div>
                 <div style={{ marginBottom: 20 }}>
-                    <JsonViewer height={100} width={320} value={data} options={{ lineHeight: 20 }} />
+                    <JsonViewer height={100} width={700} value={data} options={{ lineHeight: 20 }} />
                 </div>
                 <div style={{ marginBottom: 20 }}>
-                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 24 }} />
+                    <JsonViewer height={120} width={700} value={data} options={{ lineHeight: 24 }} />
                 </div>
                 <div style={{ marginBottom: 20 }}>
-                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 26 }} />
+                    <JsonViewer height={120} width={700} value={data} options={{ lineHeight: 26 }} />
                 </div>
             </div>
         );
@@ -106,7 +106,7 @@ class SimpleJsonViewerWithAutoWrap extends React.Component {
     render() {
         return (
             <div style={{ marginBottom: 16 }}>
-                <JsonViewer height={120} width={800} value={data} options={{ autoWrap: true }} />
+                <JsonViewer height={120} width={700} value={data} options={{ autoWrap: true }} />
             </div>
         );
     }
@@ -139,7 +139,7 @@ function FormatJsonComponent() {
                 <JsonViewer
                     ref={jsonviewerRef}
                     height={100}
-                    width={400}
+                    width={700}
                     value={data}
                     options={{ formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' } }}
                 />

content/plus/jsonviewer/index.md

@@ -45,7 +45,7 @@ class SimpleJsonViewer extends React.Component {
     render() {
         return (
             <div style={{ marginBottom: 16 }}>
-                <JsonViewer height={100} width={400} value={data} />
+                <JsonViewer height={100} width={700} value={data} />
             </div>
         );
     }
@@ -70,13 +70,13 @@ class SimpleJsonViewerWithLineHeight extends React.Component {
         return (
             <div>
                 <div style={{ marginBottom: 12, overflow: 'hidden' }}>
-                    <JsonViewer height={100} width={320} value={data} options={{ lineHeight: 20 }} />
+                    <JsonViewer height={100} width={700} value={data} options={{ lineHeight: 20 }} />
                 </div>
                 <div style={{ marginBottom: 12, overflow: 'hidden' }}>
-                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 24 }} />
+                    <JsonViewer height={120} width={700} value={data} options={{ lineHeight: 24 }} />
                 </div>
                 <div style={{ marginBottom: 12, overflow: 'hidden' }}>
-                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 26 }} />
+                    <JsonViewer height={120} width={700} value={data} options={{ lineHeight: 26 }} />
                 </div>
             </div>
         );
@@ -102,7 +102,7 @@ class SimpleJsonViewerWithAutoWrap extends React.Component {
     render() {
         return (
             <div style={{ marginBottom: 16 }}>
-                <JsonViewer height={120} width={800} value={data} options={{ autoWrap: true }} />
+                <JsonViewer height={120} width={700} value={data} options={{ autoWrap: true }} />
             </div>
         );
     }
@@ -135,7 +135,7 @@ function FormatJsonComponent() {
                 <JsonViewer
                     ref={jsonviewerRef}
                     height={100}
-                    width={400}
+                    width={700}
                     value={data}
                     options={{ formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' } }}
                 />

packages/semi-foundation/jsonViewer/jsonViewer.scss

@@ -111,7 +111,7 @@ $module: #{$prefix}-json-viewer;
         align-items: flex-start;
         gap: 8px;
         &-input {
-            width: 200px;
+            width: 200px !important;
             flex-shrink: 0;
         }
         .#{$prefix}-button-group {

packages/semi-ui/jsonViewer/index.tsx

@@ -20,7 +20,7 @@ import {
     IconWholeWord,
 } from '@douyinfe/semi-icons';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import {isEqual} from "lodash";
+import { isEqual } from "lodash";
 const prefixCls = cssClasses.PREFIX;
 
 export type { JsonViewerOptions };
@@ -150,7 +150,7 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
 
     renderSearchBox() {
         return (
-            <div className={`${prefixCls}-search-bar-container`}>
+            <div className={`${prefixCls}-search-bar-container`} style={{ position: 'absolute', top: 20, right: 20 }}>
                 {this.renderSearchBar()}
                 {this.renderReplaceBar()}
             </div>
@@ -294,7 +294,7 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
                                 isDragging = true;
                             }}
                         >
-                            <div style={{ position: 'absolute', top: 20, left: width - 52 }}>
+                            <div style={{ position: 'absolute', top: 0, left: width }}>
                                 {!this.state.showSearchBar ? (
                                     <Button
                                         className={`${prefixCls}-search-bar-trigger`}
@@ -308,6 +308,7 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
                                             this.foundation.showSearchBar();
                                         }}
                                         icon={<IconSearch />}
+                                        style={{ position: 'absolute', top: 20, right: 20 }}
                                     />
                                 ) : (
                                     this.renderSearchBox()