[RN] Simplify hiding Container components
This commit is contained in:
parent
d3c408ae2e
commit
6c488cc613
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue