<commit_before>/**
 * Copyright 2015-present 650 Industries. All rights reserved.
 *
 * @providesModule MenuView
 */
'use strict';

import React, { PropTypes } from 'react';
import {
  Animated,
  Dimensions,
  Easing,
  Image,
  NativeModules,
  PixelRatio,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import ResponsiveImage from '@exponent/react-native-responsive-image';

import autobind from 'autobind-decorator';
import Browser from 'Browser';
import BrowserActions from 'BrowserActions';
import ExStore from 'ExStore';
import FriendlyUrls from 'FriendlyUrls';

let SCREEN_WIDTH = Dimensions.get('window').width;
let MENU_NARROW_SCREEN = (SCREEN_WIDTH < 375);

export default class MenuView extends React.Component {

  static propTypes = {
    task: PropTypes.object.isRequired,
    shouldFadeIn: PropTypes.bool,
    isNuxFinished: PropTypes.bool,
  };

  constructor(props, context) {
    super(props, context);

    this.state = {
      transitionIn: new Animated.Value(props.shouldFadeIn ? 0 : 1),
    };
  }

  componentDidMount() {
    if (this.props.shouldFadeIn) {
      Animated.timing(this.state.transitionIn, {
        easing: Easing.inOut(Easing.quad),
        toValue: 1,
        duration: 200,
      }).start();
    }
  }

  render() {
    let scale = this.state.transitionIn.interpolate({
      inputRange: [0, 1],
      outputRange: [1.1, 1],
    });

    return (
      <Animated.View style={styles.container}
        onStartShouldSetResponder={() => true}
        onResponderGrant={this._onPressContainer}>
        <Animated.View style={[styles.overlay, {opacity: this.state.transitionIn, transform: [{scale}]}]}>
          {this.props.isNuxFinished ? this._renderTaskInfoRow() : this._renderNUXRow()}
          <View style={styles.separator} />
          <View style={styles.buttonContainer}>
            {this._renderButton('Reload', Browser.refresh)}
            {this._renderButton('Go To Exponent Home', this._goToHome)}
          </View>
        </Animated.View>
      </Animated.View>
    );
  }

  _renderNUXRow() {
    let tooltipMessage;
    if (NativeModules.ExponentConstants.isDevice) {
      if (View.forceTouchAvailable) {
        tooltipMessage = 'Press harder (use 3D touch) anywhere on your screen to show this menu.';
      } else {
        tooltipMessage = 'Long press with two fingers anywhere on your screen to show this menu.';
      }
    } else {
      tooltipMessage = 'In iPhone Simulator, tap the Exponent button in the corner of the screen to show this menu. The button does not appear on physical devices.';
    }
    let headingStyles = (MENU_NARROW_SCREEN) ?
      [styles.nuxHeading, styles.nuxHeadingNarrow] :
      styles.nuxHeading;
    return (
      <View style={styles.nuxRow}>
        <View style={styles.nuxHeadingRow}>
          <ResponsiveImage
            sources={{
              2: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@2x.png' },
              3: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@3x.png' },
            }}
            style={styles.nuxLogo}
          />
          <Text style={headingStyles}>
            Welcome to Exponent!
          </Text>
        </View>
        <Text style={styles.nuxTooltip}>
          {tooltipMessage}
        </Text>
        <TouchableOpacity
          style={styles.nuxButton}
          onPress={this._onPressFinishNux}>
          <Text style={styles.nuxButtonLabel}>
            Got it
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _renderTaskInfoRow() {
    let { task } = this.props;
    let taskUrl;
    if (task.loadingError) {
      taskUrl = task.loadingError.originalUrl;
    } else {
      taskUrl = (task.manifestUrl) ? FriendlyUrls.toFriendlyString(task.manifestUrl) : '';
    }
    let iconUrl = task.manifest && task.manifest.get('iconUrl');
    let taskName = task.manifest && task.manifest.get('name');

    let icon = (iconUrl) ?
      <Image source={{uri: iconUrl}} style={styles.taskIcon} /> :
      <ResponsiveImage
        resizeMode="contain"
        sources={{
          2: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@2x.png' },
          3: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@3x.png' },
        }}
        style={styles.taskIcon}
      />
    let taskNameStyles = (taskName) ? styles.taskName : [styles.taskName, { color: '#c5c6c7' }];
    return (
      <View style={styles.taskMetaRow}>
        <View style={styles.taskIconColumn}>
          {icon}
        </View>
        <View style={styles.taskInfoColumn}>
          <Text style={taskNameStyles}>{(taskName) ? taskName : 'Untitled Experience'}</Text>
          <Text style={styles.taskUrl}>{taskUrl}</Text>
        </View>
      </View>
    );
  }

  _renderButton(text, onPress) {
    return (
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}>
        <Text style={styles.buttonText}>
          {text}
        </Text>
      </TouchableOpacity>
    );
  }

  @autobind
  _onPressFinishNux() {
    ExStore.dispatch(BrowserActions.setIsNuxFinishedAsync(true));
    ExStore.dispatch(BrowserActions.showMenuAsync(false));
  }

  @autobind
  _onPressContainer() {
    ExStore.dispatch(BrowserActions.showMenuAsync(false));<commit_msg>Do not allow negative space dismissal of the menu until the user has acknowledged the nux<commit_after>/**
 * Copyright 2015-present 650 Industries. All rights reserved.
 *
 * @providesModule MenuView
 */
'use strict';

import React, { PropTypes } from 'react';
import {
  Animated,
  Dimensions,
  Easing,
  Image,
  NativeModules,
  PixelRatio,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import ResponsiveImage from '@exponent/react-native-responsive-image';

import autobind from 'autobind-decorator';
import Browser from 'Browser';
import BrowserActions from 'BrowserActions';
import ExStore from 'ExStore';
import FriendlyUrls from 'FriendlyUrls';

let SCREEN_WIDTH = Dimensions.get('window').width;
let MENU_NARROW_SCREEN = (SCREEN_WIDTH < 375);

export default class MenuView extends React.Component {

  static propTypes = {
    task: PropTypes.object.isRequired,
    shouldFadeIn: PropTypes.bool,
    isNuxFinished: PropTypes.bool,
  };

  constructor(props, context) {
    super(props, context);

    this.state = {
      transitionIn: new Animated.Value(props.shouldFadeIn ? 0 : 1),
    };
  }

  componentDidMount() {
    if (this.props.shouldFadeIn) {
      Animated.timing(this.state.transitionIn, {
        easing: Easing.inOut(Easing.quad),
        toValue: 1,
        duration: 200,
      }).start();
    }
  }

  render() {
    let scale = this.state.transitionIn.interpolate({
      inputRange: [0, 1],
      outputRange: [1.1, 1],
    });

    return (
      <Animated.View style={styles.container}
        onStartShouldSetResponder={() => true}
        onResponderGrant={this._onPressContainer}>
        <Animated.View style={[styles.overlay, {opacity: this.state.transitionIn, transform: [{scale}]}]}>
          {this.props.isNuxFinished ? this._renderTaskInfoRow() : this._renderNUXRow()}
          <View style={styles.separator} />
          <View style={styles.buttonContainer}>
            {this._renderButton('Reload', Browser.refresh)}
            {this._renderButton('Go To Exponent Home', this._goToHome)}
          </View>
        </Animated.View>
      </Animated.View>
    );
  }

  _renderNUXRow() {
    let tooltipMessage;
    if (NativeModules.ExponentConstants.isDevice) {
      if (View.forceTouchAvailable) {
        tooltipMessage = 'Press harder (use 3D touch) anywhere on your screen to show this menu.';
      } else {
        tooltipMessage = 'Long press with two fingers anywhere on your screen to show this menu.';
      }
    } else {
      tooltipMessage = 'In iPhone Simulator, tap the Exponent button in the corner of the screen to show this menu. The button does not appear on physical devices.';
    }
    let headingStyles = (MENU_NARROW_SCREEN) ?
      [styles.nuxHeading, styles.nuxHeadingNarrow] :
      styles.nuxHeading;
    return (
      <View style={styles.nuxRow}>
        <View style={styles.nuxHeadingRow}>
          <ResponsiveImage
            sources={{
              2: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@2x.png' },
              3: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@3x.png' },
            }}
            style={styles.nuxLogo}
          />
          <Text style={headingStyles}>
            Welcome to Exponent!
          </Text>
        </View>
        <Text style={styles.nuxTooltip}>
          {tooltipMessage}
        </Text>
        <TouchableOpacity
          style={styles.nuxButton}
          onPress={this._onPressFinishNux}>
          <Text style={styles.nuxButtonLabel}>
            Got it
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _renderTaskInfoRow() {
    let { task } = this.props;
    let taskUrl;
    if (task.loadingError) {
      taskUrl = task.loadingError.originalUrl;
    } else {
      taskUrl = (task.manifestUrl) ? FriendlyUrls.toFriendlyString(task.manifestUrl) : '';
    }
    let iconUrl = task.manifest && task.manifest.get('iconUrl');
    let taskName = task.manifest && task.manifest.get('name');

    let icon = (iconUrl) ?
      <Image source={{uri: iconUrl}} style={styles.taskIcon} /> :
      <ResponsiveImage
        resizeMode="contain"
        sources={{
          2: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@2x.png' },
          3: { uri: 'https://s3.amazonaws.com/exp-us-standard/exponent-icon@3x.png' },
        }}
        style={styles.taskIcon}
      />
    let taskNameStyles = (taskName) ? styles.taskName : [styles.taskName, { color: '#c5c6c7' }];
    return (
      <View style={styles.taskMetaRow}>
        <View style={styles.taskIconColumn}>
          {icon}
        </View>
        <View style={styles.taskInfoColumn}>
          <Text style={taskNameStyles}>{(taskName) ? taskName : 'Untitled Experience'}</Text>
          <Text style={styles.taskUrl}>{taskUrl}</Text>
        </View>
      </View>
    );
  }

  _renderButton(text, onPress) {
    return (
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}>
        <Text style={styles.buttonText}>
          {text}
        </Text>
      </TouchableOpacity>
    );
  }

  @autobind
  _onPressFinishNux() {
    ExStore.dispatch(BrowserActions.setIsNuxFinishedAsync(true));
    ExStore.dispatch(BrowserActions.showMenuAsync(false));
  }

  @autobind
  _onPressContainer() {
    if (this.props.isNuxFinished) {
      ExStore.dispatch(BrowserActions.showMenuAsync(false));
    }
{'fraction_non_alphanumeric': 0.13032113517550412, 'fraction_numerical': 0.006908140403286034, 'mean_word_length': 2.619256756756757, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 77, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 8, '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': '2928166', 'n_tokens_mistral': 3410, 'n_tokens_neox': 3342, 'n_words': 658}