From 4065f1db14103b7d0bc35fa2ac7d9a79ba985d94 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Wed, 18 Jun 2025 10:12:58 +0800
Subject: [PATCH] Mobile text viewer support wrap line (#7944)

* mobile txt support line wrap

* optimize function name
---
 .../src/components/file-view/file-toolbar.js  | 30 +++++++++++++------
 .../src/components/file-view/file-view.js     |  2 +-
 .../shared-file-view/shared-file-view.js      |  2 +-
 frontend/src/shared-file-view-text.js         |  4 +--
 frontend/src/view-file-text.js                |  4 +--
 5 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index 687aba7a6a..c755974b84 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -84,7 +84,13 @@ class FileToolbar extends React.Component {
     });
   };
 
-  toggle = () => {
+  toggle = (event) => {
+    if (this.state.dropdownOpen) {
+      const el = document.getElementById('mobile-txt-line-wrap-menu');
+      if (el && el.contains(event.target)) {
+        return;
+      }
+    }
     this.setState({
       dropdownOpen: !this.state.dropdownOpen
     });
@@ -126,6 +132,7 @@ class FileToolbar extends React.Component {
     }
 
     const shortcutMain = Utils.isMac() ? '⌘ + ' : 'Ctrl + ';
+    const isTxt = fileExt && fileExt.toLowerCase() === 'txt';
 
     return (
       <Fragment>
@@ -222,11 +229,6 @@ class FileToolbar extends React.Component {
               <Icon symbol="more-level" />
             </DropdownToggle>
             <DropdownMenu>
-              {/* {(
-                <DropdownItem onClick={this.props.toggleCommentPanel}>
-                  {gettext('Comment')}
-                </DropdownItem>
-              )} */}
               {filePerm == 'rw' && (
                 <a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="dropdown-item">
                   {gettext('History')}
@@ -240,16 +242,16 @@ class FileToolbar extends React.Component {
                   {gettext('Open via client')}
                 </a>
               )}
-              {fileExt && fileExt.toLowerCase() === 'txt' && (
+              {isTxt &&
                 <DropdownItem id='txt-line-wrap-menu' className='dropdown-item'>
                   <Switch
                     checked={this.props.lineWrapping}
                     placeholder={gettext('Line wrapping')}
                     className="txt-line-wrap-menu w-100"
-                    onChange={() => this.props.updatelineWrapping(!this.props.lineWrapping)}
+                    onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
                   />
                 </DropdownItem>
-              )}
+              }
             </DropdownMenu>
           </Dropdown>
         </div>
@@ -307,6 +309,16 @@ class FileToolbar extends React.Component {
               </DropdownItem>
             )}
             <DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
+            {isTxt &&
+              <DropdownItem id='mobile-txt-line-wrap-menu' className='dropdown-item'>
+                <Switch
+                  checked={this.props.lineWrapping}
+                  placeholder={gettext('Line wrapping')}
+                  className="txt-line-wrap-menu w-100"
+                  onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
+                />
+              </DropdownItem>
+            }
           </DropdownMenu>
         </Dropdown>
 
diff --git a/frontend/src/components/file-view/file-view.js b/frontend/src/components/file-view/file-view.js
index 297f7ddbca..05d01ecedc 100644
--- a/frontend/src/components/file-view/file-view.js
+++ b/frontend/src/components/file-view/file-view.js
@@ -157,7 +157,7 @@ class FileView extends React.Component {
                   setImageScale={this.props.setImageScale}
                   rotateImage={this.props.rotateImage}
                   lineWrapping={this.props.lineWrapping}
-                  updatelineWrapping={this.props.updatelineWrapping}
+                  updateLineWrapping={this.props.updateLineWrapping}
                 />
               }
             </div>
diff --git a/frontend/src/components/shared-file-view/shared-file-view.js b/frontend/src/components/shared-file-view/shared-file-view.js
index 0fe07f8583..9c75c1dcbb 100644
--- a/frontend/src/components/shared-file-view/shared-file-view.js
+++ b/frontend/src/components/shared-file-view/shared-file-view.js
@@ -171,7 +171,7 @@ class SharedFileView extends React.Component {
                         checked={this.props.lineWrapping}
                         placeholder={gettext('Line wrapping')}
                         className="txt-line-wrap-menu w-100"
-                        onChange={() => this.props.updatelineWrapping(!this.props.lineWrapping)}
+                        onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
                       />
                     </DropdownItem>
                   )}
diff --git a/frontend/src/shared-file-view-text.js b/frontend/src/shared-file-view-text.js
index 3e93c7e5f0..5ce1224946 100644
--- a/frontend/src/shared-file-view-text.js
+++ b/frontend/src/shared-file-view-text.js
@@ -22,14 +22,14 @@ const FileContent = ({ lineWrapping }) => {
 const SharedFileViewText = () => {
   let [lineWrapping, setLineWrapping] = useState(localStorage.getItem('sf_txt_file_line_wrapping') === 'true' || false);
 
-  const updatelineWrapping = (newLineWrapping) => {
+  const updateLineWrapping = (newLineWrapping) => {
     setLineWrapping(newLineWrapping);
   };
 
   return (
     <SharedFileView
       content={<FileContent lineWrapping={lineWrapping}/>}
-      updatelineWrapping={updatelineWrapping}
+      updateLineWrapping={updateLineWrapping}
       lineWrapping={lineWrapping}
       canWrapLine={true}
     />
diff --git a/frontend/src/view-file-text.js b/frontend/src/view-file-text.js
index 4e91ad7eb6..d65f79a16d 100644
--- a/frontend/src/view-file-text.js
+++ b/frontend/src/view-file-text.js
@@ -63,7 +63,7 @@ class ViewFileText extends React.Component {
     });
   };
 
-  updatelineWrapping = (value) => {
+  updateLineWrapping = (value) => {
     this.setState({
       lineWrapping: value,
     });
@@ -157,7 +157,7 @@ class ViewFileText extends React.Component {
         participants={this.state.participants}
         onParticipantsChange={this.onParticipantsChange}
         lineWrapping={this.state.lineWrapping}
-        updatelineWrapping={this.updatelineWrapping}
+        updateLineWrapping={this.updateLineWrapping}
       />
     );
   }