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