jiti-meet/react/features/base/responsive-ui/components/ReducedUIDetector.js

75 lines
1.7 KiB
JavaScript
Raw Normal View History

// @flow
2018-05-22 14:23:03 +00:00
import React, { Component, type Node } from 'react';
import { type Dispatch } from 'redux';
2019-03-21 16:38:29 +00:00
import { connect } from '../../redux';
import { setReducedUI } from '../actions';
import DimensionsDetector from './DimensionsDetector';
/**
* ReducedUIDetector component's property types.
*/
type Props = {
/**
* The "onDimensionsHandler" handler.
*/
_onDimensionsChanged: Function,
/**
* Any nested components.
*/
2018-05-22 14:23:03 +00:00
children: Node
};
/**
* A root {@link View} which captures the 'onLayout' event and figures out
* if the UI is reduced.
*/
class ReducedUIDetector extends Component<Props> {
/**
* Renders the root view and it's children.
*
* @returns {Component}
*/
render() {
return (
<DimensionsDetector
onDimensionsChanged = { this.props._onDimensionsChanged } >
{ this.props.children }
</DimensionsDetector>
);
}
}
/**
* Maps dispatching of the reduced UI actions to React component props.
*
* @param {Function} dispatch - Redux action dispatcher.
* @private
* @returns {{
* _onDimensionsChanged: Function
* }}
*/
2019-03-19 15:42:25 +00:00
function _mapDispatchToProps(dispatch: Dispatch<any>) {
return {
/**
* Handles the "on dimensions changed" event and dispatches the
* reduced UI action.
*
* @param {number} width - The new width for the component.
* @param {number} height - The new height for the component.
* @private
* @returns {void}
*/
_onDimensionsChanged(width: number, height: number) {
dispatch(setReducedUI(width, height));
}
};
}
export default connect(undefined, _mapDispatchToProps)(ReducedUIDetector);