[Shared from other servers('shared-with-ocm/')] fixup after 'merge (#8110)

branch 12.0 into master'(i.e. the based React was upgraded from v17 to
v18)

- changed the dependency from 'react-cookies' to 'js-cookie'
- fixed text in the 'sort' option menus
- fixed the op menu for library items in mobile
- fixed the op menu('upload') for 'libary view'

frontend/src/pages/share-with-ocm/last-path-item-wrapper.js

@@ -58,7 +58,7 @@ class LastPathItemWrapper extends React.Component {
             <i className="sf3-font-new sf3-font"></i>
             <i className="sf3-font-down sf3-font path-item-dropdown-toggle"></i>
           </DropdownToggle>
-          <DropdownMenu positionFixed={true}>
+          <DropdownMenu className='position-fixed'>
             {opList.map((item, index) => {
               return (
                 <DropdownItem key={index} onClick={item.onClick} onKeyDown={this.onMenuItemKeyDown.bind(this, item)}>

frontend/src/pages/share-with-ocm/shared-with-ocm.js

@@ -5,7 +5,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import Cookies from 'js-cookie';
 import classnames from 'classnames';
 import { Link, navigate } from '@gatsbyjs/reach-router';
-import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
+import { DropdownItem } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
@@ -17,6 +17,7 @@ import ReposSortMenu from '../../components/sort-menu';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import LibsMobileThead from '../../components/libs-mobile-thead';
 import { LIST_MODE } from '../../components/dir-view-mode/constants';
+import MobileItemMenu from '../../components/mobile-item-menu';
 
 const propTypes = {
   currentViewMode: PropTypes.string,
@@ -256,22 +257,9 @@ class Item extends Component {
             <span className="item-meta-info">{item.from_server_url}</span>
           </td>
           <td>
-            <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-              <DropdownToggle
-                tag="i"
-                className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
-                title={gettext('More operations')}
-                aria-label={gettext('More operations')}
-                data-toggle="dropdown"
-                aria-expanded={this.state.isItemMenuShow}
-              />
-              <div className={`${this.state.isItemMenuShow ? '' : 'd-none'}`} onClick={this.toggleOperationMenu}>
-                <div className="mobile-operation-menu-bg-layer"></div>
-                <div className="mobile-operation-menu">
-                  <DropdownItem className="mobile-menu-item" onClick={this.leaveShare}>{gettext('Leave Share')}</DropdownItem>
-                </div>
-              </div>
-            </Dropdown>
+            <MobileItemMenu isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
+              <DropdownItem className="mobile-menu-item" onClick={this.leaveShare}>{gettext('Leave Share')}</DropdownItem>
+            </MobileItemMenu>
           </td>
         </tr>
       );
@@ -289,8 +277,8 @@ class SharedWithOCM extends Component {
   constructor(props) {
     super(props);
     this.sortOptions = [
-      { value: 'name-asc', text: gettext('By name ascending') },
-      { value: 'name-desc', text: gettext('By name descending') }
+      { value: 'name-asc', text: gettext('Ascending by name') },
+      { value: 'name-desc', text: gettext('Descending by name') }
     ];
     this.state = {
       loading: true,