fix reactstrap 9.x DropdownMenu style (#7472)

haiwen · Feb 17, 2025 · ef8cd06 · ef8cd06
1 parent 79413cb
commit ef8cd06
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 24 deletions.
diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Link } from '@gatsbyjs/reach-router';
-import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
+import DirOperationToolbar from '../../components/toolbar/dir-operation-toolbar';
 import MetadataViewName from '../../metadata/components/metadata-view-name';
 import TagViewName from '../../tag/components/tag-view-name';
 import { siteRoot, gettext } from '../../utils/constants';
@@ -182,7 +182,7 @@ class DirPath extends React.Component {
         return (
           <Fragment key={index}>
             <span className="path-split">/</span>
-            <DirOperationToolBar
+            <DirOperationToolbar
               path={this.props.currentPath}
               repoID={this.props.repoID}
               repoName={this.props.repoName}
@@ -199,7 +199,7 @@ class DirPath extends React.Component {
               loadDirentList={this.props.loadDirentList}
             >
               <span className="path-file-name">{item}</span>
-            </DirOperationToolBar>
+            </DirOperationToolbar>
           </Fragment>
         );
       } else {
@@ -241,19 +241,19 @@ class DirPath extends React.Component {
           );
         })}
         {this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
-          <Fragment>
+          <>
             <Link to={siteRoot + 'libraries/'} className="path-item normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
             <span className="path-split">/</span>
-          </Fragment>
+          </>
         )}
         {!this.props.pathPrefix && (
-          <Fragment>
+          <>
             <Link to={siteRoot + 'libraries/'} className="path-item normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
             <span className="path-split">/</span>
-          </Fragment>
+          </>
         )}
         {(currentPath === '/' || currentPath === '') ?
-          <DirOperationToolBar
+          <DirOperationToolbar
             path={this.props.currentPath}
             repoID={this.props.repoID}
             repoName={this.props.repoName}
@@ -270,7 +270,7 @@ class DirPath extends React.Component {
             loadDirentList={this.props.loadDirentList}
           >
             <span className="path-repo-name">{repoName}</span>
-          </DirOperationToolBar> :
+          </DirOperationToolbar> :
           <span className="path-item" data-path="/" onClick={this.onPathClick} role="button">{repoName}</span>
         }
         {pathElem}

diff --git a/frontend/src/components/dropdown-menu/item-dropdown-menu.js b/frontend/src/components/dropdown-menu/item-dropdown-menu.js
@@ -197,8 +197,7 @@ class ItemDropdownMenu extends React.Component {
         <ModalPortal>
           <DropdownMenu
             style={menuStyle}
-            className={this.props.menuClassname}
-            positionFixed={true}
+            className={`${this.props.menuClassname} position-fixed`}
             flip={false}
             modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
           >
@@ -224,7 +223,7 @@ class ItemDropdownMenu extends React.Component {
                       <i className="sf3-font-down sf3-font rotate-270"></i>
                     </DropdownToggle>
                     <DropdownMenu
-                      positionFixed={true}
+                      className="position-fixed"
                       flip={false}
                       modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
                     >

diff --git a/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js b/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js
@@ -21,10 +21,9 @@ const HeaderDropdownMenu = ({ column, ColumnDropdownMenu, customProps }) => {
   const renderDropdownMenu = useCallback(() => {
     return (
       <DropdownMenu
-        positionFixed={true}
         flip={false}
         modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
-        className="sf-table-dropdown-menu"
+        className="sf-table-dropdown-menu position-fixed"
       >
         {cloneElement(ColumnDropdownMenu, { column, ...customProps })}
       </DropdownMenu>

diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -295,7 +295,7 @@ class DirOperationToolbar extends React.Component {
               {this.props.children}
               <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
             </DropdownToggle>
-            <DropdownMenu onMouseMove={this.onDropDownMouseMove} positionFixed={true}>
+            <DropdownMenu onMouseMove={this.onDropDownMouseMove} className='position-fixed'>
               {opList.map((item, index) => {
                 if (item == 'Divider') {
                   return <DropdownItem key={index} divider />;
@@ -353,7 +353,7 @@ class DirOperationToolbar extends React.Component {
             {this.props.children}
             <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
           </DropdownToggle>
-          <DropdownMenu positionFixed={true}>
+          <DropdownMenu className='position-fixed'>
             {canUpload && (
               <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
             )}

diff --git a/frontend/src/components/toolbar/single-dropdown-toolbar.js b/frontend/src/components/toolbar/single-dropdown-toolbar.js
@@ -50,7 +50,7 @@ class SingleDropdownToolbar extends React.Component {
           {withPlusIcon && <i className="sf3-font-new sf3-font main-icon"></i>}
           <i className="sf3-font-down sf3-font"></i>
         </DropdownToggle>
-        <DropdownMenu positionFixed={true}>
+        <DropdownMenu className='position-fixed'>
           {opList.map((item, index) => {
             if (item == 'Divider') {
               return <DropdownItem key={index} divider />;

diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -159,7 +159,7 @@ class ViewFileToolbar extends React.Component {
             {this.props.children}
             <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
           </DropdownToggle>
-          <DropdownMenu positionFixed={true} onMouseMove={this.onDropDownMouseMove}>
+          <DropdownMenu className='position-fixed' onMouseMove={this.onDropDownMouseMove}>
             {opList.map((item, index) => {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;

diff --git a/frontend/src/pages/org-admin/departments/departments-node-dropdown-menu.js b/frontend/src/pages/org-admin/departments/departments-node-dropdown-menu.js
@@ -7,7 +7,7 @@ function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers
   return (
     <DropdownMenu
       modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
-      positionFixed={true}
+      className="position-fixed"
     >
       <DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>
         {gettext('Add sub-department')}

diff --git a/frontend/src/pages/sys-admin/departments/departments-node-dropdown-menu.js b/frontend/src/pages/sys-admin/departments/departments-node-dropdown-menu.js
@@ -7,7 +7,7 @@ function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers
   return (
     <DropdownMenu
       modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
-      positionFixed={true}
+      className="position-fixed"
     >
       <DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>
         {gettext('Add sub-department')}

diff --git a/frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js b/frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js
@@ -95,10 +95,9 @@ export default class PageDropdownMenu extends Component {
       >
         <DropdownToggle className="page-operation-dropdown-toggle" tag="span" data-toggle="dropdown"></DropdownToggle>
         <DropdownMenu
-          className="page-operation-dropdown-menu dtable-dropdown-menu large"
+          className="page-operation-dropdown-menu dtable-dropdown-menu large position-fixed"
           flip={false}
           modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
-          positionFixed={true}
         >
           <DropdownItem onClick={this.handleCopyLink}>
             <i className="sf3-font sf3-font-link" aria-hidden="true" />

diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js
@@ -335,7 +335,7 @@ class SharedDirView extends React.Component {
                   : <i className="sf3-font-down sf3-font ml-1"></i>
                 }
               </DropdownToggle>
-              <DropdownMenu positionFixed={true}>
+              <DropdownMenu className='position-fixed'>
                 {opList.map((item, index) => {
                   if (item == 'Divider') {
                     return <DropdownItem key={index} divider />;

diff --git a/frontend/src/tag/components/tag-view-name/all-tags-operation-toolbar.js b/frontend/src/tag/components/tag-view-name/all-tags-operation-toolbar.js
@@ -54,7 +54,7 @@ const AllTagsOperationToolbar = ({ children }) => {
             {children}
             <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
           </DropdownToggle>
-          <DropdownMenu positionFixed={true}>
+          <DropdownMenu className='position-fixed'>
             <DropdownItem onClick={openAddTag}>
               <i className="sf3-font sf3-font-new mr-2 dropdown-item-icon"></i>
               {gettext('New tag')}