BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implements react tether in virtualizedlist

Browse Source
This commit is contained in:
Tainan Felipe 2020-03-30 16:41:36 -03:00
parent b451ce24f8
commit d388fb070d
8 changed files with 180 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
bigbluebutton-html5/imports/ui/components/dropdown/component.jsx
View File

@ -1,6 +1,8 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import { isMobile } from 'react-device-detect';
import TetherComponent from 'react-tether';
import cx from 'classnames';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import Button from '/imports/ui/components/button/component';
@ -16,7 +18,7 @@ const intlMessages = defineMessages({
},
});
const noop = () => {};
const noop = () => { };
const propTypes = {
/**
@ -51,6 +53,7 @@ const propTypes = {
onShow: PropTypes.func,
autoFocus: PropTypes.bool,
intl: intlShape.isRequired,
tethered: PropTypes.bool,
};
const defaultProps = {
@ -60,6 +63,16 @@ const defaultProps = {
autoFocus: false,
isOpen: false,
keepOpen: null,
getContent: () => {},
};
const attachments = {
'right-bottom': 'bottom left',
'right-top': 'bottom left',
};
const targetAttachments = {
'right-bottom': 'bottom right',
'right-top': 'top right',
};
class Dropdown extends Component {
@ -162,10 +175,24 @@ class Dropdown extends Component {
className,
intl,
keepOpen,
tethered,
placement,
getContent,
...otherProps
} = this.props;
const { isOpen } = this.state;
const placements = placement && placement.replace(' ', '-');
const test = isMobile ? {
width: '100%',
height: '100%',
transform: 'translateY(0)',
} : {
width: '',
height: '',
transform: '',
};
let trigger = children.find(x => x.type === DropdownTrigger);
let content = children.find(x => x.type === DropdownContent);
@ -176,15 +203,20 @@ class Dropdown extends Component {
dropdownToggle: this.handleToggle,
dropdownShow: this.handleShow,
dropdownHide: this.handleHide,
keepOpen,
});
content = React.cloneElement(content, {
ref: (ref) => { this.content = ref; },
ref: (ref) => {
getContent(ref);
this.content = ref;
},
'aria-expanded': isOpen,
dropdownIsOpen: isOpen,
dropdownToggle: this.handleToggle,
dropdownShow: this.handleShow,
dropdownHide: this.handleHide,
keepOpen,
});
const showCloseBtn = (isOpen && keepOpen) || (isOpen && keepOpen === null);
@ -199,18 +231,67 @@ class Dropdown extends Component {
ref={(node) => { this.dropdown = node; }}
tabIndex={-1}
>
{trigger}
{content}
{showCloseBtn
? (
<Button
className={styles.close}
label={intl.formatMessage(intlMessages.close)}
size="lg"
color="default"
onClick={this.handleHide}
/>
) : null}
{
tethered ?
(
<TetherComponent
style={{
zIndex: isOpen ? 15 : '',
...test,
}}
attachment={
isMobile ? 'middle bottom'
: attachments[placements]
}
targetAttachment={
isMobile ? ''
: targetAttachments[placements]
}
constraints={[
{
to: 'scrollParent',
},
]}
renderTarget={ref => (
<span ref={ref}>
{trigger}
</span>)}
renderElement={ref => (
<div
ref={ref}
>
{content}
{showCloseBtn
? (
<Button
className={styles.close}
label={intl.formatMessage(intlMessages.close)}
size="lg"
color="default"
onClick={this.handleHide}
/>
) : null}
</div>
)
}
/>)
: (
<Fragment>
{trigger}
{content}
{showCloseBtn
? (
<Button
className={styles.close}
label={intl.formatMessage(intlMessages.close)}
size="lg"
color="default"
onClick={this.handleHide}
/>
) : null}
</Fragment>
)
}
</div>
);
}

11
bigbluebutton-html5/imports/ui/components/dropdown/content/component.jsx
View File

@ -26,8 +26,14 @@ const defaultProps = {
export default class DropdownContent extends Component {
render() {
const {
placement, children, className,
dropdownToggle, dropdownShow, dropdownHide, dropdownIsOpen,
placement,
children,
className,
dropdownToggle,
dropdownShow,
dropdownHide,
dropdownIsOpen,
keepOpen,
...restProps
} = this.props;
@ -38,6 +44,7 @@ export default class DropdownContent extends Component {
dropdownToggle,
dropdownShow,
dropdownHide,
keepOpen,
}));
return (

17
bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
View File

@ -45,8 +45,8 @@ export default class DropdownList extends Component {
}
componentDidUpdate() {
const { focusedIndex } = this.state;
const { focusedIndex } = this.state;
const children = [].slice.call(this._menu.children);
this.menuRefs = children.filter(child => child.getAttribute('role') === 'menuitem');
@ -126,13 +126,14 @@ export default class DropdownList extends Component {
}
handleItemClick(event, callback) {
const { getDropdownMenuParent, onActionsHide, dropdownHide } = this.props;
if (getDropdownMenuParent) {
onActionsHide();
} else {
this.setState({ focusedIndex: null });
dropdownHide();
const { getDropdownMenuParent, onActionsHide, dropdownHide, keepOpen} = this.props;
if(!keepOpen) {
if (getDropdownMenuParent) {
onActionsHide();
} else {
this.setState({ focusedIndex: null });
dropdownHide();
}
}
if (typeof callback === 'function') {

28
bigbluebutton-html5/imports/ui/components/user-list/service.js
View File

@ -417,14 +417,30 @@ const muteAllExceptPresenter = (userId) => { makeCall('muteAllExceptPresenter',
const changeRole = (userId, role) => { makeCall('changeRole', userId, role); };
const roving = (event, changeState, elementsList, element) => {
const focusFirstDropDownItem = () => {
const dropdownContent = document.querySelector('div[data-test="dropdownContent"][style="visibility: visible;"]');
if (!dropdownContent) return;
const list = dropdownContent.getElementsByTagName('li');
list[0].focus();
};
const roving = (...args) => {
const [
event,
changeState,
elementsList,
element,
] = args;
this.selectedElement = element;
const numberOfChilds = elementsList.childElementCount;
const menuOpen = Session.get('dropdownOpen') || false;
if (menuOpen) {
const menuChildren = document.activeElement.getElementsByTagName('li');
if ([KEY_CODES.ESCAPE, KEY_CODES.ARROW_LEFT].includes(event.keyCode)) {
Session.set('dropdownOpen', false);
document.activeElement.click();
}
@ -445,13 +461,15 @@ const roving = (event, changeState, elementsList, element) => {
}
if ([KEY_CODES.ESCAPE, KEY_CODES.TAB].includes(event.keyCode)) {
Session.set('dropdownOpen', false);
document.activeElement.blur();
changeState(null);
}
if (event.keyCode === KEY_CODES.ARROW_DOWN) {
const firstElement = elementsList.firstChild;
let elRef = element ? element.nextSibling : firstElement;
let elRef = element && numberOfChilds > 1 ? element.nextSibling : firstElement;
elRef = elRef || firstElement;
changeState(elRef);
}
@ -464,7 +482,10 @@ const roving = (event, changeState, elementsList, element) => {
}
if ([KEY_CODES.ARROW_RIGHT, KEY_CODES.SPACE, KEY_CODES.ENTER].includes(event.keyCode)) {
document.activeElement.firstChild.click();
const tether = document.activeElement.firstChild;
const dropdownTrigger = tether.firstChild;
dropdownTrigger.click();
focusFirstDropDownItem();
}
};
@ -526,4 +547,5 @@ export default {
hasPrivateChatBetweenUsers,
toggleUserLock,
requestUserInformation,
focusFirstDropDownItem,
};

35
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
View File

@ -70,16 +70,6 @@ class UserParticipants extends Component {
this.rowRenderer = this.rowRenderer.bind(this);
}
componentDidMount() {
const { compact } = this.props;
if (!compact) {
this.refScrollContainer.addEventListener(
'keydown',
this.rove,
);
}
}
shouldComponentUpdate(nextProps, nextState) {
const isPropsEqual = _.isEqual(this.props, nextProps);
const isStateEqual = _.isEqual(this.state, nextState);
@ -87,12 +77,20 @@ class UserParticipants extends Component {
}
componentDidUpdate(prevProps, prevState) {
const { selectedUser } = this.state;
if (selectedUser === prevState.selectedUser) return;
const { compact } = this.props;
const { selectedUser, scrollArea } = this.state;
if (!compact && (!prevState.scrollArea && scrollArea)) {
scrollArea.addEventListener(
'keydown',
this.rove,
);
}
if (selectedUser) {
const { firstChild } = selectedUser;
if (firstChild) firstChild.focus();
if (!firstChild.isEqualNode(document.activeElement)) {
firstChild.focus();
}
}
}
@ -153,8 +151,9 @@ class UserParticipants extends Component {
rove(event) {
const { roving } = this.props;
const { selectedUser } = this.state;
const usersItemsRef = findDOMNode(this.refScrollItems);
const { selectedUser, scrollArea } = this.state;
const usersItemsRef = findDOMNode(scrollArea.firstChild);
roving(event, this.changeState, usersItemsRef, selectedUser);
}
@ -217,11 +216,11 @@ class UserParticipants extends Component {
}}
ref={(ref) => {
if (ref !== null) {
this.listRef = ref;
this.listRef = ref;
}
if (!scrollArea) {
this.setState({ scrollArea: findDOMNode(this.listRef) });
if (ref !== null && !scrollArea) {
this.setState({ scrollArea: findDOMNode(ref) });
}
}}
rowHeight={this.cache.rowHeight}

15
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx
View File

@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import UserAvatar from '/imports/ui/components/user-avatar/component';
import Icon from '/imports/ui/components/icon/component';
import Dropdown from './theteredDropdown/component';
import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component';
import DropdownContent from '/imports/ui/components/dropdown/content/component';
import DropdownList from '/imports/ui/components/dropdown/list/component';
import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
import DropdownListSeparator from '/imports/ui/components/dropdown/list/separator/component';
import Dropdown from '/imports/ui/components/dropdown/component';
import lockContextContainer from '/imports/ui/components/lock-viewers/context/container';
import _ from 'lodash';
@ -17,6 +17,7 @@ import { Session } from 'meteor/session';
import { styles } from './styles';
import UserName from '../user-name/component';
import UserIcons from '../user-icons/component';
import Service from '../../../../service';
const messages = defineMessages({
presenter: {
@ -287,7 +288,10 @@ class UserDropdown extends PureComponent {
{
showNestedOptions: true,
isActionsOpen: true,
}, Session.set('dropdownOpen', true),
}, () => {
Session.set('dropdownOpen', true);
Service.focusFirstDropDownItem();
},
),
'user',
'right_arrow',
@ -561,7 +565,7 @@ class UserDropdown extends PureComponent {
<div
data-test={isMe(user.userId) ? 'userListItemCurrent' : 'userListItem'}
className={!actions.length ? styles.userListItem : null}
>
>
<div className={styles.userItemContents}>
<div className={styles.userAvatar}>
{this.renderUserAvatar()}
@ -595,13 +599,14 @@ class UserDropdown extends PureComponent {
keepOpen={isActionsOpen || showNestedOptions}
onShow={this.onActionsShow}
onHide={this.onActionsHide}
className={userItemContentsStyle}
className={userItemContentsStyle}
autoFocus={false}
aria-haspopup="true"
aria-live="assertive"
aria-relevant="additions"
placement={placement}
getContent={(dropdownContent) => this.dropdownContent = dropdownContent}
getContent={dropdownContent => this.dropdownContent = dropdownContent}
tethered
>
<DropdownTrigger>
{contents}

6
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss
View File

@ -124,6 +124,12 @@
@extend %text-elipsis;
cursor: default;
min-width: 10vw;
@include mq($medium-only) {
min-width: 13vw;
}
@include mq($large-up) {
min-width: 8vw;
}
max-width: 100%;
overflow: visible;
}

15
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/theteredDropdown/component.jsx
View File

@ -101,7 +101,7 @@ class Dropdown extends Component {
if (!isOpen && prevState.isOpen) { onHide(); }
if (prevProps.keepOpen && !keepOpen) onHide();
if (prevProps.keepOpen && !keepOpen) { onHide(); }
}
handleShow() {
@ -192,10 +192,11 @@ class Dropdown extends Component {
});
content = React.cloneElement(content, {
ref: (ref) => {
ref: (ref) => {
getContent(ref);
this.content = ref;
},
keepOpen,
'aria-expanded': isOpen,
dropdownIsOpen: isOpen,
dropdownToggle: this.handleToggle,
@ -236,7 +237,7 @@ class Dropdown extends Component {
}
targetAttachment={
isMobile ? ''
: targetAttachments[placements]
: targetAttachments[placements]
}
constraints={[
@ -245,10 +246,10 @@ class Dropdown extends Component {
},
]}
renderTarget={ref => (
<span ref={ref}>
{trigger}
</span>)}
renderTarget={ref => (
<span ref={ref}>
{trigger}
</span>)}
renderElement={ref => (
<div
ref={ref}