fix reactstrap 9.x DropdownMenu style (#7472)

2025-04-28 03:10:45 +00:00 · 2025-02-17 17:02:02 +08:00 · 2025-02-17 17:02:02 +08:00 · ef8cd06f72
commit ef8cd06f72
parent 79413cb4fd
11 changed files with 21 additions and 24 deletions
--- 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}
--- 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 } }]}
                    >
--- 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>
--- 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>
            )}
--- 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 />;
--- 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 />;
--- 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')}
--- 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')}
--- 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" />
--- 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 />;
--- 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')}