<commit_before>import { StateNavigator } from 'navigation';
import * as React from 'react';
import Motion from './Motion';
import Scene from './Scene';
import withStateNavigator from './withStateNavigator';

class NavigationMotion extends React.Component<any, any> {
    private sharedElements = {};
    context: {
        stateNavigator: StateNavigator
    }
    constructor(props, context) {
        super(props, context);
        this.onNavigate = this.onNavigate.bind(this);
        this.registerSharedElement = this.registerSharedElement.bind(this);
        this.unregisterSharedElement = this.unregisterSharedElement.bind(this);
        var scenes = {};
        var stateNavigator = this.getStateNavigator();
        var {state, data, crumbs} = stateNavigator.stateContext;
        if (state)
            scenes[crumbs.length] = <Scene stateNavigator={stateNavigator}>{state.renderScene(data)}</Scene>;
        this.state = {scenes, rest: false};
    }
    static defaultProps = {
        duration: 300,
    }
    static contextTypes = {
        stateNavigator: () => {}
    }
    static childContextTypes = {
        registerSharedElement: () => {},
        unregisterSharedElement: () => {}
    }
    getChildContext() {
        return {
            registerSharedElement: this.registerSharedElement,
            unregisterSharedElement: this.unregisterSharedElement
        };
    }
    private getStateNavigator(): StateNavigator {
        return this.props.stateNavigator || this.context.stateNavigator;
    }
    componentDidMount() {
        this.getStateNavigator().onNavigate(this.onNavigate);
    }
    componentWillUnmount() {
        this.getStateNavigator().offNavigate(this.onNavigate);
    }
    onNavigate(oldState, state, data) {
        this.setState(({scenes: prevScenes}) => {
            var scenes = {...prevScenes};
            var stateNavigator = this.getStateNavigator();
            var {crumbs} = stateNavigator.stateContext;
            scenes[crumbs.length] = <Scene stateNavigator={stateNavigator}>{state.renderScene(data)}</Scene>;
            return {scenes, rest: false};
        });
    }
    registerSharedElement(scene, name, ref, data) {
        this.sharedElements[scene] = this.sharedElements[scene] || {};
        this.sharedElements[scene][name] = {ref, data};
    }
    unregisterSharedElement(scene, name) {
        if (this.sharedElements[scene])
            delete this.sharedElements[scene][name];
    }
    getSharedElements(crumbs, oldUrl) {
        if (oldUrl === null || crumbs.length === oldUrl.split('crumb=').length - 1)
            return [];
        var oldSharedElements = this.sharedElements[oldUrl.split('crumb=').length - 1];
        var mountedSharedElements = this.sharedElements[crumbs.length];
        var sharedElements = [];
        for(var name in mountedSharedElements) {
            if (oldSharedElements && oldSharedElements[name]) {
                sharedElements.push({
                    name,
                    oldElement: oldSharedElements[name],
                    mountedElement: mountedSharedElements[name]
                })
            }
        }
        return sharedElements;
    }
    clearScene(index) {
        this.setState(({scenes: prevScenes, rest: prevRest}) => {
            var scenes = {...prevScenes};
            var scene = this.getScenes().filter(scene => scene.key === index)[0];
            if (!scene) {
                delete scenes[index];
                delete this.sharedElements[index];
            }
            var rest = prevRest || (scene && scene.mount);
            return {scenes, rest};
        });
    }
    getScenes(){
        var {crumbs, nextCrumb} = this.getStateNavigator().stateContext;
        return crumbs.concat(nextCrumb).map(({state, data, url}, index) => (
            {key: index, state, data, url, scene: this.state.scenes[index], mount: url === nextCrumb.url}
        ));
    }
    getStyle(mounted, mount, state, data) {
        var {unmountedStyle, mountedStyle, crumbStyle} = this.props;
        var styleProp = !mounted ? unmountedStyle : (mount ? mountedStyle : crumbStyle)
        return typeof styleProp === 'function' ? styleProp(state, data) : styleProp;
     }
    render() {
        var {children, duration, sharedElementMotion} = this.props;
        var {stateContext: {crumbs, oldUrl, oldState}, stateContext} = this.getStateNavigator();
        return (stateContext.state &&
            <Motion
                data={this.getScenes()}
                getKey={({key}) => key}
                enter={({mount, state, data}) => this.getStyle(!oldState, mount, state, data)}
                update={({mount, state, data}) => this.getStyle(true, mount, state, data)}
                leave={({state, data}) => this.getStyle(false, false, state, data)}
                duration={duration}
                onRest={({key}) => this.clearScene(key)}>
                {tweenStyles => (
                    tweenStyles.map(({key, data: {scene, state, data, url}, style: tweenStyle}) => (
                        (children as any)(tweenStyle, scene, key, crumbs.length === key, state, data)
                    )).concat(
                        sharedElementMotion && sharedElementMotion({
                            key: 'sharedElements',
                            sharedElements: !this.state.rest ? this.getSharedElements(crumbs, oldUrl) : [],
                            progress: tweenStyles[crumbs.length] && tweenStyles[crumbs.length].progress,
                            duration,
                        })
                    )
                )}
            </Motion>
        );
    }
}

export default withStateNavigator(NavigationMotion);<commit_msg>Passed crumbs, next state and data to styles<commit_after>import { StateNavigator } from 'navigation';
import * as React from 'react';
import Motion from './Motion';
import Scene from './Scene';
import withStateNavigator from './withStateNavigator';

class NavigationMotion extends React.Component<any, any> {
    private sharedElements = {};
    context: {
        stateNavigator: StateNavigator
    }
    constructor(props, context) {
        super(props, context);
        this.onNavigate = this.onNavigate.bind(this);
        this.registerSharedElement = this.registerSharedElement.bind(this);
        this.unregisterSharedElement = this.unregisterSharedElement.bind(this);
        var scenes = {};
        var stateNavigator = this.getStateNavigator();
        var {state, data, crumbs} = stateNavigator.stateContext;
        if (state)
            scenes[crumbs.length] = <Scene stateNavigator={stateNavigator}>{state.renderScene(data)}</Scene>;
        this.state = {scenes, rest: false};
    }
    static defaultProps = {
        duration: 300,
    }
    static contextTypes = {
        stateNavigator: () => {}
    }
    static childContextTypes = {
        registerSharedElement: () => {},
        unregisterSharedElement: () => {}
    }
    getChildContext() {
        return {
            registerSharedElement: this.registerSharedElement,
            unregisterSharedElement: this.unregisterSharedElement
        };
    }
    private getStateNavigator(): StateNavigator {
        return this.props.stateNavigator || this.context.stateNavigator;
    }
    componentDidMount() {
        this.getStateNavigator().onNavigate(this.onNavigate);
    }
    componentWillUnmount() {
        this.getStateNavigator().offNavigate(this.onNavigate);
    }
    onNavigate(oldState, state, data) {
        this.setState(({scenes: prevScenes}) => {
            var scenes = {...prevScenes};
            var stateNavigator = this.getStateNavigator();
            var {crumbs} = stateNavigator.stateContext;
            scenes[crumbs.length] = <Scene stateNavigator={stateNavigator}>{state.renderScene(data)}</Scene>;
            return {scenes, rest: false};
        });
    }
    registerSharedElement(scene, name, ref, data) {
        this.sharedElements[scene] = this.sharedElements[scene] || {};
        this.sharedElements[scene][name] = {ref, data};
    }
    unregisterSharedElement(scene, name) {
        if (this.sharedElements[scene])
            delete this.sharedElements[scene][name];
    }
    getSharedElements(crumbs, oldUrl) {
        if (oldUrl === null || crumbs.length === oldUrl.split('crumb=').length - 1)
            return [];
        var oldSharedElements = this.sharedElements[oldUrl.split('crumb=').length - 1];
        var mountedSharedElements = this.sharedElements[crumbs.length];
        var sharedElements = [];
        for(var name in mountedSharedElements) {
            if (oldSharedElements && oldSharedElements[name]) {
                sharedElements.push({
                    name,
                    oldElement: oldSharedElements[name],
                    mountedElement: mountedSharedElements[name]
                })
            }
        }
        return sharedElements;
    }
    clearScene(index) {
        this.setState(({scenes: prevScenes, rest: prevRest}) => {
            var scenes = {...prevScenes};
            var scene = this.getScenes().filter(scene => scene.key === index)[0];
            if (!scene) {
                delete scenes[index];
                delete this.sharedElements[index];
            }
            var rest = prevRest || (scene && scene.mount);
            return {scenes, rest};
        });
    }
    getScenes(){
        var {crumbs, nextCrumb} = this.getStateNavigator().stateContext;
        return crumbs.concat(nextCrumb).map(({state, data, url}, index, crumbsAndNext) => {
            var previousCrumbs = crumbsAndNext.slice(0, index - 1);
            var nextCrumb = crumbsAndNext[index + 1];
            return {key: index, state, data, url, crumbs: previousCrumbs, nextState: nextCrumb && nextCrumb.state,
                nextData: nextCrumb && nextCrumb.data, scene: this.state.scenes[index], mount: url === nextCrumb.url};
        });
    }
    getStyle(mounted, mount, {state, data, crumbs, nextState, nextData}) {
        var {unmountedStyle, mountedStyle, crumbStyle} = this.props;
        var styleProp = !mounted ? unmountedStyle : (mount ? mountedStyle : crumbStyle)
        return typeof styleProp === 'function' ? styleProp(state, data, crumbs, nextState, nextData) : styleProp;
     }
    render() {
        var {children, duration, sharedElementMotion} = this.props;
        var {stateContext: {crumbs, oldUrl, oldState}, stateContext} = this.getStateNavigator();
        return (stateContext.state &&
            <Motion
                data={this.getScenes()}
                getKey={({key}) => key}
                enter={scene => this.getStyle(!oldState, scene.mount, scene)}
                update={scene => this.getStyle(true, scene.mount, scene)}
                leave={scene => this.getStyle(false, false, scene)}
                duration={duration}
                onRest={({key}) => this.clearScene(key)}>
                {tweenStyles => (
                    tweenStyles.map(({key, data: {scene, state, data, url}, style: tweenStyle}) => (
                        (children as any)(tweenStyle, scene, key, crumbs.length === key, state, data)
                    )).concat(
                        sharedElementMotion && sharedElementMotion({
                            key: 'sharedElements',
                            sharedElements: !this.state.rest ? this.getSharedElements(crumbs, oldUrl) : [],
                            progress: tweenStyles[crumbs.length] && tweenStyles[crumbs.length].progress,
                            duration,
                        })
                    )
                )}
            </Motion>
        );
    }
}

export default withStateNavigator(NavigationMotion);
{'fraction_non_alphanumeric': 0.12427499147048789, 'fraction_numerical': 0.00127942681678608, 'mean_word_length': 2.2132090983831185, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '519977', 'n_tokens_mistral': 3168, 'n_tokens_neox': 3120, 'n_words': 629}