UNPKG

cluedin-widget

Version:

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

120 lines (98 loc) 3.33 kB
import React, { Component } from 'react' import Loading from './loading.jsx' import { WidgetMenu, WidgetAction } from './widgetMenu.jsx' import MiniLoading from './MiniLoading.jsx' import Ps from 'perfect-scrollbar' import iso from '../../../iso'; export default class Widget extends Component { render() { let { title, minHeight, loading, noScroll, loadingHeight, menu, miniLoading } = this.props; let widgetClassName = "cluedIn_widget"; let widgetContentStyle = {}; let loadingHtml; let menuContent; let miniLoadingContent; if ( loading ) { minHeight = loadingHeight || '300px'; loadingHtml = (<Loading></Loading>); } var widgetStyle = { minHeight: minHeight ? minHeight : 'auto' }; if ( noScroll ) { widgetStyle.overflow = 'hidden'; widgetContentStyle.overflow = 'hidden'; } if ( menu && !miniLoading ) { menuContent = <WidgetMenu menu={menu}></WidgetMenu>; } if ( miniLoading ) { miniLoadingContent = (<div className="cluedIn_widget_title_loading"><MiniLoading></MiniLoading></div>); } if ( title ) { return ( <div style={widgetStyle} className={widgetClassName}> {loadingHtml} <div className="cluedIn_widget_title"> {title} {miniLoadingContent} {menuContent} </div> <div ref="widgetContent" style={widgetContentStyle} className=" cluedIn_widget_content"> {this.props.children} </div> </div> ) } else { return (<div ref="widgetContent" style={widgetStyle} className=" cluedIn_widget"> {loadingHtml} {this.props.children} </div>) } } endWidgetScroll( event ) { if ( !this.refs.widgetContent.contains( event.target ) ) { return; } const { pagingHandler, miniLoading } = this.props; if ( miniLoading ) { return; } if ( pagingHandler ) { pagingHandler(); } } componentDidUpdate() { let { loading, noScroll } = this.props; if ( loading ) { return; } if ( noScroll ) { return; } if ( !noScroll && this.refs.widgetContent !== null ) { Ps.initialize( this.refs.widgetContent, { scrollYMarginOffset: 20, suppressScrollX: true } ); } else { Ps.destroy( this.refs.widgetContent ); } document.addEventListener( 'ps-y-reach-end', iso.func.throttle( this.endWidgetScroll.bind( this ), 50 ).bind( this ) ); } componentWillUnmount() { let { noScroll } = this.props; if ( noScroll ) { return noScroll; } if ( !noScroll && this.refs.widgetContent !== null ) { Ps.destroy( this.refs.widgetContent ); } } } Widget.propTypes = { title: React.PropTypes.string }; Widget.defaultProps = { noScroll: true };