Remove user-actions

bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx

@@ -1,12 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
 import { withRouter } from 'react-router';
 import { injectIntl } from 'react-intl';
+import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import _ from 'lodash';
-import UserActions from './user-actions/component';
 import UserListContent from './user-list-content/component';
-import styles from './styles.scss';
 
 const normalizeEmojiName = (emoji) => {
   const emojisNormalized = {
@@ -71,18 +69,30 @@ class UserListItem extends Component {
       allowedToKick,
       allowedToSetPresenter } = actions;
 
+
     return _.compact([
-      (allowedToChatPrivately ? <UserActions action={openChat} options={[router, user]} /> : null),
-      (allowedToMuteAudio ? <UserActions action={unmute} options={[user]} /> : null),
-      (allowedToUnmuteAudio ? <UserActions action={mute} options={[user]} /> : null),
-      (allowedToResetStatus ? <UserActions action={clearStatus} options={[user]} /> : null),
-      (allowedToSetPresenter ? <UserActions action={setPresenter} options={[user]} /> : null),
-      (allowedToKick ? <UserActions action={kick} options={[router, user]} /> : null),
+      (allowedToChatPrivately ? this.renderUserAction(openChat, router, user) : null),
+      (allowedToMuteAudio ? this.renderUserAction(unmute, user) : null),
+      (allowedToUnmuteAudio ? this.renderUserAction(mute, user) : null),
+      (allowedToResetStatus ? this.renderUserAction(clearStatus, user) : null),
+      (allowedToSetPresenter ? this.renderUserAction(setPresenter, user) : null),
+      (allowedToKick ? this.renderUserAction(kick, user) : null),
     ]);
   }
 
-  getDropdownMenuParent() {
-    return findDOMNode(this.dropdown);
+
+  renderUserAction(action, ...parameters) {
+    const userAction = (
+      <DropdownListItem
+        key={_.uniqueId('action-item-')}
+        icon={action.icon}
+        label={action.label}
+        defaultMessage={action.label}
+        onClick={action.handler.bind(this, ...parameters)}
+      />
+    );
+
+    return userAction;
   }
 
   render() {

bigbluebutton-html5/imports/ui/components/user-list/user-list-item/user-actions/component.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
-
-const propTypes = {
-  action: PropTypes.shape({
-    icon: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
-    handler: PropTypes.func.isRequired,
-  }).isRequired,
-  options: PropTypes.array.isRequired,
-};
-
-const UserActions = (props) => {
-  const { action, options } = props;
-
-  const userAction = (
-    <DropdownListItem
-      key={_.uniqueId('action-item-')}
-      icon={action.icon}
-      label={action.label}
-      defaultMessage={action.label}
-      onClick={action.handler.bind(this, ...options)}
-      placeInTabOrder
-    />
-  );
-
-  return userAction;
-};
-
-UserActions.propTypes = propTypes;
-export default UserActions;

bigbluebutton-html5/imports/ui/components/user-list/user-list-item/user-list-content/component.jsx

@@ -42,6 +42,18 @@ const messages = defineMessages({
 });
 
 class UserListContent extends Component {
+
+  /**
+   * Return true if the content fit on the screen, false otherwise.
+   *
+   * @param {number} contentOffSetTop
+   * @param {number} contentOffsetHeight
+   * @return True if the content fit on the screen, false otherwise.
+   */
+  static checkIfDropdownIsVisible(contentOffSetTop, contentOffsetHeight) {
+    return (contentOffSetTop + contentOffsetHeight) < window.innerHeight;
+  }
+
   constructor(props) {
     super(props);
 
@@ -113,7 +125,8 @@ class UserListContent extends Component {
       };
 
       const isDropdownVisible =
-        this.checkIfDropdownIsVisible(dropdownContent.offsetTop, dropdownContent.offsetHeight);
+        UserListContent.checkIfDropdownIsVisible(dropdownContent.offsetTop,
+                                                 dropdownContent.offsetHeight);
 
       if (!isDropdownVisible) {
         const offsetPageTop =
@@ -127,17 +140,6 @@ class UserListContent extends Component {
     }
   }
 
-  /**
-   * Return true if the content fit on the screen, false otherwise.
-   *
-   * @param {number} contentOffSetTop
-   * @param {number} contentOffsetHeight
-   * @return True if the content fit on the screen, false otherwise.
-   */
-  checkIfDropdownIsVisible(contentOffSetTop, contentOffsetHeight) {
-    return (contentOffSetTop + contentOffsetHeight) < window.innerHeight;
-  }
-
   /**
   * Check if the dropdown is visible and is opened by the user
   *
@@ -145,25 +147,14 @@ class UserListContent extends Component {
   */
   isDropdownActivedByUser() {
     const { isActionsOpen, dropdownVisible } = this.state;
-    if (isActionsOpen && dropdownVisible) {
-      this.focusDropdown();
-    }
-    return isActionsOpen && !dropdownVisible;
-  }
-
-  focusDropdown() {
     const list = findDOMNode(this.list);
-    for (let i = 0; i < list.children.length; i++) {
-      if (list.children[i].getAttribute('role') === 'menuitem') {
-        list.children[i].focus();
-        break;
-      }
+
+    if (isActionsOpen && dropdownVisible) {
+      const childrens = [].slice.call(list.children);
+      childrens.find(child => child.getAttribute('role') === 'menuitem').focus();
     }
 
-    // The list children is a instance of HTMLCollection, there is no find, some, etc methods
-    /* const childrens = [].slice.call(list.children);
-
-    childrens.find(child => child.getAttribute('role') === 'menuitem').focus(); */
+    return isActionsOpen && !dropdownVisible;
   }
 
   render() {