69 lines
2.0 KiB
JavaScript
69 lines
2.0 KiB
JavaScript
|
// @flow
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
|
||
|
|
import { ASPECT_RATIO_NARROW } from '../constants';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Decorates given React component class into {@link AspectRatioAwareWrapper}
|
||
|
|
* which provides the <tt>aspectRatio</tt> property updated on each Redux state
|
||
|
|
* change.
|
||
|
|
*
|
||
|
|
* @param {ReactClass} WrapperComponent - A React component class to be wrapped.
|
||
|
|
* @returns {AspectRatioAwareWrapper}
|
||
|
|
*/
|
||
|
|
export function AspectRatioAware(
|
||
|
|
WrapperComponent: ReactClass<*>): ReactClass<*> {
|
||
|
|
return connect(_mapStateToProps)(
|
||
|
|
class AspectRatioAwareWrapper extends Component {
|
||
|
|
/**
|
||
|
|
* Properties of the aspect ratio aware wrapper.
|
||
|
|
*/
|
||
|
|
static propTypes = {
|
||
|
|
/**
|
||
|
|
* Either {@link ASPECT_RATIO_NARROW} or
|
||
|
|
* {@link ASPECT_RATIO_WIDE}.
|
||
|
|
*/
|
||
|
|
aspectRatio: PropTypes.symbol
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Implement's React render method to wrap the nested component.
|
||
|
|
*
|
||
|
|
* @returns {XML}
|
||
|
|
*/
|
||
|
|
render(): React$Element<*> {
|
||
|
|
return <WrapperComponent { ...this.props } />;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Maps Redux state to {@link AspectRatioAwareWrapper} properties.
|
||
|
|
*
|
||
|
|
* @param {Object} state - The Redux whole state.
|
||
|
|
* @returns {{
|
||
|
|
* aspectRatio: Symbol
|
||
|
|
* }}
|
||
|
|
* @private
|
||
|
|
*/
|
||
|
|
function _mapStateToProps(state) {
|
||
|
|
return {
|
||
|
|
aspectRatio: state['features/base/aspect-ratio'].aspectRatio
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Checks if given React component decorated in {@link AspectRatioAwareWrapper}
|
||
|
|
* has currently the {@link ASPECT_RATIO_NARROW} set in the aspect ratio
|
||
|
|
* property.
|
||
|
|
*
|
||
|
|
* @param {AspectRatioAwareWrapper} component - A
|
||
|
|
* {@link AspectRatioAwareWrapper} which has <tt>aspectRation</tt> property.
|
||
|
|
* @returns {boolean}
|
||
|
|
*/
|
||
|
|
export function isNarrowAspectRatio(component: ReactClass<*>) {
|
||
|
|
return component.props.aspectRatio === ASPECT_RATIO_NARROW;
|
||
|
|
}
|