Mobile text viewer support wrap line (#7944)

* mobile txt support line wrap

* optimize function name

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>
 

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>

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>
                   )}

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}
     />

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}
       />
     );
   }