Update dependency 3 (#5344)

* update react react-dom prop-types

* update seafile-editor version

* install deep-copy denpendency

* update router version

* repair focus bug

* optimize code

* optimize code

frontend/package.json

@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reach/router": "1.2.0",
+    "@reach/router": "1.3.4",
     "@seafile/react-image-lightbox": "0.0.1",
     "@seafile/resumablejs": "1.1.16",
     "@seafile/seafile-calendar": "0.0.12",
-    "@seafile/seafile-editor": "0.3.111",
+    "@seafile/seafile-editor": "0.3.122",
+    "@seafile/slate-react": "0.54.13",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.0.8",
+    "crypto-js": "4.1.1",
+    "deep-copy": "1.4.2",
     "glamor": "^2.20.40",
     "i18next": "22.4.6",
     "i18next-browser-languagedetector": "7.0.1",
@@ -18,20 +21,21 @@
     "moment": "^2.22.2",
     "object-assign": "4.1.1",
     "prismjs": "1.23.0",
-    "prop-types": "^15.6.2",
+    "prop-types": "15.8.1",
     "qrcode.react": "^1.0.1",
-    "react": "16.14.0",
+    "react": "18.2.0",
     "react-app-polyfill": "^2.0.0",
     "react-chartjs-2": "^2.8.0",
     "react-codemirror2": "7.2.1",
     "react-cookies": "^0.1.0",
-    "react-dom": "16.14.0",
+    "react-dom": "18.2.0",
     "react-i18next": "12.1.1",
     "react-mentions": "4.4.7",
     "react-qr-code": "^1.0.5",
     "react-responsive": "9.0.2",
     "react-select": "5.7.0",
-    "reactstrap": "^6.4.0",
+    "react-transition-group": "4.4.5",
+    "reactstrap": "8.9.0",
     "seafile-js": "0.2.190",
     "socket.io-client": "^2.2.0",
     "unified": "^7.0.0",

frontend/src/app.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Router, navigate } from '@reach/router';
 import MediaQuery from 'react-responsive';
 import { Modal } from 'reactstrap';
@@ -290,7 +290,5 @@ class App extends Component {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<App />);

frontend/src/components/cur-dir-path/dir-tool.js

@@ -94,7 +94,7 @@ class DirTool extends React.Component {
 
               {this.state.isRepoTagDialogShow && (
                 <ModalPortal>
-                  <Modal isOpen={true}>
+                  <Modal isOpen={true} autoFocus={false}>
                     {this.state.isListRepoTagShow && (
                       <ListTagDialog
                         repoID={repoID}

frontend/src/components/dialog/create-department-repo-dialog.js

@@ -16,7 +16,6 @@ class CreateDepartmentRepoDialog extends React.Component {
       errMessage: '',
       isSubmitBtnActive: false,
     };
-    this.newInput = React.createRef();
   }
 
   handleChange = (e) => {
@@ -50,10 +49,6 @@ class CreateDepartmentRepoDialog extends React.Component {
     this.props.onCreateToggle();
   }
 
-  componentDidMount = () => {
-    this.newInput.focus();
-  }
-
   validateRepoName = () => {
     let errMessage = '';
     let repoName = this.state.repoName.trim();
@@ -78,7 +73,7 @@ class CreateDepartmentRepoDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('New Department Library')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -87,10 +82,10 @@ class CreateDepartmentRepoDialog extends React.Component {
               <Input
                 id="repo-name"
                 onKeyPress={this.handleKeyPress}
-                innerRef={input => {this.newInput = input;}}
                 value={this.state.repoName}
                 onChange={this.handleChange}
                 maxLength={maxFileName}
+                autoFocus={true}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/create-file-dialog.js

@@ -32,8 +32,6 @@ class CreateFile extends React.Component {
     } else {
       this.setState({parentPath: parentPath + '/'}); // sidePanel
     }
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0,0);
   }
 
   handleChange = (e) => {
@@ -132,9 +130,15 @@ class CreateFile extends React.Component {
     return isDuplicated;
   }
 
+  onAfterModelOpened = () => {
+    if (!this.newInput.current) return;
+    this.newInput.current.focus();
+    this.newInput.current.setSelectionRange(0,0);
+  }
+
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
         <ModalHeader toggle={this.toggle}>{gettext('New File')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -143,7 +147,7 @@ class CreateFile extends React.Component {
               <Input
                 id="fileName"
                 onKeyPress={this.handleKeyPress}
-                innerRef={input => {this.newInput = input;}}
+                innerRef={this.newInput}
                 value={this.state.childName}
                 onChange={this.handleChange}
               />

frontend/src/components/dialog/create-folder-dialog.js

@@ -21,7 +21,6 @@ class CreateForder extends React.Component {
       errMessage: '',
       isSubmitBtnActive: false,
     };
-    this.newInput = React.createRef();
   }
 
   componentDidMount() {
@@ -31,8 +30,6 @@ class CreateForder extends React.Component {
     } else {
       this.setState({parentPath: parentPath + '/'}); // sidePanel
     }
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0,0);
   }
 
   handleChange = (e) => {
@@ -81,7 +78,7 @@ class CreateForder extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('New Folder')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -90,9 +87,9 @@ class CreateForder extends React.Component {
               <Input
                 id="folderName"
                 value={this.state.childName}
-                innerRef={input => {this.newInput = input;}}
                 onKeyPress={this.handleKeyPress}
                 onChange={this.handleChange}
+                autoFocus={true}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/create-group-dialog.js

@@ -14,12 +14,6 @@ class CreateGroupDialog extends React.Component {
       errorMsg: '',
       isSubmitBtnActive: false,
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   handleGroupChange = (event) => {
@@ -69,17 +63,17 @@ class CreateGroupDialog extends React.Component {
 
   render() {
     return(
-      <Modal isOpen={this.props.showAddGroupModal} toggle={this.props.toggleAddGroupModal}>
+      <Modal isOpen={this.props.showAddGroupModal} toggle={this.props.toggleAddGroupModal} autoFocus={false}>
         <ModalHeader toggle={this.props.toggleAddGroupModal}>{gettext('New Group')}</ModalHeader>
         <ModalBody>
           <label htmlFor="groupName">{gettext('Name')}</label>
           <Input
-            innerRef={input => {this.newInput = input;}}
             type="text"
             id="groupName"
             value={this.state.groupName}
             onChange={this.handleGroupChange}
             onKeyDown={this.handleKeyDown}
+            autoFocus={true}
           />
           <span className="error">{this.state.errorMsg}</span>
         </ModalBody>

frontend/src/components/dialog/create-repo-dialog.js

@@ -25,7 +25,6 @@ class CreateRepoDialog extends React.Component {
       library_template: libraryTemplates.length ? libraryTemplates[0] : '',
       isSubmitBtnActive: false,
     };
-    this.newInput = React.createRef();
   }
 
   handleRepoNameChange = (e) => {
@@ -69,10 +68,6 @@ class CreateRepoDialog extends React.Component {
     this.props.onCreateToggle();
   }
 
-  componentDidMount() {
-    this.newInput.focus();
-  }
-
   validateInputParams() {
     let errMessage = '';
     let repoName = this.state.repoName.trim();
@@ -177,7 +172,7 @@ class CreateRepoDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -186,9 +181,9 @@ class CreateRepoDialog extends React.Component {
               <Input
                 id="repoName"
                 onKeyPress={this.handleKeyPress}
-                innerRef={input => {this.newInput = input;}}
                 value={this.state.repoName}
                 onChange={this.handleRepoNameChange}
+                autoFocus={true}
               />
             </FormGroup>
 

frontend/src/components/dialog/create-tag-dialog.js

@@ -22,7 +22,6 @@ class CreateTagDialog extends React.Component {
       errorMsg: '',
       colorList: ['#FBD44A', '#EAA775', '#F4667C', '#DC82D2', '#9860E5', '#9F8CF1', '#59CB74', '#ADDF84', '#89D2EA', '#4ECCCB', '#46A1FD', '#C2C2C2'],
     };
-    this.newInput = React.createRef();
   }
 
   inputNewName = (e) => {
@@ -70,8 +69,6 @@ class CreateTagDialog extends React.Component {
     this.setState({
       tagColor: this.state.colorList[0]
     });
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   render() {
@@ -87,7 +84,7 @@ class CreateTagDialog extends React.Component {
           <div role="form" className="tag-create">
             <div className="form-group">
               <label className="form-label">{gettext('Name')}</label>
-              <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} value={this.state.tagName} onChange={this.inputNewName}/>
+              <Input onKeyPress={this.handleKeyPress} autoFocus={true} value={this.state.tagName} onChange={this.inputNewName}/>
               <div className="mt-2"><span className="error">{this.state.errorMsg}</span></div>
             </div>
             <div className="form-group">

frontend/src/components/dialog/edit-filetag-dialog.js

@@ -211,7 +211,7 @@ class EditFileTagDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggleCancel}>
+      <Modal isOpen={true} toggle={this.props.toggleCancel} autoFocus={false}>
         {this.state.isListRepoTagShow &&
           <TagList
             repoID={this.props.repoID}

frontend/src/components/dialog/import-members-dialog.js

@@ -11,10 +11,10 @@ const propTypes = {
 class ImportMembersDialog extends React.Component {
   constructor(props) {
     super(props);
-    this.fileInputRef = React.createRef();
     this.state = {
       errorMsg: ''
     };
+    this.fileInputRef = React.createRef();
   }
 
   toggle = () => {

frontend/src/components/dialog/new-wiki-dialog.js

@@ -18,12 +18,6 @@ class NewWikiDialog extends React.Component {
       repoID: '',
       isSubmitBtnActive: false,
     };
-    this.newName = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newName.focus();
-    this.newName.setSelectionRange(0, -1);
   }
 
   inputNewName = (e) => {
@@ -56,11 +50,11 @@ class NewWikiDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('New Wiki')}</ModalHeader>
         <ModalBody>
           <label className="form-label">{gettext('Name')}</label>
-          <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newName = input;}} value={this.state.name} onChange={this.inputNewName}/>
+          <Input onKeyPress={this.handleKeyPress} autoFocus={true} value={this.state.name} onChange={this.inputNewName}/>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>

frontend/src/components/dialog/org-add-department-dialog.js

@@ -19,12 +19,6 @@ class AddDepartDialog extends React.Component {
       departName: '',
       errMessage: '',
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   handleSubmit = () => {
@@ -71,7 +65,7 @@ class AddDepartDialog extends React.Component {
   render() {
     let header = this.props.parentGroupID ? gettext('New Sub-department') : gettext('New Department');
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
         <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
         <ModalBody>
           <Form>
@@ -82,7 +76,7 @@ class AddDepartDialog extends React.Component {
                 onKeyPress={this.handleKeyPress}
                 value={this.state.departName}
                 onChange={this.handleChange}
-                innerRef={input => {this.newInput = input;}}
+                autoFocus={true}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/org-add-repo-dialog.js

@@ -19,12 +19,6 @@ class AddRepoDialog extends React.Component {
       repoName: '',
       errMessage: '',
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   handleSubmit = () => {
@@ -66,7 +60,7 @@ class AddRepoDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
         <ModalHeader toggle={this.props.toggle}>{gettext('New Library')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -77,7 +71,7 @@ class AddRepoDialog extends React.Component {
                 onKeyPress={this.handleKeyPress}
                 value={this.state.repoName}
                 onChange={this.handleChange}
-                innerRef={input => {this.newInput = input;}}
+                autoFocus={true}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/org-import-users-dialog.js

@@ -11,10 +11,10 @@ const propTypes = {
 class ImportOrgUsersDialog extends React.Component {
   constructor(props) {
     super(props);
-    this.fileInputRef = React.createRef();
     this.state = {
       errorMsg: ''
     };
+    this.fileInputRef = React.createRef();
   }
 
   toggle = () => {

frontend/src/components/dialog/org-rename-department-dialog.js

@@ -31,11 +31,6 @@ class RenameDepartmentDialog extends React.Component {
     this.newInput = React.createRef();
   }
 
-  componentDidMount() {
-    this.newInput.select();
-    this.newInput.focus();
-  }
-
   handleSubmit = () => {
     let isValid = this.validateName();
     const { orgID, groupID } = this.props;
@@ -75,10 +70,16 @@ class RenameDepartmentDialog extends React.Component {
     }
   }
 
+  onAfterModelOpened = () => {
+    if (!this.newInput.current) return;
+    this.newInput.current.focus();
+    this.newInput.current.select();
+  }
+
   render() {
     let header = gettext('Rename Department');
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} onOpened={this.onAfterModelOpened}>
         <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
         <ModalBody>
           <Form>
@@ -89,7 +90,7 @@ class RenameDepartmentDialog extends React.Component {
                 onKeyPress={this.handleKeyPress}
                 value={this.state.departmentName}
                 onChange={this.handleChange}
-                innerRef={input => {this.newInput = input;}}
+                innerRef={this.newInput}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/org-set-group-quota-dialog.js

@@ -20,12 +20,6 @@ class SetGroupQuotaDialog extends React.Component {
       quota: '',
       errMessage: '',
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   setGroupQuota = () => {
@@ -61,7 +55,7 @@ class SetGroupQuotaDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Set Quota')}</ModalHeader>
         <ModalBody>
           <InputGroup>
@@ -69,7 +63,7 @@ class SetGroupQuotaDialog extends React.Component {
               onKeyPress={this.handleKeyPress}
               value={this.state.quota}
               onChange={this.handleChange}
-              innerRef={input => {this.newInput = input;}}
+              autoFocus={true}
             />
             <InputGroupAddon addonType="append">{'MB'}</InputGroupAddon>
           </InputGroup>

frontend/src/components/dialog/rename-dialog.js

@@ -12,6 +12,7 @@ const propTypes = {
 };
 
 class Rename extends React.Component {
+
   constructor(props) {
     super(props);
     this.state = {
@@ -27,16 +28,8 @@ class Rename extends React.Component {
   }
 
   componentDidMount() {
-    let currentNode = this.props.currentNode;
+    const { currentNode } = this.props;
     this.changeState(currentNode);
-    this.newInput.focus();
-    let type = currentNode.object.type;
-    if (type === 'file') {
-      var endIndex = currentNode.object.name.lastIndexOf('.md');
-      this.newInput.setSelectionRange(0, endIndex, 'forward');
-    } else {
-      this.newInput.setSelectionRange(0, -1);
-    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -108,14 +101,27 @@ class Rename extends React.Component {
     return isDuplicated;
   }
 
+  onAfterModelOpened = () => {
+    if (!this.newInput.current) return;
+    const { currentNode } = this.props;
+    let type = currentNode.object.type;
+    this.newInput.current.focus();
+    if (type === 'file') {
+      var endIndex = currentNode.object.name.lastIndexOf('.md');
+      this.newInput.current.setSelectionRange(0, endIndex, 'forward');
+    } else {
+      this.newInput.current.setSelectionRange(0, -1);
+    }
+  }
+
   render() {
     let type = this.props.currentNode.object.type;
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
         <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</ModalHeader>
         <ModalBody>
           <p>{type === 'file' ? gettext('New file name'): gettext('New folder name')}</p>
-          <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.handleChange} />
+          <Input onKeyPress={this.handleKeyPress} innerRef={this.newInput} placeholder="newName" value={this.state.newName} onChange={this.handleChange} />
           {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>

frontend/src/components/dialog/rename-dirent.js

@@ -28,16 +28,8 @@ class Rename extends React.Component {
   }
 
   componentDidMount() {
-    let {dirent} = this.props;
+    let { dirent } = this.props;
     this.changeState(dirent);
-    this.newInput.focus();
-    let type = dirent.type;
-    if (type === 'file') {
-      var endIndex = dirent.name.lastIndexOf('.md');
-      this.newInput.setSelectionRange(0, endIndex, 'forward');
-    } else {
-      this.newInput.setSelectionRange(0, -1);
-    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -110,14 +102,28 @@ class Rename extends React.Component {
     return isDuplicated;
   }
 
+  onAfterModelOpened = () => {
+    if (!this.newInput.current) return;
+    this.newInput.current.focus();
+
+    let { dirent } = this.props;
+    let type = dirent.type;
+    if (type === 'file') {
+      var endIndex = dirent.name.lastIndexOf('.md');
+      this.newInput.current.setSelectionRange(0, endIndex, 'forward');
+    } else {
+      this.newInput.current.setSelectionRange(0, -1);
+    }
+  }
+
   render() {
     let type = this.props.dirent.type;
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
         <ModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</ModalHeader>
         <ModalBody>
           <p>{type === 'file' ? gettext('New file name'): gettext('New folder name')}</p>
-          <Input onKeyPress={this.handleKeyPress} innerRef={input => {this.newInput = input;}} value={this.state.newName} onChange={this.handleChange} />
+          <Input onKeyPress={this.handleKeyPress} innerRef={this.newInput} value={this.state.newName} onChange={this.handleChange} />
           {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>

frontend/src/components/dialog/search-file-dialog.js

@@ -23,11 +23,6 @@ class SearchFileDialog extends React.Component {
       errMessage: '',
       fileList: null
     };
-    this.inputRef = React.createRef();
-  }
-
-  componentDidMount() {
-    this.inputRef.current.focus();
   }
 
   searchFile = () => {
@@ -78,11 +73,11 @@ class SearchFileDialog extends React.Component {
   render() {
     const { q, errMessage, fileList, isSubmitDisabled, isSubmitting } = this.state;
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('Search')}</ModalHeader>
         <ModalBody style={{height: '250px'}} className="o-auto">
           <div className="d-flex">
-            <input className="form-control mr-2" type="text" placeholder={gettext('Search files in this library')} value={q} onChange={this.handleInputChange} onKeyDown={this.handleKeyDown} ref={this.inputRef} />
+            <input className="form-control mr-2" type="text" placeholder={gettext('Search files in this library')} value={q} onChange={this.handleInputChange} onKeyDown={this.handleKeyDown} autoFocus={true} />
             <button type="submit" className={`btn btn-primary flex-shrink-0 ${isSubmitting ? 'btn-loading' : ''}`} onClick={this.searchFile} disabled={isSubmitDisabled}>{gettext('Search')}</button>
           </div>
           {errMessage && <Alert color="danger" className="mt-2">{errMessage}</Alert>}

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js

@@ -19,12 +19,6 @@ class AddDepartDialog extends React.Component {
       departName: '',
       errMessage: '',
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   handleSubmit = () => {
@@ -71,7 +65,7 @@ class AddDepartDialog extends React.Component {
   render() {
     let header = this.props.parentGroupID ? gettext('New Sub-department') : gettext('New Department');
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
         <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
         <ModalBody>
           <Form>
@@ -82,7 +76,7 @@ class AddDepartDialog extends React.Component {
                 onKeyPress={this.handleKeyPress}
                 value={this.state.departName}
                 onChange={this.handleChange}
-                innerRef={input => {this.newInput = input;}}
+                autoFocus={true}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js

@@ -19,12 +19,6 @@ class AddRepoDialog extends React.Component {
       repoName: '',
       errMessage: '',
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   handleSubmit = () => {
@@ -66,7 +60,7 @@ class AddRepoDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
         <ModalHeader toggle={this.props.toggle}>{gettext('New Library')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -77,7 +71,7 @@ class AddRepoDialog extends React.Component {
                 onKeyPress={this.handleKeyPress}
                 value={this.state.repoName}
                 onChange={this.handleChange}
-                innerRef={input => {this.newInput = input;}}
+                autoFocus={true}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js

@@ -20,7 +20,6 @@ class SysAdminCreateGroupDialog extends React.Component {
       errMessage: '',
       isSubmitBtnActive: false
     };
-    this.newInput = React.createRef();
   }
 
   handleRepoNameChange = (e) => {
@@ -56,13 +55,9 @@ class SysAdminCreateGroupDialog extends React.Component {
     this.props.toggleDialog();
   }
 
-  componentDidMount() {
-    this.newInput.focus();
-  }
-
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('New Group')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -71,9 +66,9 @@ class SysAdminCreateGroupDialog extends React.Component {
               <Input
                 id="groupName"
                 onKeyPress={this.handleKeyPress}
-                innerRef={input => {this.newInput = input;}}
                 value={this.state.groupName}
                 onChange={this.handleRepoNameChange}
+                autoFocus={true}
               />
               <Label className="mt-2">
                 {gettext('Owner')}

frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-repo-dialog.js

@@ -19,7 +19,6 @@ class SysAdminCreateRepoDialog extends React.Component {
       errMessage: '',
       isSubmitBtnActive: false
     };
-    this.newInput = React.createRef();
   }
 
   handleRepoNameChange = (e) => {
@@ -54,13 +53,9 @@ class SysAdminCreateRepoDialog extends React.Component {
     this.props.toggleDialog();
   }
 
-  componentDidMount() {
-    this.newInput.focus();
-  }
-
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle}>
+      <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
         <ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
         <ModalBody>
           <Form>
@@ -69,9 +64,9 @@ class SysAdminCreateRepoDialog extends React.Component {
               <Input
                 id="repoName"
                 onKeyPress={this.handleKeyPress}
-                innerRef={input => {this.newInput = input;}}
                 value={this.state.repoName}
                 onChange={this.handleRepoNameChange}
+                autoFocus={true}
               />
             </FormGroup>
             <FormGroup>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-import-user-dialog.js

@@ -12,10 +12,10 @@ const propTypes = {
 class SysAdminImportUserDialog extends React.Component {
   constructor(props) {
     super(props);
-    this.fileInputRef = React.createRef();
     this.state = {
       errorMsg: ''
     };
+    this.fileInputRef = React.createRef();
   }
 
   toggle = () => {

frontend/src/components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog.js

@@ -14,11 +14,6 @@ class LogsExportExcelDialog extends React.Component {
       endDateStr: '',
       errMsg: '',
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
   }
 
   downloadExcel = () => {
@@ -79,7 +74,7 @@ class LogsExportExcelDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Choose date')}</ModalHeader>
         <ModalBody>
           <FormGroup>
@@ -88,7 +83,7 @@ class LogsExportExcelDialog extends React.Component {
               value={this.state.startDateStr}
               onChange={this.handleStartChange}
               placeholder='yyyy-mm-dd'
-              innerRef={input => {this.newInput = input;}}
+              autoFocus={true}
             />
           </FormGroup>
           <FormGroup>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-rename-department-dialog.js

@@ -27,11 +27,6 @@ class RenameDepartmentDialog extends React.Component {
     this.newInput = React.createRef();
   }
 
-  componentDidMount() {
-    this.newInput.select();
-    this.newInput.focus();
-  }
-
   handleSubmit = () => {
     let isValid = this.validateName();
     if (isValid) {
@@ -70,10 +65,16 @@ class RenameDepartmentDialog extends React.Component {
     }
   }
 
+  onAfterModelOpened = () => {
+    if (!this.newInput.current) return;
+    this.newInput.current.focus();
+    this.newInput.current.select();
+  }
+
   render() {
     let header = gettext('Rename Department');
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} onOpened={this.onAfterModelOpened}>
         <ModalHeader toggle={this.props.toggle}>{header}</ModalHeader>
         <ModalBody>
           <Form>
@@ -84,7 +85,7 @@ class RenameDepartmentDialog extends React.Component {
                 onKeyPress={this.handleKeyPress}
                 value={this.state.departmentName}
                 onChange={this.handleChange}
-                innerRef={input => {this.newInput = input;}}
+                innerRef={this.newInput}
               />
             </FormGroup>
           </Form>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-set-group-quota-dialog.js

@@ -20,12 +20,6 @@ class SetGroupQuotaDialog extends React.Component {
       quota: '',
       errMessage: '',
     };
-    this.newInput = React.createRef();
-  }
-
-  componentDidMount() {
-    this.newInput.focus();
-    this.newInput.setSelectionRange(0, 0);
   }
 
   setGroupQuota = () => {
@@ -61,7 +55,7 @@ class SetGroupQuotaDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggle}>
+      <Modal isOpen={true} toggle={this.props.toggle} autoFocus={false}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Set Quota')}</ModalHeader>
         <ModalBody>
           <InputGroup>
@@ -69,7 +63,7 @@ class SetGroupQuotaDialog extends React.Component {
               onKeyPress={this.handleKeyPress}
               value={this.state.quota}
               onChange={this.handleChange}
-              innerRef={input => {this.newInput = input;}}
+              autoFocus={true}
             />
             <InputGroupAddon addonType="append">{'MB'}</InputGroupAddon>
           </InputGroup>

frontend/src/components/toast/toaster.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ToastManager from './toastManager';
 
 const isBrowser =
@@ -17,13 +17,13 @@ export default class Toaster {
     container.setAttribute('data-evergreen-toaster-container', '');
     document.body.appendChild(container);
 
-    ReactDOM.render(
+    const root = createRoot(container);
+    root.render(
       <ToastManager
         bindNotify={this._bindNotify}
         bindGetToasts={this._bindGetToasts}
         bindCloseAll={this._bindCloseAll}
-      />,
-      container
+      />
     );
   }
 

frontend/src/components/user-settings/user-avatar-form.js

@@ -10,12 +10,12 @@ class UserAvatarForm extends React.Component {
 
   constructor(props) {
     super(props);
-    this.fileInput = React.createRef();
-    this.form = React.createRef();
     this.state = {
       avatarSrc: avatarURL,
       isEditShown: false
     };
+    this.fileInput = React.createRef();
+    this.form = React.createRef();
   }
 
   fileInputChange = () => {

frontend/src/css/layout.css

@@ -181,7 +181,7 @@
 }
 
 /* for reach/router */
-.reach-router[role=group],
+.reach-router,
 div[tabindex="-1"][role="group"] {
   display: flex;
   flex: 1;

frontend/src/draft.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 /* eslint-disable */
@@ -919,7 +919,5 @@ const sidePanelChangesPropTypes = {
 SidePanelChanges.propTypes = sidePanelChangesPropTypes;
 
 
-ReactDOM.render (
-  <Draft />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<Draft />);

frontend/src/file-history-old.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Button } from 'reactstrap';
 import { Utils } from './utils/utils';
 import { seafileAPI } from './utils/seafile-api';
@@ -274,7 +274,5 @@ class FileHistory extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <FileHistory />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<FileHistory />);

frontend/src/file-history.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import axios from 'axios';
 import { fileName, historyRepoID } from './utils/constants';
 import { Utils } from './utils/utils';
@@ -62,12 +62,17 @@ class FileHistory extends React.Component {
     }
   }
 
+  onBackClick = (event) => {
+    event.preventDefault();
+    window.history.back();
+  }
+
   render() {
     return(
       <Fragment>
         <div id="header" className="history-header">
           <div className="title">
-            <a href="javascript:window.history.back()" className="go-back" title="Back">
+            <a href="#" className="go-back" title="Back" onClick={this.onBackClick}>
               <span className="fas fa-chevron-left"></span>
             </a>
             <span className="name">{fileName}</span>
@@ -89,7 +94,5 @@ class FileHistory extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <FileHistory />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<FileHistory />);

frontend/src/file-view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
 import Image from './components/file-content-view/image';
@@ -41,6 +41,8 @@ class InnerFileView extends React.Component {
       case 'Audio':
         content = <Audio />;
         break;
+      default:
+        break;
     }
 
     return (
@@ -49,7 +51,6 @@ class InnerFileView extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <InnerFileView />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<InnerFileView />);
+

frontend/src/history-trash-file-view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import FileView from './components/history-trash-file-view/file-view';
 import FileViewTip from './components/history-trash-file-view/file-view-tip';
 import Image from './components/file-content-view/image';
@@ -56,7 +56,6 @@ class HistoryTrashFileView extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <HistoryTrashFileView />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<HistoryTrashFileView />);
+

frontend/src/index.js

@@ -1,15 +1,15 @@
 // Import React!
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n-seafile-editor';
 import MarkdownEditor from './pages/markdown-editor';
 
 import './index.css';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <I18nextProvider i18n={ i18n } >
     <MarkdownEditor />
-  </I18nextProvider>,
-  document.getElementById('root')
+  </I18nextProvider>
 );

frontend/src/pages/org-admin/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Router } from '@reach/router';
 import { siteRoot } from '../../utils/constants';
 import SidePanel from './side-panel';
@@ -121,7 +121,5 @@ class Org extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Org />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<Org />);

frontend/src/pages/search/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import Logo from '../../components/logo';
 import SearchViewPanel from './main-panel';
@@ -39,7 +39,5 @@ class SearchView extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SearchView/>,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SearchView />);

frontend/src/pages/search/main-panel.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import deepCopy from 'deep-copy';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import SearchResults from './search-results';
@@ -8,7 +9,6 @@ import Loading from '../../components/loading';
 
 import '../../css/search.css';
 
-const _ = require('lodash');
 const { q, search_repo, search_ftypes } = window.search.pageOptions;
 
 class SearchViewPanel extends React.Component {
@@ -49,7 +49,7 @@ class SearchViewPanel extends React.Component {
       isLoading: true,
       isResultGot: false,
     });
-    const stateHistory = _.cloneDeep(this.state);
+    const stateHistory = deepCopy(this.state);
     seafileAPI.searchFiles(params, null).then(res => {
       const { results, has_more, total } = res.data;
       this.setState({

frontend/src/pages/share-with-ocm/remote-dir-view.js

@@ -26,7 +26,6 @@ class DirView extends Component {
 
   constructor(props) {
     super(props);
-    this.fileInput = React.createRef();
     this.state = {
       loading: true,
       errorMsg: '',
@@ -36,6 +35,7 @@ class DirView extends Component {
       isNewFolderDialogOpen: false,
       userPerm: '',
     };
+    this.fileInput = React.createRef();
   }
 
   componentDidMount () {

frontend/src/pages/sys-admin/dingtalk-departments.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Button } from 'reactstrap';
-import _ from 'lodash';
+import deepCopy from 'deep-copy';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -50,7 +50,7 @@ class DingtalkDepartments extends Component {
     let rootIds = parentIds.concat(intersection).filter((v) => {
       return parentIds.indexOf(v) === -1 || intersection.indexOf(v) === -1;
     });
-    let cloneData = _.cloneDeep(list);
+    let cloneData = deepCopy(list);
     return cloneData.filter(father => {
       let branchArr = cloneData.filter(child => father.id === child.parentid);
       branchArr.length > 0 ? father.children = branchArr : '';

frontend/src/pages/sys-admin/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Router } from '@reach/router';
 import { siteRoot } from '../../utils/constants';
 import SidePanel from './side-panel';
@@ -273,7 +273,5 @@ class SysAdmin extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SysAdmin />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SysAdmin />);

frontend/src/pages/sys-admin/info.js

@@ -13,12 +13,12 @@ class Info extends Component {
 
   constructor(props) {
     super(props);
-    this.fileInput = React.createRef();
     this.state = {
       loading: true,
       errorMsg: '',
       sysInfo: {}
     };
+    this.fileInput = React.createRef();
   }
 
   componentDidMount () {

frontend/src/pages/sys-admin/repos/dir-view.js

@@ -15,7 +15,6 @@ class DirView extends Component {
 
   constructor(props) {
     super(props);
-    this.fileInput = React.createRef();
     this.state = {
       loading: true,
       errorMsg: '',
@@ -25,6 +24,7 @@ class DirView extends Component {
       direntList: [],
       isNewFolderDialogOpen: false
     };
+    this.fileInput = React.createRef();
   }
 
   componentDidMount () {

frontend/src/pages/sys-admin/work-weixin-departments.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Button } from 'reactstrap';
-import _ from 'lodash';
+import deepCopy from 'deep-copy';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -49,7 +49,7 @@ class WorkWeixinDepartments extends Component {
     let rootIds = parentIds.concat(intersection).filter((v) => {
       return parentIds.indexOf(v) === -1 || intersection.indexOf(v) === -1;
     });
-    let cloneData = _.cloneDeep(list);
+    let cloneData = deepCopy(list);
     return cloneData.filter(father => {
       let branchArr = cloneData.filter(child => father.id === child.parentid);
       branchArr.length > 0 ? father.children = branchArr : '';

frontend/src/pages/upload-link/index.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
@@ -72,7 +72,5 @@ class SharedUploadLink extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedUploadLink />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedUploadLink />);

frontend/src/repo-folder-trash.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { navigate } from '@reach/router';
 import moment from 'moment';
 import { Utils } from './utils/utils';
@@ -193,7 +193,7 @@ class RepoFolderTrash extends React.Component {
             <div className="row">
               <div className="col-md-10 offset-md-1">
                 <h2>{Utils.generateDialogTitle(gettext('{placeholder} Trash'), repoFolderName)}</h2>
-                <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role="button" role={gettext('Back')}>
+                <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack} role={gettext('Back')}>
                   <span className="fas fa-chevron-left"></span>
                 </a>
                 <div className="d-flex justify-content-between align-items-center op-bar">
@@ -413,7 +413,5 @@ class FolderItem extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <RepoFolderTrash />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<RepoFolderTrash />);

frontend/src/repo-history.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { navigate } from '@reach/router';
 import moment from 'moment';
 import { Utils } from './utils/utils';
@@ -326,7 +326,5 @@ class Item extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <RepoHistory />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<RepoHistory />);

frontend/src/repo-snapshot.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { navigate } from '@reach/router';
 import { Utils } from './utils/utils';
 import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
@@ -304,7 +304,5 @@ class FolderItem extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <RepoSnapshot />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<RepoSnapshot />);

frontend/src/settings.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { navigate } from '@reach/router';
 import { Utils } from './utils/utils';
 import { isPro, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
@@ -152,7 +152,5 @@ class Settings extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Settings />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<Settings />);

frontend/src/shared-dir-view.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import MD5 from 'MD5';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Button, Dropdown, DropdownToggle, DropdownItem, UncontrolledTooltip } from 'reactstrap';
 import moment from 'moment';
 import Account from './components/common/account';
@@ -927,7 +927,5 @@ class GridItem extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedDirView />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedDirView />);

frontend/src/shared-file-view-audio.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 import AudioPlayer from './components/audio-player';
@@ -38,7 +38,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedFileViewAudio />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewAudio />);

frontend/src/shared-file-view-document.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { seafileAPI } from './utils/seafile-api';
 import { gettext, mediaUrl} from './utils/constants';
 import SharedFileView from './components/shared-file-view/shared-file-view';
@@ -103,7 +103,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <SharedFileViewDocument />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewDocument />);

frontend/src/shared-file-view-image.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 import { gettext } from './utils/constants';
@@ -51,7 +51,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedFileViewImage />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewImage />);

frontend/src/shared-file-view-markdown.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MarkdownViewer } from '@seafile/seafile-editor';
 import { seafileAPI } from './utils/seafile-api';
 import { Utils } from './utils/utils';
@@ -101,7 +101,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <SharedFileViewMarkdown />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewMarkdown />);

frontend/src/shared-file-view-pdf.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 import PDFViewer from './components/pdf-viewer';
@@ -28,7 +28,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedFileViewPDF />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewPDF />);

frontend/src/shared-file-view-spreadsheet.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { seafileAPI } from './utils/seafile-api';
 import { siteRoot, gettext } from './utils/constants';
 import SharedFileView from './components/shared-file-view/shared-file-view';
@@ -105,7 +105,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <SharedFileViewSpreadsheet />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewSpreadsheet />);

frontend/src/shared-file-view-svg.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 
@@ -29,7 +29,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedFileViewSVG />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewSVG />);

frontend/src/shared-file-view-text.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Utils } from './utils/utils';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
@@ -56,7 +56,6 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedFileViewText />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewText />);
+

frontend/src/shared-file-view-unknown.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 
@@ -19,7 +19,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedFileViewImage />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewImage />);

frontend/src/shared-file-view-video.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
 import VideoPlayer from './components/video-player';
@@ -38,7 +38,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <SharedFileViewImage />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<SharedFileViewImage />);

frontend/src/tc-accept.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Button } from 'reactstrap';
 import { gettext } from './utils/constants';
 import Logo from './components/logo';
@@ -48,7 +48,5 @@ class TCAccept extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <TCAccept />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<TCAccept />);

frontend/src/tc-view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Logo from './components/logo';
 import Account from './components/common/account';
 import TermsPreviewWidget from './components/terms-preview-widget';
@@ -33,7 +33,5 @@ class TCView extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <TCView />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<TCView />);

frontend/src/user-notifications.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { navigate } from '@reach/router';
 import { Utils } from './utils/utils';
 import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
@@ -215,7 +215,5 @@ class Content extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <UserNotifications />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<UserNotifications />);

frontend/src/view-file-document.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { seafileAPI } from './utils/seafile-api';
-import { gettext, mediaUrl} from './utils/constants';
+import { gettext, mediaUrl } from './utils/constants';
 import FileView from './components/file-view/file-view';
 import FileViewTip from './components/file-view/file-view-tip';
 import Loading from './components/loading';
@@ -106,7 +106,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <ViewFileDocument />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<ViewFileDocument />);

frontend/src/view-file-spreadsheet.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { seafileAPI } from './utils/seafile-api';
 import { siteRoot, gettext } from './utils/constants';
 import FileView from './components/file-view/file-view';
@@ -105,7 +105,5 @@ class FileContent extends React.Component {
   }
 }
 
-ReactDOM.render (
-  <ViewFileSpreadsheet />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<ViewFileSpreadsheet />);

frontend/src/view-file-text.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import PropTypes from 'prop-types';
 import toaster from './components/toast';
 import { Utils } from './utils/utils';
@@ -161,7 +161,5 @@ class FileContent extends React.Component {
 
 FileContent.propTypes = propTypes;
 
-ReactDOM.render (
-  <ViewFileText />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<ViewFileText />);

frontend/src/wiki.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import moment from 'moment';
 import MediaQuery from 'react-responsive';
 import { Modal } from 'reactstrap';
@@ -508,7 +508,5 @@ class Wiki extends Component {
   }
 }
 
-ReactDOM.render (
-  <Wiki />,
-  document.getElementById('wrapper')
-);
+const root = createRoot(document.getElementById('wrapper'));
+root.render(<Wiki />);