Update react version 3 (#7453)

* update react version

* update reactstrap

* optimize code

* update react-select version

* update react-responsive

* update react-chartjs version

* update qrocde version

* update seafile-editor version

* update tldraw editor version

* fix code bug

frontend/src/components/sf-table/editors/editor-portal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 
 class EditorPortal extends React.Component {
@@ -32,7 +32,7 @@ class EditorPortal extends React.Component {
       return null;
     }
 
-    return ReactDOM.createPortal(
+    return createPortal(
       this.props.children,
       this.el,
     );

frontend/src/components/sf-table/masks/cell-mask.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 
 class CellMask extends React.PureComponent {
@@ -7,7 +7,7 @@ class CellMask extends React.PureComponent {
   componentDidUpdate() {
     // Scrolling left and right causes the interface to re-render,
     // and the style of CellMask is reset and needs to be fixed
-    const dom = ReactDOM.findDOMNode(this);
+    const dom = findDOMNode(this);
     if (dom.style.position === 'fixed') {
       dom.style.transform = 'none';
     }

frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js

@@ -23,7 +23,7 @@ const HeaderDropdownMenu = ({ column, ColumnDropdownMenu, customProps }) => {
       <DropdownMenu
         positionFixed
         flip={false}
-        modifiers={{ preventOverflow: { boundariesElement: document.body } }}
+        modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
         className="sf-table-dropdown-menu"
       >
         {cloneElement(ColumnDropdownMenu, { column, ...customProps })}