486e8e35d9
For the most part the changes are taking the "static propTypes" declaration off of components and declaring them as Flow types. Sometimes to support flow some method signatures had to be added. There are some exceptions in which more had to be done to tame the beast: - AbstractVideoTrack: put in additional truthy checks for videoTrack. - Video: add truthy checks for the _videoElement ref. - shouldRenderVideoTrack function: Some component could pass null for the videoTrack argument and Flow wanted that called out explicitly. - DisplayName: Add a truthy check for the input ref before acting on it. - NumbersList: Move array checks inline for Flow to comprehend array methods could be called. Add type checks in the Object.entries loop as the value is assumed to be a mixed type by Flow. - AbstractToolbarButton: add additional truthy check for passed in type.
72 lines
2.0 KiB
JavaScript
72 lines
2.0 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from '../constants';
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link AspectRatioAware}.
|
|
*/
|
|
type Props = {
|
|
aspectRatio: ASPECT_RATIO_NARROW | ASPECT_RATIO_WIDE
|
|
};
|
|
|
|
/**
|
|
* Determines whether a specific React {@code Component} decorated into an
|
|
* {@link AspectRatioAware} has {@link ASPECT_RATIO_NARROW} as the value of its
|
|
* {@code aspectRatio} React prop.
|
|
*
|
|
* @param {AspectRatioAware} component - An {@link AspectRatioAware} which may
|
|
* have an {@code aspectRatio} React prop.
|
|
* @returns {boolean}
|
|
*/
|
|
export function isNarrowAspectRatio(component: React$Component<*>) {
|
|
return component.props.aspectRatio === ASPECT_RATIO_NARROW;
|
|
}
|
|
|
|
/**
|
|
* Decorates a specific React {@code Component} class into an
|
|
* {@link AspectRatioAware} which provides the React prop {@code aspectRatio}
|
|
* updated on each redux state change.
|
|
*
|
|
* @param {Class<React$Component>} WrappedComponent - A React {@code Component}
|
|
* class to be wrapped.
|
|
* @returns {AspectRatioAwareWrapper}
|
|
*/
|
|
export function makeAspectRatioAware(
|
|
WrappedComponent: Class<React$Component<*>>
|
|
): Class<React$Component<*>> {
|
|
/**
|
|
* Renders {@code WrappedComponent} with the React prop {@code aspectRatio}.
|
|
*/
|
|
class AspectRatioAware extends Component<Props> {
|
|
/**
|
|
* Implement's React render method to wrap the nested component.
|
|
*
|
|
* @returns {React$Element}
|
|
*/
|
|
render(): React$Element<*> {
|
|
return <WrappedComponent { ...this.props } />;
|
|
}
|
|
}
|
|
|
|
// $FlowFixMe
|
|
return connect(_mapStateToProps)(AspectRatioAware);
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the redux state to {@link AspectRatioAware} props.
|
|
*
|
|
* @param {Object} state - The whole redux state.
|
|
* @private
|
|
* @returns {{
|
|
* aspectRatio: Symbol
|
|
* }}
|
|
*/
|
|
function _mapStateToProps(state) {
|
|
return {
|
|
aspectRatio: state['features/base/responsive-ui'].aspectRatio
|
|
};
|
|
}
|