c9d8b5c827
We started on the way to responsive UI and its design with aspect ratio and keeping the filmstrip on the short side of the app's visible rectangle. Shortly, we're going to introduce reduced UI for Picture-in-Picture. And that's where we'll need another dimensions-based detector akin to the aspect ratio detector. While the AspectRatioDetector, the up-and-coming ReducedUIDetector, and their base DimensionsDetector are definitely separate abstractions and implementations not mixed for the purposes of easy extensibility and maintenance, the three of them are our building blocks on top of which we'll build our responsive UI.
118 lines
2.7 KiB
JavaScript
118 lines
2.7 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
import { Text, View } from 'react-native';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { translate } from '../../base/i18n';
|
|
import { getSafetyOffset } from '../../base/react';
|
|
import { ASPECT_RATIO_WIDE } from '../../base/responsive-ui';
|
|
|
|
import styles, { CONTAINER_PADDING } from './styles';
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link FormSectionHeader}
|
|
*/
|
|
type Props = {
|
|
|
|
/**
|
|
* The current aspect ratio of the screen.
|
|
*/
|
|
_aspectRatio: Symbol,
|
|
|
|
/**
|
|
* The i18n key of the text label of the section.
|
|
*/
|
|
i18nLabel: string,
|
|
|
|
/**
|
|
* An external style object passed to the component.
|
|
*/
|
|
style: Object,
|
|
|
|
/**
|
|
* Invoked to obtain translated strings.
|
|
*/
|
|
t: Function
|
|
}
|
|
|
|
/**
|
|
* Implements a React {@code Component} which renders a section header on a
|
|
* form. This calculates the available safe view as well.
|
|
*/
|
|
class FormSectionHeader extends Component<Props> {
|
|
/**
|
|
* Initializes a new {@code FormSectionHeader} instance.
|
|
*
|
|
* @param {Object} props - Component properties.
|
|
*/
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this._getSafetyMargin = this._getSafetyMargin.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @override
|
|
* @returns {ReactElement}
|
|
*/
|
|
render() {
|
|
const { t } = this.props;
|
|
|
|
return (
|
|
<View
|
|
style = { [
|
|
styles.formSectionTitle,
|
|
this.props.style,
|
|
this._getSafetyMargin()
|
|
] } >
|
|
<Text>
|
|
{ t(this.props.i18nLabel) }
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
_getSafetyMargin: () => Object;
|
|
|
|
/**
|
|
* Calculates the safety margin for this header. See comment in
|
|
* functions.js.
|
|
*
|
|
* @private
|
|
* @returns {Object}
|
|
*/
|
|
_getSafetyMargin() {
|
|
if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
|
|
const safeOffset
|
|
= Math.max(getSafetyOffset() - CONTAINER_PADDING, 0);
|
|
|
|
return {
|
|
marginLeft: safeOffset,
|
|
marginRight: safeOffset
|
|
};
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the redux state to the React {@code Component} props of
|
|
* {@code FormSectionHeader}.
|
|
*
|
|
* @param {Object} state - The redux state.
|
|
* @protected
|
|
* @returns {Object}
|
|
*/
|
|
export function _mapStateToProps(state: Object) {
|
|
return {
|
|
_aspectRatio: state['features/base/responsive-ui'].aspectRatio
|
|
};
|
|
}
|
|
|
|
export default translate(connect(_mapStateToProps)(FormSectionHeader));
|