cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
120 lines (98 loc) • 3.33 kB
JSX
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
};