Ability to disable individual control items.

[fendorio]

Hey Kyle,

See below for the issue we were talking about last week.

Sorry for the delayed response, I've been completely swamped with worth this past week (still am!).

I agree that the logic to render a control or not should ideally be outside of the render function. I have just run some tests with the shorthand method you gave as an example, turns out that returning null does effect the flex-box layout, unlike the first approach.

See my test code in the branch '2configurableControls' inside my fork, please forgive the branch names ha ha!!

I've taken both of our approaches in a third branch inside my fork, called... you guessed it '3configurableControls', in this branch I perform the conditional logic for the controls outside of the JSX, storing the result of each conditional in a local variable, which the return statement's JSX references.

See an example snippet below for what i've done in this latest branch

/**
 * Renders an empty control, used to disable a control without breaking the view layout.
 */
renderNullControl() {
    return this.renderControl(<View></View>);   
}

/**
 * Groups the top bar controls together in an animated
 * view and spaces them out.
 */
renderTopControls() {

    const backControl = !this.props.disableBack ? this.renderBack() : this.renderNullControl();
    const volumeControl = !this.props.disableVolume ? this.renderVolume() : this.renderNullControl();
    const fullscreenControl = !this.props.disableFullscreen ? this.renderFullscreen() : this.renderNullControl();

    return(
        <Animated.View style={[
            styles.controls.top,
            {
                opacity: this.animations.topControl.opacity,
                marginTop: this.animations.topControl.marginTop,
            }
        ]}>
            <Image
                source={ require( './assets/img/top-vignette.png' ) }
                style={[ styles.controls.column, styles.controls.vignette,
            ]}>
                <View style={ styles.controls.topControlGroup }>
                    { backControl }
                    <View style={ styles.controls.pullRight }>
                        { volumeControl }
                        { fullscreenControl }
                    </View>
                </View>
            </Image>
        </Animated.View>
    );
}

This keeps the separation of concerns between the render top/bottom methods and the render *individual control methods, it also does not break the view layout as there is still technically a control in each ones place, just an empty one if a control has been disabled.

Hope that makes sense. Sorry again about the delay in response. Fire away any questions, happy to discuss further if needed.

Lastly, I like the approach you're talking about at the top of your response. I'd be happy to pitch in on making that happen in the future.

[fendorio]

Had a chance to glance over this yet?

[kylemilloy]

No sorry....I have been completely slammed the last couple of weeks...project is wrapping up today though so I'll review sometime this week.

[kylemilloy]

Looks good. Thanks again. Sorry for the delay.....