33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import { connect } from 'react-redux'
|
|
import cn from 'classnames'
|
|
import stl from './widgetHolder.css'
|
|
import LazyLoad from 'react-lazyload';
|
|
|
|
const WidgetHolder = props => {
|
|
const { comparing, Component, period, periodCompare, fullWidth = false } = props;
|
|
const showSync = comparing && period.rangeName === periodCompare.rangeName;
|
|
|
|
return (
|
|
<div className={ cn(stl.wrapper, { 'grid grid-cols-2 gap-4 mb-2' : comparing && !fullWidth })}>
|
|
<LazyLoad height={300} offset={320} >
|
|
{<Component showSync={showSync} />}
|
|
</LazyLoad>
|
|
{comparing && (
|
|
<LazyLoad height={300} offset={320}>
|
|
<React.Fragment>
|
|
<div className={fullWidth ? 'mt-4' : ''}>
|
|
<Component compare showSync={showSync} />
|
|
</div>
|
|
</React.Fragment>
|
|
</LazyLoad>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(state => ({
|
|
comparing: state.getIn([ 'dashboard', 'comparing' ]),
|
|
period: state.getIn([ 'dashboard', 'period' ]),
|
|
periodCompare: state.getIn([ 'dashboard', 'periodCompare' ])
|
|
}))(WidgetHolder)
|