react-navigation-shared-element/build/createSharedElementScene.js

react-native-shared-element bindings for React Navigation

import hoistNonReactStatics from "hoist-non-react-statics";
import * as React from "react";
import { View, StyleSheet } from "react-native";
import { nodeFromRef } from "react-native-shared-element";
import SharedElementSceneContext from "./SharedElementSceneContext";
import SharedElementSceneData from "./SharedElementSceneData";
import { getActiveRouteState } from "./utils";
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});
function createSharedElementScene(Component, rendererData, AnimationContext, navigatorId, verbose) {
    class SharedElementSceneView extends React.PureComponent {
        constructor() {
            super(...arguments);
            this.subscriptions = {};
            this.sceneData = new SharedElementSceneData(Component, this.props.navigation, navigatorId, rendererData.nestingDepth, verbose);
            this.onRenderAnimationContext = (value) => {
                this.sceneData.setAnimimationContextValue(value);
            };
            this.onSetRef = (ref) => {
                this.sceneData.setAncestor(nodeFromRef(ref));
            };
            this.onWillFocus = () => {
                const { navigation } = this.props;
                const activeRoute = getActiveRouteState(navigation.state);
                //console.log('onWillFocus: ', navigation.state, activeRoute);
                if (navigation.state.routeName === activeRoute.routeName) {
                    rendererData.updateSceneState(this.sceneData, navigation.state, "willFocus");
                }
            };
            this.onDidFocus = () => {
                const { navigation } = this.props;
                const activeRoute = getActiveRouteState(navigation.state);
                if (navigation.state.routeName === activeRoute.routeName) {
                    // console.log('onDidFocus: ', this.sceneData.name, navigation);
                    rendererData.updateSceneState(this.sceneData, navigation.state, "didFocus");
                }
            };
            this.onWillBlur = () => {
                const { navigation } = this.props;
                const activeRoute = getActiveRouteState(navigation.state);
                //console.log('onWillBlur: ', navigation.state, activeRoute);
                if (navigation.state.routeName === activeRoute.routeName) {
                    rendererData.updateSceneState(this.sceneData, navigation.state, "willBlur");
                }
            };
        }
        componentDidMount() {
            const { navigation } = this.props;
            this.subscriptions = {
                willFocus: navigation.addListener("willFocus", this.onWillFocus),
                didFocus: navigation.addListener("didFocus", this.onDidFocus),
                willBlur: navigation.addListener("willBlur", this.onWillBlur)
            };
        }
        componentWillUnmount() {
            Object.values(this.subscriptions).forEach(subscription => subscription.remove());
        }
        render() {
            // console.log('SharedElementSceneView.render');
            return (<SharedElementSceneContext.Provider value={this.sceneData}>
          <View style={styles.container} collapsable={false} ref={this.onSetRef}>
            <AnimationContext.Consumer>
              {this.onRenderAnimationContext}
            </AnimationContext.Consumer>
            <Component {...this.props}/>
          </View>
        </SharedElementSceneContext.Provider>);
        }
        componentDidUpdate() {
            this.sceneData.navigation = this.props.navigation;
        }
    }
    hoistNonReactStatics(SharedElementSceneView, Component);
    return SharedElementSceneView;
}
export default createSharedElementScene;
//# sourceMappingURL=createSharedElementScene.js.map