cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
114 lines (94 loc) • 2.87 kB
JSX
import React, { Component } from 'react';
import cx from 'classnames';
export class WidgetAction extends Component {
render() {
const { title, onClick, icon } = this.props;
let iconHtml;
if ( icon ) {
iconHtml = (<i className={icon}></i>);
}
return (
<li onClick={onClick} className="cluedIn_widget_menu_action">
<a>{iconHtml}{title}</a>
</li>);
}
}
export class WidgetLink extends Component {
render() {
const { title, url } = this.props;
return (<li className="cluedIn_widget_menu_link"><a href={url}>{title}</a></li>);
}
}
export class WidgetMenu extends Component {
constructor( props ) {
super( props );
this.state = { active: false };
}
componentDidMount() {
window.addEventListener( 'click', this._onWindowClick.bind( this ) );
}
componentWillUnmount() {
window.removeEventListener( 'click', this._onWindowClick.bind( this ) );
}
isActive() {
return ( typeof this.props.active === 'boolean' ) ?
this.props.active :
this.state.active;
}
hide() {
this.setState( {
active: false
} );
if ( this.props.onHide ) {
this.props.onHide();
}
}
show() {
this.setState( {
active: true
} );
if ( this.props.onShow ) {
this.props.onShow();
}
}
_onWindowClick( event ) {
const dropdown_element = this.refs.widgetMenu;
if ( !dropdown_element ) {
return;
}
if ( event.target !== dropdown_element && !dropdown_element.contains( event.target ) && this.isActive() ) {
this.hide();
}
}
_onToggleClick( event ) {
event.preventDefault();
if ( this.isActive() ) {
this.hide();
} else {
this.show();
}
}
render() {
const { menu } = this.props;
const active = this.isActive();
let widgetMenuContent = menu.map( ( a, i ) => {
return <div key={i}>{React.createElement( WidgetAction, a )}</div>
} );
var dropdownClasses = cx( {
cluedIn_widget_menu: true,
'cluedIn_widget_menu_active': active
} );
return (<div ref="widgetMenu" className={dropdownClasses}>
<div onClick={this._onToggleClick.bind(this)} className="cluedIn_widget_buttonArea">
<div className="cluedIn_widget_button">
<a><i className="fa fa-ellipsis-v"></i></a>
</div>
</div>
<div className="cluedIn_widget_dropdown">
<ul>
{widgetMenuContent}
</ul>
</div>
</div>);
}
}