[system admin] terms-and-conditions: improved code & icon clickable area for op-menu (#4268)

frontend/src/pages/sys-admin/terms-and-conditions/item.js

@@ -6,10 +6,10 @@ import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import getPreviewContent from '../../../utils/markdown-utils';
 import AddOrUpdateTermDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-or-update-term-dialog';
+import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
 import TermsPerviewDialog from '../../../components/dialog/terms-preview-dialog';
 import ModalPortal from '../../../components/modal-portal';
-import CommonOperationConfirmationDialog from '../../../components/dialog/common-operation-confirmation-dialog';
-import OpMenu from './op-menu';
+import OpMenu from '../../../components/dialog/op-menu';
 
 const propsTypes = {
   item: PropTypes.object.isRequired,
@@ -25,7 +25,7 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      itemContent: "...",
+      itemContent: '...',
       isOpIconShown: false,
       isUpdateDialogOpen: false,
       isDeleteDialogOpen: false,
@@ -110,6 +110,22 @@ class Item extends Component {
     this.toggleUpdateDialog();
   }
 
+  translateOperations = (item) => {
+    let translateResult = ''; 
+    switch(item) {
+      case 'Update':
+        translateResult = gettext('Update');
+        break;
+      case 'Delete':
+        translateResult = gettext('Delete');
+        break;
+      default:
+        break;
+    }   
+
+    return translateResult;
+  }
+
   render() {
     let { item } = this.props;
     let { isDeleteDialogOpen, isUpdateDialogOpen, isTermsPerviewDialogOpen } = this.state;
@@ -129,7 +145,8 @@ class Item extends Component {
           <td>
             {this.state.isOpIconShown &&
               <OpMenu
-                item={item}
+                operations={['Update', 'Delete']}
+                translateOperations={this.translateOperations}
                 onMenuItemClick={this.onMenuItemClick}
                 onFreezedItem={this.props.onFreezedItem}
                 onUnfreezedItem={this.onUnfreezedItem}
@@ -173,4 +190,4 @@ class Item extends Component {
 
 Item.propTypes = propsTypes;
 
-export default Item;
+export default Item;

frontend/src/pages/sys-admin/terms-and-conditions/op-menu.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-
-const propTypes = {
-  item: PropTypes.object.isRequired,
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnfreezedItem: PropTypes.func.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-};
-
-class OpMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false
-    };
-  }
-
-  onMenuItemClick = (e) => {
-    let operation = Utils.getEventData(e, 'op');
-    this.props.onMenuItemClick(operation);
-  }
-
-  onDropdownToggleClick = (e) => {
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow},
-      () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnfreezedItem();
-        }
-      }
-    );
-  }
-
-  translateOperations = (item) => {
-    let translateResult = '';
-    switch(item) {
-      case 'Update':
-        translateResult = gettext('Update');
-        break;
-      case 'Delete':
-        translateResult = gettext('Delete');
-        break;
-      default:
-        break;
-    }
-
-    return translateResult;
-  }
-
-  render() {
-    let operations = ['Update', 'Delete'];
-
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i"
-          className="sf-dropdown-toggle fa fa-ellipsis-v"
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-        />
-        <DropdownMenu className="mt-2 mr-2">
-          {operations.map((item, index )=> {
-            return (<DropdownItem key={index} data-op={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-OpMenu.propTypes = propTypes;
-
-export default OpMenu;