[RN] Simplify hiding Container components

This commit is contained in:
Lyubo Marinov 2017-07-25 13:57:15 -05:00
parent d3c408ae2e
commit 6c488cc613
1 changed files with 20 additions and 27 deletions

View File

@ -29,42 +29,35 @@ export default class Container extends AbstractContainer {
* @returns {ReactElement}
*/
render() {
// eslint-disable-next-line prefer-const
let { onClick, style, touchFeedback, visible, ...props } = this.props;
// onClick & touchFeedback
(typeof touchFeedback === 'undefined') && (touchFeedback = onClick);
const {
onClick,
touchFeedback = onClick,
visible = true,
...props
} = this.props;
// visible
// The following property is responsible to hide/show this Container by
// setting its size to 0. This will make the component not visible, but
// it won't be destroyed, all its state is preserved. This is
// intentional.
// TODO: replace with display: 'none', supported in RN >= 0.43.
const hidden = visible === false; // true / undefined
if (hidden) {
style = {
...style,
if (!visible) {
// Intentionally hide this Container without destroying it.
// TODO Replace with display: 'none' supported in RN >= 0.43.
props.style = {
...props.style,
height: 0,
width: 0
};
}
// eslint-disable-next-line object-property-newline
let component = super._render(View, { ...props, style });
let element = super._render(View, props);
if (!hidden && (touchFeedback || onClick)) {
const parentType
= touchFeedback ? TouchableHighlight : TouchableWithoutFeedback;
const parentProps = {};
onClick && (parentProps.onPress = onClick);
component = React.createElement(parentType, parentProps, component);
// onClick & touchFeedback
if (visible && (onClick || touchFeedback)) {
element = React.createElement(
touchFeedback ? TouchableHighlight : TouchableWithoutFeedback,
{ onPress: onClick },
element
);
}
return component;
return element;
}
}