dropdown _v2

This commit is contained in:
Jaeeun Cho 2016-08-11 16:05:26 -04:00
parent 8beec9df6b
commit 8e47a5f937
5 changed files with 277 additions and 1 deletions

View File

@ -0,0 +1,61 @@
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Button from '/imports/ui/components/button/component';
import classNames from 'classnames';
import styles from './styles';
import DropdownContent from './DropdownContent';
export default class Dropdown extends Component {
constructor(props) {
super(props);
this.state = { isMenuOpen: false, };
this.showMenu = this.showMenu.bind(this);
this.hideMenu = this.hideMenu.bind(this);
}
componentDidMount () {
window.addEventListener( 'click', this.onWindowClick.bind(this) );
}
componentWillUnmount () {
window.removeEventListener( 'click', this.onWindowClick.bind(this) );
}
showMenu() {
this.setState({ isMenuOpen: !this.state.isMenuOpen, });
}
hideMenu() {
this.setState({ isMenuOpen: false, });
}
onWindowClick(event) {
const dropdown_element = ReactDOM.findDOMNode(this);
if(event.target!== dropdown_element && !dropdown_element.contains(event.target)) {
this.hideMenu();
}
}
render() {
const { styleName, icon, label } = this.props;
return (
<div>
<Button className={styles.settingBtn}
role='button'
label={label}
icon={icon}
ghost={true}
circle={true}
hideLabel={true}
onClick={this.showMenu}
ref='menuBtn'/>
{ this.state.isMenuOpen ?
<DropdownContent /> : null
}
</div>
);
}
}

View File

@ -0,0 +1,148 @@
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Icon from '/imports/ui/components/icon/component';
import classNames from 'classnames';
import styles from './styles';
import SettingsModal from '../settings/SettingsModal';
import SessionMenu from '../settings/submenus/SessionMenu';
export default class DropdownContent extends Component {
constructor(props) {
super(props);
this.menus = [];
}
componentWillMount() {
this.setState({ activeMenu: -1, focusMenu: 0, });
this.menus.push({ className: '',
props: { title: 'Fullscreen', prependIconName: 'icon-',
icon: 'bbb-full-screen', }, tabIndex: 1, });
this.menus.push({ className: SettingsModal,
props: { title: 'Settings/Options', prependIconName: 'icon-',
icon: 'bbb-more', }, tabIndex: 2, });
this.menus.push({ className: SessionMenu,
props: { title: 'Leave Session', prependIconName: 'icon-',
icon: 'bbb-logout', }, tabIndex: 3, });
}
handleListKeyDown(event) {
const pressedKey = event.keyCode;
let menusLength = this.menus.length - 1;
// tab
if (pressedKey === 9) {
let newIndex = 0;
if (this.state.focusMenu >= menusLength) {
newIndex = menusLength;
} else {
newIndex = this.state.focusMenu + 1;
}
this.setState({ focusMenu: newIndex });
return;
}
// shift + tab
if (event.shiftKey && pressedKey === 9) {
let newIndex = 0;
if (this.state.focusMenu <= 0) {
newIndex = 0;
} else {
newIndex = this.state.focusMenu - 1;
}
this.setState({ focusMenu: newIndex });
return;
}
// Up key
if (pressedKey === 38) {
if (this.state.focusMenu <= 0) { // checks if at end of menu
this.setState({ focusMenu: menusLength },
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus();
});
} else {
this.setState({ focusMenu: this.state.focusMenu - 1 },
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus(); });
}
return;
}
// Down key
if (pressedKey === 40) {
if (this.state.focusMenu >= menusLength) { // checks if at end of menu
this.setState({ focusMenu: 0 },
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus();
});
} else {
this.setState({ focusMenu: this.state.focusMenu + 1 },
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus(); });
}
return;
}
// Enter and SpaceBar
if (pressedKey === 13 || pressedKey === 32) {
this.clickMenu(this.state.focusMenu);
return;
}
}
clickMenu(i) {
if (i < 0) {
this.setState({ activeMenu: -1, focusMenu: 0, });
}
if (i >= this.menus.length) {
this.setState({ activeMenu: this.menus.length - 1,
focusMenu: this.menus.length - 1, });
} else {
this.setState({ activeMenu: i, focusMenu: i, });
}
}
createMenu() {
const curr = this.state.activeMenu;
console.log(curr);
if(curr === 0) {
return console.log('full screen trigger');
}
if(curr === 1) {
return <SettingsModal />;
}
if (curr == 2) {
return <SessionMenu />;
}
}
render() {
return (
<div className={styles.dropdown__active__content}>
<p id="dropdownModal" className={styles.descModal}>Setting dropdown</p>
<ul className={styles.menuList} role="menu">
{this.menus.map((value, index) => (
<li key={index} role='menuitem'
tabIndex={value.tabIndex}
onClick={this.clickMenu.bind(this, index)}
onKeyDown={this.handleListKeyDown.bind(this)}
ref={'menu' + index}
className={styles.settingsMenuItem}>
<Icon key={index} prependIconName={value.props.prependIconName}
iconName={value.props.icon} title={value.props.title}/>
<span className={styles.settingsMenuItemText}>{value.props.title}</span>
{index == '0' ? <hr /> : null}
</li>
))}
</ul>
<div>{this.createMenu()}</div>
</div>
);
}
}

View File

@ -0,0 +1,27 @@
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import Icon from '/imports/ui/components/icon/component';
import Button from '/imports/ui/components/button/component';
import classNames from 'classnames';
import styles from './styles';
import SettingsModal from '../settings/SettingsModal';
import SessionMenu from '../settings/submenus/SessionMenu';
import Dropdown from './Dropdown';
export default class SettingsDropdown extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Dropdown styleName='settingBtn'
label='setting'
icon='more'
ghost='true'
circle='true'/>
);
}
}

View File

@ -1,3 +1,5 @@
@import "imports/ui/stylesheets/variables/_all";
.settingsMenuLeft {
width: 14%;
float: right;
@ -20,8 +22,40 @@
margin-left: 10px;
}
.divModal {
clear: 'both';
height: 100%;
}
.menuList {
list-style-type: none;
padding-left: 0px;
}
.descModal {
position: fixed;
left: -999em;
margin: 0;
}
.settingBtn {
-ms-transform: rotate( 90deg ); /* IE 9 */
-webkit-transform: rotate( 90deg ); /* Safari */
transform: rotate( 90deg );
}
.dropdown {
display: inline-block;
}
.dropdown__content {
display: none;
}
.dropdown__active__content {
height: auto;
width: auto;
display: block;
background-color: #ffffff;
font-size: $font-size-base * 1.2;
}

View File

@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
import styles from './styles.scss';
import Button from '../button/component';
import RecordButton from './recordbutton/component';
import SettingsDropdown from '../modals/dropdown/component';
const propTypes = {
presentationTitle: PropTypes.string.isRequired,
@ -26,6 +27,11 @@ class NavBar extends Component {
this.props.toggleUserList();
}
clickEvent() {
console.log("Clicked button");
return <Dropdown beingClicked={true} />;
}
render() {
const { presentationTitle, beingRecorded } = this.props;
document.title = presentationTitle;
@ -51,7 +57,7 @@ class NavBar extends Component {
</div>
</div>
<div className={styles.right}>
<span id="settingsButtonPlaceHolder"></span>
<SettingsDropdown />
</div>
</div>
);