UNPKG

cluedin-widget

Version:

This is the project for creating and managing widgets in CluedIn.

114 lines (94 loc) 2.87 kB
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>); } }