[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}
|
||||
*/
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue